Merge pull request #23 from blainekasten/support-whm

Support webpack-hot-middleware
pmmmwh · Feb 27, 2020 · b240742 · b240742
2 parents a220083 + 9a7fe78
commit b240742
Show file tree

Hide file tree

Showing 21 changed files with 5,148 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -111,6 +111,7 @@ The allowed values are as follows:
 | :-----------------------: | :-------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **`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. |
 |     **`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.                   |
+| **`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.                                                    |
 
 ## Related Work
 

diff --git a/examples/wds-kitchen-sink/public/index.html b/examples/wds-kitchen-sink/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React App</title>
+    <title>WDS React App</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/examples/whm-kitchen-sink/babel.config.js b/examples/whm-kitchen-sink/babel.config.js
@@ -0,0 +1,9 @@
+module.exports = api => {
+  // This caches the Babel config
+  api.cache.using(() => process.env.NODE_ENV);
+  return {
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+    // Applies the react-refresh Babel plugin on non-production modes only
+    ...(!api.env('production') && { plugins: ['react-refresh/babel'] }),
+  };
+};
diff --git a/examples/whm-kitchen-sink/package.json b/examples/whm-kitchen-sink/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "whm-kitchen-sink",
+  "version": "0.1.0",
+  "main": "index.js",
+  "author": "Michael Mok",
+  "license": "MIT",
+  "scripts": {
+    "start": "node ./server",
+    "build": "cross-env NODE_ENV=production webpack --mode production"
+  },
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "cross-env": "^6.0.3",
+    "express": "^4.17.1",
+    "html-webpack-plugin": "^3.2.0",
+    "react-refresh": "^0.7.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.1.1",
+    "webpack": "^4.41.2",
+    "webpack-dev-middleware": "^3.7.2",
+    "webpack-hot-middleware": "^2.25.0"
+  }
+}
diff --git a/examples/whm-kitchen-sink/public/index.html b/examples/whm-kitchen-sink/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WHM React App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/whm-kitchen-sink/server.js b/examples/whm-kitchen-sink/server.js
@@ -0,0 +1,23 @@
+const express = require('express');
+const webpack = require('webpack');
+const path = require('path');
+const config = require('./webpack.config.js');
+const compiler = webpack(config);
+
+const app = express();
+
+app.use(
+  require('webpack-dev-middleware')(compiler, {
+    publicPath: config.output.publicPath,
+  })
+);
+
+app.use(
+  require(`webpack-hot-middleware`)(compiler, {
+    log: false,
+    path: `/__webpack_hmr`,
+    heartbeat: 10 * 1000,
+  })
+);
+
+app.listen(3000, () => console.log('App is listening on port 3000!'));
diff --git a/examples/whm-kitchen-sink/src/App.jsx b/examples/whm-kitchen-sink/src/App.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ClassDefault from './ClassDefault';
+import { ClassNamed } from './ClassNamed';
+import FunctionDefault from './FunctionDefault';
+import { FunctionNamed } from './FunctionNamed';
+
+const LazyComponent = React.lazy(() => import('./LazyComponent'));
+
+function App() {
+  return (
+    <div>
+      <ClassDefault />
+      <ClassNamed />
+      <FunctionDefault />
+      <FunctionNamed />
+      <React.Suspense fallback={<h1>Loading</h1>}>
+        <LazyComponent />
+      </React.Suspense>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/whm-kitchen-sink/src/ClassDefault.jsx b/examples/whm-kitchen-sink/src/ClassDefault.jsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+class ClassDefault extends React.Component {
+  render() {
+    return <h1>Default Export Class</h1>;
+  }
+}
+
+export default ClassDefault;
diff --git a/examples/whm-kitchen-sink/src/ClassNamed.jsx b/examples/whm-kitchen-sink/src/ClassNamed.jsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export class ClassNamed extends React.Component {
+  render() {
+    return <h1>Named Export Class</h1>;
+  }
+}
diff --git a/examples/whm-kitchen-sink/src/FunctionDefault.jsx b/examples/whm-kitchen-sink/src/FunctionDefault.jsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+function FunctionDefault() {
+  return <h1>Default Export Function</h1>;
+}
+
+export default FunctionDefault;
diff --git a/examples/whm-kitchen-sink/src/FunctionNamed.jsx b/examples/whm-kitchen-sink/src/FunctionNamed.jsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export function FunctionNamed() {
+  return <h1>Named Export Function</h1>;
+}
diff --git a/examples/whm-kitchen-sink/src/LazyComponent.jsx b/examples/whm-kitchen-sink/src/LazyComponent.jsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+function LazyComponent() {
+  return <h1>Lazy Component</h1>;
+}
+
+export default LazyComponent;
diff --git a/examples/whm-kitchen-sink/src/index.js b/examples/whm-kitchen-sink/src/index.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import App from './App';
+
+render(<App />, document.getElementById('app'));
diff --git a/examples/whm-kitchen-sink/webpack.config.js b/examples/whm-kitchen-sink/webpack.config.js
@@ -0,0 +1,38 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const ReactRefreshPlugin = require('../../src');
+const path = require('path');
+
+module.exports = {
+  entry: {
+    main: ['webpack-hot-middleware/client', './src/index.js'],
+  },
+  output: {
+    path: __dirname,
+    publicPath: '/',
+    filename: 'bundle.js',
+  },
+  mode: 'development',
+  target: 'web',
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new ReactRefreshPlugin(),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      filename: './index.html',
+    }),
+    new webpack.NoEmitOnErrorsPlugin(),
+  ],
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+};