@modern-js/runtime 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @modern-js/runtime
 
+## 2.10.0
+
+### Patch Changes
+
+- 0da32d0: chore: upgrade jest and puppeteer
+  chore: 升级 jest 和 puppeteer 到 latest
+- 5766414: fix: fix typos
+  fix: 修复拼写错误
+- 950e138: fix: inject i18n placeholder in streaming ssr
+  fix: 流式 SSR 中,注入 i18n 数据占位字段
+- Updated dependencies [3e0bd50]
+- Updated dependencies [92d247f]
+- Updated dependencies [0da32d0]
+- Updated dependencies [0d9962b]
+- Updated dependencies [fbefa7e]
+- Updated dependencies [4d54233]
+- Updated dependencies [6db4864]
+  - @modern-js/types@2.10.0
+  - @modern-js/plugin@2.10.0
+  - @modern-js/utils@2.10.0
+
+## 2.9.0
+
+### Patch Changes
+
+- e8c580125d: fix: remove `serialze-javascript` from client bundle
+  fix: 移除客户端构建产物中的 `serialze-javascript`
+- 7035d5c22f: feat: support streaming ssr in worker
+
+  feat: worker 支持 streaming ssr
+
+- 49bb8cd0ef: fix: move chunkmap.css comment to bottom of head
+  fix: 将 chunkmap.css 标记移动到 head 底部
+- 755a053579: fix: export missing react-router types
+  fix: 导出缺少的 react-router 类型
+  - @modern-js/plugin@2.9.0
+  - @modern-js/types@2.9.0
+  - @modern-js/utils@2.9.0
+
 ## 2.8.0
 
 ### Patch Changes

package/dist/cjs/router/runtime/DeferredDataScripts.js

@@ -20,146 +20,8 @@ __export(DeferredDataScripts_exports, {
   default: () => DeferredDataScripts_default
 });
 module.exports = __toCommonJS(DeferredDataScripts_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react_router_dom = require("react-router-dom");
-var import_serialize = require("@modern-js/utils/serialize");
-var import_common = require("../../common");
-var import_utils = require("./utils");
-const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};`;
-const resolveFnStr = `function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};`;
-const preResolvedFnStr = `function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resovle(e)};`;
-const DeferredDataScripts = () => {
-  const context = (0, import_react.useContext)(import_react_router_dom.UNSAFE_DataRouterContext);
-  const { staticContext } = context || {};
-  const hydratedRef = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(() => {
-    hydratedRef.current = true;
-  }, []);
-  const deferredScripts = (0, import_react.useMemo)(() => {
-    if (!staticContext) {
-      return null;
-    }
-    const activeDeferreds = staticContext.activeDeferreds || [];
-    const _ROUTER_DATA = {
-      loaderData: staticContext.loaderData,
-      errors: (0, import_utils.serializeErrors)(staticContext.errors)
-    };
-    let initialScripts = [
-      `_ROUTER_DATA = ${(0, import_serialize.serializeJson)(_ROUTER_DATA)};`,
-      `_ROUTER_DATA.s = ${setupFnStr}`,
-      `_ROUTER_DATA.r = ${resolveFnStr}`,
-      `_ROUTER_DATA.p = ${preResolvedFnStr}`
-    ].join("\n");
-    const deferredDataScripts = [];
-    initialScripts += Object.entries(activeDeferreds).map(([routeId, deferredData]) => {
-      const pendingKeys = new Set(deferredData.pendingKeys);
-      const { deferredKeys } = deferredData;
-      const deferredKeyPromiseStr = deferredKeys.map((key) => {
-        if (pendingKeys.has(key)) {
-          deferredDataScripts.push(
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              DeferredDataScript,
-              {
-                data: deferredData.data[key],
-                dataKey: key,
-                routeId
-              },
-              `${routeId} | ${key}`
-            )
-          );
-          return `${JSON.stringify(key)}: _ROUTER_DATA.s(${JSON.stringify(
-            routeId
-          )},${JSON.stringify(key)}) `;
-        } else {
-          const trackedPromise = deferredData.data[key];
-          if (typeof trackedPromise._error !== "undefined") {
-            const error = {
-              message: trackedPromise._error.message,
-              stack: process.env.NODE_ENV !== "production" ? trackedPromise._error.stack : void 0
-            };
-            return `${JSON.stringify(
-              key
-            )}: _ROUTER_DATA.p(${void 0}, ${(0, import_serialize.serializeJson)(error)})`;
-          } else {
-            if (typeof trackedPromise._data === "undefined") {
-              throw new Error(
-                `The deferred data for ${key} was not resolved, did you forget to return data from a deferred promise`
-              );
-            }
-            return `${JSON.stringify(key)}: _ROUTER_DATA.p(${(0, import_serialize.serializeJson)(
-              trackedPromise._data
-            )})`;
-          }
-        }
-      }).join(",\n");
-      return `Object.assign(_ROUTER_DATA.loaderData[${JSON.stringify(
-        routeId
-      )}], {${deferredKeyPromiseStr}});`;
-    }).join("\n");
-    return [initialScripts, deferredDataScripts];
-  }, []);
-  if (!deferredScripts) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    !hydratedRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "script",
-      {
-        async: true,
-        suppressHydrationWarning: true,
-        dangerouslySetInnerHTML: { __html: deferredScripts[0] }
-      }
-    ),
-    !hydratedRef.current && deferredScripts[1],
-    import_common.JSX_SHELL_STREAM_END_MARK
-  ] });
-};
-const DeferredDataScript = ({
-  data,
-  routeId,
-  dataKey
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_router_dom.Await,
-    {
-      resolve: data,
-      errorElement: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDeferredDataScript, { routeId, dataKey }),
-      children: (data2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "script",
-        {
-          async: true,
-          suppressHydrationWarning: true,
-          dangerouslySetInnerHTML: {
-            __html: `_ROUTER_DATA.r(${JSON.stringify(
-              routeId
-            )}, ${JSON.stringify(dataKey)}, ${(0, import_serialize.serializeJson)(data2)});`
-          }
-        }
-      )
-    }
-  ) : null });
-};
-const ErrorDeferredDataScript = ({
-  routeId,
-  dataKey
-}) => {
-  const error = (0, import_react_router_dom.useAsyncError)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "script",
-    {
-      suppressHydrationWarning: true,
-      dangerouslySetInnerHTML: {
-        __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(
-          dataKey
-        )}, ${void 0}, ${(0, import_serialize.serializeJson)({
-          message: error.message,
-          stack: error.stack
-        })});`
-      }
-    }
-  );
+var DeferredDataScripts_default = () => {
+  return null;
 };
