ssr-plugin-react 6.1.12 → 6.1.16

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.16](https://github.com/zhangyuang/ssr/compare/v6.1.15...v6.1.16) (2021-12-06)
+
+
+### Bug Fixes
+
+* add keepNames when esbuild compile plugin-react jsxRuntime use classic ([8502e6c](https://github.com/zhangyuang/ssr/commit/8502e6ca898fd99e936e60af2093fb6b174f6aab))
+* component evaluating in csr mode ([#138](https://github.com/zhangyuang/ssr/issues/138)) ([66f5f09](https://github.com/zhangyuang/ssr/commit/66f5f09963502588bd59a09ff839d1dae8947817))
+* plugin-react csr ([572c6c0](https://github.com/zhangyuang/ssr/commit/572c6c092c63c915da15883e1d34ad26a5a6cadd))
+* plugin-react csr ([ab51062](https://github.com/zhangyuang/ssr/commit/ab510626946234de436a55184937d018c8c0e514))
+
+
+
+
+
+## [6.1.15](https://github.com/zhangyuang/ssr/compare/v6.1.14...v6.1.15) (2021-12-05)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
+## [6.1.14](https://github.com/zhangyuang/ssr/compare/v6.1.14-alpha.0...v6.1.14) (2021-12-05)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
+## [6.1.14-alpha.0](https://github.com/zhangyuang/ssr/compare/v5.7.3...v6.1.14-alpha.0) (2021-12-04)
+
+
+### Bug Fixes
+
+*  boolean GENERATE_SOURCEMAP ([#133](https://github.com/zhangyuang/ssr/issues/133)) ([dbaeed8](https://github.com/zhangyuang/ssr/commit/dbaeed8efcf3d232c5754b2cfd6f3a664596610c))
+* create-context in vite ([109fc6c](https://github.com/zhangyuang/ssr/commit/109fc6ce2ebd73c67b003d5b74c732ad46bee64c))
+* restore staicRouter ([1150a6c](https://github.com/zhangyuang/ssr/commit/1150a6c4e4fe17d4416e35d619f8aac10837a7b8))
+
+
+### Features
+
+* add location prop to StaticRouter ([#137](https://github.com/zhangyuang/ssr/issues/137)) ([301f997](https://github.com/zhangyuang/ssr/commit/301f9975ff08a94b8e792e36587c32796cf477ac))
+* update plugin-react fetch params ([243c847](https://github.com/zhangyuang/ssr/commit/243c847c994032a3dc203bdee6c284b34b39dbfb))
+* vite ([#127](https://github.com/zhangyuang/ssr/issues/127)) ([917e24f](https://github.com/zhangyuang/ssr/commit/917e24f1e9add29ceb7ed540029238f1d40defc3))
+
+
+
+
+
 ## [6.1.12](https://github.com/zhangyuang/ssr/compare/ssr-plugin-react@6.1.11...ssr-plugin-react@6.1.12) (2021-12-02)
 
 **Note:** Version bump only for package ssr-plugin-react

package/cjs/entry/create-context.js

@@ -1,20 +1,19 @@
 "use strict";
 // @ts-nocheck
 // The file is provisional，don't depend on it
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.STORE_CONTEXT = void 0;
 const react_1 = require("react");
 let STORE_CONTEXT;
 exports.STORE_CONTEXT = STORE_CONTEXT;
 if (__isBrowser__) {
-    exports.STORE_CONTEXT = STORE_CONTEXT = (_a = window.STORE_CONTEXT) !== null && _a !== void 0 ? _a : (0, react_1.createContext)({
+    exports.STORE_CONTEXT = STORE_CONTEXT = window.STORE_CONTEXT || react_1.default.createContext({
         state: {}
     });
     window.STORE_CONTEXT = STORE_CONTEXT;
 }
 else {
-    exports.STORE_CONTEXT = STORE_CONTEXT = (0, react_1.createContext)({
+    exports.STORE_CONTEXT = STORE_CONTEXT = react_1.default.createContext({
         state: {}
     });
 }

package/cjs/entry/server-entry.js

@@ -4,7 +4,8 @@ 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");
-const serialize = require("serialize-javascript");
+//@ts-expect-error
+const serializeWrap = require("serialize-javascript");
 // @ts-expect-error
 const Routes = require("_build/ssr-temporary-routes");
 // @ts-expect-error
@@ -12,17 +13,16 @@ const create_context_1 = require("_build/create-context");
 // @ts-expect-error
 const index_tsx_1 = require("@/components/layout/index.tsx");
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes;
+const serialize = serializeWrap.default || serializeWrap;
 const serverRender = async (ctx, config) => {
-    var _a, _b;
-    const { cssOrder, jsOrder, dynamic, mode, chunkName, parallelFetch, disableClientRender, prefix } = config;
-    global.window = (_a = global.window) !== null && _a !== void 0 ? _a : {}; // 防止覆盖上层应用自己定义的 window 对象
+    var _a;
+    const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev } = config;
     let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
     const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
     if (base) {
         path = (0, ssr_server_utils_1.normalizePath)(path, base);
     }
     const routeItem = (0, ssr_server_utils_1.findRoute)(FeRoutes, path);
-    const viteMode = process.env.BUILD_TOOL === 'vite';
     if (!routeItem) {
         throw new Error(`
     查找组件失败，请确认当前 path: ${path} 对应前端组件是否存在
@@ -30,13 +30,15 @@ const serverRender = async (ctx, config) => {
     `);
     }
     let dynamicCssOrder = cssOrder;
-    if (dynamic && !viteMode) {
+    if (dynamic) {
         dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`]);
-        dynamicCssOrder = await (0, ssr_server_utils_1.addAsyncChunk)(dynamicCssOrder, routeItem.webpackChunkName);
+        if (!isVite) {
+            dynamicCssOrder = await (0, ssr_server_utils_1.addAsyncChunk)(dynamicCssOrder, routeItem.webpackChunkName);
+        }
     }
-    const manifest = viteMode ? {} : await (0, ssr_server_utils_1.getManifest)();
+    const manifest = await (0, ssr_server_utils_1.getManifest)(config);
     const injectCss = [];
-    if (viteMode) {
+    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"
@@ -45,7 +47,6 @@ const serverRender = async (ctx, config) => {
       window.$RefreshSig$ = () => (type) => type
       window.__vite_plugin_react_preamble_installed__ = true`
             } }));
-        injectCss.push(React.createElement("link", { rel: 'stylesheet', href: `/server/static/css/${chunkName}.css`, key: "vite-head-css" }));
     }
     else {
         dynamicCssOrder.forEach(css => {
@@ -60,20 +61,20 @@ const serverRender = async (ctx, config) => {
                 __html: 'window.__disableClientRender__ = true'
             } }));
     }
-    const injectScript = viteMode ? [
-        React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
+    const injectScript = [
+        isVite && React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
                 __html: 'window.__USE_VITE__=true'
             } }),
-        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 => React.createElement("script", { key: item, src: item }));
+        (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' : '' }))
+    ];
     const staticList = {
         injectCss,
         injectScript
     };
-    const isCsr = !!(mode === 'csr' || ((_b = ctx.request.query) === null || _b === void 0 ? void 0 : _b.csr));
+    const isCsr = !!(mode === 'csr' || ((_a = ctx.request.query) === null || _a === void 0 ? void 0 : _a.csr));
     const { component, fetch } = routeItem;
-    const Component = (await component()).default;
+    const Component = isCsr ? React.Fragment : (await component()).default;
     if (isCsr) {
         (0, ssr_server_utils_1.logGreen)(`Current path ${path} use csr render mode`);
     }
@@ -99,6 +100,7 @@ const serverRender = async (ctx, config) => {
         } });
     return (React.createElement(react_router_dom_1.StaticRouter, { location: ctx.request.url },
         React.createElement(create_context_1.STORE_CONTEXT.Provider, { value: { state: combineData } },
-            React.createElement(index_tsx_1.default, { ctx: ctx, config: config, staticList: staticList, injectState: injectState }, isCsr ? React.createElement(React.Fragment, null) : React.createElement(Component, null)))));
+            React.createElement(index_tsx_1.default, { ctx: ctx, config: config, staticList: staticList, injectState: injectState },
+                React.createElement(Component, null)))));
 };
 exports.serverRender = serverRender;

package/cjs/index.d.ts

@@ -3,3 +3,4 @@ export declare function reactPlugin(): {
     start: () => Promise<void>;
     build: () => Promise<void>;
 };
+export * from './tools/vite';

package/cjs/index.js

@@ -1,32 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactPlugin = void 0;
-const WebpackChain = require("webpack-chain");
+const ssr_server_utils_1 = require("ssr-server-utils");
+const { isVite } = (0, ssr_server_utils_1.loadConfig)();
 function reactPlugin() {
     return {
         name: 'plugin-react',
         start: async () => {
-            // 本地开发的时候要做细致的依赖分离， Vite 场景不需要去加载 Webpack 构建客户端应用所需的模块
-            const { startServerBuild } = await Promise.resolve().then(() => require('ssr-webpack/cjs/server'));
-            const { getServerWebpack } = await Promise.resolve().then(() => require('./config/server'));
-            const serverConfigChain = new WebpackChain();
-            if (process.env.BUILD_TOOL === 'vite') {
-                await startServerBuild(getServerWebpack(serverConfigChain));
+            if (isVite) {
+                const { viteStart } = await Promise.resolve().then(() => require('./tools/vite'));
+                await viteStart();
             }
             else {
-                const { startClientServer } = await Promise.resolve().then(() => require('ssr-webpack'));
-                const { getClientWebpack } = await Promise.resolve().then(() => require('./config'));
-                const clientConfigChain = new WebpackChain();
-                await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))]);
+                const { webpackStart } = await Promise.resolve().then(() => require('./tools/webpack'));
+                await webpackStart();
             }
         },
         build: async () => {
-            const { startServerBuild, startClientBuild } = await Promise.resolve().then(() => require('ssr-webpack'));
-            const { getClientWebpack, getServerWebpack } = await Promise.resolve().then(() => require('./config'));
-            const serverConfigChain = new WebpackChain();
-            const clientConfigChain = new WebpackChain();
-            await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
+            if (isVite) {
+                const { viteBuild } = await Promise.resolve().then(() => require('./tools/vite'));
+                await viteBuild();
+            }
+            else {
+                const { webpackBuild } = await Promise.resolve().then(() => require('./tools/webpack'));
+                await webpackBuild();
+            }
         }
     };
 }
 exports.reactPlugin = reactPlugin;
+__exportStar(require("./tools/vite"), exports);

package/cjs/tools/vite.d.ts

@@ -0,0 +1,6 @@
+import type { UserConfig } from 'vite';
+declare const serverConfig: UserConfig;
+declare const clientConfig: UserConfig;
+declare const viteStart: () => Promise<void>;
+declare const viteBuild: () => Promise<void>;
+export { viteBuild, viteStart, serverConfig, clientConfig };

package/cjs/tools/vite.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clientConfig = exports.serverConfig = exports.viteStart = exports.viteBuild = void 0;
+const ssr_server_utils_1 = require("ssr-server-utils");
+const plugin_react_1 = require("@vitejs/plugin-react");
+const build = require('vite').build;
+const { getOutput, reactServerEntry, reactClientEntry } = (0, ssr_server_utils_1.loadConfig)();
+const { clientOutPut, serverOutPut } = getOutput();
+const serverConfig = {
+    ...(0, ssr_server_utils_1.commonConfig)(),
+    plugins: [
+        (0, plugin_react_1.default)({
+            jsxRuntime: 'classic'
+        })
+    ],
+    build: {
+        ssr: reactServerEntry,
+        outDir: serverOutPut,
+        rollupOptions: {
+            output: {
+                entryFileNames: 'Page.server.js'
+            }
+        }
+    },
+    define: {
+        __isBrowser__: false
+    }
+};
+exports.serverConfig = serverConfig;
+const clientConfig = {
+    ...(0, ssr_server_utils_1.commonConfig)(),
+    esbuild: {
+        keepNames: true
+    },
+    plugins: [
+        (0, plugin_react_1.default)({
+            jsxRuntime: 'classic'
+        })
+    ],
+    build: {
+        ssrManifest: true,
+        outDir: clientOutPut,
+        rollupOptions: {
+            input: reactClientEntry,
+            output: ssr_server_utils_1.output,
+            plugins: [(0, ssr_server_utils_1.chunkNamePlugin)(), (0, ssr_server_utils_1.manifestPlugin)()]
+        }
+    },
+    define: {
+        __isBrowser__: true
+    }
+};
+exports.clientConfig = clientConfig;
+const viteStart = async () => {
+    //
+};
+exports.viteStart = viteStart;
+const viteBuild = async () => {
+    await build({ ...clientConfig, mode: 'production' });
+    await build({ ...serverConfig, mode: 'production' });
+};
+exports.viteBuild = viteBuild;

package/cjs/tools/webpack.d.ts

@@ -0,0 +1,2 @@
+export declare const webpackStart: () => Promise<void>;
+export declare const webpackBuild: () => Promise<void>;

package/cjs/tools/webpack.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpackBuild = exports.webpackStart = void 0;
+const WebpackChain = require("webpack-chain");
+const webpackStart = async () => {
+    const { startServerBuild } = await Promise.resolve().then(() => require('ssr-webpack/cjs/server'));
+    const { getServerWebpack } = await Promise.resolve().then(() => require('../config/server'));
+    const serverConfigChain = new WebpackChain();
+    const { startClientServer } = await Promise.resolve().then(() => require('ssr-webpack'));
+    const { getClientWebpack } = await Promise.resolve().then(() => require('../config'));
+    const clientConfigChain = new WebpackChain();
+    await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))]);
+};
+exports.webpackStart = webpackStart;
+const webpackBuild = async () => {
+    const { startServerBuild, startClientBuild } = await Promise.resolve().then(() => require('ssr-webpack'));
+    const { getClientWebpack, getServerWebpack } = await Promise.resolve().then(() => require('../config'));
+    const serverConfigChain = new WebpackChain();
+    const clientConfigChain = new WebpackChain();
+    await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
+};
+exports.webpackBuild = webpackBuild;

package/esm/entry/create-context.js

@@ -1,16 +1,15 @@
 // @ts-nocheck
 // The file is provisional，don't depend on it
-var _a;
-import { createContext } from 'react';
+import React from 'react';
 let STORE_CONTEXT;
 if (__isBrowser__) {
-    STORE_CONTEXT = (_a = window.STORE_CONTEXT) !== null && _a !== void 0 ? _a : createContext({
+    STORE_CONTEXT = window.STORE_CONTEXT || React.createContext({
         state: {}
     });
     window.STORE_CONTEXT = STORE_CONTEXT;
 }
 else {
-    STORE_CONTEXT = createContext({
+    STORE_CONTEXT = React.createContext({
         state: {}
     });
 }

package/esm/entry/server-entry.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { StaticRouter } from 'react-router-dom';
 import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils';
-import * as serialize from 'serialize-javascript';
+//@ts-expect-error
+import * as serializeWrap from 'serialize-javascript';
 // @ts-expect-error
 import * as Routes from '_build/ssr-temporary-routes';
 // @ts-expect-error
@@ -9,17 +10,16 @@ import { STORE_CONTEXT as Context } from '_build/create-context';
 // @ts-expect-error
 import Layout from '@/components/layout/index.tsx';
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes;
+const serialize = serializeWrap.default || serializeWrap;
 const serverRender = async (ctx, config) => {
-    var _a, _b;
-    const { cssOrder, jsOrder, dynamic, mode, chunkName, parallelFetch, disableClientRender, prefix } = config;
-    global.window = (_a = global.window) !== null && _a !== void 0 ? _a : {}; // 防止覆盖上层应用自己定义的 window 对象
+    var _a;
+    const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev } = config;
     let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
     const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
     if (base) {
         path = normalizePath(path, base);
     }
     const routeItem = findRoute(FeRoutes, path);
-    const viteMode = process.env.BUILD_TOOL === 'vite';
     if (!routeItem) {
         throw new Error(`
     查找组件失败，请确认当前 path: ${path} 对应前端组件是否存在
@@ -27,13 +27,15 @@ const serverRender = async (ctx, config) => {
     `);
     }
     let dynamicCssOrder = cssOrder;
-    if (dynamic && !viteMode) {
+    if (dynamic) {
         dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`]);
-        dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName);
+        if (!isVite) {
+            dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName);
+        }
     }
-    const manifest = viteMode ? {} : await getManifest();
+    const manifest = await getManifest(config);
     const injectCss = [];
-    if (viteMode) {
+    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"
@@ -42,7 +44,6 @@ const serverRender = async (ctx, config) => {
       window.$RefreshSig$ = () => (type) => type
       window.__vite_plugin_react_preamble_installed__ = true`
             } }));
-        injectCss.push(React.createElement("link", { rel: 'stylesheet', href: `/server/static/css/${chunkName}.css`, key: "vite-head-css" }));
     }
     else {
         dynamicCssOrder.forEach(css => {
@@ -57,20 +58,20 @@ const serverRender = async (ctx, config) => {
                 __html: 'window.__disableClientRender__ = true'
             } }));
     }
-    const injectScript = viteMode ? [
-        React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
+    const injectScript = [
+        isVite && React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
                 __html: 'window.__USE_VITE__=true'
             } }),
-        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 => React.createElement("script", { key: item, src: item }));
+        (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' : '' }))
+    ];
     const staticList = {
         injectCss,
         injectScript
     };
-    const isCsr = !!(mode === 'csr' || ((_b = ctx.request.query) === null || _b === void 0 ? void 0 : _b.csr));
+    const isCsr = !!(mode === 'csr' || ((_a = ctx.request.query) === null || _a === void 0 ? void 0 : _a.csr));
     const { component, fetch } = routeItem;
-    const Component = (await component()).default;
+    const Component = isCsr ? React.Fragment : (await component()).default;
     if (isCsr) {
         logGreen(`Current path ${path} use csr render mode`);
     }
@@ -96,6 +97,7 @@ const serverRender = async (ctx, config) => {
         } });
     return (React.createElement(StaticRouter, { location: ctx.request.url },
         React.createElement(Context.Provider, { value: { state: combineData } },
-            React.createElement(Layout, { ctx: ctx, config: config, staticList: staticList, injectState: injectState }, isCsr ? React.createElement(React.Fragment, null) : React.createElement(Component, null)))));
+            React.createElement(Layout, { ctx: ctx, config: config, staticList: staticList, injectState: injectState },
+                React.createElement(Component, null)))));
 };
 export { serverRender };

