diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/.babelrc b/packages/redux-devtools-slider-monitor/examples/todomvc/.babelrc deleted file mode 100644 index ed30a6fd..00000000 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": [ - "@babel/preset-env", - "@babel/preset-react", - "@babel/preset-typescript" - ], - "plugins": ["react-hot-loader/babel"] -} diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/.eslintignore b/packages/redux-devtools-slider-monitor/examples/todomvc/.eslintignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/index.html b/packages/redux-devtools-slider-monitor/examples/todomvc/index.html new file mode 100644 index 00000000..1db574bb --- /dev/null +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/index.html @@ -0,0 +1,9 @@ + + + Redux TodoMVC + + +
+
+ + diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/index.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/index.tsx deleted file mode 100644 index 6e0ad757..00000000 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import 'todomvc-app-css/index.css'; -import React from 'react'; -import ReactDOM from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import configureStore from './store/configureStore'; -import Root from './containers/Root'; - -const store = configureStore(); - -const rootEl = document.getElementById('root'); -ReactDOM.render( - - - , - rootEl -); - -if (module.hot) { - module.hot.accept('./containers/Root', () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires - const RootContainer = require('./containers/Root').default; - ReactDOM.render( - - - , - rootEl - ); - }); -} diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/package.json b/packages/redux-devtools-slider-monitor/examples/todomvc/package.json index e4a6e76a..15b7fe8c 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/package.json +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/package.json @@ -9,7 +9,8 @@ "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "start": "webpack serve", + "start": "webpack serve --open", + "build": "webpack", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit" }, @@ -19,9 +20,9 @@ "@redux-devtools/log-monitor": "^2.3.0", "@redux-devtools/slider-monitor": "^2.0.0-8", "classnames": "^2.3.1", + "prop-types": "^15.7.2", "react": "^16.14.0", "react-dom": "^16.14.0", - "react-hot-loader": "^4.13.0", "react-redux": "^7.2.5", "redux": "^4.1.1", "todomvc-app-css": "^2.4.1" @@ -33,6 +34,7 @@ "@babel/preset-typescript": "^7.15.0", "@types/classnames": "^2.3.1", "@types/node": "^14.17.17", + "@types/prop-types": "^15.7.4", "@types/react": "^16.14.15", "@types/react-dom": "^16.9.14", "@types/react-redux": "^7.1.18", @@ -41,10 +43,12 @@ "@typescript-eslint/eslint-plugin": "^4.31.2", "@typescript-eslint/parser": "^4.31.2", "babel-loader": "^8.2.2", + "css-loader": "^6.3.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-react": "^7.25.3", - "raw-loader": "^4.0.2", + "fork-ts-checker-webpack-plugin": "^6.3.3", + "html-webpack-plugin": "^5.3.2", "style-loader": "^3.2.1", "ts-node": "^10.2.1", "typescript": "~4.3.5", diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/actions/TodoActions.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/actions/TodoActions.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/actions/TodoActions.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/actions/TodoActions.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/components/Footer.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/components/Footer.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/components/Footer.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/components/Header.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/components/Header.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/components/Header.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/components/Header.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/components/MainSection.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/components/MainSection.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/components/MainSection.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/components/MainSection.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoItem.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/components/TodoItem.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoItem.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/components/TodoItem.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoTextInput.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/components/TodoTextInput.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/components/TodoTextInput.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/components/TodoTextInput.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/constants/ActionTypes.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/constants/ActionTypes.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/constants/ActionTypes.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/constants/ActionTypes.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/constants/TodoFilters.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/constants/TodoFilters.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/constants/TodoFilters.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/constants/TodoFilters.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/DevTools.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/DevTools.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/containers/DevTools.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/DevTools.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.dev.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.dev.tsx similarity index 89% rename from packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.dev.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.dev.tsx index 569afecf..6855db13 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.dev.tsx +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.dev.tsx @@ -1,4 +1,3 @@ -import { hot } from 'react-hot-loader/root'; import React from 'react'; import PropTypes from 'prop-types'; import { Provider } from 'react-redux'; @@ -25,4 +24,4 @@ Root.propTypes = { store: PropTypes.any.isRequired, }; -export default hot(Root); +export default Root; diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.prod.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.prod.tsx similarity index 88% rename from packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.prod.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.prod.tsx index 5665982f..3ad7ba39 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.prod.tsx +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.prod.tsx @@ -1,4 +1,3 @@ -import { hot } from 'react-hot-loader/root'; import React, { FunctionComponent } from 'react'; import PropTypes from 'prop-types'; import { Provider } from 'react-redux'; @@ -23,4 +22,4 @@ Root.propTypes = { store: PropTypes.any.isRequired, }; -export default hot(Root); +export default Root; diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/containers/Root.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/Root.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/containers/TodoApp.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/TodoApp.tsx similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/containers/TodoApp.tsx rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/containers/TodoApp.tsx diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/src/index.tsx b/packages/redux-devtools-slider-monitor/examples/todomvc/src/index.tsx new file mode 100644 index 00000000..6f0b93e7 --- /dev/null +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/src/index.tsx @@ -0,0 +1,10 @@ +import 'todomvc-app-css/index.css'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import configureStore from './store/configureStore'; +import Root from './containers/Root'; + +const store = configureStore(); + +const rootEl = document.getElementById('root'); +ReactDOM.render(, rootEl); diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/reducers/index.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/reducers/index.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/reducers/index.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/reducers/index.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/reducers/todos.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/reducers/todos.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/reducers/todos.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/reducers/todos.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.dev.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.dev.ts similarity index 75% rename from packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.dev.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.dev.ts index 10f5c1a7..de44389c 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.dev.ts +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.dev.ts @@ -16,11 +16,5 @@ const enhancer = compose( export default function configureStore( initialState?: PreloadedState ) { - const store = createStore(rootReducer, initialState, enhancer); - - if (module.hot) { - module.hot.accept('../reducers', () => store.replaceReducer(rootReducer)); - } - - return store; + return createStore(rootReducer, initialState, enhancer); } diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.prod.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.prod.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.prod.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.prod.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.ts similarity index 100% rename from packages/redux-devtools-slider-monitor/examples/todomvc/store/configureStore.ts rename to packages/redux-devtools-slider-monitor/examples/todomvc/src/store/configureStore.ts diff --git a/packages/redux-devtools-slider-monitor/examples/todomvc/webpack.config.ts b/packages/redux-devtools-slider-monitor/examples/todomvc/webpack.config.ts index f811f64e..6c1c71d6 100644 --- a/packages/redux-devtools-slider-monitor/examples/todomvc/webpack.config.ts +++ b/packages/redux-devtools-slider-monitor/examples/todomvc/webpack.config.ts @@ -1,48 +1,46 @@ import * as path from 'path'; -import * as webpack from 'webpack'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; module.exports = { - mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', - entry: [ - 'webpack-dev-server/client?http://localhost:3000', - 'webpack/hot/only-dev-server', - './index', + mode: 'development', + entry: './src/index.tsx', + devtool: 'eval-source-map', + devServer: { + static: './dist', + }, + plugins: [ + new HtmlWebpackPlugin({ template: './index.html' }), + new ForkTsCheckerWebpackPlugin(), ], output: { - path: path.join(__dirname, 'dist'), filename: 'bundle.js', + path: path.join(__dirname, 'dist'), + clean: true, }, module: { rules: [ { test: /\.(js|ts)x?$/, - use: ['babel-loader'], exclude: /node_modules/, - include: __dirname, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { targets: 'defaults' }], + '@babel/preset-react', + '@babel/preset-typescript', + ], + }, + }, }, { - test: /\.css?$/, - use: [ - 'style-loader', - { - loader: 'raw-loader', - options: { - esModule: false, - }, - }, - ], + test: /\.css$/i, + use: ['style-loader', 'css-loader'], }, ], }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, - plugins: [new webpack.HotModuleReplacementPlugin()], - devServer: { - host: 'localhost', - port: process.env.PORT || 3000, - historyApiFallback: true, - hot: true, - }, - devtool: 'eval-source-map', }; diff --git a/yarn.lock b/yarn.lock index 6826c872..70a60f66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19595,7 +19595,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"loader-utils@npm:^1.1.0, loader-utils@npm:^1.2.3, loader-utils@npm:^1.4.0": +"loader-utils@npm:^1.2.3, loader-utils@npm:^1.4.0": version: 1.4.0 resolution: "loader-utils@npm:1.4.0" dependencies: @@ -24605,29 +24605,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-hot-loader@npm:^4.13.0": - version: 4.13.0 - resolution: "react-hot-loader@npm:4.13.0" - dependencies: - fast-levenshtein: ^2.0.6 - global: ^4.3.0 - hoist-non-react-statics: ^3.3.0 - loader-utils: ^1.1.0 - prop-types: ^15.6.1 - react-lifecycles-compat: ^3.0.4 - shallowequal: ^1.1.0 - source-map: ^0.7.3 - peerDependencies: - "@types/react": "^15.0.0 || ^16.0.0 || ^17.0.0 " - react: "^15.0.0 || ^16.0.0 || ^17.0.0 " - react-dom: "^15.0.0 || ^16.0.0 || ^17.0.0 " - peerDependenciesMeta: - "@types/react": - optional: true - checksum: effdbf4644ce912ae20ad94be62083970c74b26a59fe24ed0024cf73190a5b3edf59650cb693bdd7b70791df8ab8530de273d73b895c4831a91da8a76683e3a3 - languageName: node - linkType: hard - "react-icons@npm:^4.2.0": version: 4.2.0 resolution: "react-icons@npm:4.2.0" @@ -26942,6 +26919,7 @@ resolve@^2.0.0-next.3: "@redux-devtools/slider-monitor": ^2.0.0-8 "@types/classnames": ^2.3.1 "@types/node": ^14.17.17 + "@types/prop-types": ^15.7.4 "@types/react": ^16.14.15 "@types/react-dom": ^16.9.14 "@types/react-redux": ^7.1.18 @@ -26951,13 +26929,15 @@ resolve@^2.0.0-next.3: "@typescript-eslint/parser": ^4.31.2 babel-loader: ^8.2.2 classnames: ^2.3.1 + css-loader: ^6.3.0 eslint: ^7.32.0 eslint-config-prettier: ^8.3.0 eslint-plugin-react: ^7.25.3 - raw-loader: ^4.0.2 + fork-ts-checker-webpack-plugin: ^6.3.3 + html-webpack-plugin: ^5.3.2 + prop-types: ^15.7.2 react: ^16.14.0 react-dom: ^16.14.0 - react-hot-loader: ^4.13.0 react-redux: ^7.2.5 redux: ^4.1.1 style-loader: ^3.2.1