stash

.yarnrc.yml

@@ -40,3 +40,23 @@ packageExtensions:
   'react-select@^5.0.0':
     dependencies:
       '@emotion/serialize': '^1.0.2'
+  '@chakra-ui/button@^1.4.3':
+    dependencies:
+      '@chakra-ui/react-utils': '^1.1.2'
+  '@chakra-ui/switch@^1.2.10':
+    peerDependencies:
+      'framer-motion': '3.x || 4.x'
+  '@chakra-ui/media-query@^1.1.2':
+    peerDependencies:
+      '@emotion/react': '^11.0.0'
+      '@emotion/styled': '^11.0.0'
+  '@chakra-ui/skeleton@^1.1.18':
+    peerDependencies:
+      '@emotion/react': '^11.0.0'
+      '@emotion/styled': '^11.0.0'
+  '@chakra-ui/accordion@^1.3.6':
+    peerDependencies:
+      'framer-motion': '3.x || 4.x'
+  '@mswjs/data@^0.3.0':
+    dependencies:
+      'debug': '^4.3.2'

packages/redux-devtools-rtk-query-monitor/.babelrc

@@ -3,5 +3,6 @@
     "@babel/preset-env",
     "@babel/preset-react",
     "@babel/preset-typescript"
-  ]
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

packages/redux-devtools-rtk-query-monitor/.eslintignore

@@ -1,2 +1,2 @@
+demo
 lib
-demo/

packages/redux-devtools-rtk-query-monitor/demo/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/redux-devtools-rtk-query-monitor/demo/.eslintignore

@@ -0,0 +1 @@
+dist

packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js

@@ -1,3 +1,17 @@
 module.exports = {
-  extends: ['react-app'],
+  extends: '../../../eslintrc.ts.react.base.json',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  overrides: [
+    {
+      files: ['webpack.config.ts'],
+      extends: '../../../eslintrc.ts.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.webpack.json'],
+      },
+    },
+  ],
 };

packages/redux-devtools-rtk-query-monitor/demo/.gitignore

@@ -1,4 +0,0 @@
-.snowpack
-build
-node_modules
-.yarn/*

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -22,6 +22,7 @@
     "msw": "^0.28.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-icons": "^4.2.0",
     "react-redux": "^7.2.5",
     "react-router-dom": "^5.3.0"
   },
@@ -54,5 +55,8 @@
     "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.2.1"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

packages/redux-devtools-rtk-query-monitor/demo/public/mockServiceWorker.js

@@ -1,13 +1,14 @@
+/* eslint-disable */
+/* tslint:disable */
+
 /**
- * Mock Service Worker.
+ * Mock Service Worker (0.35.0).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
-/* eslint-disable */
-/* tslint:disable */
 
-const INTEGRITY_CHECKSUM = '82ef9b96d8393b6da34527d1d6e19187'
+const INTEGRITY_CHECKSUM = 'f0a916b13c8acc2b526a03a6d26df85f'
 const bypassHeaderName = 'x-msw-bypass'
 const activeClientIds = new Set()
 