package/esm/index.d.ts

@@ -3,3 +3,4 @@ export declare function reactPlugin(): {
     start: () => Promise<void>;
     build: () => Promise<void>;
 };
+export * from './tools/vite';

package/esm/index.js

@@ -1,28 +1,28 @@
-import * as WebpackChain from 'webpack-chain';
+import { loadConfig } from 'ssr-server-utils';
+const { isVite } = loadConfig();
 export function reactPlugin() {
     return {
         name: 'plugin-react',
         start: async () => {
-            // 本地开发的时候要做细致的依赖分离， Vite 场景不需要去加载 Webpack 构建客户端应用所需的模块
-            const { startServerBuild } = await import('ssr-webpack/cjs/server');
-            const { getServerWebpack } = await import('./config/server');
-            const serverConfigChain = new WebpackChain();
-            if (process.env.BUILD_TOOL === 'vite') {
-                await startServerBuild(getServerWebpack(serverConfigChain));
+            if (isVite) {
+                const { viteStart } = await import('./tools/vite');
+                await viteStart();
             }
             else {
-                const { startClientServer } = await import('ssr-webpack');
-                const { getClientWebpack } = await import('./config');
-                const clientConfigChain = new WebpackChain();
-                await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))]);
+                const { webpackStart } = await import('./tools/webpack');
+                await webpackStart();
             }
         },
         build: async () => {
-            const { startServerBuild, startClientBuild } = await import('ssr-webpack');
-            const { getClientWebpack, getServerWebpack } = await import('./config');
-            const serverConfigChain = new WebpackChain();
-            const clientConfigChain = new WebpackChain();
-            await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
+            if (isVite) {
+                const { viteBuild } = await import('./tools/vite');
+                await viteBuild();
+            }
+            else {
+                const { webpackBuild } = await import('./tools/webpack');
+                await webpackBuild();
+            }
         }
     };
 }