-var DeferredDataScripts_default = DeferredDataScripts;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/dist/cjs/router/runtime/DeferredDataScripts.node.js

@@ -0,0 +1,165 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DeferredDataScripts_node_exports = {};
+__export(DeferredDataScripts_node_exports, {
+  default: () => DeferredDataScripts_node_default
+});
+module.exports = __toCommonJS(DeferredDataScripts_node_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_serialize = require("@modern-js/utils/serialize");
+var import_common = require("../../common");
+var import_utils = require("./utils");
+const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};`;
+const resolveFnStr = `function r(e,r,o,A){A?_ROUTER_DATA.r[e][r].reject(A):_ROUTER_DATA.r[e][r].resolve(o)};`;
+const preResolvedFnStr = `function p(e,r){return void 0!==r?Promise.reject(new Error(r.message)):Promise.resolve(e)};`;
+const DeferredDataScripts = () => {
+  const context = (0, import_react.useContext)(import_react_router_dom.UNSAFE_DataRouterContext);
+  const { staticContext } = context || {};
+  const hydratedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    hydratedRef.current = true;
+  }, []);
+  const deferredScripts = (0, import_react.useMemo)(() => {
+    if (!staticContext) {
+      return null;
+    }
+    const activeDeferreds = staticContext.activeDeferreds || [];
+    const _ROUTER_DATA = {
+      loaderData: staticContext.loaderData,
+      errors: (0, import_utils.serializeErrors)(staticContext.errors)
+    };
+    let initialScripts = [
+      `_ROUTER_DATA = ${(0, import_serialize.serializeJson)(_ROUTER_DATA)};`,
+      `_ROUTER_DATA.s = ${setupFnStr}`,
+      `_ROUTER_DATA.r = ${resolveFnStr}`,
+      `_ROUTER_DATA.p = ${preResolvedFnStr}`
+    ].join("\n");
+    const deferredDataScripts = [];
+    initialScripts += Object.entries(activeDeferreds).map(([routeId, deferredData]) => {
+      const pendingKeys = new Set(deferredData.pendingKeys);
+      const { deferredKeys } = deferredData;
+      const deferredKeyPromiseStr = deferredKeys.map((key) => {
+        if (pendingKeys.has(key)) {
+          deferredDataScripts.push(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              DeferredDataScript,
+              {
+                data: deferredData.data[key],
+                dataKey: key,
+                routeId
+              },
+              `${routeId} | ${key}`
+            )
+          );
+          return `${JSON.stringify(key)}: _ROUTER_DATA.s(${JSON.stringify(
+            routeId
+          )},${JSON.stringify(key)}) `;
+        } else {
+          const trackedPromise = deferredData.data[key];
+          if (typeof trackedPromise._error !== "undefined") {
+            const error = {
+              message: trackedPromise._error.message,
+              stack: process.env.NODE_ENV !== "production" ? trackedPromise._error.stack : void 0
+            };
+            return `${JSON.stringify(
+              key
+            )}: _ROUTER_DATA.p(${void 0}, ${(0, import_serialize.serializeJson)(error)})`;
+          } else {
+            if (typeof trackedPromise._data === "undefined") {
+              throw new Error(
+                `The deferred data for ${key} was not resolved, did you forget to return data from a deferred promise`
+              );
+            }
+            return `${JSON.stringify(key)}: _ROUTER_DATA.p(${(0, import_serialize.serializeJson)(
+              trackedPromise._data
+            )})`;
+          }
+        }
+      }).join(",\n");
+      return `Object.assign(_ROUTER_DATA.loaderData[${JSON.stringify(
+        routeId
+      )}], {${deferredKeyPromiseStr}});`;
+    }).join("\n");
+    return [initialScripts, deferredDataScripts];
+  }, []);
+  if (!deferredScripts) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !hydratedRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        async: true,
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: { __html: deferredScripts[0] }
+      }
+    ),
+    !hydratedRef.current && deferredScripts[1],
+    import_common.JSX_SHELL_STREAM_END_MARK
+  ] });
+};
+const DeferredDataScript = ({
+  data,
+  routeId,
+  dataKey
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_router_dom.Await,
+    {
+      resolve: data,
+      errorElement: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorDeferredDataScript, { routeId, dataKey }),
+      children: (data2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "script",
+        {
+          async: true,
+          suppressHydrationWarning: true,
+          dangerouslySetInnerHTML: {
+            __html: `_ROUTER_DATA.r(${JSON.stringify(
+              routeId
+            )}, ${JSON.stringify(dataKey)}, ${(0, import_serialize.serializeJson)(data2)});`
+          }
+        }
+      )
+    }
+  ) : null });
+};
+const ErrorDeferredDataScript = ({
+  routeId,
+  dataKey
+}) => {
+  const error = (0, import_react_router_dom.useAsyncError)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "script",
+    {
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+          dataKey
+        )}, ${void 0}, ${(0, import_serialize.serializeJson)({
+          message: error.message,
+          stack: error.stack
+        })});`
+      }
+    }
+  );
+};
+var DeferredDataScripts_node_default = DeferredDataScripts;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/cjs/ssr/serverRender/index.js

