From db39dfd5341b9c151e3348e87912bef25bba745c Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sat, 25 Sep 2021 02:27:52 -0400 Subject: [PATCH] stash --- .yarnrc.yml | 20 ++++ .../redux-devtools-rtk-query-monitor/.babelrc | 3 +- .../.eslintignore | 2 +- .../demo/.babelrc | 8 -- .../demo/.eslintignore | 1 + .../demo/.eslintrc.js | 16 +++- .../demo/.gitignore | 4 - .../demo/{public => }/index.html | 0 .../demo/package.json | 4 + .../public/{assets => }/mockServiceWorker.js | 38 +++++--- .../demo/src/App.tsx | 6 +- .../demo/src/features/DevTools/DevTools.tsx | 2 +- .../demo/src/features/posts/PostDetail.tsx | 2 +- .../demo/src/features/posts/PostsManager.tsx | 6 +- .../demo/src/features/posts/PostsView.tsx | 2 +- .../demo/src/index.tsx | 2 +- .../demo/src/store.ts | 4 +- .../demo/tsconfig.json | 6 +- .../demo/webpack.config.ts | 94 +++++++------------ .../package.json | 5 +- .../tsconfig.dev.json | 9 -- yarn.lock | 5 +- 22 files changed, 126 insertions(+), 113 deletions(-) delete mode 100644 packages/redux-devtools-rtk-query-monitor/demo/.babelrc create mode 100644 packages/redux-devtools-rtk-query-monitor/demo/.eslintignore delete mode 100644 packages/redux-devtools-rtk-query-monitor/demo/.gitignore rename packages/redux-devtools-rtk-query-monitor/demo/{public => }/index.html (100%) rename packages/redux-devtools-rtk-query-monitor/demo/public/{assets => }/mockServiceWorker.js (88%) delete mode 100644 packages/redux-devtools-rtk-query-monitor/tsconfig.dev.json diff --git a/.yarnrc.yml b/.yarnrc.yml index 7c69a35b..b543510f 100644 --- a/.yarnrc.yml +++ b/.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' diff --git a/packages/redux-devtools-rtk-query-monitor/.babelrc b/packages/redux-devtools-rtk-query-monitor/.babelrc index 202d425a..d6bf93bd 100644 --- a/packages/redux-devtools-rtk-query-monitor/.babelrc +++ b/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"] } diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintignore b/packages/redux-devtools-rtk-query-monitor/.eslintignore index 9c072ed1..d3c23dcb 100644 --- a/packages/redux-devtools-rtk-query-monitor/.eslintignore +++ b/packages/redux-devtools-rtk-query-monitor/.eslintignore @@ -1,2 +1,2 @@ +demo lib -demo/ \ No newline at end of file diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.babelrc b/packages/redux-devtools-rtk-query-monitor/demo/.babelrc deleted file mode 100644 index d6bf93bd..00000000 --- a/packages/redux-devtools-rtk-query-monitor/demo/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["@babel/plugin-transform-runtime"] -} diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.eslintignore b/packages/redux-devtools-rtk-query-monitor/demo/.eslintignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/demo/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js index 846c0db8..a9cf623b 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js +++ b/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'], + }, + }, + ], }; diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.gitignore b/packages/redux-devtools-rtk-query-monitor/demo/.gitignore deleted file mode 100644 index 1033f53c..00000000 --- a/packages/redux-devtools-rtk-query-monitor/demo/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -.snowpack -build -node_modules -.yarn/* \ No newline at end of file diff --git a/packages/redux-devtools-rtk-query-monitor/demo/public/index.html b/packages/redux-devtools-rtk-query-monitor/demo/index.html similarity index 100% rename from packages/redux-devtools-rtk-query-monitor/demo/public/index.html rename to packages/redux-devtools-rtk-query-monitor/demo/index.html diff --git a/packages/redux-devtools-rtk-query-monitor/demo/package.json b/packages/redux-devtools-rtk-query-monitor/demo/package.json index f5a68389..1d1060fa 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/package.json +++ b/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" } } diff --git a/packages/redux-devtools-rtk-query-monitor/demo/public/assets/mockServiceWorker.js b/packages/redux-devtools-rtk-query-monitor/demo/public/mockServiceWorker.js similarity index 88% rename from packages/redux-devtools-rtk-query-monitor/demo/public/assets/mockServiceWorker.js rename to packages/redux-devtools-rtk-query-monitor/demo/public/mockServiceWorker.js index 51e26799..86167669 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/public/assets/mockServiceWorker.js +++ b/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}`, ) }), ) diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx index 9a468add..808cc9b2 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx +++ b/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 ( diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx index 09941c03..6c1e48f9 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevTools.tsx +++ b/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)'); diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx index aef3726a..f3b0fd58 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx +++ b/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, diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx index 783b1f01..b88eeb15 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx +++ b/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 = () => { diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx index 0d12ae61..5ce73161 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx +++ b/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() { diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx index 9da4712c..9a1655dd 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/index.tsx +++ b/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() { diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts b/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts index 095ec95e..22519bb5 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/src/store.ts +++ b/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(); diff --git a/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json b/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json index 222aceee..420884ce 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json +++ b/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"] } diff --git a/packages/redux-devtools-rtk-query-monitor/demo/webpack.config.ts b/packages/redux-devtools-rtk-query-monitor/demo/webpack.config.ts index 31451b15..231224ac 100644 --- a/packages/redux-devtools-rtk-query-monitor/demo/webpack.config.ts +++ b/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', }; diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json index b6c8c632..e76faee7 100644 --- a/packages/redux-devtools-rtk-query-monitor/package.json +++ b/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" } } diff --git a/packages/redux-devtools-rtk-query-monitor/tsconfig.dev.json b/packages/redux-devtools-rtk-query-monitor/tsconfig.dev.json deleted file mode 100644 index 5e412b75..00000000 --- a/packages/redux-devtools-rtk-query-monitor/tsconfig.dev.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "../../tsconfig.react.base.json", - "compilerOptions": { - "outDir": "./demo/src/build", - "module": "ES2015", - "strict": false - }, - "include": ["src"] -} diff --git a/yarn.lock b/yarn.lock index 79c766d7..27c1cc28 100644 --- a/yarn.lock +++ b/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