ssr-plugin-react 6.2.12 → 6.2.15

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## [6.2.15](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.14...plugin-react@6.2.15) (2022-04-27)
+
+
+### Bug Fixes
+
+* ci ([57e713f](https://github.com/zhangyuang/ssr/commit/57e713f1f96b4ceb893837c15c6032b23a0b1a4c))
+* whitList concat userconfig ([fdd971a](https://github.com/zhangyuang/ssr/commit/fdd971ab11aebc0f348d789e758183b877e791af))
+* whitList concat userconfig ([e2328f8](https://github.com/zhangyuang/ssr/commit/e2328f87f5cfc18c9a30867e4f6e18d0df5c1ba3))
+
+
+### Features
+
+* add ssr-serialize-javascript code optimize ([41bb14d](https://github.com/zhangyuang/ssr/commit/41bb14d31efd89d4a85d5220544d2f7a3883e1a3))
+* support props.ssrApp in vue3 ([8985037](https://github.com/zhangyuang/ssr/commit/898503753cbe69187d27f91c70dff3f4cd4a0b2a))
+
+
+
+## [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)
+
+
+### Features
+
+* update extraJsOrder extraCssOrder ([cd5ca99](https://github.com/zhangyuang/ssr/commit/cd5ca99a686ea565020500a6c4f77e310b422ce3))
+* update midway deploy ([a473c59](https://github.com/zhangyuang/ssr/commit/a473c599657df42b4bf7a59f248b3c7c33907657))
+* update plugin-vue3 support call pinia in fetch.ts ([958fdc7](https://github.com/zhangyuang/ssr/commit/958fdc787ab615593f3114a6bf2c6cea4823afc2))
+* upgrade midway example to v3 ([572f7c5](https://github.com/zhangyuang/ssr/commit/572f7c5d171346cc17f5f6cdebe33aee76e0c146))
+
+
+
 ## 6.2.12 (2022-04-15)
 
 

package/cjs/config/base.d.ts

@@ -1,3 +1,4 @@
 import * as WebpackChain from 'webpack-chain';
-declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => IConfig;
+declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => import("ssr-types-react").IConfig;
 export { getBaseConfig };
+//# sourceMappingURL=base.d.ts.map

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,
@@ -138,3 +138,4 @@ const getBaseConfig = (chain, isServer) => {
     return config;
 };
 exports.getBaseConfig = getBaseConfig;
+//# sourceMappingURL=base.js.map

package/cjs/config/client.d.ts

@@ -2,3 +2,4 @@
 import * as WebpackChain from 'webpack-chain';
 declare const getClientWebpack: (chain: WebpackChain) => import("webpack").Configuration;
 export { getClientWebpack };
+//# sourceMappingURL=client.d.ts.map

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 () => {
@@ -105,3 +114,4 @@ const getClientWebpack = (chain) => {
     return chain.toConfig();
 };
 exports.getClientWebpack = getClientWebpack;
+//# sourceMappingURL=client.js.map

package/cjs/config/index.d.ts

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './server';
+//# sourceMappingURL=index.d.ts.map

package/cjs/config/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./client"), exports);
 __exportStar(require("./server"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/config/server.d.ts

@@ -2,3 +2,4 @@ import * as WebpackChain from 'webpack-chain';
 import * as webpack from 'webpack';
 declare const getServerWebpack: (chain: WebpackChain) => webpack.Configuration;
 export { getServerWebpack };
+//# sourceMappingURL=server.d.ts.map

package/cjs/config/server.js

@@ -35,3 +35,4 @@ const getServerWebpack = (chain) => {
     return chain.toConfig();
 };
 exports.getServerWebpack = getServerWebpack;
+//# sourceMappingURL=server.js.map

package/cjs/entry/client-entry.d.ts

@@ -1,2 +1,3 @@
 declare const clientRender: () => Promise<void>;
 export { clientRender };
+//# sourceMappingURL=client-entry.d.ts.map

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__) {
@@ -40,3 +37,4 @@ if (!window.__disableClientRender__) {
     // 可用于微前端场景下自定义什么时候进行组件渲染的逻辑调用
     clientRender();
 }
+//# sourceMappingURL=client-entry.js.map

package/cjs/entry/context.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { IProps } from 'ssr-types-react';
 export declare function AppContext(props: IProps): JSX.Element;
+//# sourceMappingURL=context.d.ts.map

package/cjs/entry/context.js

@@ -29,3 +29,4 @@ function AppContext(props) {
     return (React.createElement(create_context_1.STORE_CONTEXT.Provider, { value: { state, dispatch } }, props.children));
 }
 exports.AppContext = AppContext;
+//# sourceMappingURL=context.js.map

package/cjs/entry/create-context.d.ts

@@ -2,3 +2,4 @@ import { Context } from 'react';
 import { IContext } from 'ssr-types-react';
 declare let STORE_CONTEXT: Context<IContext>;
 export { STORE_CONTEXT };
+//# sourceMappingURL=create-context.d.ts.map

package/cjs/entry/create-context.js

@@ -17,3 +17,4 @@ else {
         state: {}
     });
 }
+//# sourceMappingURL=create-context.js.map

package/cjs/entry/create-router.d.ts

@@ -1,3 +1,4 @@
 import { ReactRoutesType } from 'ssr-types-react';
 declare const Routes: ReactRoutesType;
 export { Routes };
+//# sourceMappingURL=create-router.d.ts.map

package/cjs/entry/create-router.js

@@ -24,3 +24,4 @@ if (ManualRoutesWithType.FeRoutes) {
     });
     Routes.FeRoutes = combineRoutes;
 }
+//# sourceMappingURL=create-router.js.map

package/cjs/entry/server-entry.d.ts

@@ -2,3 +2,4 @@ import * as React from 'react';
 import { ISSRContext, IConfig } from 'ssr-types-react';
 declare const serverRender: (ctx: ISSRContext, config: IConfig) => Promise<React.ReactElement>;
 export { serverRender };
+//# sourceMappingURL=server-entry.d.ts.map

package/cjs/entry/server-entry.js

@@ -4,18 +4,16 @@ exports.serverRender = void 0;
 const React = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const ssr_server_utils_1 = require("ssr-server-utils");
-// @ts-expect-error
-const serializeWrap = require("serialize-javascript");
+const ssr_serialize_javascript_1 = require("ssr-serialize-javascript");
 // @ts-expect-error
 const create_context_1 = require("_build/create-context");
 // @ts-expect-error
 const index_tsx_1 = require("@/components/layout/index.tsx");
 const create_router_1 = require("./create-router");
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = create_router_1.Routes;
-const serialize = serializeWrap.default || serializeWrap;
 const serverRender = async (ctx, config) => {
     var _a;
-    const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
+    const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
     let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
     const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
     if (base) {
@@ -28,24 +26,15 @@ const serverRender = async (ctx, config) => {
     If you create new folder or component file, please restart server by npm start
     `);
     }
-    let dynamicCssOrder = cssOrder;
-    if (dynamic) {
-        dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`]);
-        if (!isVite || (isVite && !isDev)) {
-            // call it when webpack mode or vite prod mode
-            dynamicCssOrder = await (0, ssr_server_utils_1.addAsyncChunk)(dynamicCssOrder, routeItem.webpackChunkName);
-        }
-    }
+    const { fetch, webpackChunkName, component } = routeItem;
+    const dynamicCssOrder = await (0, ssr_server_utils_1.getAsyncCssChunk)(ctx, webpackChunkName);
+    const dynamicJsOrder = await (0, ssr_server_utils_1.getAsyncJsChunk)(ctx);
     const manifest = await (0, ssr_server_utils_1.getManifest)(config);
     const injectCss = [];
     if (isVite && isDev) {
         injectCss.push(React.createElement("script", { src: "/@vite/client", type: "module", key: "vite-client" }));
         injectCss.push(React.createElement("script", { key: "vite-react-refresh", type: "module", dangerouslySetInnerHTML: {
-                __html: ` import RefreshRuntime from "/@react-refresh"
-      RefreshRuntime.injectIntoGlobalHook(window)
-      window.$RefreshReg$ = () => {}
-      window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true`
+                __html: ssr_server_utils_1.reactRefreshFragment
             } }));
     }
     else {
@@ -66,14 +55,13 @@ const serverRender = async (ctx, config) => {
                 __html: 'window.__USE_VITE__=true'
             } }),
         (isVite && isDev) && React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" }),
-        ...jsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
+        ...dynamicJsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
     ];
     const staticList = {
         injectCss,
         injectScript
     };
     const isCsr = !!(mode === 'csr' || ((_a = ctx.request.query) === null || _a === void 0 ? void 0 : _a.csr));
-    const { component, fetch } = routeItem;
     const Component = isCsr ? React.Fragment : (await component()).default;
     if (isCsr) {
         (0, ssr_server_utils_1.logGreen)(`Current path ${path} use csr render mode`);
@@ -96,7 +84,7 @@ const serverRender = async (ctx, config) => {
     }
     const combineData = isCsr ? null : Object.assign(state !== null && state !== void 0 ? state : {}, layoutFetchData !== null && layoutFetchData !== void 0 ? layoutFetchData : {}, fetchData !== null && fetchData !== void 0 ? fetchData : {});
     const injectState = isCsr ? null : React.createElement("script", { dangerouslySetInnerHTML: {
-            __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; ${base && `window.prefix="${base}"`};${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
+            __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${(0, ssr_serialize_javascript_1.serialize)(combineData)}; ${base && `window.prefix="${base}"`};${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
         } });
     return (React.createElement(react_router_dom_1.StaticRouter, { location: ctx.request.url },
         React.createElement(create_context_1.STORE_CONTEXT.Provider, { value: { state: combineData } },
@@ -104,3 +92,4 @@ const serverRender = async (ctx, config) => {
                 React.createElement(Component, null)))));
 };
 exports.serverRender = serverRender;
+//# sourceMappingURL=server-entry.js.map

package/cjs/index.d.ts

@@ -4,3 +4,4 @@ export declare function clientPlugin(): {
     build: () => Promise<void>;
 };
 export * from './tools/vite';
+//# sourceMappingURL=index.d.ts.map

package/cjs/index.js

@@ -44,3 +44,4 @@ function clientPlugin() {
 }
 exports.clientPlugin = clientPlugin;
 __exportStar(require("./tools/vite"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/tools/vite.d.ts

@@ -4,3 +4,4 @@ declare const clientConfig: UserConfig;
 declare const viteStart: () => Promise<void>;
 declare const viteBuild: () => Promise<void>;
 export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=vite.d.ts.map

package/cjs/tools/vite.js

@@ -97,3 +97,4 @@ const viteBuild = async () => {
     await (0, vite_1.build)({ ...serverConfig, mode: 'production' });
 };
 exports.viteBuild = viteBuild;
+//# sourceMappingURL=vite.js.map

package/cjs/tools/webpack.d.ts

@@ -1,2 +1,3 @@
 export declare const webpackStart: () => Promise<void>;
 export declare const webpackBuild: () => Promise<void>;
+//# sourceMappingURL=webpack.d.ts.map

package/cjs/tools/webpack.js

@@ -20,3 +20,4 @@ const webpackBuild = async () => {
     await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
 };
 exports.webpackBuild = webpackBuild;
+//# sourceMappingURL=webpack.js.map

package/esm/config/base.d.ts

@@ -1,3 +1,4 @@
 import * as WebpackChain from 'webpack-chain';
-declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => IConfig;
+declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => import("ssr-types-react").IConfig;
 export { getBaseConfig };
+//# sourceMappingURL=base.d.ts.map

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,
@@ -135,3 +135,4 @@ const getBaseConfig = (chain, isServer) => {
     return config;
 };
 export { getBaseConfig };
+//# sourceMappingURL=base.js.map

package/esm/config/client.d.ts

@@ -2,3 +2,4 @@
 import * as WebpackChain from 'webpack-chain';
 declare const getClientWebpack: (chain: WebpackChain) => import("webpack").Configuration;
 export { getClientWebpack };
+//# sourceMappingURL=client.d.ts.map

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 () => {
@@ -102,3 +111,4 @@ const getClientWebpack = (chain) => {
     return chain.toConfig();
 };
 export { getClientWebpack };
+//# sourceMappingURL=client.js.map

package/esm/config/index.d.ts

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './server';
+//# sourceMappingURL=index.d.ts.map

package/esm/config/index.js

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './server';
+//# sourceMappingURL=index.js.map

package/esm/config/server.d.ts

@@ -2,3 +2,4 @@ import * as WebpackChain from 'webpack-chain';
 import * as webpack from 'webpack';
 declare const getServerWebpack: (chain: WebpackChain) => webpack.Configuration;
 export { getServerWebpack };
+//# sourceMappingURL=server.d.ts.map

package/esm/config/server.js

@@ -32,3 +32,4 @@ const getServerWebpack = (chain) => {
     return chain.toConfig();
 };
 export { getServerWebpack };
+//# sourceMappingURL=server.js.map

package/esm/entry/client-entry.d.ts

@@ -1,2 +1,3 @@
 declare const clientRender: () => Promise<void>;
 export { clientRender };
+//# sourceMappingURL=client-entry.d.ts.map

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__) {
     // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层
@@ -37,3 +34,4 @@ if (!window.__disableClientRender__) {
     clientRender();
 }
 export { clientRender };
+//# sourceMappingURL=client-entry.js.map

package/esm/entry/context.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { IProps } from 'ssr-types-react';
 export declare function AppContext(props: IProps): JSX.Element;
+//# sourceMappingURL=context.d.ts.map

package/esm/entry/context.js

@@ -25,3 +25,4 @@ export function AppContext(props) {
     const [state, dispatch] = useReducer(combineReducer, initialState);
     return (React.createElement(STORE_CONTEXT.Provider, { value: { state, dispatch } }, props.children));
 }
+//# sourceMappingURL=context.js.map

package/esm/entry/create-context.d.ts

@@ -2,3 +2,4 @@ import { Context } from 'react';
 import { IContext } from 'ssr-types-react';
 declare let STORE_CONTEXT: Context<IContext>;
 export { STORE_CONTEXT };
+//# sourceMappingURL=create-context.d.ts.map

package/esm/entry/create-context.js

@@ -14,3 +14,4 @@ else {
     });
 }
 export { STORE_CONTEXT };
+//# sourceMappingURL=create-context.js.map

package/esm/entry/create-router.d.ts

@@ -1,3 +1,4 @@
 import { ReactRoutesType } from 'ssr-types-react';
 declare const Routes: ReactRoutesType;
 export { Routes };
+//# sourceMappingURL=create-router.d.ts.map

package/esm/entry/create-router.js

@@ -21,3 +21,4 @@ if (ManualRoutesWithType.FeRoutes) {
     Routes.FeRoutes = combineRoutes;
 }
 export { Routes };
+//# sourceMappingURL=create-router.js.map

package/esm/entry/server-entry.d.ts

@@ -2,3 +2,4 @@ import * as React from 'react';
 import { ISSRContext, IConfig } from 'ssr-types-react';
 declare const serverRender: (ctx: ISSRContext, config: IConfig) => Promise<React.ReactElement>;
 export { serverRender };
+//# sourceMappingURL=server-entry.d.ts.map

package/esm/entry/server-entry.js

@@ -1,18 +1,16 @@
 import * as React from 'react';
 import { StaticRouter } from 'react-router-dom';
-import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils';
-// @ts-expect-error
-import * as serializeWrap from 'serialize-javascript';
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, reactRefreshFragment } from 'ssr-server-utils';
+import { serialize } from 'ssr-serialize-javascript';
 // @ts-expect-error
 import { STORE_CONTEXT as Context } from '_build/create-context';
 // @ts-expect-error
 import Layout from '@/components/layout/index.tsx';
 import { Routes } from './create-router';
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes;
-const serialize = serializeWrap.default || serializeWrap;
 const serverRender = async (ctx, config) => {
     var _a;
-    const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
+    const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
     let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
     const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
     if (base) {
@@ -25,24 +23,15 @@ const serverRender = async (ctx, config) => {
     If you create new folder or component file, please restart server by npm start
     `);
     }
-    let dynamicCssOrder = cssOrder;
-    if (dynamic) {
-        dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`]);
-        if (!isVite || (isVite && !isDev)) {
-            // call it when webpack mode or vite prod mode
-            dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName);
-        }
-    }
+    const { fetch, webpackChunkName, component } = routeItem;
+    const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName);
+    const dynamicJsOrder = await getAsyncJsChunk(ctx);
     const manifest = await getManifest(config);
     const injectCss = [];
     if (isVite && isDev) {
         injectCss.push(React.createElement("script", { src: "/@vite/client", type: "module", key: "vite-client" }));
         injectCss.push(React.createElement("script", { key: "vite-react-refresh", type: "module", dangerouslySetInnerHTML: {
-                __html: ` import RefreshRuntime from "/@react-refresh"
-      RefreshRuntime.injectIntoGlobalHook(window)
-      window.$RefreshReg$ = () => {}
-      window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true`
+                __html: reactRefreshFragment
             } }));
     }
     else {
@@ -63,14 +52,13 @@ const serverRender = async (ctx, config) => {
                 __html: 'window.__USE_VITE__=true'
             } }),
         (isVite && isDev) && React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" }),
-        ...jsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
+        ...dynamicJsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
     ];
     const staticList = {
         injectCss,
         injectScript
     };
     const isCsr = !!(mode === 'csr' || ((_a = ctx.request.query) === null || _a === void 0 ? void 0 : _a.csr));
-    const { component, fetch } = routeItem;
     const Component = isCsr ? React.Fragment : (await component()).default;
     if (isCsr) {
         logGreen(`Current path ${path} use csr render mode`);
@@ -101,3 +89,4 @@ const serverRender = async (ctx, config) => {
                 React.createElement(Component, null)))));
 };
 export { serverRender };
+//# sourceMappingURL=server-entry.js.map

package/esm/index.d.ts

@@ -4,3 +4,4 @@ export declare function clientPlugin(): {
     build: () => Promise<void>;
 };
 export * from './tools/vite';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.js

@@ -26,3 +26,4 @@ export function clientPlugin() {
     };
 }
 export * from './tools/vite';
+//# sourceMappingURL=index.js.map

package/esm/tools/vite.d.ts

@@ -4,3 +4,4 @@ declare const clientConfig: UserConfig;
 declare const viteStart: () => Promise<void>;
 declare const viteBuild: () => Promise<void>;
 export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=vite.d.ts.map

package/esm/tools/vite.js

@@ -91,3 +91,4 @@ const viteBuild = async () => {
     await build({ ...serverConfig, mode: 'production' });
 };
 export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=vite.js.map

package/esm/tools/webpack.d.ts

@@ -1,2 +1,3 @@
 export declare const webpackStart: () => Promise<void>;
 export declare const webpackBuild: () => Promise<void>;
+//# sourceMappingURL=webpack.d.ts.map

package/esm/tools/webpack.js

@@ -15,3 +15,4 @@ export const webpackBuild = async () => {
     const clientConfigChain = new WebpackChain();
     await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
 };
+//# sourceMappingURL=webpack.js.map

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.2.12",
+  "version": "6.2.15",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently \"tsc -p ./tsconfig.cjs.json --inlineSourceMap false\" \" tsc -p ./tsconfig.esm.json --inlineSourceMap false\"",
-    "build:only": "concurrently \"tsc-transpile-only --skipLibCheck -p ./tsconfig.cjs.json --inlineSourceMap false\" \" tsc-transpile-only --skipLibCheck -p ./tsconfig.esm.json --inlineSourceMap false\"",
-    "watch": "concurrently \"tsc -w -p ./tsconfig.cjs.json \" \"tsc -w -p ./tsconfig.esm.json \"",
-    "watch:cjs": "tsc -w -p ./tsconfig.cjs.json"
+    "build": "concurrently \"tsc -p ./tsconfig.cjs.json \" \" tsc -p ./tsconfig.esm.json\"",
+    "watch": "concurrently \"tsc -w -p ./tsconfig.cjs.json \" \"tsc -w -p ./tsconfig.esm.json \""
   },
   "repository": {
     "type": "git",
@@ -34,6 +32,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,11 +53,12 @@
     "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-serialize-javascript": "^6.0.0",
     "ssr-client-utils": "^6.2.7",
     "ssr-hoc-react": "^6.2.7",
     "ssr-server-utils": "^6.2.10",
@@ -79,7 +79,6 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/webpack": "^4.41.10",
     "concurrently": "^5.1.0",
-    "ssr-types": "^6.2.3",
     "ssr-types-react": "^6.2.7"
   }
 }

package/src/config/base.ts

@@ -1,6 +1,6 @@
 
 import { join } from 'path'
-import { Mode } from 'ssr-types'
+import { Mode } from 'ssr-types-react'
 import { getCwd, loadConfig, getLocalNodeModules, setStyle, addImageChain, loadModuleFromFramework } from 'ssr-server-utils'
 import * as WebpackChain from 'webpack-chain'
 import * as webpack from 'webpack'
@@ -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__) {
   // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层

package/src/entry/server-entry.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
-import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils'
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, reactRefreshFragment } from 'ssr-server-utils'
 import { ISSRContext, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
-// @ts-expect-error
-import * as serializeWrap from 'serialize-javascript'
+import { serialize } from 'ssr-serialize-javascript'
 // @ts-expect-error
 import { STORE_CONTEXT as Context } from '_build/create-context'
 // @ts-expect-error
@@ -11,10 +10,9 @@ import Layout from '@/components/layout/index.tsx'
 import { Routes } from './create-router'
 
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes as ReactRoutesType
-const serialize = serializeWrap.default || serializeWrap
 
 const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.ReactElement> => {
-  const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config
+  const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config
   let path = ctx.request.path // 这里取 pathname 不能够包含 queryString
   const base = prefix ?? PrefixRouterBase // 以开发者实际传入的为最高优先级
   if (base) {
@@ -29,15 +27,9 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
     `)
   }
 
-  let dynamicCssOrder = cssOrder
-
-  if (dynamic) {
-    dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`])
-    if (!isVite || (isVite && !isDev)) {
-      // call it when webpack mode or vite prod mode
-      dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName)
-    }
-  }
+  const { fetch, webpackChunkName, component } = routeItem
+  const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName)
+  const dynamicJsOrder = await getAsyncJsChunk(ctx)
   const manifest = await getManifest(config)
 
   const injectCss: JSX.Element[] = []
@@ -45,11 +37,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   if (isVite && isDev) {
     injectCss.push(<script src="/@vite/client" type="module" key="vite-client"/>)
     injectCss.push(<script key="vite-react-refresh" type="module" dangerouslySetInnerHTML={{
-      __html: ` import RefreshRuntime from "/@react-refresh"
-      RefreshRuntime.injectIntoGlobalHook(window)
-      window.$RefreshReg$ = () => {}
-      window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true`
+      __html: reactRefreshFragment
     }} />)
   } else {
     dynamicCssOrder.forEach(css => {
@@ -71,7 +59,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
       __html: 'window.__USE_VITE__=true'
     }} />,
     (isVite && isDev) && <script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />,
-    ...jsOrder.map(js => manifest[js]).map(item => item && <script key={item} src={item} type={isVite ? 'module' : ''}/>)
+    ...dynamicJsOrder.map(js => manifest[js]).map(item => item && <script key={item} src={item} type={isVite ? 'module' : ''}/>)
   ]
   const staticList = {
     injectCss,
@@ -79,7 +67,6 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   }
 
   const isCsr = !!(mode === 'csr' || ctx.request.query?.csr)
-  const { component, fetch } = routeItem
   const Component = isCsr ? React.Fragment : (await component()).default
 
   if (isCsr) {