reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-11-04 01:47:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/redux-devtools/examples/counter/.babelrc
View File

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

1
packages/redux-devtools/examples/counter/.eslintignore Normal file
View File

@ -0,0 +1 @@
dist

1
packages/redux-devtools/examples/counter/index.html
View File

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

6
packages/redux-devtools/examples/counter/package.json
View File

@ -13,7 +13,8 @@
"url": "https://github.com/reduxjs/redux-devtools.git" "url": "https://github.com/reduxjs/redux-devtools.git"
}, },
"scripts": { "scripts": {
"start": "webpack serve", "start": "webpack serve --open",
"build": "webpack",
"lint": "eslint . --ext .ts,.tsx", "lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
@ -24,7 +25,6 @@
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.14.0", "react": "^16.14.0",
"react-dom": "^16.14.0", "react-dom": "^16.14.0",
"react-hot-loader": "^4.13.0",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"redux": "^4.1.1", "redux": "^4.1.1",
"redux-thunk": "^2.3.0" "redux-thunk": "^2.3.0"
@ -48,6 +48,8 @@
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.25.3", "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", "ts-node": "^10.2.1",
"typescript": "~4.3.5", "typescript": "~4.3.5",
"webpack": "^5.53.0", "webpack": "^5.53.0",

5
packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx
View File

@ -1,4 +1,3 @@
import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { Store } from 'redux'; import { Store } from 'redux';
@ -11,7 +10,7 @@ interface Props {
store: Store<CounterState, CounterAction>; store: Store<CounterState, CounterAction>;
} }
class Root extends Component<Props> { export default class Root extends Component<Props> {
render() { render() {
const { store } = this.props; const { store } = this.props;
return ( return (
@ -24,5 +23,3 @@ class Root extends Component<Props> {
); );
} }
} }
export default hot(Root);

5
packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx
View File

@ -1,4 +1,3 @@
import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { Store } from 'redux'; import { Store } from 'redux';
@ -10,7 +9,7 @@ interface Props {
store: Store<CounterState, CounterAction>; store: Store<CounterState, CounterAction>;
} }
class Root extends Component<Props> { export default class Root extends Component<Props> {
render() { render() {
const { store } = this.props; const { store } = this.props;
return ( return (
@ -20,5 +19,3 @@ class Root extends Component<Props> {
); );
} }
} }
export default hot(Root);

21
packages/redux-devtools/examples/counter/src/index.tsx
View File

@ -1,27 +1,8 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import configureStore from './store/configureStore'; import configureStore from './store/configureStore';
import Root from './containers/Root'; import Root from './containers/Root';
const store = configureStore(); const store = configureStore();
render( render(<Root store={store} />, document.getElementById('root'));
<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')
);
});
}

42
packages/redux-devtools/examples/counter/webpack.config.ts
View File

@ -1,36 +1,44 @@
import * as path from 'path'; 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 = { module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', mode: 'development',
entry: [ entry: './src/index.tsx',
'webpack-dev-server/client?http://localhost:3000', devtool: 'eval-source-map',
'webpack/hot/only-dev-server', devServer: {
'./src/index', static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new ForkTsCheckerWebpackPlugin(),
], ],
output: { output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js', filename: 'bundle.js',
publicPath: '/static/', path: path.join(__dirname, 'dist'),
clean: true,
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.(js|ts)x?$/, test: /\.(js|ts)x?$/,
loader: 'babel-loader',
exclude: /node_modules/, 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: { resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'], extensions: ['.js', '.jsx', '.ts', '.tsx'],
}, },
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
hot: true,
port: 3000,
},
devtool: 'eval-source-map',
}; };

8
packages/redux-devtools/examples/todomvc/.babelrc
View File

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

1
packages/redux-devtools/examples/todomvc/.eslintignore Normal file
View File

@ -0,0 +1 @@
dist

1
packages/redux-devtools/examples/todomvc/index.html
View File

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

28
packages/redux-devtools/examples/todomvc/index.tsx
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')
);
});
}

6
packages/redux-devtools/examples/todomvc/package.json
View File

