ssr-plugin-react 6.2.13 → 6.2.14

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [6.2.14](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.13...plugin-react@6.2.14) (2022-04-20)
+
+
+### Bug Fixes
+
+* update preinstall ([2b4b869](https://github.com/zhangyuang/ssr/commit/2b4b869c28b83b414bef10260e5561bc3773cea9))
+
+
+### Features
+
+* optimize customescript ([f374760](https://github.com/zhangyuang/ssr/commit/f3747608d4684576875968394eca6315e2fa8dd1))
+* plugin-react add react-refresh, remove module.hot ([7bee211](https://github.com/zhangyuang/ssr/commit/7bee211ddfefaef688713f505756e1155320b844))
+
+
+
 ## [6.2.13](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.12...plugin-react@6.2.13) (2022-04-18)
 
 

package/cjs/config/base.js

@@ -7,9 +7,9 @@ const webpack = require("webpack");
 const MiniCssExtractPlugin = require((0, ssr_server_utils_1.loadModuleFromFramework)('mini-css-extract-plugin'));
 const WebpackBar = require('webpackbar');
 const loadModule = ssr_server_utils_1.loadModuleFromFramework;
-const addBabelLoader = (chain, envOptions) => {
+const addBabelLoader = (chain, envOptions, isServer) => {
     var _a, _b;
-    const { babelOptions } = (0, ssr_server_utils_1.loadConfig)();
+    const { babelOptions, isDev } = (0, ssr_server_utils_1.loadConfig)();
     chain.use('babel-loader')
         .loader(loadModule('babel-loader'))
         .options({
@@ -41,7 +41,7 @@ const addBabelLoader = (chain, envOptions) => {
             [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
             [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
             ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
-        ]
+        ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
         .end();
 };
@@ -98,8 +98,8 @@ const getBaseConfig = (chain, isServer) => {
     else {
         babelForExtraModule = module.end().exclude.add(/core-js/).end();
     }
-    addBabelLoader(babelModule, envOptions);
-    addBabelLoader(babelForExtraModule, envOptions);
+    addBabelLoader(babelModule, envOptions, isServer);
+    addBabelLoader(babelForExtraModule, envOptions, isServer);
     (0, ssr_server_utils_1.setStyle)(chain, /\.css$/, {
         rule: 'css',
         isServer,

package/cjs/config/client.js

@@ -8,11 +8,12 @@ const base_1 = require("./base");
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const safePostCssParser = require('postcss-safe-parser');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
 const loadModule = ssr_server_utils_1.loadModuleFromFramework;
 let asyncChunkMap = {};
 const getClientWebpack = (chain) => {
-    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = (0, ssr_server_utils_1.loadConfig)();
+    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = (0, ssr_server_utils_1.loadConfig)();
     const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
     const publicPath = (0, ssr_server_utils_1.getOutputPublicPath)();
     (0, base_1.getBaseConfig)(chain, false);
@@ -89,6 +90,14 @@ const getClientWebpack = (chain) => {
     chain.when(generateAnalysis, chain => {
         chain.plugin('analyze').use(BundleAnalyzerPlugin);
     });
+    chain.when(isDev, chain => {
+        chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+            overlay: {
+                sockHost: host,
+                sockPort: fePort
+            }
+        }));
+    });
     chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
         apply(compiler) {
             compiler.hooks.watchRun.tap('thisCompilation', async () => {

package/cjs/entry/client-entry.js

@@ -10,7 +10,7 @@ const create_router_1 = require("./create-router");
 const context_1 = require("./context");
 const { FeRoutes, layoutFetch, App, PrefixRouterBase } = create_router_1.Routes;
 const clientRender = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const IApp = App !== null && App !== void 0 ? App : function (props) {
         return props.children;
     };
@@ -30,9 +30,6 @@ const clientRender = async () => {
                         const WrappedComponent = (0, ssr_hoc_react_1.wrapComponent)(component);
                         return (React.createElement(react_router_dom_1.Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
                     })))))), document.getElementById('app'));
-    if (!window.__USE_VITE__) {
-        (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
-    }
 };
 exports.clientRender = clientRender;
 if (!window.__disableClientRender__) {

package/esm/config/base.js

@@ -4,9 +4,9 @@ import * as webpack from 'webpack';
 const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-plugin'));
 const WebpackBar = require('webpackbar');
 const loadModule = loadModuleFromFramework;
-const addBabelLoader = (chain, envOptions) => {
+const addBabelLoader = (chain, envOptions, isServer) => {
     var _a, _b;
-    const { babelOptions } = loadConfig();
+    const { babelOptions, isDev } = loadConfig();
     chain.use('babel-loader')
         .loader(loadModule('babel-loader'))
         .options({
@@ -38,7 +38,7 @@ const addBabelLoader = (chain, envOptions) => {
             [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
             [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
             ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
-        ]
+        ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
         .end();
 };
@@ -95,8 +95,8 @@ const getBaseConfig = (chain, isServer) => {
     else {
         babelForExtraModule = module.end().exclude.add(/core-js/).end();
     }
-    addBabelLoader(babelModule, envOptions);
-    addBabelLoader(babelForExtraModule, envOptions);
+    addBabelLoader(babelModule, envOptions, isServer);
+    addBabelLoader(babelForExtraModule, envOptions, isServer);
     setStyle(chain, /\.css$/, {
         rule: 'css',
         isServer,

package/esm/config/client.js

@@ -5,11 +5,12 @@ import { getBaseConfig } from './base';
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const safePostCssParser = require('postcss-safe-parser');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
 const loadModule = loadModuleFromFramework;
 let asyncChunkMap = {};
 const getClientWebpack = (chain) => {
-    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig();
+    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig();
     const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
     const publicPath = getOutputPublicPath();
     getBaseConfig(chain, false);
@@ -86,6 +87,14 @@ const getClientWebpack = (chain) => {
     chain.when(generateAnalysis, chain => {
         chain.plugin('analyze').use(BundleAnalyzerPlugin);
     });
+    chain.when(isDev, chain => {
+        chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+            overlay: {
+                sockHost: host,
+                sockPort: fePort
+            }
+        }));
+    });
     chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
         apply(compiler) {
             compiler.hooks.watchRun.tap('thisCompilation', async () => {

package/esm/entry/client-entry.js

@@ -7,7 +7,7 @@ import { Routes } from './create-router';
 import { AppContext } from './context';
 const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes;
 const clientRender = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const IApp = App !== null && App !== void 0 ? App : function (props) {
         return props.children;
     };
@@ -27,9 +27,6 @@ const clientRender = async () => {
                         const WrappedComponent = wrapComponent(component);
                         return (React.createElement(Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
                     })))))), document.getElementById('app'));
-    if (!window.__USE_VITE__) {
-        (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
-    }
 };
 if (!window.__disableClientRender__) {
     // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.2.13",
+  "version": "6.2.14",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -34,6 +34,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.5.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@vitejs/plugin-react": "^1.0.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-import": "1.13.3",
@@ -54,10 +55,11 @@
     "postcss-preset-env": "^7.0.0",
     "postcss-safe-parser": "^6.0.0",
     "react": "^17.0.1",
+    "react-dev-utils": "^11.0.4",
     "react-dom": "^17.0.0",
+    "react-refresh": "^0.12.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.1.2",
-    "react-dev-utils": "^11.0.4",
     "serialize-javascript": "^6.0.0",
     "ssr-client-utils": "^6.2.7",
     "ssr-hoc-react": "^6.2.7",

package/src/config/base.ts

@@ -9,8 +9,8 @@ const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-p
 const WebpackBar = require('webpackbar')
 const loadModule = loadModuleFromFramework
 
-const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any) => {
-  const { babelOptions } = loadConfig()
+const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any, isServer: boolean) => {
+  const { babelOptions, isDev } = loadConfig()
   chain.use('babel-loader')
     .loader(loadModule('babel-loader'))
     .options({
@@ -42,7 +42,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
         [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
         [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
         ...babelOptions?.plugins ?? []
-      ]
+      ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
     .end()
 }
@@ -106,8 +106,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     babelForExtraModule = module.end().exclude.add(/core-js/).end()
   }
 
-  addBabelLoader(babelModule, envOptions)
-  addBabelLoader(babelForExtraModule, envOptions)
+  addBabelLoader(babelModule, envOptions, isServer)
+  addBabelLoader(babelForExtraModule, envOptions, isServer)
 
   setStyle(chain, /\.css$/, {
     rule: 'css',

package/src/config/client.ts

@@ -7,12 +7,13 @@ import { getBaseConfig } from './base'
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
 const safePostCssParser = require('postcss-safe-parser')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS)
 const loadModule = loadModuleFromFramework
 let asyncChunkMap: Record<string, string[]> = {}
 
 const getClientWebpack = (chain: WebpackChain) => {
-  const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig()
+  const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig()
   const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
   const publicPath = getOutputPublicPath()
   getBaseConfig(chain, false)
@@ -92,6 +93,15 @@ const getClientWebpack = (chain: WebpackChain) => {
   chain.when(generateAnalysis, chain => {
     chain.plugin('analyze').use(BundleAnalyzerPlugin)
   })
+  chain.when(isDev, chain => {
+    chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockHost: host,
+        sockPort: fePort
+      }
+    }))
+  })
+
   chain.plugin('WriteAsyncManifest').use(
     class WriteAsyncChunkManifest {
       apply (compiler: any) {

package/src/entry/client-entry.tsx

@@ -9,7 +9,6 @@ import { AppContext } from './context'
 
 const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes as ReactRoutesType
 
-declare const module: any
 declare const window: IWindow
 
 const clientRender = async (): Promise<void> => {
@@ -44,9 +43,6 @@ const clientRender = async (): Promise<void> => {
     </BrowserRouter>
     , document.getElementById('app'))
 
-  if (!window.__USE_VITE__) {
-    module?.hot?.accept?.() // webpack 场景下的 hmr
-  }
 }
 if (!window.__disableClientRender__) {
   // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层