@@ -220,13 +221,11 @@ async function getResponse(event, client, requestId) {
 
       console.error(
         `\
-[MSW] Request handler function for "%s %s" has thrown the following exception:
+[MSW] Uncaught exception in the request handler for "%s %s":
 
-${parsedBody.errorType}: ${parsedBody.message}
-(see more detailed error stack trace in the mocked response body)
+${parsedBody.location}
 
-This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error.
-If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
+This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
 `,
         request.method,
         request.url,
@@ -241,6 +240,12 @@ If you wish to mock an error response, please refer to this guide: https://mswjs
 
 self.addEventListener('fetch', function (event) {
   const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {
@@ -264,11 +269,22 @@ self.addEventListener('fetch', function (event) {
 
   return event.respondWith(
     handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
       console.error(
-        '[MSW] Failed to mock a "%s" request to "%s": %s',
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
         request.method,
         request.url,
-        error,
+        `${error.name}: ${error.message}`,
       )
     }),
   )

packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx

@@ -1,10 +1,10 @@
-import PokemonView from 'features/pokemon/PokemonView';
-import PostsView from 'features/posts/PostsView';
+import PokemonView from './features/pokemon/PokemonView';
+import PostsView from './features/posts/PostsView';
 import { Box, Flex, Heading } from '@chakra-ui/react';
 import { Link, UnorderedList, ListItem } from '@chakra-ui/react';
 import { Code } from '@chakra-ui/react';
 import * as React from 'react';
-import { DevToolsSelector } from 'features/DevTools/DevToolsSelector';
+import { DevToolsSelector } from './features/DevTools/DevToolsSelector';
 
 export function App() {
   return (

packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createDevTools } from '@redux-devtools/core';
 import DockMonitor from '@redux-devtools/dock-monitor';
-import RtkQueryMonitor from '../../../../src';
+import RtkQueryMonitor from '@redux-devtools/rtk-query-monitor';
 
 const largeScreenQuery = window.matchMedia('(min-width: 1024px)');
 

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx

@@ -4,7 +4,7 @@ import {
   useDeletePostMutation,
   useGetPostQuery,
   useUpdatePostMutation,
-} from 'services/posts';
+} from '../../services/posts';
 import {
   Box,
   Button,

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx

@@ -20,7 +20,11 @@ import {
 import { Route, Switch, useHistory } from 'react-router-dom';
 import { MdBook } from 'react-icons/md';
 import React, { useState } from 'react';
-import { Post, useAddPostMutation, useGetPostsQuery } from 'services/posts';
+import {
+  Post,
+  useAddPostMutation,
+  useGetPostsQuery,
+} from '../../services/posts';
 import { PostDetail } from './PostDetail';
 
 const AddPost = () => {

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Switch, Route } from 'react-router-dom';
-import { PostsManager } from 'features/posts/PostsManager';
+import { PostsManager } from '../../features/posts/PostsManager';
 import { Box, Heading } from '@chakra-ui/react';
 
 function PostsView() {

packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx

@@ -6,7 +6,7 @@ import './index.css';
 import { store } from './store';
 import DevTools from './features/DevTools/DevTools';
 import { BrowserRouter } from 'react-router-dom';
-import { App } from 'App';
+import { App } from './App';
 import { worker } from './mocks/browser';
 
 function renderApp() {

packages/redux-devtools-rtk-query-monitor/demo/src/store.ts

@@ -5,9 +5,9 @@ import {
   EnhancedStore,
 } from '@reduxjs/toolkit';
 import { pokemonApi } from './services/pokemon';
-import { postsApi } from 'services/posts';
+import { postsApi } from './services/posts';
 import DevTools from './features/DevTools/DevTools';
-import { isExtensionEnabled } from 'features/DevTools/helpers';
+import { isExtensionEnabled } from './features/DevTools/helpers';
 
 const devTools = isExtensionEnabled();
 

packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "extends": "../../../tsconfig.react.base.json",
   "compilerOptions": {
-    "resolveJsonModule": true,
-    "baseUrl": "./src",
-    "target": "esNext",
-    "module": "es6",
-    "moduleResolution": "node"
+    "resolveJsonModule": true
   },
   "include": ["../src", "src"]
 }

packages/redux-devtools-rtk-query-monitor/demo/webpack.config.ts

@@ -1,83 +1,59 @@
 import * as path from 'path';
-import * as webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
-import * as pkg from '../../package.json';
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-const demoSrc = path.join(__dirname, '../src');
-const libSrc = path.join(__dirname, '../../src');
+import pkg from '@redux-devtools/rtk-query-monitor/package.json';
 
 module.exports = {
-  mode: process.env.NODE_ENV || 'development',
-  entry: isProduction
-    ? ['./demo/src/index']
-    : [
-        'webpack-dev-server/client?http://localhost:3000',
-        'webpack/hot/only-dev-server',
-        './demo/src/index',
+  mode: 'development',
+  entry: './src/index.tsx',
+  devtool: 'eval-source-map',
+  devServer: {
+    static: './dist',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      package: pkg,
+    }),
+    new ForkTsCheckerWebpackPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'public',
+          to: 'dist',
+        },
       ],
+    }),
+  ],
   output: {
-    path: path.join(__dirname, '../dist'),
-    filename: isProduction ? '[name].[contenthash:8].js' : 'js/bundle.js',
+    filename: 'bundle.js',
+    path: path.join(__dirname, 'dist'),
+    clean: true,
   },
   module: {
     rules: [
       {
         test: /\.(js|ts)x?$/,
-        loader: 'babel-loader',
         exclude: /node_modules/,
-        include: [demoSrc, libSrc],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', { targets: 'defaults' }],
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
       },
       {
-        test: /\.css?$/,
+        test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
-        include: demoSrc,
       },
     ],
   },
   resolve: {
-    modules: ['node_modules', demoSrc],
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
-  optimization: {
-    minimize: isProduction,
-  },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: 'demo/public/index.html',
-      package: pkg,
-    }),
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: 'demo/public/assets/*.js',
-          to: ({ absoluteFilename }) => {
-            return `./${path.basename(absoluteFilename)}`;
-          },
-          globOptions: {
-            ignore: ['*.DS_Store'],
-          },
-        },
-      ],
-    }),
-    new ForkTsCheckerWebpackPlugin({
-      typescript: {
-        configFile: 'demo/tsconfig.json',
-      },
-    }),
-  ].concat(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()]),
-  devServer: isProduction
-    ? {}
-    : {
-        port: 3000,
-        hot: true,
-        historyApiFallback: true,
-      },
-  devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
 };

