diff --git a/packages/redux-devtools/examples/counter/.babelrc b/packages/redux-devtools/examples/counter/.babelrc deleted file mode 100644 index ed30a6fd..00000000 --- a/packages/redux-devtools/examples/counter/.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/examples/counter/.eslintignore b/packages/redux-devtools/examples/counter/.eslintignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/packages/redux-devtools/examples/counter/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/packages/redux-devtools/examples/counter/index.html b/packages/redux-devtools/examples/counter/index.html index a771e8b9..76f7bff5 100644 --- a/packages/redux-devtools/examples/counter/index.html +++ b/packages/redux-devtools/examples/counter/index.html @@ -5,5 +5,4 @@
- diff --git a/packages/redux-devtools/examples/counter/package.json b/packages/redux-devtools/examples/counter/package.json index 0c0d1ac9..b4746b30 100644 --- a/packages/redux-devtools/examples/counter/package.json +++ b/packages/redux-devtools/examples/counter/package.json @@ -13,7 +13,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" }, @@ -24,7 +25,6 @@ "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", "redux-thunk": "^2.3.0" @@ -48,6 +48,8 @@ "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", "ts-node": "^10.2.1", "typescript": "~4.3.5", "webpack": "^5.53.0", diff --git a/packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx b/packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx index a912fb04..b562d578 100644 --- a/packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx +++ b/packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx @@ -1,4 +1,3 @@ -import { hot } from 'react-hot-loader/root'; import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { Store } from 'redux'; @@ -11,7 +10,7 @@ interface Props { store: Store; } -class Root extends Component { +export default class Root extends Component { render() { const { store } = this.props; return ( @@ -24,5 +23,3 @@ class Root extends Component { ); } } - -export default hot(Root); diff --git a/packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx b/packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx index 974d64c0..53572096 100644 --- a/packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx +++ b/packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx @@ -1,4 +1,3 @@ -import { hot } from 'react-hot-loader/root'; import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { Store } from 'redux'; @@ -10,7 +9,7 @@ interface Props { store: Store; } -class Root extends Component { +export default class Root extends Component { render() { const { store } = this.props; return ( @@ -20,5 +19,3 @@ class Root extends Component { ); } } - -export default hot(Root); diff --git a/packages/redux-devtools/examples/counter/src/index.tsx b/packages/redux-devtools/examples/counter/src/index.tsx index 78661700..d731d108 100644 --- a/packages/redux-devtools/examples/counter/src/index.tsx +++ b/packages/redux-devtools/examples/counter/src/index.tsx @@ -1,27 +1,8 @@ import React from 'react'; import { render } from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; import configureStore from './store/configureStore'; import Root from './containers/Root'; const store = configureStore(); -render( - - - , - document.getElementById('root') -); - -if (module.hot) { - module.hot.accept('./containers/Root', () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires - const RootContainer = require('./containers/Root').default; - render( - - - , - document.getElementById('root') - ); - }); -} +render(, document.getElementById('root')); diff --git a/packages/redux-devtools/examples/counter/webpack.config.ts b/packages/redux-devtools/examples/counter/webpack.config.ts index 5ebe3e2c..e49340bd 100644 --- a/packages/redux-devtools/examples/counter/webpack.config.ts +++ b/packages/redux-devtools/examples/counter/webpack.config.ts @@ -1,36 +1,44 @@ 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', - './src/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', - publicPath: '/static/', + path: path.join(__dirname, 'dist'), + clean: true, }, module: { rules: [ { test: /\.(js|ts)x?$/, - loader: 'babel-loader', exclude: /node_modules/, - include: path.join(__dirname, 'src'), + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { targets: 'defaults' }], + '@babel/preset-react', + '@babel/preset-typescript', + ], + }, + }, }, ], }, resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, - plugins: [new webpack.HotModuleReplacementPlugin()], - devServer: { - historyApiFallback: true, - hot: true, - port: 3000, - }, - devtool: 'eval-source-map', }; diff --git a/packages/redux-devtools/examples/todomvc/.babelrc b/packages/redux-devtools/examples/todomvc/.babelrc deleted file mode 100644 index ed30a6fd..00000000 --- a/packages/redux-devtools/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/examples/todomvc/.eslintignore b/packages/redux-devtools/examples/todomvc/.eslintignore new file mode 100644 index 00000000..1521c8b7 --- /dev/null +++ b/packages/redux-devtools/examples/todomvc/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/packages/redux-devtools/examples/todomvc/index.html b/packages/redux-devtools/examples/todomvc/index.html index c14d6080..1843b26e 100644 --- a/packages/redux-devtools/examples/todomvc/index.html +++ b/packages/redux-devtools/examples/todomvc/index.html @@ -5,5 +5,4 @@
- diff --git a/packages/redux-devtools/examples/todomvc/index.tsx b/packages/redux-devtools/examples/todomvc/index.tsx deleted file mode 100644 index d1687945..00000000 --- a/packages/redux-devtools/examples/todomvc/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import 'todomvc-app-css/index.css'; -import React from 'react'; -import { render } from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import configureStore from './store/configureStore'; -import Root from './containers/Root'; - -const store = configureStore(); - -render( - - - , - document.getElementById('root') -); - -if (module.hot) { - module.hot.accept('./containers/Root', () => { - // eslint-disable-next-line @typescript-eslint/no-var-requires - const RootContainer = require('./containers/Root').default; - render( - - - , - document.getElementById('root') - ); - }); -} diff --git a/packages/redux-devtools/examples/todomvc/package.json b/packages/redux-devtools/examples/todomvc/package.json index 69a1e8da..6f1d03d9 100644 --- a/packages/redux-devtools/examples/todomvc/package.json +++ b/packages/redux-devtools/examples/todomvc/package.json @@ -26,6 +26,7 @@ }, "scripts": { "start": "webpack serve --open", + "build": "webpack", "lint": "eslint . --ext .ts,.tsx", "type-check": "tsc --noEmit" }, @@ -37,7 +38,6 @@ "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" @@ -58,10 +58,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/examples/todomvc/actions/TodoActions.ts b/packages/redux-devtools/examples/todomvc/src/actions/TodoActions.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/actions/TodoActions.ts rename to packages/redux-devtools/examples/todomvc/src/actions/TodoActions.ts diff --git a/packages/redux-devtools/examples/todomvc/components/Footer.tsx b/packages/redux-devtools/examples/todomvc/src/components/Footer.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/components/Footer.tsx rename to packages/redux-devtools/examples/todomvc/src/components/Footer.tsx diff --git a/packages/redux-devtools/examples/todomvc/components/Header.tsx b/packages/redux-devtools/examples/todomvc/src/components/Header.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/components/Header.tsx rename to packages/redux-devtools/examples/todomvc/src/components/Header.tsx diff --git a/packages/redux-devtools/examples/todomvc/components/MainSection.tsx b/packages/redux-devtools/examples/todomvc/src/components/MainSection.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/components/MainSection.tsx rename to packages/redux-devtools/examples/todomvc/src/components/MainSection.tsx diff --git a/packages/redux-devtools/examples/todomvc/components/TodoItem.tsx b/packages/redux-devtools/examples/todomvc/src/components/TodoItem.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/components/TodoItem.tsx rename to packages/redux-devtools/examples/todomvc/src/components/TodoItem.tsx diff --git a/packages/redux-devtools/examples/todomvc/components/TodoTextInput.tsx b/packages/redux-devtools/examples/todomvc/src/components/TodoTextInput.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/components/TodoTextInput.tsx rename to packages/redux-devtools/examples/todomvc/src/components/TodoTextInput.tsx diff --git a/packages/redux-devtools/examples/todomvc/constants/ActionTypes.ts b/packages/redux-devtools/examples/todomvc/src/constants/ActionTypes.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/constants/ActionTypes.ts rename to packages/redux-devtools/examples/todomvc/src/constants/ActionTypes.ts diff --git a/packages/redux-devtools/examples/todomvc/constants/TodoFilters.ts b/packages/redux-devtools/examples/todomvc/src/constants/TodoFilters.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/constants/TodoFilters.ts rename to packages/redux-devtools/examples/todomvc/src/constants/TodoFilters.ts diff --git a/packages/redux-devtools/examples/todomvc/containers/DevTools.tsx b/packages/redux-devtools/examples/todomvc/src/containers/DevTools.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/containers/DevTools.tsx rename to packages/redux-devtools/examples/todomvc/src/containers/DevTools.tsx diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx b/packages/redux-devtools/examples/todomvc/src/containers/Root.dev.tsx similarity index 82% rename from packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx rename to packages/redux-devtools/examples/todomvc/src/containers/Root.dev.tsx index 810a579e..e63e82c9 100644 --- a/packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx +++ b/packages/redux-devtools/examples/todomvc/src/containers/Root.dev.tsx @@ -1,4 +1,3 @@ -import { hot } from 'react-hot-loader/root'; import React, { Component } from 'react'; import { Provider } from 'react-redux'; import TodoApp from './TodoApp'; @@ -11,7 +10,7 @@ interface Props { store: Store; } -class Root extends Component { +export default class Root extends Component { render() { const { store } = this.props; return ( @@ -24,5 +23,3 @@ class Root extends Component { ); } } - -export default hot(Root); diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx b/packages/redux-devtools/examples/todomvc/src/containers/Root.prod.tsx similarity index 80% rename from packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx rename to packages/redux-devtools/examples/todomvc/src/containers/Root.prod.tsx index 1a80e74c..dcaf8bc3 100644 --- a/packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx +++ b/packages/redux-devtools/examples/todomvc/src/containers/Root.prod.tsx @@ -1,4 +1,3 @@ -import { hot } from 'react-hot-loader/root'; import React, { Component } from 'react'; import { Provider } from 'react-redux'; import TodoApp from './TodoApp'; @@ -10,7 +9,7 @@ interface Props { store: Store; } -class Root extends Component { +export default class Root extends Component { render() { const { store } = this.props; return ( @@ -20,5 +19,3 @@ class Root extends Component { ); } } - -export default hot(Root); diff --git a/packages/redux-devtools/examples/todomvc/containers/Root.ts b/packages/redux-devtools/examples/todomvc/src/containers/Root.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/containers/Root.ts rename to packages/redux-devtools/examples/todomvc/src/containers/Root.ts diff --git a/packages/redux-devtools/examples/todomvc/containers/TodoApp.tsx b/packages/redux-devtools/examples/todomvc/src/containers/TodoApp.tsx similarity index 100% rename from packages/redux-devtools/examples/todomvc/containers/TodoApp.tsx rename to packages/redux-devtools/examples/todomvc/src/containers/TodoApp.tsx diff --git a/packages/redux-devtools/examples/todomvc/src/index.tsx b/packages/redux-devtools/examples/todomvc/src/index.tsx new file mode 100644 index 00000000..ea5cd00e --- /dev/null +++ b/packages/redux-devtools/examples/todomvc/src/index.tsx @@ -0,0 +1,9 @@ +import 'todomvc-app-css/index.css'; +import React from 'react'; +import { render } from 'react-dom'; +import configureStore from './store/configureStore'; +import Root from './containers/Root'; + +const store = configureStore(); + +render(, document.getElementById('root')); diff --git a/packages/redux-devtools/examples/todomvc/reducers/index.ts b/packages/redux-devtools/examples/todomvc/src/reducers/index.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/reducers/index.ts rename to packages/redux-devtools/examples/todomvc/src/reducers/index.ts diff --git a/packages/redux-devtools/examples/todomvc/reducers/todos.ts b/packages/redux-devtools/examples/todomvc/src/reducers/todos.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/reducers/todos.ts rename to packages/redux-devtools/examples/todomvc/src/reducers/todos.ts diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts b/packages/redux-devtools/examples/todomvc/src/store/configureStore.dev.ts similarity index 66% rename from packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts rename to packages/redux-devtools/examples/todomvc/src/store/configureStore.dev.ts index 7398c6c5..de44389c 100644 --- a/packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts +++ b/packages/redux-devtools/examples/todomvc/src/store/configureStore.dev.ts @@ -16,14 +16,5 @@ const enhancer = compose( export default function configureStore( initialState?: PreloadedState ) { - const store = createStore(rootReducer, initialState, enhancer); - - if (module.hot) { - module.hot.accept('../reducers', () => - // eslint-disable-next-line @typescript-eslint/no-var-requires - store.replaceReducer(require('../reducers').default) - ); - } - - return store; + return createStore(rootReducer, initialState, enhancer); } diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts b/packages/redux-devtools/examples/todomvc/src/store/configureStore.prod.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts rename to packages/redux-devtools/examples/todomvc/src/store/configureStore.prod.ts diff --git a/packages/redux-devtools/examples/todomvc/store/configureStore.ts b/packages/redux-devtools/examples/todomvc/src/store/configureStore.ts similarity index 100% rename from packages/redux-devtools/examples/todomvc/store/configureStore.ts rename to packages/redux-devtools/examples/todomvc/src/store/configureStore.ts diff --git a/packages/redux-devtools/examples/todomvc/webpack.config.ts b/packages/redux-devtools/examples/todomvc/webpack.config.ts index c0c48bdb..20c92282 100644 --- a/packages/redux-devtools/examples/todomvc/webpack.config.ts +++ b/packages/redux-devtools/examples/todomvc/webpack.config.ts @@ -1,48 +1,48 @@ 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', - publicPath: '/static/', + path: path.join(__dirname, 'dist'), + clean: true, }, module: { rules: [ { test: /\.(js|ts)x?$/, - loader: '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: { - historyApiFallback: true, - hot: true, - port: 3000, - }, - devtool: 'eval-source-map', }; diff --git a/yarn.lock b/yarn.lock index 38ae685b..927d911b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12004,10 +12004,11 @@ __metadata: 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 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 redux-thunk: ^2.3.0 @@ -28706,14 +28707,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 + fork-ts-checker-webpack-plugin: ^6.3.3 + html-webpack-plugin: ^5.3.2 prop-types: ^15.7.2 - raw-loader: ^4.0.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