@@ -21,7 +21,15 @@ __export(serverRender_exports, {
 });
 module.exports = __toCommonJS(serverRender_exports);
 var import_utils = require("../utils");
+var import_utils2 = require("./utils");
 async function serverRender(options) {
+  var _a, _b;
+  if ((_a = options.context.ssrContext) == null ? void 0 : _a.template) {
+    options.context.ssrContext.template = (_b = options.context.ssrContext) == null ? void 0 : _b.template.replace(
+      "</head>",
+      `${import_utils2.CSS_CHUNKS_PLACEHOLDER}</head>`
+    );
+  }
   if ((0, import_utils.isReact18)() && options.config.mode === "stream") {
     const pipe = await require("./renderToStream").render(options);
     return pipe;

package/dist/cjs/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -29,12 +29,19 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
     const ssrDataScript = buildSSRDataScript();
     return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
     function buildSSRDataScript() {
-      const { ssrContext, renderLevel } = options;
+      const {
+        context: { ssrContext, initialData, __i18nData__ },
+        renderLevel
+      } = options;
       const { request, enableUnsafeCtx } = ssrContext;
       const unsafeContext = {
         headers: request.headers
       };
       const SSRData = {
+        data: {
+          initialData,
+          i18nData: __i18nData__
+        },
         context: {
           request: {
             params: request.params,

package/dist/cjs/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -33,8 +33,8 @@ module.exports = __toCommonJS(bulidTemplate_before_exports);
 var import_react_helmet = __toESM(require("react-helmet"));
 var import_react_router_dom = require("react-router-dom");
 var import_helmet = __toESM(require("../helmet"));
+var import_utils = require("../utils");
 var import_buildTemplate = require("./buildTemplate.share");
-const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 function getHeadTemplate(beforeEntryTemplate, context) {
   const callbacks = [
     (headTemplate2) => {
@@ -50,7 +50,7 @@ function getHeadTemplate(beforeEntryTemplate, context) {
   }
   return (0, import_buildTemplate.buildTemplate)(headTemplate, callbacks);
   function injectCss(headTemplate2) {
-    return headTemplate2.replace(CSS_CHUNKS_PLACEHOLDER, getCssChunks());
+    return headTemplate2.replace(import_utils.CSS_CHUNKS_PLACEHOLDER, getCssChunks());
     function getCssChunks() {
       const { routeManifest, routerContext, routes } = context;
       if (!routeManifest || !routerContext || !routes) {

package/dist/cjs/ssr/serverRender/renderToStream/renderToPipe.worker.js

@@ -21,11 +21,18 @@ __export(renderToPipe_worker_exports, {
 });
 module.exports = __toCommonJS(renderToPipe_worker_exports);
 var import_types = require("../types");
+var import_common = require("../../../common");
 var import_template = require("./template");
+var ShellChunkStatus = /* @__PURE__ */ ((ShellChunkStatus2) => {
+  ShellChunkStatus2[ShellChunkStatus2["IDLE"] = 0] = "IDLE";
+  ShellChunkStatus2[ShellChunkStatus2["START"] = 1] = "START";
+  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 2] = "FINIESH";
+  return ShellChunkStatus2;
+})(ShellChunkStatus || {});
 function renderToPipe(rootElement, context, options) {
-  let isShellStream = true;
+  let shellChunkStatus = 0 /* IDLE */;
   const { ssrContext } = context;
-  const forUserPipe = async (stream) => {
+  const forUserPipe = async () => {
     let renderToReadableStream;
     try {
       ({ renderToReadableStream } = require("react-dom/server"));
@@ -57,11 +64,20 @@ function renderToPipe(rootElement, context, options) {
               controller.close();
               return;
             }
-            if (isShellStream) {
-              controller.enqueue(encodeForWebStream(shellBefore));
-              controller.enqueue(value);
-              controller.enqueue(encodeForWebStream(shellAfter));
-              isShellStream = false;
+            if (shellChunkStatus !== 2 /* FINIESH */) {
+              let concatedChunk = new TextDecoder().decode(value);
+              if (shellChunkStatus === 0 /* IDLE */) {
+                concatedChunk = `${shellBefore}${concatedChunk}`;
+                shellChunkStatus = 1 /* START */;
+              }
+              if (shellChunkStatus === 1 /* START */ && concatedChunk.endsWith(import_common.ESCAPED_SHELL_STREAM_END_MARK)) {
+                concatedChunk = concatedChunk.replace(
+                  import_common.ESCAPED_SHELL_STREAM_END_MARK,
+                  shellAfter
+                );
+                shellChunkStatus = 2 /* FINIESH */;
+              }
+              controller.enqueue(encodeForWebStream(concatedChunk));
             } else {
               controller.enqueue(value);
             }
@@ -70,7 +86,7 @@ function renderToPipe(rootElement, context, options) {
           push();
         }
       });
-      return readableOriginal(injectableStream).readableOriginal(stream);
+      return injectableStream;
     } catch (err) {
       ssrContext.metrics.emitCounter("app.render.streaming.shell.error", 1);
       const { shellAfter: shellAfter2, shellBefore: shellBefore2 } = (0, import_template.getTemplates)(
@@ -81,7 +97,7 @@ function renderToPipe(rootElement, context, options) {
       return fallbackHtml;
     }
   };
-  return forUserPipe;
+  return forUserPipe();
 }
 let encoder;
 function encodeForWebStream(thing) {

package/dist/cjs/ssr/serverRender/renderToStream/template.js

@@ -24,15 +24,14 @@ var import_buildTemplate = require("./buildTemplate.after");
 var import_bulidTemplate = require("./bulidTemplate.before");
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
 const getTemplates = (context, renderLevel) => {
-  const { ssrContext, routerContext } = context;
+  const { ssrContext } = context;
   const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
   const builtBeforeTemplate = (0, import_bulidTemplate.buildShellBeforeTemplate)(
     beforeAppTemplate,
     context
   );
   const builtAfterTemplate = (0, import_buildTemplate.buildShellAfterTemplate)(afterAppHtmlTemplate, {
-    ssrContext,
-    routerContext,
+    context,
     renderLevel
   });
   return {

package/dist/cjs/ssr/serverRender/utils.js

@@ -17,9 +17,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  CSS_CHUNKS_PLACEHOLDER: () => CSS_CHUNKS_PLACEHOLDER,
   getLoadableScripts: () => getLoadableScripts
 });
 module.exports = __toCommonJS(utils_exports);
+const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 function getLoadableScripts(extractor) {
   const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
   const scripts = extractor.getScriptTags();
@@ -30,5 +32,6 @@ function getLoadableScripts(extractor) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CSS_CHUNKS_PLACEHOLDER,
   getLoadableScripts
 });