packages/redux-devtools-rtk-query-monitor/package.json

@@ -40,6 +40,7 @@
     "prepublish": "yarn run type-check && yarn run lint"
   },
   "dependencies": {
+    "@babel/runtime": "^7.15.4",
     "@redux-devtools/ui": "^1.0.0-9",
     "@types/prop-types": "^15.7.4",
     "@types/redux-devtools-themes": "^1.0.0",
@@ -56,6 +57,7 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
@@ -78,8 +80,5 @@
     "@types/react": "^16.3.0 || ^17.0.0",
     "react": "^16.3.0 || ^17.0.0",
     "redux": "^3.4.0 || ^4.0.0"
-  },
-  "msw": {
-    "workerDirectory": "demo/public"
   }
 }

packages/redux-devtools-rtk-query-monitor/tsconfig.dev.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.react.base.json",
-  "compilerOptions": {
-    "outDir": "./demo/src/build",
-    "module": "ES2015",
-    "strict": false
-  },
-  "include": ["src"]
-}

yarn.lock

@@ -4947,9 +4947,11 @@ __metadata:
   dependencies:
     "@babel/cli": ^7.15.7
     "@babel/core": ^7.15.5
+    "@babel/plugin-transform-runtime": ^7.15.0
     "@babel/preset-env": ^7.15.6
     "@babel/preset-react": ^7.14.5
     "@babel/preset-typescript": ^7.15.0
+    "@babel/runtime": ^7.15.4
     "@redux-devtools/core": ^3.9.0
     "@redux-devtools/ui": ^1.0.0-9
     "@reduxjs/toolkit": ^1.6.1
@@ -12462,7 +12464,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.0, debug@npm:^4.3.1":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.0, debug@npm:^4.3.1, debug@npm:^4.3.2":
   version: 4.3.2
   resolution: "debug@npm:4.3.2"
   dependencies:
@@ -26084,6 +26086,7 @@ resolve@^2.0.0-next.3:
     msw: ^0.28.2
     react: ^16.14.0
     react-dom: ^16.14.0
+    react-icons: ^4.2.0
     react-redux: ^7.2.5
     react-router-dom: ^5.3.0
     style-loader: ^3.2.1