@modern-js/runtime 2.6.0 → 2.8.0

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

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,67 +16,36 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
+  deserializeErrors: () => deserializeErrors,
   getLocation: () => getLocation,
   getRouteComponents: () => getRouteComponents,
   renderRoutes: () => renderRoutes,
+  serializeErrors: () => serializeErrors,
   standardSlash: () => standardSlash,
   urlJoin: () => urlJoin
 });
 module.exports = __toCommonJS(utils_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_nestedRoutes = require("@modern-js/utils/nestedRoutes");
+var import_remix_router = require("@modern-js/utils/remix-router");
 var import_DefaultNotFound = require("./DefaultNotFound");
-const renderNestedRoute = (nestedRoute, parent) => {
-  const { children, index, id, component, isRoot } = nestedRoute;
-  const Component = component;
-  const routeProps = {
-    caseSensitive: nestedRoute.caseSensitive,
-    path: nestedRoute.path,
-    id: nestedRoute.id,
-    loader: createLoader(nestedRoute),
-    action: nestedRoute.action,
-    hasErrorBoundary: nestedRoute.hasErrorBoundary,
-    shouldRevalidate: nestedRoute.shouldRevalidate,
-    handle: nestedRoute.handle,
-    index: nestedRoute.index,
-    element: nestedRoute.element,
-    errorElement: nestedRoute.errorElement
-  };
-  if (nestedRoute.error) {
-    const errorElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(nestedRoute.error, {});
-    routeProps.errorElement = errorElement;
-  }
-  let element;
-  if (Component) {
-    if (parent == null ? void 0 : parent.loading) {
-      const Loading = parent.loading;
-      if (isLoadableComponent(Component)) {
-        element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}) });
-      } else {
-        element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) });
-      }
-    } else if (isLoadableComponent(Component) || isRoot) {
-      element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
-    } else {
-      element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}) });
-    }
-  } else {
-    nestedRoute.loading = parent == null ? void 0 : parent.loading;
-  }
-  if (element) {
-    routeProps.element = element;
-  }
-  const childElements = children == null ? void 0 : children.map((childRoute) => {
-    return renderNestedRoute(childRoute, nestedRoute);
-  });
-  const routeElement = index ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { ...routeProps, index: true }, id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { ...routeProps, index: false, children: childElements }, id);
-  return routeElement;
-};
-function getRouteComponents(routes, globalApp) {
+var import_DeferredDataScripts = __toESM(require("./DeferredDataScripts"));
+function getRouteComponents(routes, {
+  globalApp,
+  ssrMode
+}) {
   const Layout = ({ Component, ...props }) => {
     const GlobalLayout = globalApp;
     if (!GlobalLayout) {
@@ -85,7 +56,9 @@ function getRouteComponents(routes, globalApp) {
   const routeElements = [];
   for (const route of routes) {
     if (route.type === "nested") {
-      const routeElement = renderNestedRoute(route);
+      const routeElement = (0, import_nestedRoutes.renderNestedRoute)(route, {
+        DeferredDataComponent: ssrMode === "stream" ? import_DeferredDataScripts.default : void 0
+      });
       routeElements.push(routeElement);
     } else {
       const routeElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -102,7 +75,7 @@ function getRouteComponents(routes, globalApp) {
   routeElements.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultNotFound.DefaultNotFound, {}) }, "*"));
   return routeElements;
 }
-function renderRoutes(routesConfig) {
+function renderRoutes(routesConfig, ssrMode) {
   if (!routesConfig) {
     return null;
   }
@@ -110,7 +83,7 @@ function renderRoutes(routesConfig) {
   if (!routes) {
     return null;
   }
-  const routeElements = getRouteComponents(routes, globalApp);
+  const routeElements = getRouteComponents(routes, { globalApp, ssrMode });
   return routeElements;
 }
 function getLocation(serverContext) {
@@ -144,32 +117,58 @@ function standardSlash(str) {
   }
   return addr;
 }
-function createLoader(route) {
-  const { loader } = route;
-  if (loader) {
-    return (args) => {
-      if (typeof route.lazyImport === "function") {
-        route.lazyImport();
-      }
-      return loader(args);
-    };
-  } else {
-    return () => {
-      if (typeof route.lazyImport === "function") {
-        route.lazyImport();
-      }
-      return null;
-    };
+function serializeErrors(errors) {
+  if (!errors) {
+    return null;
   }
+  const entries = Object.entries(errors);
+  const serialized = {};
+  for (const [key, val] of entries) {
+    if ((0, import_remix_router.isRouteErrorResponse)(val)) {
+      serialized[key] = { ...val, __type: "RouteErrorResponse" };
+    } else if (val instanceof Error) {
+      serialized[key] = {
+        message: val.message,
+        stack: val.stack,
+        __type: "Error"
+      };
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
 }
-function isLoadableComponent(component) {
-  return component && component.displayName === "Loadable" && component.preload && typeof component.preload === "function";
+function deserializeErrors(errors) {
+  if (!errors) {
+    return null;
+  }
+  const entries = Object.entries(errors);
+  const serialized = {};
+  for (const [key, val] of entries) {
+    if (val && val.__type === "RouteErrorResponse") {
+      serialized[key] = new import_remix_router.ErrorResponse(
+        val.status,
+        val.statusText,
+        val.data,
+        val.internal === true
+      );
+    } else if (val && val.__type === "Error") {
+      const error = new Error(val.message);
+      error.stack = val.stack;
+      serialized[key] = error;
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  deserializeErrors,
   getLocation,
   getRouteComponents,
   renderRoutes,
+  serializeErrors,
   standardSlash,
   urlJoin
 });

package/dist/cjs/{runtime-context.js → runtimeContext.js}

@@ -15,12 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var runtime_context_exports = {};
-__export(runtime_context_exports, {
+var runtimeContext_exports = {};
+__export(runtimeContext_exports, {
   RuntimeReactContext: () => RuntimeReactContext,
   ServerRouterContext: () => ServerRouterContext
 });
-module.exports = __toCommonJS(runtime_context_exports);
+module.exports = __toCommonJS(runtimeContext_exports);
 var import_react = require("react");
 const RuntimeReactContext = (0, import_react.createContext)({});
 const ServerRouterContext = (0, import_react.createContext)({});

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

@@ -64,6 +64,8 @@ var cli_default = () => ({
         return {
           source: {
             alias: {
+              // ensure that all packages use the same storage in @modern-js/utils/ssr
+              "@modern-js/utils/ssr": require.resolve("@modern-js/utils/ssr"),
               "@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
             }
           },
@@ -136,8 +138,7 @@ var cli_default = () => ({
             );
           }
         }
-        const ssgConfig = userConfig.output.ssg;
-        const useSSG = (0, import_utils.isSingleEntry)(entrypoints) ? Boolean(ssgConfig) : ssgConfig === true || typeof (ssgConfig == null ? void 0 : ssgConfig[0]) === "function" || Boolean(ssgConfig == null ? void 0 : ssgConfig[entryName]);
+        const useSSG = (0, import_utils.isSSGEntry)(userConfig, entryName, entrypoints);
         ssrConfigMap.set(entryName, ssrConfig || useSSG);
         if (ssrConfig || useSSG) {
           imports.push({

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

@@ -50,6 +50,7 @@ const ssr = (config = {}) => ({
       init({ context }, next) {
         const { request } = context.ssrContext;
         context.ssrContext.request = (0, import_utils.formatServer)(request);
+        context.ssrContext.mode = config.mode;
         return next({ context });
       },
       pickContext: ({ context, pickedContext }, next) => {

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

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,21 +14,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var buildTemplate_after_exports = {};
 __export(buildTemplate_after_exports, {
   buildShellAfterTemplate: () => buildShellAfterTemplate
 });
 module.exports = __toCommonJS(buildTemplate_after_exports);
-var import_serialize_javascript = __toESM(require("serialize-javascript"));
+var import_serialize = require("@modern-js/utils/serialize");
 var import_buildTemplate = require("./buildTemplate.share");
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [injectSSRDataScript];
@@ -58,9 +48,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         renderLevel
       };
       return `
-      <script>window._SSR_DATA = ${(0, import_serialize_javascript.default)(SSRData, {
-        isJSON: true
-      })}</script>
+      <script>window._SSR_DATA = ${(0, import_serialize.serializeJson)(SSRData)}</script>
       `;
     }
   }

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

@@ -58,7 +58,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       }
       const { routeAssets } = routeManifest;
       const cssChunks = [];
-      const matches = (0, import_react_router_dom.matchRoutes)(routes, routerContext.location);
+      const matches = (0, import_react_router_dom.matchRoutes)(
+        routes,
+        routerContext.location,
+        routerContext.basename
+      );
       matches == null ? void 0 : matches.forEach((match, index) => {
         if (!index) {
           return;

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

@@ -22,9 +22,16 @@ __export(renderToPipe_exports, {
 module.exports = __toCommonJS(renderToPipe_exports);
 var import_stream = require("stream");
 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 = (stream) => {
     return new Promise((resolve) => {
@@ -45,9 +52,20 @@ function renderToPipe(rootElement, context, options) {
           const injectableTransform = new import_stream.Transform({
             transform(chunk, _encoding, callback) {
               try {
-                if (isShellStream) {
-                  this.push(joinChunk(shellBefore, chunk, shellAfter));
-                  isShellStream = false;
+                if (shellChunkStatus !== 2 /* FINIESH */) {
+                  let concatedChunk = chunk.toString();
+                  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 */;
+                  }
+                  this.push(concatedChunk);
                 } else {
                   this.push(chunk);
                 }
@@ -90,9 +108,6 @@ function renderToPipe(rootElement, context, options) {
     });
   };
   return forUserPipe;
-  function joinChunk(before = "", chunk, after = "") {
-    return `${before}${chunk.toString()}${after}`;
-  }
 }
 var renderToPipe_default = renderToPipe;
 // Annotate the CommonJS export names for ESM import in node:

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

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

package/dist/cjs/ssr/serverRender/renderToString/entry.js

@@ -32,8 +32,9 @@ __export(entry_exports, {
 module.exports = __toCommonJS(entry_exports);
 var import_react = __toESM(require("react"));
 var import_server = __toESM(require("react-dom/server"));
-var import_serialize_javascript = __toESM(require("serialize-javascript"));
+var import_serialize = require("@modern-js/utils/serialize");
 var import_react_helmet = __toESM(require("react-helmet"));
+var import_utils = require("../../../router/runtime/utils");
 var import_helmet = __toESM(require("../helmet"));
 var import_types = require("../types");
 var import_time = require("../time");
@@ -102,13 +103,18 @@ class Entry {
     if ((_c = ssrContext.redirection) == null ? void 0 : _c.url) {
       return "";
     }
+    const { routerContext } = context;
+    const routerData = routerContext ? {
+      loaderData: routerContext.loaderData,
+      errors: (0, import_utils.serializeErrors)(routerContext.errors)
+    } : void 0;
     let html = "";
     const templateData = buildTemplateData(
       ssrContext,
       prefetchData,
       this.result.renderLevel
     );
-    const SSRData = this.getSSRDataScript(templateData);
+    const SSRData = this.getSSRDataScript(templateData, routerData);
     for (const fragment of this.fragments) {
       if (fragment.isVariable && fragment.content === "SSRDataScript") {
         html += fragment.getValue(SSRData);
@@ -165,13 +171,18 @@ class Entry {
     }
     return html;
   }
-  getSSRDataScript(templateData) {
+  getSSRDataScript(templateData, routerData) {
+    let ssrDataScripts = `<script>window._SSR_DATA = ${(0, import_serialize.serializeJson)(
+      templateData
+    )}</script>`;
+    if (routerData) {
+      ssrDataScripts += `
+<script>window._ROUTER_DATA = ${(0, import_serialize.serializeJson)(
+        routerData
+      )}</script>`;
+    }
     return {
-      SSRDataScript: `
-        <script>window._SSR_DATA = ${(0, import_serialize_javascript.default)(templateData, {
-        isJSON: true
-      })}</script>
-      `
+      SSRDataScript: ssrDataScripts
     };
   }
 }

package/dist/cjs/state/runtime/index.js

@@ -28,17 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var runtime_exports = {};
 __export(runtime_exports, {
-  createStore: () => import_store.createStore,
-  default: () => import_plugin.default,
-  model: () => import_store.model
+  default: () => import_plugin.default
 });
 module.exports = __toCommonJS(runtime_exports);
 __reExport(runtime_exports, require("@modern-js-reduck/react"), module.exports);
-var import_store = require("@modern-js-reduck/store");
 var import_plugin = __toESM(require("./plugin"));
 __reExport(runtime_exports, require("./plugin"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createStore,
-  model
-});
+0 && (module.exports = {});

package/dist/esm/cli/index.js

@@ -132,15 +132,16 @@ var cli_default = function() {
     return {
         name: "@modern-js/runtime",
         post: [
-            "@modern-js/plugin-router",
             "@modern-js/plugin-ssr",
-            "@modern-js/plugin-document",
             "@modern-js/plugin-state",
+            "@modern-js/plugin-router",
+            "@modern-js/plugin-document",
             "@modern-js/plugin-design-token"
         ],
+        // the order of runtime plugins is affected by runtime hooks, mainly `init` and `hoc` hooks
         usePlugins: [
-            PluginState(),
             PluginSSR(),
+            PluginState(),
             PluginRouter(),
             Document()
         ],

package/dist/esm/common.js

@@ -1,4 +1,6 @@
 var isBrowser = function() {
     return typeof window !== "undefined" && window.name !== "nodejs";
 };
-export { isBrowser };
+var JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+var ESCAPED_SHELL_STREAM_END_MARK = "&lt;!--&lt;?- SHELL_STREAM_END ?&gt;--&gt;";
+export { ESCAPED_SHELL_STREAM_END_MARK, JSX_SHELL_STREAM_END_MARK, isBrowser };

package/dist/esm/core/compatible.js

@@ -213,7 +213,7 @@ import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo } from "react";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { ROUTE_MANIFEST } from "@modern-js/utils/constants";
-import { RuntimeReactContext } from "../runtime-context";
+import { RuntimeReactContext } from "../runtimeContext";
 import { runtime } from "./plugin";
 import { createLoaderManager } from "./loader/loaderManager";
 var IS_REACT18 = process.env.IS_REACT18 === "true";

package/dist/esm/core/index.js

@@ -1,7 +1,7 @@
 import { createPlugin, createRuntime, runtime, registerInit } from "./plugin";
-import { defineConfig, getConfig } from "./app-config";
+import { defineConfig, getConfig } from "./appConfig";
 export * from "./compatible";
-import { RuntimeReactContext, ServerRouterContext } from "../runtime-context";
+import { RuntimeReactContext, ServerRouterContext } from "../runtimeContext";
 export * from "./loader";
 export * from "@modern-js/plugin";
 export { RuntimeReactContext, ServerRouterContext, createPlugin, createRuntime, defineConfig, getConfig, registerInit, runtime };

package/dist/esm/core/loader/useLoader.js

@@ -105,7 +105,7 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 import { useContext, useRef, useMemo, useState, useCallback, useEffect } from "react";
 import invariant from "invariant";
-import { RuntimeReactContext } from "../../runtime-context";
+import { RuntimeReactContext } from "../../runtimeContext";
 import { LoaderStatus } from "./loaderManager";
 var useLoader = function(loaderFn) {
     var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {

package/dist/esm/core/types.js

@@ -0,0 +1 @@
+"use strict";