chore(slider): fix example build (#894)

This commit is contained in:
Nathan Bierema 2021-10-01 16:46:02 -04:00 committed by GitHub
parent d3fccc1487
commit 13c775ee2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 60 additions and 104 deletions

View File

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

View File

@ -0,0 +1,8 @@
<html>
<head>
<title>Redux TodoMVC</title>
</head>
<body>
<div class="todoapp" id="root"></div>
</body>
</html>

View File

@ -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(
<AppContainer>
<Root store={store} />
</AppContainer>,
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(
<AppContainer>
<RootContainer store={store} />
</AppContainer>,
rootEl
);
});
}

View File

@ -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",

View File

@ -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;

View File

@ -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;

View File

@ -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(<Root store={store} />, rootEl);

View File

@ -16,11 +16,5 @@ const enhancer = compose(
export default function configureStore(
initialState?: PreloadedState<TodoState>
) {
const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) {
module.hot.accept('../reducers', () => store.replaceReducer(rootReducer));
}
return store;
return createStore(rootReducer, initialState, enhancer);
}

View File

@ -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',
};

View File

@ -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