@ -26,6 +26,7 @@
}, },
"scripts": { "scripts": {
"start": "webpack serve --open", "start": "webpack serve --open",
"build": "webpack",
"lint": "eslint . --ext .ts,.tsx", "lint": "eslint . --ext .ts,.tsx",
"type-check": "tsc --noEmit" "type-check": "tsc --noEmit"
}, },
@ -37,7 +38,6 @@
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.14.0", "react": "^16.14.0",
"react-dom": "^16.14.0", "react-dom": "^16.14.0",
"react-hot-loader": "^4.13.0",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"redux": "^4.1.1", "redux": "^4.1.1",
"todomvc-app-css": "^2.4.1" "todomvc-app-css": "^2.4.1"
@ -58,10 +58,12 @@
"@typescript-eslint/eslint-plugin": "^4.31.2", "@typescript-eslint/eslint-plugin": "^4.31.2",
"@typescript-eslint/parser": "^4.31.2", "@typescript-eslint/parser": "^4.31.2",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.25.3", "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", "style-loader": "^3.2.1",
"ts-node": "^10.2.1", "ts-node": "^10.2.1",
"typescript": "~4.3.5", "typescript": "~4.3.5",

0
packages/redux-devtools/examples/todomvc/actions/TodoActions.ts → packages/redux-devtools/examples/todomvc/src/actions/TodoActions.ts
View File

0
packages/redux-devtools/examples/todomvc/components/Footer.tsx → packages/redux-devtools/examples/todomvc/src/components/Footer.tsx
View File

0
packages/redux-devtools/examples/todomvc/components/Header.tsx → packages/redux-devtools/examples/todomvc/src/components/Header.tsx
View File

0
packages/redux-devtools/examples/todomvc/components/MainSection.tsx → packages/redux-devtools/examples/todomvc/src/components/MainSection.tsx
View File

0
packages/redux-devtools/examples/todomvc/components/TodoItem.tsx → packages/redux-devtools/examples/todomvc/src/components/TodoItem.tsx
View File

0
packages/redux-devtools/examples/todomvc/components/TodoTextInput.tsx → packages/redux-devtools/examples/todomvc/src/components/TodoTextInput.tsx
View File

0
packages/redux-devtools/examples/todomvc/constants/ActionTypes.ts → packages/redux-devtools/examples/todomvc/src/constants/ActionTypes.ts
View File

0
packages/redux-devtools/examples/todomvc/constants/TodoFilters.ts → packages/redux-devtools/examples/todomvc/src/constants/TodoFilters.ts
View File

0
packages/redux-devtools/examples/todomvc/containers/DevTools.tsx → packages/redux-devtools/examples/todomvc/src/containers/DevTools.tsx
View File

5
packages/redux-devtools/examples/todomvc/containers/Root.dev.tsx → packages/redux-devtools/examples/todomvc/src/containers/Root.dev.tsx
View File

