From 3c5aee4da3541ca293c140089c9c232054611efb Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Fri, 24 Sep 2021 23:39:14 -0400 Subject: [PATCH] chore(inspector): fix example build --- package.json | 1 + .../.eslintignore | 1 + .../demo/.eslintignore | 1 + .../demo/.eslintrc.js | 17 +++++ .../demo/config/webpack.config.ts | 60 --------------- .../demo/{src => }/index.html | 0 .../demo/package.json | 59 +++++++++++++++ .../demo/src/{js => }/DemoApp.tsx | 4 +- .../demo/src/{js => }/DevTools.tsx | 4 +- .../demo/src/{js => }/getOptions.ts | 0 .../demo/src/{js => }/index.tsx | 0 .../demo/src/{js => }/reducers.ts | 7 +- .../tsconfig.json => tsconfig.webpack.json} | 2 +- .../demo/webpack.config.ts | 46 ++++++++++++ .../package.json | 29 +------ yarn.lock | 75 ++++++++++++------- 16 files changed, 186 insertions(+), 120 deletions(-) create mode 100644 packages/redux-devtools-inspector-monitor/demo/.eslintignore create mode 100644 packages/redux-devtools-inspector-monitor/demo/.eslintrc.js delete mode 100644 packages/redux-devtools-inspector-monitor/demo/config/webpack.config.ts rename packages/redux-devtools-inspector-monitor/demo/{src => }/index.html (100%) create mode 100644 packages/redux-devtools-inspector-monitor/demo/package.json rename packages/redux-devtools-inspector-monitor/demo/src/{js => }/DemoApp.tsx (99%) rename packages/redux-devtools-inspector-monitor/demo/src/{js => }/DevTools.tsx (91%) rename packages/redux-devtools-inspector-monitor/demo/src/{js => }/getOptions.ts (100%) rename packages/redux-devtools-inspector-monitor/demo/src/{js => }/index.tsx (100%) rename packages/redux-devtools-inspector-monitor/demo/src/{js => }/reducers.ts (98%) rename packages/redux-devtools-inspector-monitor/demo/{config/tsconfig.json => tsconfig.webpack.json} (67%) create mode 100644 packages/redux-devtools-inspector-monitor/demo/webpack.config.ts diff --git a/package.json b/package.json index 3162d46d..31fd3e55 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "packages/react-json-tree/examples", "packages/redux-devtools/examples/counter", "packages/redux-devtools/examples/todomvc", + "packages/redux-devtools-inspector-monitor/demo", "packages/redux-devtools-slider-monitor/examples/todomvc" ], "resolutions": { diff --git a/packages/redux-devtools-inspector-monitor/.eslintignore b/packages/redux-devtools-inspector-monitor/.eslintignore index a65b4177..d3c23dcb 100644 --- a/packages/redux-devtools-inspector-monitor/.eslintignore +++ b/packages/redux-devtools-inspector-monitor/.eslintignore @@ -1 +1,2 @@ +demo lib diff --git a/packages/redux-devtools-inspector-monitor/demo/.eslintignore b/packages/redux-devtools-inspector-monitor/demo/.eslintignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/demo/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/packages/redux-devtools-inspector-monitor/demo/.eslintrc.js b/packages/redux-devtools-inspector-monitor/demo/.eslintrc.js new file mode 100644 index 00000000..a9cf623b --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/demo/.eslintrc.js @@ -0,0 +1,17 @@ +module.exports = { + 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-inspector-monitor/demo/config/webpack.config.ts b/packages/redux-devtools-inspector-monitor/demo/config/webpack.config.ts deleted file mode 100644 index dc05ad70..00000000 --- a/packages/redux-devtools-inspector-monitor/demo/config/webpack.config.ts +++ /dev/null @@ -1,60 +0,0 @@ -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 pkg from '../../package.json'; - -const isProduction = process.env.NODE_ENV === 'production'; - -module.exports = { - mode: process.env.NODE_ENV || 'development', - entry: isProduction - ? ['./demo/src/js/index'] - : [ - 'webpack-dev-server/client?http://localhost:3000', - 'webpack/hot/only-dev-server', - './demo/src/js/index', - ], - output: { - path: path.join(__dirname, 'demo/dist'), - filename: 'js/bundle.js', - }, - module: { - rules: [ - { - test: /\.(js|ts)x?$/, - loader: 'babel-loader', - include: [ - path.join(__dirname, '../../src'), - path.join(__dirname, '../src/js'), - ], - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], - }, - plugins: [ - new CleanWebpackPlugin(), - new HtmlWebpackPlugin({ - inject: true, - template: 'demo/src/index.html', - package: pkg, - }), - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: 'demo/tsconfig.json', - }, - }), - ...(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()]), - ], - devServer: isProduction - ? {} - : { - port: 3000, - hot: true, - historyApiFallback: true, - }, - devtool: 'eval-source-map', -}; diff --git a/packages/redux-devtools-inspector-monitor/demo/src/index.html b/packages/redux-devtools-inspector-monitor/demo/index.html similarity index 100% rename from packages/redux-devtools-inspector-monitor/demo/src/index.html rename to packages/redux-devtools-inspector-monitor/demo/index.html diff --git a/packages/redux-devtools-inspector-monitor/demo/package.json b/packages/redux-devtools-inspector-monitor/demo/package.json new file mode 100644 index 00000000..1eccbb06 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/demo/package.json @@ -0,0 +1,59 @@ +{ + "private": true, + "name": "inspector-demo", + "version": "0.1.0", + "license": "MIT", + "scripts": { + "start": "webpack serve --open", + "build": "webpack", + "lint": "eslint . --ext .ts,.tsx", + "type-check": "tsc --noEmit" + }, + "dependencies": { + "@redux-devtools/core": "^3.9.0", + "@redux-devtools/dock-monitor": "^1.4.0", + "base16": "^1.0.0", + "connected-react-router": "^6.9.1", + "history": "^4.10.1", + "immutable": "^4.0.0-rc.15", + "lodash.shuffle": "^4.2.0", + "react": "^16.14.0", + "react-bootstrap": "^1.6.3", + "react-dom": "^16.14.0", + "react-redux": "^7.2.5", + "react-router": "^5.2.1", + "redux": "^4.1.1", + "redux-logger": "^3.0.6", + "seamless-immutable": "^7.1.4", + "ts-node": "^10.2.1", + "webpack": "^5.53.0", + "webpack-cli": "^4.8.0", + "webpack-dev-server": "^4.2.1" + }, + "devDependencies": { + "@babel/core": "^7.15.5", + "@babel/preset-env": "^7.15.6", + "@babel/preset-react": "^7.14.5", + "@babel/preset-typescript": "^7.15.0", + "@types/base16": "^1.0.2", + "@types/history": "^4.7.9", + "@types/lodash.shuffle": "^4.2.6", + "@types/node": "^14.17.17", + "@types/react": "^16.14.15", + "@types/react-dom": "^16.9.14", + "@types/react-redux": "^7.1.18", + "@types/react-router": "^5.1.16", + "@types/redux-logger": "^3.0.9", + "@types/webpack": "^5.28.0", + "@types/webpack-dev-server": "^4.1.0", + "@typescript-eslint/eslint-plugin": "^4.31.2", + "@typescript-eslint/parser": "^4.31.2", + "babel-loader": "^8.2.2", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-react": "^7.25.3", + "fork-ts-checker-webpack-plugin": "^6.3.3", + "html-webpack-plugin": "^5.3.2", + "typescript": "~4.3.5" + } +} diff --git a/packages/redux-devtools-inspector-monitor/demo/src/js/DemoApp.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx similarity index 99% rename from packages/redux-devtools-inspector-monitor/demo/src/js/DemoApp.tsx rename to packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx index 83903219..d5fa316d 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/js/DemoApp.tsx +++ b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties } from 'react'; import { connect } from 'react-redux'; -import pkg from '../../../package.json'; +import pkg from '../../package.json'; import Button from 'react-bootstrap/Button'; import FormGroup from 'react-bootstrap/FormGroup'; import FormControl from 'react-bootstrap/FormControl'; @@ -12,7 +12,7 @@ import Row from 'react-bootstrap/Row'; import * as base16 from 'base16'; import { push as pushRoute } from 'connected-react-router'; import { Path } from 'history'; -import * as inspectorThemes from '../../../src/themes'; +import * as inspectorThemes from '../../lib/themes'; import getOptions, { Options } from './getOptions'; import { AddFunctionAction, diff --git a/packages/redux-devtools-inspector-monitor/demo/src/js/DevTools.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx similarity index 91% rename from packages/redux-devtools-inspector-monitor/demo/src/js/DevTools.tsx rename to packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx index 2d5b7c84..15603069 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/js/DevTools.tsx +++ b/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx @@ -3,9 +3,9 @@ import { connect } from 'react-redux'; import { createDevTools } from '@redux-devtools/core'; import DockMonitor from '@redux-devtools/dock-monitor'; import { Location } from 'history'; -import DevtoolsInspector from '../../../src/DevtoolsInspector'; +import DevtoolsInspector from '../../lib/DevtoolsInspector'; import getOptions from './getOptions'; -import { base16Themes } from '../../../src/utils/createStylingFromTheme'; +import { base16Themes } from '../../lib/utils/createStylingFromTheme'; import { DemoAppState } from './reducers'; const CustomComponent = () => ( diff --git a/packages/redux-devtools-inspector-monitor/demo/src/js/getOptions.ts b/packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts similarity index 100% rename from packages/redux-devtools-inspector-monitor/demo/src/js/getOptions.ts rename to packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts diff --git a/packages/redux-devtools-inspector-monitor/demo/src/js/index.tsx b/packages/redux-devtools-inspector-monitor/demo/src/index.tsx similarity index 100% rename from packages/redux-devtools-inspector-monitor/demo/src/js/index.tsx rename to packages/redux-devtools-inspector-monitor/demo/src/index.tsx diff --git a/packages/redux-devtools-inspector-monitor/demo/src/js/reducers.ts b/packages/redux-devtools-inspector-monitor/demo/src/reducers.ts similarity index 98% rename from packages/redux-devtools-inspector-monitor/demo/src/js/reducers.ts rename to packages/redux-devtools-inspector-monitor/demo/src/reducers.ts index 3fdbe4fc..a90e4646 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/js/reducers.ts +++ b/packages/redux-devtools-inspector-monitor/demo/src/reducers.ts @@ -24,7 +24,10 @@ const NESTED = { }, }; -const IMMUTABLE_NESTED = Immutable.fromJS(NESTED); +const IMMUTABLE_NESTED = Immutable.fromJS(NESTED) as Immutable.Map< + unknown, + unknown +>; const IMMUTABLE_MAP = Immutable.Map({ map: Immutable.Map({ a: 1, b: 2, c: 3 }), @@ -248,7 +251,7 @@ const createRootReducer = ( action.type === 'CHANGE_IMMUTABLE_NESTED' ? state.updateIn( ['long', 'nested', 0, 'path', 'to', 'a'], - (str: string) => str + '!' + (str: unknown) => (str as string) + '!' ) : state, addFunction: (state = null, action) => diff --git a/packages/redux-devtools-inspector-monitor/demo/config/tsconfig.json b/packages/redux-devtools-inspector-monitor/demo/tsconfig.webpack.json similarity index 67% rename from packages/redux-devtools-inspector-monitor/demo/config/tsconfig.json rename to packages/redux-devtools-inspector-monitor/demo/tsconfig.webpack.json index 7fd5a7b8..9c463920 100644 --- a/packages/redux-devtools-inspector-monitor/demo/config/tsconfig.json +++ b/packages/redux-devtools-inspector-monitor/demo/tsconfig.webpack.json @@ -1,5 +1,5 @@ { - "extends": "../../../../tsconfig.base.json", + "extends": "../../../tsconfig.base.json", "compilerOptions": { "resolveJsonModule": true }, diff --git a/packages/redux-devtools-inspector-monitor/demo/webpack.config.ts b/packages/redux-devtools-inspector-monitor/demo/webpack.config.ts new file mode 100644 index 00000000..005abb64 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/demo/webpack.config.ts @@ -0,0 +1,46 @@ +import * as path from 'path'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import pkg from '../package.json'; + +module.exports = { + mode: 'development', + entry: './src/index.tsx', + devtool: 'eval-source-map', + devServer: { + static: './dist', + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './index.html', + package: pkg, + }), + new ForkTsCheckerWebpackPlugin(), + ], + output: { + filename: 'bundle.js', + path: path.join(__dirname, 'dist'), + clean: true, + }, + module: { + rules: [ + { + test: /\.(js|ts)x?$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { targets: 'defaults' }], + '@babel/preset-react', + '@babel/preset-typescript', + ], + }, + }, + }, + ], + }, + resolve: { + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }, +}; diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index e250e793..f3e0cbd7 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/packages/redux-devtools-inspector-monitor/package.json @@ -22,8 +22,6 @@ "url": "https://github.com/reduxjs/redux-devtools" }, "scripts": { - "start": "webpack serve --config demo/config/webpack.config.ts", - "build:demo": "NODE_ENV=production webpack -p", "build": "yarn run build:types && yarn run build:js", "build:types": "tsc --emitDeclarationOnly", "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", @@ -60,47 +58,22 @@ "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.15.0", "@redux-devtools/core": "^3.9.0", - "@redux-devtools/dock-monitor": "^1.4.0", "@types/dateformat": "^3.0.1", "@types/hex-rgba": "^1.0.1", "@types/history": "^4.7.9", "@types/lodash.debounce": "^4.0.6", - "@types/lodash.shuffle": "^4.2.6", - "@types/node": "^14.17.17", "@types/react": "^16.14.15", "@types/react-dragula": "^1.1.0", - "@types/react-router": "^5.1.16", "@types/redux-devtools-themes": "^1.0.0", - "@types/redux-logger": "^3.0.9", - "@types/webpack": "^5.28.0", - "@types/webpack-dev-server": "^4.1.0", "@typescript-eslint/eslint-plugin": "^4.31.2", "@typescript-eslint/parser": "^4.31.2", - "babel-loader": "^8.2.2", - "base16": "^1.0.0", - "clean-webpack-plugin": "^4.0.0", - "connected-react-router": "^6.9.1", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-react": "^7.25.3", - "fork-ts-checker-webpack-plugin": "^6.3.3", - "history": "^4.10.1", - "html-webpack-plugin": "^5.3.2", - "lodash.shuffle": "^4.2.0", "react": "^16.14.0", - "react-bootstrap": "^1.6.3", - "react-dom": "^16.14.0", - "react-redux": "^7.2.5", - "react-router": "^5.2.1", "redux": "^4.1.1", - "redux-logger": "^3.0.6", "rimraf": "^3.0.2", - "seamless-immutable": "^7.1.4", - "ts-node": "^10.2.1", - "typescript": "~4.3.5", - "webpack": "^5.53.0", - "webpack-cli": "^4.8.0", - "webpack-dev-server": "^4.2.1" + "typescript": "~4.3.5" }, "peerDependencies": { "@redux-devtools/core": "^3.7.0", diff --git a/yarn.lock b/yarn.lock index 6ac3069b..8ca3a303 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4862,63 +4862,38 @@ __metadata: "@babel/preset-typescript": ^7.15.0 "@babel/runtime": ^7.15.4 "@redux-devtools/core": ^3.9.0 - "@redux-devtools/dock-monitor": ^1.4.0 "@types/dateformat": ^3.0.1 "@types/dragula": ^3.7.1 "@types/hex-rgba": ^1.0.1 "@types/history": ^4.7.9 "@types/lodash": ^4.14.173 "@types/lodash.debounce": ^4.0.6 - "@types/lodash.shuffle": ^4.2.6 - "@types/node": ^14.17.17 "@types/prop-types": ^15.7.4 "@types/react": ^16.14.15 "@types/react-dragula": ^1.1.0 - "@types/react-router": ^5.1.16 "@types/redux-devtools-themes": ^1.0.0 - "@types/redux-logger": ^3.0.9 - "@types/webpack": ^5.28.0 - "@types/webpack-dev-server": ^4.1.0 "@typescript-eslint/eslint-plugin": ^4.31.2 "@typescript-eslint/parser": ^4.31.2 - babel-loader: ^8.2.2 - base16: ^1.0.0 - clean-webpack-plugin: ^4.0.0 - connected-react-router: ^6.9.1 dateformat: ^4.5.1 eslint: ^7.32.0 eslint-config-prettier: ^8.3.0 eslint-plugin-react: ^7.25.3 - fork-ts-checker-webpack-plugin: ^6.3.3 hex-rgba: ^1.0.2 - history: ^4.10.1 - html-webpack-plugin: ^5.3.2 immutable: ^4.0.0-rc.15 javascript-stringify: ^2.1.0 jsondiffpatch: ^0.4.1 jss: ^10.8.0 jss-preset-default: ^10.8.0 lodash.debounce: ^4.0.8 - lodash.shuffle: ^4.2.0 prop-types: ^15.7.2 react: ^16.14.0 react-base16-styling: ^0.8.0 - react-bootstrap: ^1.6.3 - react-dom: ^16.14.0 react-dragula: ^1.1.17 react-json-tree: ^0.15.0 - react-redux: ^7.2.5 - react-router: ^5.2.1 redux: ^4.1.1 redux-devtools-themes: ^1.0.0 - redux-logger: ^3.0.6 rimraf: ^3.0.2 - seamless-immutable: ^7.1.4 - ts-node: ^10.2.1 typescript: ~4.3.5 - webpack: ^5.53.0 - webpack-cli: ^4.8.0 - webpack-dev-server: ^4.2.1 peerDependencies: "@redux-devtools/core": ^3.7.0 "@types/react": ^16.3.0 || ^17.0.0 @@ -17161,6 +17136,56 @@ fsevents@^1.2.7: languageName: node linkType: hard +"inspector-demo@workspace:packages/redux-devtools-inspector-monitor/demo": + version: 0.0.0-use.local + resolution: "inspector-demo@workspace:packages/redux-devtools-inspector-monitor/demo" + dependencies: + "@babel/core": ^7.15.5 + "@babel/preset-env": ^7.15.6 + "@babel/preset-react": ^7.14.5 + "@babel/preset-typescript": ^7.15.0 + "@redux-devtools/core": ^3.9.0 + "@redux-devtools/dock-monitor": ^1.4.0 + "@types/base16": ^1.0.2 + "@types/history": ^4.7.9 + "@types/lodash.shuffle": ^4.2.6 + "@types/node": ^14.17.17 + "@types/react": ^16.14.15 + "@types/react-dom": ^16.9.14 + "@types/react-redux": ^7.1.18 + "@types/react-router": ^5.1.16 + "@types/redux-logger": ^3.0.9 + "@types/webpack": ^5.28.0 + "@types/webpack-dev-server": ^4.1.0 + "@typescript-eslint/eslint-plugin": ^4.31.2 + "@typescript-eslint/parser": ^4.31.2 + babel-loader: ^8.2.2 + base16: ^1.0.0 + connected-react-router: ^6.9.1 + eslint: ^7.32.0 + eslint-config-prettier: ^8.3.0 + eslint-plugin-react: ^7.25.3 + fork-ts-checker-webpack-plugin: ^6.3.3 + history: ^4.10.1 + html-webpack-plugin: ^5.3.2 + immutable: ^4.0.0-rc.15 + lodash.shuffle: ^4.2.0 + react: ^16.14.0 + react-bootstrap: ^1.6.3 + react-dom: ^16.14.0 + react-redux: ^7.2.5 + react-router: ^5.2.1 + redux: ^4.1.1 + redux-logger: ^3.0.6 + seamless-immutable: ^7.1.4 + ts-node: ^10.2.1 + typescript: ~4.3.5 + webpack: ^5.53.0 + webpack-cli: ^4.8.0 + webpack-dev-server: ^4.2.1 + languageName: unknown + linkType: soft + "internal-ip@npm:^6.2.0": version: 6.2.0 resolution: "internal-ip@npm:6.2.0"