+export * from './tools/vite';

package/esm/tools/vite.d.ts

@@ -0,0 +1,6 @@
+import type { UserConfig } from 'vite';
+declare const serverConfig: UserConfig;
+declare const clientConfig: UserConfig;
+declare const viteStart: () => Promise<void>;
+declare const viteBuild: () => Promise<void>;
+export { viteBuild, viteStart, serverConfig, clientConfig };

package/esm/tools/vite.js

@@ -0,0 +1,56 @@
+import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils';
+import react from '@vitejs/plugin-react';
+const build = require('vite').build;
+const { getOutput, reactServerEntry, reactClientEntry } = loadConfig();
+const { clientOutPut, serverOutPut } = getOutput();
+const serverConfig = {
+    ...commonConfig(),
+    plugins: [
+        react({
+            jsxRuntime: 'classic'
+        })
+    ],
+    build: {
+        ssr: reactServerEntry,
+        outDir: serverOutPut,
+        rollupOptions: {
+            output: {
+                entryFileNames: 'Page.server.js'
+            }
+        }
+    },
+    define: {
+        __isBrowser__: false
+    }
+};
+const clientConfig = {
+    ...commonConfig(),
+    esbuild: {
+        keepNames: true
+    },
+    plugins: [
+        react({
+            jsxRuntime: 'classic'
+        })
+    ],
+    build: {
+        ssrManifest: true,
+        outDir: clientOutPut,
+        rollupOptions: {
+            input: reactClientEntry,
+            output: output,
+            plugins: [chunkNamePlugin(), manifestPlugin()]
+        }
+    },
+    define: {
+        __isBrowser__: true
+    }
+};
+const viteStart = async () => {
+    //
+};
+const viteBuild = async () => {
+    await build({ ...clientConfig, mode: 'production' });
+    await build({ ...serverConfig, mode: 'production' });
+};
+export { viteBuild, viteStart, serverConfig, clientConfig };

