chore(core): fix example builds (#888)

This commit is contained in:
Nathan Bierema 2021-09-22 00:01:04 -04:00 committed by GitHub
parent 47d102680a
commit b20f1fffe3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 82 additions and 143 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 @@
dist

View File

@ -5,5 +5,4 @@
<body>
<div id="root"></div>
</body>
<script src="/static/bundle.js"></script>
</html>

View File

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

View File

@ -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<CounterState, CounterAction>;
}
class Root extends Component<Props> {
export default class Root extends Component<Props> {
render() {
const { store } = this.props;
return (
@ -24,5 +23,3 @@ class Root extends Component<Props> {
);
}
}
export default hot(Root);

View File

@ -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<CounterState, CounterAction>;
}
class Root extends Component<Props> {
export default class Root extends Component<Props> {
render() {
const { store } = this.props;
return (
@ -20,5 +19,3 @@ class Root extends Component<Props> {
);
}
}
export default hot(Root);

View File

@ -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(
<AppContainer>
<Root store={store} />
</AppContainer>,
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(
<AppContainer>
<RootContainer store={store} />
</AppContainer>,
document.getElementById('root')
);
});
}
render(<Root store={store} />, document.getElementById('root'));

View File

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

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

View File

@ -5,5 +5,4 @@
<body>
<div class="todoapp" id="root"></div>
</body>
<script src="/static/bundle.js"></script>
</html>

View File

@ -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(
<AppContainer>
<Root store={store} />
</AppContainer>,
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(
<AppContainer>
<RootContainer store={store} />
</AppContainer>,
document.getElementById('root')
);
});
}

View File

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

View File

@ -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<TodoState, TodoAction>;
}
class Root extends Component<Props> {
export default class Root extends Component<Props> {
render() {
const { store } = this.props;
return (
@ -24,5 +23,3 @@ class Root extends Component<Props> {
);
}
}
export default hot(Root);

View File

@ -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<TodoState, TodoAction>;
}
class Root extends Component<Props> {
export default class Root extends Component<Props> {
render() {
const { store } = this.props;
return (
@ -20,5 +19,3 @@ class Root extends Component<Props> {
);
}
}
export default hot(Root);

View File

@ -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(<Root store={store} />, document.getElementById('root'));

View File

@ -16,14 +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', () =>
// eslint-disable-next-line @typescript-eslint/no-var-requires
store.replaceReducer(require('../reducers').default)
);
}
return store;
return createStore(rootReducer, initialState, enhancer);
}

View File

@ -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,
},
{
test: /\.css?$/,
use: [
'style-loader',
{
loader: 'raw-loader',
use: {
loader: 'babel-loader',
options: {
esModule: false,
},
},
presets: [
['@babel/preset-env', { targets: 'defaults' }],
'@babel/preset-react',
'@babel/preset-typescript',
],
},
},
},
{
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',
};

View File

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