@ -1,4 +1,3 @@
import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import TodoApp from './TodoApp'; import TodoApp from './TodoApp';
@ -11,7 +10,7 @@ interface Props {
store: Store<TodoState, TodoAction>; store: Store<TodoState, TodoAction>;
} }
class Root extends Component<Props> { export default class Root extends Component<Props> {
render() { render() {
const { store } = this.props; const { store } = this.props;
return ( return (
@ -24,5 +23,3 @@ class Root extends Component<Props> {
); );
} }
} }
export default hot(Root);

5
packages/redux-devtools/examples/todomvc/containers/Root.prod.tsx → packages/redux-devtools/examples/todomvc/src/containers/Root.prod.tsx
View File

@ -1,4 +1,3 @@
import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import TodoApp from './TodoApp'; import TodoApp from './TodoApp';
@ -10,7 +9,7 @@ interface Props {
store: Store<TodoState, TodoAction>; store: Store<TodoState, TodoAction>;
} }
class Root extends Component<Props> { export default class Root extends Component<Props> {
render() { render() {
const { store } = this.props; const { store } = this.props;
return ( return (
@ -20,5 +19,3 @@ class Root extends Component<Props> {
); );
} }
} }
export default hot(Root);

0
packages/redux-devtools/examples/todomvc/containers/Root.ts → packages/redux-devtools/examples/todomvc/src/containers/Root.ts
View File

0
packages/redux-devtools/examples/todomvc/containers/TodoApp.tsx → packages/redux-devtools/examples/todomvc/src/containers/TodoApp.tsx
View File

9
packages/redux-devtools/examples/todomvc/src/index.tsx Normal file
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'));

0
packages/redux-devtools/examples/todomvc/reducers/index.ts → packages/redux-devtools/examples/todomvc/src/reducers/index.ts
View File

0
packages/redux-devtools/examples/todomvc/reducers/todos.ts → packages/redux-devtools/examples/todomvc/src/reducers/todos.ts
View File

11
packages/redux-devtools/examples/todomvc/store/configureStore.dev.ts → packages/redux-devtools/examples/todomvc/src/store/configureStore.dev.ts
View File

@ -16,14 +16,5 @@ const enhancer = compose(
export default function configureStore( export default function configureStore(
initialState?: PreloadedState<TodoState> initialState?: PreloadedState<TodoState>
) { ) {
const store = createStore(rootReducer, initialState, enhancer); return 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;
} }

0
packages/redux-devtools/examples/todomvc/store/configureStore.prod.ts → packages/redux-devtools/examples/todomvc/src/store/configureStore.prod.ts
View File

0
packages/redux-devtools/examples/todomvc/store/configureStore.ts → packages/redux-devtools/examples/todomvc/src/store/configureStore.ts
View File

54
packages/redux-devtools/examples/todomvc/webpack.config.ts
View File

@ -1,48 +1,48 @@
import * as path from 'path'; 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 = { module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', mode: 'development',
entry: [ entry: './src/index.tsx',
'webpack-dev-server/client?http://localhost:3000', devtool: 'eval-source-map',
'webpack/hot/only-dev-server', devServer: {
'./index', static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
new ForkTsCheckerWebpackPlugin(),
], ],
output: { output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js', filename: 'bundle.js',
publicPath: '/static/', path: path.join(__dirname, 'dist'),
clean: true,
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.(js|ts)x?$/, test: /\.(js|ts)x?$/,
loader: 'babel-loader',
exclude: /node_modules/, exclude: /node_modules/,
include: __dirname, use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: 'defaults' }],
'@babel/preset-react',
'@babel/preset-typescript',
],
},
},
}, },
{ {
test: /\.css?$/, test: /\.css$/i,
use: [ use: ['style-loader', 'css-loader'],
'style-loader',
{
loader: 'raw-loader',
options: {
esModule: false,
},
},
],
}, },
], ],
}, },
resolve: { resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'], extensions: ['.js', '.jsx', '.ts', '.tsx'],
}, },
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
historyApiFallback: true,
hot: true,
port: 3000,
},
devtool: 'eval-source-map',
}; };

8
yarn.lock
View File

@ -12004,10 +12004,11 @@ __metadata:
eslint: ^7.32.0 eslint: ^7.32.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-plugin-react: ^7.25.3 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 prop-types: ^15.7.2
react: ^16.14.0 react: ^16.14.0
react-dom: ^16.14.0 react-dom: ^16.14.0
react-hot-loader: ^4.13.0
react-redux: ^7.2.5 react-redux: ^7.2.5
redux: ^4.1.1 redux: ^4.1.1
redux-thunk: ^2.3.0 redux-thunk: ^2.3.0
@ -28706,14 +28707,15 @@ resolve@^2.0.0-next.3:
"@typescript-eslint/parser": ^4.31.2 "@typescript-eslint/parser": ^4.31.2
babel-loader: ^8.2.2 babel-loader: ^8.2.2
classnames: ^2.3.1 classnames: ^2.3.1
css-loader: ^6.3.0
eslint: ^7.32.0 eslint: ^7.32.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-plugin-react: ^7.25.3 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 prop-types: ^15.7.2
raw-loader: ^4.0.2
react: ^16.14.0 react: ^16.14.0
react-dom: ^16.14.0 react-dom: ^16.14.0
react-hot-loader: ^4.13.0
react-redux: ^7.2.5 react-redux: ^7.2.5
redux: ^4.1.1 redux: ^4.1.1
style-loader: ^3.2.1 style-loader: ^3.2.1