package/esm/tools/webpack.d.ts

@@ -0,0 +1,2 @@
+export declare const webpackStart: () => Promise<void>;
+export declare const webpackBuild: () => Promise<void>;

package/esm/tools/webpack.js

@@ -0,0 +1,17 @@
+import * as WebpackChain from 'webpack-chain';
+export const webpackStart = async () => {
+    const { startServerBuild } = await import('ssr-webpack/cjs/server');
+    const { getServerWebpack } = await import('../config/server');
+    const serverConfigChain = new WebpackChain();
+    const { startClientServer } = await import('ssr-webpack');
+    const { getClientWebpack } = await import('../config');
+    const clientConfigChain = new WebpackChain();
+    await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))]);
+};
+export const webpackBuild = async () => {
+    const { startServerBuild, startClientBuild } = await import('ssr-webpack');
+    const { getClientWebpack, getServerWebpack } = await import('../config');
+    const serverConfigChain = new WebpackChain();
+    const clientConfigChain = new WebpackChain();
+    await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.1.12",
+  "version": "6.1.16",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -32,6 +32,7 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.5.5",
+    "@vitejs/plugin-react": "^1.0.0",
     "babel-loader": "8.0.4",
     "babel-plugin-import": "^1.13.0",
     "babel-preset-react-app": "^9.0.2",
@@ -52,13 +53,14 @@
     "postcss-preset-env": "^6.0.5",
     "postcss-safe-parser": "4.0.1",
     "react-dev-utils": "^11.0.4",
-    "serialize-javascript": "^3.0.0",
-    "ssr-client-utils": "^5.6.42",
-    "ssr-hoc-react": "^6.0.9",
-    "ssr-server-utils": "^5.7.13",
-    "ssr-webpack": "^5.7.12",
+    "serialize-javascript": "^6.0.0",
+    "ssr-client-utils": "^6.1.15",
+    "ssr-hoc-react": "^6.1.15",
+    "ssr-server-utils": "^6.1.15",
+    "ssr-webpack": "^6.1.15",
     "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^4.1.1",
+    "vite": "^2.7.0-beta.10",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-chain": "^6.4.0",
     "webpack-manifest-plugin": "^2.2.0",
@@ -68,9 +70,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.3",
-    "@types/serialize-javascript": "^1.5.0",
     "@types/webpack": "^4.41.10",
-    "ssr-types-react": "^6.0.8"
+    "ssr-types-react": "^6.1.15"
   },
