ssr-plugin-react 6.2.10 → 6.2.13

package/cjs/config/base.js

@@ -79,6 +79,13 @@ const getBaseConfig = (chain, isServer) => {
         .exclude
         .add(/node_modules|core-js/)
         .end();
+    chain.module
+        .rule('mjs')
+        .test(/\.mjs/)
+        .include
+        .add(/node_modules/).end()
+        .type('javascript/auto')
+        .end();
     const module = chain.module
         .rule('compileBabelForExtraModule')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)

package/cjs/entry/server-entry.js

@@ -15,7 +15,7 @@ const { FeRoutes, layoutFetch, PrefixRouterBase, state } = create_router_1.Route
 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,14 +28,9 @@ 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) {
@@ -66,14 +61,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`);

package/cjs/tools/vite.js

@@ -6,7 +6,7 @@ const vite_1 = require("vite");
 const ssr_server_utils_1 = require("ssr-server-utils");
 const plugin_react_1 = require("@vitejs/plugin-react");
 const vite_plugin_style_import_1 = require("vite-plugin-style-import");
-const { getOutput, prefix, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = (0, ssr_server_utils_1.loadConfig)();
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = (0, ssr_server_utils_1.loadConfig)();
 const { clientOutPut, serverOutPut } = getOutput();
 const styleImportConfig = {
     include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -51,14 +51,14 @@ const serverConfig = {
     },
     define: {
         __isBrowser__: false,
-        ...define === null || define === void 0 ? void 0 : define.server,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.server
     }
 };
 exports.serverConfig = serverConfig;
 const clientConfig = {
     ...(0, ssr_server_utils_1.commonConfig)(),
-    base: isDev ? '/' : prefix,
+    base: isDev ? '/' : (0, ssr_server_utils_1.getOutputPublicPath)(),
     esbuild: {
         keepNames: true
     },
@@ -83,8 +83,8 @@ const clientConfig = {
     },
     define: {
         __isBrowser__: true,
-        ...define === null || define === void 0 ? void 0 : define.client,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.client
     }
 };
 exports.clientConfig = clientConfig;

package/esm/config/base.js

@@ -76,6 +76,13 @@ const getBaseConfig = (chain, isServer) => {
         .exclude
         .add(/node_modules|core-js/)
         .end();
+    chain.module
+        .rule('mjs')
+        .test(/\.mjs/)
+        .include
+        .add(/node_modules/).end()
+        .type('javascript/auto')
+        .end();
     const module = chain.module
         .rule('compileBabelForExtraModule')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)

package/esm/entry/server-entry.js

@@ -1,6 +1,6 @@
 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 } from 'ssr-server-utils';
 // @ts-expect-error
 import * as serializeWrap from 'serialize-javascript';
 // @ts-expect-error
@@ -12,7 +12,7 @@ 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,14 +25,9 @@ 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) {
@@ -63,14 +58,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`);

package/esm/tools/vite.js

@@ -1,9 +1,9 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 import { build } from 'vite';
-import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin } from 'ssr-server-utils';
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin, getOutputPublicPath } from 'ssr-server-utils';
 import react from '@vitejs/plugin-react';
 import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'vite-plugin-style-import';
-const { getOutput, prefix, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig();
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig();
 const { clientOutPut, serverOutPut } = getOutput();
 const styleImportConfig = {
     include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -48,13 +48,13 @@ const serverConfig = {
     },
     define: {
         __isBrowser__: false,
-        ...define === null || define === void 0 ? void 0 : define.server,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.server
     }
 };
 const clientConfig = {
     ...commonConfig(),
-    base: isDev ? '/' : prefix,
+    base: isDev ? '/' : getOutputPublicPath(),
     esbuild: {
         keepNames: true
     },
@@ -79,8 +79,8 @@ const clientConfig = {
     },
     define: {
         __isBrowser__: true,
-        ...define === null || define === void 0 ? void 0 : define.client,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.client
     }
 };
 const viteStart = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.2.10",
+  "version": "6.2.13",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -35,8 +35,8 @@
     "@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-loader": "^8.0.4",
+    "babel-plugin-import": "1.13.3",
     "babel-preset-react-app": "^9.0.2",
     "core-js": "^3.6.4",
     "css-hot-loader": "^1.4.4",
@@ -53,6 +53,10 @@
     "postcss-modules": "^4.0.0",
     "postcss-preset-env": "^7.0.0",
     "postcss-safe-parser": "^6.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.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",
@@ -63,6 +67,7 @@
     "url-loader": "^4.1.1",
     "vite": "^2.7.0",
     "vite-plugin-style-import": "^1.4.0",
+    "webpack": "^4.42.1",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-chain": "^6.4.0",
     "webpack-manifest-plugin": "^2.2.0",
@@ -74,7 +79,7 @@
     "@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"
-  },
-  "gitHead": "5af68df670e62bdcf21c6587f4bce23d30fcf514"
+  }
 }

package/src/config/base.ts

@@ -85,6 +85,14 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     .add(/node_modules|core-js/)
     .end()
 
+  chain.module
+    .rule('mjs')
+    .test(/\.mjs/)
+    .include
+    .add(/node_modules/).end()
+    .type('javascript/auto')
+    .end()
+
   const module = chain.module
     .rule('compileBabelForExtraModule')
     .test(/\.(js|mjs|jsx|ts|tsx)$/)

package/src/entry/server-entry.tsx

@@ -1,6 +1,6 @@
 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 } from 'ssr-server-utils'
 import { ISSRContext, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
 // @ts-expect-error
 import * as serializeWrap from 'serialize-javascript'
@@ -14,7 +14,7 @@ const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes as ReactRoutes
 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 +29,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[] = []
@@ -71,7 +65,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 +73,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) {

package/src/index.ts

@@ -1,7 +1,6 @@
 import { loadConfig } from 'ssr-server-utils'
 
 const { isVite } = loadConfig()
-
 export function clientPlugin () {
   return {
     name: 'plugin-react',

package/src/tools/vite.ts

@@ -1,10 +1,8 @@
 import { build, UserConfig } from 'vite'
-import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin } from 'ssr-server-utils'
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin, getOutputPublicPath } from 'ssr-server-utils'
 import react from '@vitejs/plugin-react'
 import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'vite-plugin-style-import'
-
-const { getOutput, prefix, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig()
-
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
 const styleImportConfig = {
   include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -49,14 +47,14 @@ const serverConfig: UserConfig = {
   },
   define: {
     __isBrowser__: false,
-    ...define?.server,
-    ...define?.base
+    ...define?.base,
+    ...define?.server
   }
 }
 
 const clientConfig: UserConfig = {
   ...commonConfig(),
-  base: isDev ? '/' : prefix,
+  base: isDev ? '/' : getOutputPublicPath(),
   esbuild: {
     keepNames: true
   },
@@ -81,8 +79,8 @@ const clientConfig: UserConfig = {
   },
   define: {
     __isBrowser__: true,
-    ...define?.client,
-    ...define?.base
+    ...define?.base,
+    ...define?.client
   }
 }
 const viteStart = async () => {