Skip to content

Commit b240742

Browse files
pmmmwhpmmmwh
authored
Merge pull request #23 from blainekasten/support-whm
Support webpack-hot-middleware
2 parents a220083 + 9a7fe78 commit b240742

21 files changed

+5148
-38
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ The allowed values are as follows:
111111
| :-----------------------: | :-------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
112112
| **`disableRefreshCheck`** | `boolean` | `false` | Disables detection of react-refresh's Babel plugin. Useful if you do not parse JS files within `node_modules`, or if you have a Babel setup not entirely controlled by Webpack. |
113113
| **`forceEnable`** | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, or if you are using Webpack's `none` mode without `NODE_ENV`, for example. |
114+
| **`useLegacyWDSSockets`** | `boolean` | `false` | Set this to true if you are using a webpack-dev-server version prior to 3.8 as it requires a custom SocketJS implementation. |
114115

115116
## Related Work
116117

‎examples/wds-kitchen-sink/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>React App</title>
6+
<title>WDS React App</title>
77
</head>
88
<body>
99
<div id="app"></div>

‎examples/whm-kitchen-sink/babel.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = api => {
2+
// This caches the Babel config
3+
api.cache.using(() => process.env.NODE_ENV);
4+
return {
5+
presets: ['@babel/preset-env', '@babel/preset-react'],
6+
// Applies the react-refresh Babel plugin on non-production modes only
7+
...(!api.env('production') && { plugins: ['react-refresh/babel'] }),
8+
};
9+
};

‎examples/whm-kitchen-sink/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "whm-kitchen-sink",
3+
"version": "0.1.0",
4+
"main": "index.js",
5+
"author": "Michael Mok",
6+
"license": "MIT",
7+
"scripts": {
8+
"start": "node ./server",
9+
"build": "cross-env NODE_ENV=production webpack --mode production"
10+
},
11+
"dependencies": {
12+
"react": "^16.9.0",
13+
"react-dom": "^16.9.0"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.6.0",
17+
"@babel/preset-env": "^7.6.0",
18+
"@babel/preset-react": "^7.0.0",
19+
"babel-loader": "^8.0.6",
20+
"cross-env": "^6.0.3",
21+
"express": "^4.17.1",
22+
"html-webpack-plugin": "^3.2.0",
23+
"react-refresh": "^0.7.0",
24+
"@pmmmwh/react-refresh-webpack-plugin": "^0.1.1",
25+
"webpack": "^4.41.2",
26+
"webpack-dev-middleware": "^3.7.2",
27+
"webpack-hot-middleware": "^2.25.0"
28+
}
29+
}

‎examples/whm-kitchen-sink/public/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>WHM React App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
</body>
11+
</html>

‎examples/whm-kitchen-sink/server.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const express = require('express');
2+
const webpack = require('webpack');
3+
const path = require('path');
4+
const config = require('./webpack.config.js');
5+
const compiler = webpack(config);
6+
7+
const app = express();
8+
9+
app.use(
10+
require('webpack-dev-middleware')(compiler, {
11+
publicPath: config.output.publicPath,
12+
})
13+
);
14+
15+
app.use(
16+
require(`webpack-hot-middleware`)(compiler, {
17+
log: false,
18+
path: `/__webpack_hmr`,
19+
heartbeat: 10 * 1000,
20+
})
21+
);
22+
23+
app.listen(3000, () => console.log('App is listening on port 3000!'));

‎examples/whm-kitchen-sink/src/App.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import ClassDefault from './ClassDefault';
3+
import { ClassNamed } from './ClassNamed';
4+
import FunctionDefault from './FunctionDefault';
5+
import { FunctionNamed } from './FunctionNamed';
6+
7+
const LazyComponent = React.lazy(() => import('./LazyComponent'));
8+
9+
function App() {
10+
return (
11+
<div>
12+
<ClassDefault />
13+
<ClassNamed />
14+
<FunctionDefault />
15+
<FunctionNamed />
16+
<React.Suspense fallback={<h1>Loading</h1>}>
17+
<LazyComponent />
18+
</React.Suspense>
19+
</div>
20+
);
21+
}
22+
23+
export default App;

‎examples/whm-kitchen-sink/src/ClassDefault.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
3+
class ClassDefault extends React.Component {
4+
render() {
5+
return <h1>Default Export Class</h1>;
6+
}
7+
}
8+
9+
export default ClassDefault;

‎examples/whm-kitchen-sink/src/ClassNamed.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
export class ClassNamed extends React.Component {
4+
render() {
5+
return <h1>Named Export Class</h1>;
6+
}
7+
}

‎examples/whm-kitchen-sink/src/FunctionDefault.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
function FunctionDefault() {
4+
return <h1>Default Export Function</h1>;
5+
}
6+
7+
export default FunctionDefault;

0 commit comments

Comments
 (0)