-  "gitHead": "0872b132285161bb838ef8597e3f91201d4b0ce5"
+  "gitHead": "e8e142e95ad7d0b11864bf7caf982de0c2af38d6"
 }

package/src/config/server.ts

@@ -22,7 +22,6 @@ const getServerWebpack = (chain: WebpackChain) => {
 
   const modulesDir = [join(cwd, './node_modules')]
   modulesDir.push(getLocalNodeModules())
-
   chain.externals(nodeExternals({
     whitelist: [/\.(css|less|sass|scss)$/, /antd.*?(style)/].concat(whiteList || []),
     // externals Dir contains example/xxx/node_modules ssr/node_modules

package/src/entry/create-context.ts

@@ -1,17 +1,17 @@
 // @ts-nocheck
 // The file is provisional，don't depend on it
 
-import { createContext } from 'react'
+import React from 'react'
 import { IContext } from 'ssr-types-react'
 
 let STORE_CONTEXT
 if (__isBrowser__) {
-  STORE_CONTEXT = window.STORE_CONTEXT ?? createContext<IContext>({
+  STORE_CONTEXT = window.STORE_CONTEXT || React.createContext<IContext>({
     state: {}
   })
   window.STORE_CONTEXT = STORE_CONTEXT
 } else {
-  STORE_CONTEXT = createContext<IContext>({
+  STORE_CONTEXT = React.createContext<IContext>({
     state: {}
   })
 }

package/src/entry/server-entry.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
 import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils'
-import { ISSRContext, IGlobal, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
-import * as serialize from 'serialize-javascript'
+import { ISSRContext, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
+//@ts-expect-error
+import * as serializeWrap from 'serialize-javascript'
 // @ts-expect-error
 import * as Routes from '_build/ssr-temporary-routes'
 // @ts-expect-error
@@ -11,19 +12,16 @@ import { STORE_CONTEXT as Context } from '_build/create-context'
 import Layout from '@/components/layout/index.tsx'
 
 const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes as ReactRoutesType
-
-declare const global: IGlobal
+const serialize = serializeWrap.default || serializeWrap
 
 const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.ReactElement> => {
-  const { cssOrder, jsOrder, dynamic, mode, chunkName, parallelFetch, disableClientRender, prefix } = config
-  global.window = global.window ?? {} // 防止覆盖上层应用自己定义的 window 对象
+  const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev } = config
   let path = ctx.request.path // 这里取 pathname 不能够包含 queryString
   const base = prefix ?? PrefixRouterBase // 以开发者实际传入的为最高优先级
   if (base) {
     path = normalizePath(path, base)
   }
   const routeItem = findRoute<ReactESMFeRouteItem>(FeRoutes, path)
-  const viteMode = process.env.BUILD_TOOL === 'vite'
 
   if (!routeItem) {
     throw new Error(`
@@ -34,15 +32,17 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
 
   let dynamicCssOrder = cssOrder
 
-  if (dynamic && !viteMode) {
+  if (dynamic) {
     dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`])
-    dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName)
+    if (!isVite) {
+      dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName)
+    }
   }
-  const manifest = viteMode ? {} : await getManifest()
+  const manifest = await getManifest(config)
 
   const injectCss: JSX.Element[] = []
 
-  if (viteMode) {
+  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"
@@ -51,7 +51,6 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
       window.$RefreshSig$ = () => (type) => type
       window.__vite_plugin_react_preamble_installed__ = true`
     }} />)
-    injectCss.push(<link rel='stylesheet' href={`/server/static/css/${chunkName}.css`} key="vite-head-css"/>)
   } else {
     dynamicCssOrder.forEach(css => {
       if (manifest[css]) {
@@ -67,14 +66,13 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
     }}/>)
   }
 
-  const injectScript = viteMode ? [
-    <script key="viteWindowInit" dangerouslySetInnerHTML={{
+  const injectScript = [
+    isVite && <script key="viteWindowInit" dangerouslySetInnerHTML={{
       __html: 'window.__USE_VITE__=true'
     }} />,
-    <script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />
+    (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' : ''}/>)
   ]
-    : jsOrder.map(js => manifest[js]).map(item => <script key={item} src={item} />)
-
   const staticList = {
     injectCss,
     injectScript
@@ -82,7 +80,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
 
   const isCsr = !!(mode === 'csr' || ctx.request.query?.csr)
   const { component, fetch } = routeItem
-  const Component = (await component()).default
+  const Component = isCsr ? React.Fragment : (await component()).default
 
   if (isCsr) {
     logGreen(`Current path ${path} use csr render mode`)
@@ -113,7 +111,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
     <StaticRouter location={ctx.request.url}>
       <Context.Provider value={{ state: combineData }}>
         <Layout ctx={ctx} config={config} staticList={staticList} injectState={injectState}>
-          {isCsr ? <></> : <Component />}
+          <Component />
         </Layout>
       </Context.Provider>
     </StaticRouter>

package/src/index.ts

@@ -1,28 +1,29 @@
-import * as WebpackChain from 'webpack-chain'
+import { loadConfig } from 'ssr-server-utils'
+
+const { isVite } = loadConfig()
 
 export function reactPlugin () {
   return {
     name: 'plugin-react',
     start: async () => {
-      // 本地开发的时候要做细致的依赖分离， Vite 场景不需要去加载 Webpack 构建客户端应用所需的模块
-      const { startServerBuild } = await import('ssr-webpack/cjs/server')
-      const { getServerWebpack } = await import('./config/server')
-      const serverConfigChain = new WebpackChain()
-      if (process.env.BUILD_TOOL === 'vite') {
-        await startServerBuild(getServerWebpack(serverConfigChain))
+      if (isVite) {
+        const { viteStart } = await import('./tools/vite')
+        await viteStart()
       } else {
-        const { startClientServer } = await import('ssr-webpack')
-        const { getClientWebpack } = await import('./config')
-        const clientConfigChain = new WebpackChain()
-        await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))])
+        const { webpackStart } = await import('./tools/webpack')
+        await webpackStart()
       }
     },
     build: async () => {
-      const { startServerBuild, startClientBuild } = await import('ssr-webpack')
-      const { getClientWebpack, getServerWebpack } = await import('./config')
-      const serverConfigChain = new WebpackChain()
-      const clientConfigChain = new WebpackChain()
-      await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))])
+      if (isVite) {
+        const { viteBuild } = await import('./tools/vite')
+        await viteBuild()
+      } else {
+        const { webpackBuild } = await import('./tools/webpack')
+        await webpackBuild()
+      }
     }
   }
 }
+
+export * from './tools/vite'

package/src/tools/vite.ts

@@ -0,0 +1,65 @@
+import type { build as BuildType, UserConfig } from 'vite'
+import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils'
+import react from '@vitejs/plugin-react'
+const build: typeof BuildType = require('vite').build
+const { getOutput, reactServerEntry, reactClientEntry } = loadConfig()
+const { clientOutPut, serverOutPut } = getOutput()
+
+const serverConfig: UserConfig = {
+  ...commonConfig(),
+  plugins: [
+    react({
+      jsxRuntime: 'classic'
+    })
+  ],
+  build: {
+    ssr: reactServerEntry,
+    outDir: serverOutPut,
+    rollupOptions: {
+      output: {
+        entryFileNames: 'Page.server.js'
+      }
+    }
+  },
+  define: {
+    __isBrowser__: false
+  }
+}
+
+const clientConfig: UserConfig = {
+  ...commonConfig(),
+  esbuild: {
+    keepNames: true
+  },
+  plugins: [
+    react({
+      jsxRuntime: 'classic'
+    })
+  ],
+  build: {
+    ssrManifest: true,
+    outDir: clientOutPut,
+    rollupOptions: {
+      input: reactClientEntry,
+      output: output,
+      plugins: [chunkNamePlugin(), manifestPlugin()]
+    }
+  },
+  define: {
+    __isBrowser__: true
+  }
+}
+const viteStart = async () => {
+  //
+}
+const viteBuild = async () => {
+  await build({ ...clientConfig, mode: 'production' })
+  await build({ ...serverConfig, mode: 'production' })
+}
+
+export {
+  viteBuild,
+  viteStart,
+  serverConfig,
+  clientConfig
+}

package/src/tools/webpack.ts

@@ -0,0 +1,20 @@
+import * as WebpackChain from 'webpack-chain'
+
+export const webpackStart = async () => {
+  const { startServerBuild } = await import('ssr-webpack/cjs/server')
+  const { getServerWebpack } = await import('../config/server')
+  const serverConfigChain = new WebpackChain()
+
+  const { startClientServer } = await import('ssr-webpack')
+  const { getClientWebpack } = await import('../config')
+  const clientConfigChain = new WebpackChain()
+  await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientServer(getClientWebpack(clientConfigChain))])
+}
+
+export const webpackBuild = async () => {
+  const { startServerBuild, startClientBuild } = await import('ssr-webpack')
+  const { getClientWebpack, getServerWebpack } = await import('../config')
+  const serverConfigChain = new WebpackChain()
+  const clientConfigChain = new WebpackChain()
+  await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))])
+}

package/src/config/vite.config.tpl

@@ -1,39 +0,0 @@
-// 以下为默认生成的 Vite Config 配置，为了确保应用正确运行请不要删除默认配置中的任何代码
-
-const { join } = require('path')
-const reactRefresh = require('@vitejs/plugin-react-refresh')
-const genericNames = require('generic-names')
-
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
-  plugins: [
-    reactRefresh()
-  ],
-  define: {
-    __isBrowser__: true
-  },
-  css: {
-    modules: {
-      generateScopedName: function (name, filename, css) {
-        // 对齐 css-loader 与 postcss-modules 生成 hash 方式, 不要修改
-        return genericNames('[name]__[local]___[hash:base64:5]', {
-          context: process.cwd()
-        })(name, filename)
-      }
-    }
-  },
-  resolve: {
-    alias: {
-      '@': join(process.cwd(), './web'),
-      _build: join(process.cwd(), './build')
-    },
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
-  },
-  build: {
-    rollupOptions: {
-      input: './node_modules/ssr-plugin-react/esm/entry/client-entry.js'
-    }
-  }
-}