@modern-js/runtime 2.5.0 → 2.7.0

package/dist/esm/ssr/utils.js

@@ -72,6 +72,7 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+import cookieTool from "cookie";
 var isReact18 = function() {
     return process.env.IS_REACT18 === "true";
 };
@@ -79,6 +80,7 @@ var formatServer = function(request) {
     var _ref = request.headers || {}, _ref_cookie = _ref.cookie, cookie = _ref_cookie === void 0 ? "" : _ref_cookie, tmp = _ref["user-agent"], userAgent = tmp === void 0 ? "" : tmp, referer = _ref.referer;
     return _objectSpread({
         cookie: cookie,
+        cookieMap: cookieTool.parse(cookie || "") || {},
         userAgent: userAgent,
         referer: referer
     }, request);
@@ -93,15 +95,15 @@ var getQuery = function() {
     }, {});
 };
 var formatClient = function(request) {
-    var _request_headers, _request_headers1;
+    var _request_headers;
     return {
         params: request.params || {},
         host: request.host || location.host,
         pathname: request.pathname || location.pathname,
         headers: request.headers || {},
-        cookieMap: request.cookieMap || {},
-        cookie: ((_request_headers = request.headers) === null || _request_headers === void 0 ? void 0 : _request_headers.cookie) || document.cookie,
-        userAgent: ((_request_headers1 = request.headers) === null || _request_headers1 === void 0 ? void 0 : _request_headers1["user-agent"]) || navigator.userAgent,
+        cookieMap: cookieTool.parse(document.cookie || "") || {},
+        cookie: document.cookie || "",
+        userAgent: ((_request_headers = request.headers) === null || _request_headers === void 0 ? void 0 : _request_headers["user-agent"]) || navigator.userAgent,
         referer: request.referer || document.referrer,
         query: request.query || getQuery(),
         url: location.href

package/dist/esm-node/cli/index.js

@@ -24,6 +24,11 @@ var cli_default = () => ({
           runtimeByEntries: {},
           source: {
             alias: {
+              /**
+               * twin.macro inserts styled-components into the code during the compilation process
+               * But it will not be installed under the user project.
+               * So need to add alias
+               */
               "styled-components": require.resolve("styled-components")
             },
             globalVars: {

package/dist/esm-node/common.js

@@ -1,4 +1,8 @@
 const isBrowser = () => typeof window !== "undefined" && window.name !== "nodejs";
+const JSX_SHELL_STREAM_END_MARK = "<!--<?- SHELL_STREAM_END ?>-->";
+const 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-node/core/{app-config.js → appConfig.js}

@@ -1,5 +1,9 @@
 const APP_CONFIG_SYMBOL = "config";
-const getConfig = (Component) => Component[APP_CONFIG_SYMBOL];
+const getConfig = (Component) => (
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  Component[APP_CONFIG_SYMBOL]
+);
 const defineConfig = (Component, config) => {
   Component[APP_CONFIG_SYMBOL] = config;
   return Component;

package/dist/esm-node/core/compatible.js

@@ -4,7 +4,7 @@ import hoistNonReactStatics from "hoist-non-react-statics";
 import { ROUTE_MANIFEST } from "@modern-js/utils/constants";
 import {
   RuntimeReactContext
-} from "../runtime-context";
+} from "../runtimeContext";
 import { runtime } from "./plugin";
 import { createLoaderManager } from "./loader/loaderManager";
 const IS_REACT18 = process.env.IS_REACT18 === "true";
@@ -58,12 +58,7 @@ const createApp = ({ plugins }) => {
                 }
               );
             }
-            return /* @__PURE__ */ jsx(RuntimeReactContext.Provider, {
-              value: contextValue,
-              children: /* @__PURE__ */ jsx(App2, {
-                ...props
-              })
-            });
+            return /* @__PURE__ */ jsx(RuntimeReactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(App2, { ...props }) });
           };
           return hoistNonReactStatics(WrapComponent, App2);
         }
@@ -190,12 +185,14 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
         {},
         {
           skipNonStatic: id.staticGenerate,
+          // if not static generate, only non-static loader can exec on prod env
           skipStatic: process.env.NODE_ENV === "production" && !id.staticGenerate
         }
       )
     });
     const isRedirectResponse = (result) => {
-      if (typeof Response !== "undefined" && result instanceof Response && result.status >= 300 && result.status <= 399) {
+      if (typeof Response !== "undefined" && // fix: ssg workflow doesn't inject Web Response
+      result instanceof Response && result.status >= 300 && result.status <= 399) {
         const { status } = result;
         const redirectUrl = result.headers.get("Location") || "/";
         const { ssrContext } = context;

package/dist/esm-node/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 {

package/dist/esm-node/core/loader/loaderManager.js

@@ -59,6 +59,7 @@ const createLoader = (id, initialData = {
     reloading: hasLoaded && status === 1 /* loading */,
     data,
     error: error instanceof Error ? `${error.message}` : error,
+    // redundant fields for ssr log
     _error: error
   });
   const notify = () => {
@@ -99,6 +100,7 @@ const createLoaderManager = (initialDataMap, managerOptions = {}) => {
         id,
         typeof initialDataMap[id] !== "undefined" ? initialDataMap[id] : { data: loaderOptions.initialData },
         loaderFn,
+        // Todo whether static loader is exec when CSR
         skipExec
       );
       loadersMap.set(id, loader);

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

@@ -7,7 +7,7 @@ import {
   useEffect
 } from "react";
 import invariant from "invariant";
-import { RuntimeReactContext } from "../../runtime-context";
+import { RuntimeReactContext } from "../../runtimeContext";
 import { LoaderStatus } from "./loaderManager";
 const useLoader = (loaderFn, options = { params: void 0 }) => {
   const context = useContext(RuntimeReactContext);

package/dist/esm-node/document/Body.js

@@ -9,14 +9,12 @@ import { DefaultRoot } from "./Root";
 function Body(props) {
   const { hasSetRoot } = useContext(DocumentStructureContext);
   const { children } = props;
-  return /* @__PURE__ */ jsxs("body", {
-    children: [
-      hasSetRoot ? null : /* @__PURE__ */ jsx(DefaultRoot, {}),
-      children,
-      `${DOCUMENT_CHUNKSMAP_PLACEHOLDER}`,
-      `${DOCUMENT_SSRDATASCRIPT_PLACEHOLDER}`
-    ]
-  });
+  return /* @__PURE__ */ jsxs("body", { children: [
+    hasSetRoot ? null : /* @__PURE__ */ jsx(DefaultRoot, {}),
+    children,
+    `${DOCUMENT_CHUNKSMAP_PLACEHOLDER}`,
+    `${DOCUMENT_SSRDATASCRIPT_PLACEHOLDER}`
+  ] });
 }
 export {
   Body

package/dist/esm-node/document/Head.js

@@ -7,19 +7,15 @@ import { DOCUMENT_META_PLACEHOLDER } from "./constants";
 function Head(props) {
   const { hasSetScripts, hasSetLinks } = useContext(DocumentStructureContext);
   const { children } = props;
-  return /* @__PURE__ */ jsxs("head", {
-    children: [
-      `${DOCUMENT_META_PLACEHOLDER}`,
-      !hasSetLinks && /* @__PURE__ */ jsx(Links, {}),
-      !hasSetScripts && /* @__PURE__ */ jsx(Scripts, {}),
-      children
-    ]
-  });
+  return /* @__PURE__ */ jsxs("head", { children: [
+    `${DOCUMENT_META_PLACEHOLDER}`,
+    !hasSetLinks && /* @__PURE__ */ jsx(Links, {}),
+    !hasSetScripts && /* @__PURE__ */ jsx(Scripts, {}),
+    children
+  ] });
 }
 function DefaultHead() {
-  return /* @__PURE__ */ jsx("head", {
-    children: `${DOCUMENT_META_PLACEHOLDER}`
-  });
+  return /* @__PURE__ */ jsx("head", { children: `${DOCUMENT_META_PLACEHOLDER}` });
 }
 export {
   DefaultHead,

package/dist/esm-node/document/Html.js

@@ -34,29 +34,31 @@ function Html(props) {
   const notMissMustChild = [
     hasSetHead,
     hasSetBody
+    // hasSetScripts,
+    // hasSetRoot,
   ].every((item) => item);
   if (!notMissMustChild) {
-    return /* @__PURE__ */ jsx("html", {
-      children: /* @__PURE__ */ jsxs("body", {
-        style: { color: "red" },
-        children: [
-          `Miss the `,
-          [
-            hasSetHead,
-            hasSetBody
-          ].map((item, index) => {
-            return item ? null : [
-              "Head",
-              "Body"
-            ][index];
-          }),
-          ` Element`
-        ]
-      })
-    });
+    return /* @__PURE__ */ jsx("html", { children: /* @__PURE__ */ jsxs("body", { style: { color: "red" }, children: [
+      `Miss the `,
+      [
+        hasSetHead,
+        hasSetBody
+        // hasSetScripts,
+        // hasSetRoot,
+      ].map((item, index) => {
+        return item ? null : [
+          "Head",
+          "Body"
+          // 'Scripts',
+          // 'Root',
+        ][index];
+      }),
+      ` Element`
+    ] }) });
   }
-  return /* @__PURE__ */ jsx("html", {
-    children: /* @__PURE__ */ jsxs(DocumentStructureContext.Provider, {
+  return /* @__PURE__ */ jsx("html", { children: /* @__PURE__ */ jsxs(
+    DocumentStructureContext.Provider,
+    {
       value: {
         hasSetHead,
         hasSetScripts,
@@ -70,8 +72,8 @@ function Html(props) {
         !hasSetBody && /* @__PURE__ */ jsx(Body, {}),
         children
       ]
-    })
-  });
+    }
+  ) });
 }
 export {
   Html

package/dist/esm-node/document/Links.js

@@ -1,9 +1,7 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { DOCUMENT_LINKS_PLACEHOLDER } from "./constants";
 function Links() {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: DOCUMENT_LINKS_PLACEHOLDER
-  });
+  return /* @__PURE__ */ jsx(Fragment, { children: DOCUMENT_LINKS_PLACEHOLDER });
 }
 export {
   Links

package/dist/esm-node/document/Root.js

@@ -7,25 +7,19 @@ function Root(props) {
   const {
     templateParams: { mountId = "root" }
   } = useContext(DocumentContext);
-  return /* @__PURE__ */ jsxs("div", {
-    id: `${rootId || mountId}`,
-    children: [
-      `${DOCUMENT_SSR_PLACEHOLDER}`,
-      children
-    ]
-  });
+  return /* @__PURE__ */ jsxs("div", { id: `${rootId || mountId}`, children: [
+    `${DOCUMENT_SSR_PLACEHOLDER}`,
+    children
+  ] });
 }
 function DefaultRoot(props) {
   const {
     templateParams: { mountId = "root" }
   } = useContext(DocumentContext);
-  return /* @__PURE__ */ jsxs("div", {
-    id: `${mountId}`,
-    children: [
-      `${DOCUMENT_SSR_PLACEHOLDER}`,
-      props.children
-    ]
-  });
+  return /* @__PURE__ */ jsxs("div", { id: `${mountId}`, children: [
+    `${DOCUMENT_SSR_PLACEHOLDER}`,
+    props.children
+  ] });
 }
 export {
   DefaultRoot,

package/dist/esm-node/document/Script.js

@@ -7,13 +7,11 @@ function Script(props) {
   const { content } = props;
   const contentStr = content.toString();
   const contentIIFE = encodeURIComponent(`(${contentStr})()`);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      `${DOCUMENT_SCRIPT_PLACEHOLDER_START}`,
-      `${contentIIFE}`,
-      `${DOCUMENT_SCRIPT_PLACEHOLDER_END}`
-    ]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    `${DOCUMENT_SCRIPT_PLACEHOLDER_START}`,
+    `${contentIIFE}`,
+    `${DOCUMENT_SCRIPT_PLACEHOLDER_END}`
+  ] });
 }
 export {
   Script

package/dist/esm-node/document/Scripts.js

@@ -1,9 +1,7 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { DOCUMENT_SCRIPTS_PLACEHOLDER } from "./constants";
 function Scripts() {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: `${DOCUMENT_SCRIPTS_PLACEHOLDER}`
-  });
+  return /* @__PURE__ */ jsx(Fragment, { children: `${DOCUMENT_SCRIPTS_PLACEHOLDER}` });
 }
 export {
   Scripts

package/dist/esm-node/document/cli/index.js

@@ -60,7 +60,7 @@ var cli_default = () => ({
       }
       return async ({ htmlWebpackPlugin }) => {
         const documentParams = getDocParams({
-          config: api.useConfigContext(),
+          config: api.useResolvedConfigContext(),
           entryName,
           templateParameters
         });
@@ -91,6 +91,7 @@ var cli_default = () => ({
           entryPoints: [documentFilePath],
           outfile: htmlOutputFile,
           platform: "node",
+          // change esbuild use the rootDir tsconfig.json as default to tempTsConfigFile
           tsconfig: tempTsConfigFile,
           target: "es6",
           loader: {
@@ -147,7 +148,7 @@ var cli_default = () => ({
               `${DOCUMENT_SCRIPT_PLACEHOLDER_START}(.*?)${DOCUMENT_SCRIPT_PLACEHOLDER_END}`,
               "g"
             ),
-            (_scriptStr, $1) => `<script>${decodeURIComponent($1)}<\/script>`
+            (_scriptStr, $1) => `<script>${decodeURIComponent($1)}</script>`
           );
         }
         const finalHtml = `<!DOCTYPE html>${html}`.replace(DOCUMENT_META_PLACEHOLDER, metas).replace(DOCUMENT_SSR_PLACEHOLDER, HTML_SEPARATOR).replace(DOCUMENT_SCRIPTS_PLACEHOLDER, scripts).replace(DOCUMENT_LINKS_PLACEHOLDER, links).replace(
@@ -173,6 +174,7 @@ var cli_default = () => ({
               ) : { ...options == null ? void 0 : options.templateParameters };
               const templateContent = documentEntry(
                 entry.entryName,
+                // options,
                 hackParameters
               );
               const documentHtmlOptions = templateContent ? {

package/dist/esm-node/router/cli/index.js

@@ -1,14 +1,11 @@
 import {
   getEntryOptions,
   createRuntimeExportsUtils,
-  PLUGIN_SCHEMAS
+  PLUGIN_SCHEMAS,
+  isRouterV5 as isV5
 } from "@modern-js/utils";
 const PLUGIN_IDENTIFIER = "router";
 const ROUTES_IDENTIFIER = "routes";
-const isV5 = (config) => {
-  var _a, _b;
-  return ((_b = (_a = config == null ? void 0 : config.runtime) == null ? void 0 : _a.router) == null ? void 0 : _b.mode) === "react-router-5";
-};
 var cli_default = () => ({
   name: "@modern-js/plugin-router",
   required: ["@modern-js/runtime"],

package/dist/esm-node/router/runtime/DefaultNotFound.js

@@ -1,14 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-const DefaultNotFound = () => /* @__PURE__ */ jsx("div", {
-  style: {
-    margin: "150px auto",
-    textAlign: "center",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  children: "404"
-});
+const DefaultNotFound = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      margin: "150px auto",
+      textAlign: "center",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: "404"
+  }
+);
 export {
   DefaultNotFound
 };

package/dist/esm-node/router/runtime/DeferredDataScripts.js

@@ -0,0 +1,148 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useRef, useMemo, useContext } from "react";
+import {
+  Await,
+  UNSAFE_DataRouterContext as DataRouterContext,
+  useAsyncError
+} from "react-router-dom";
+import { serializeJson } from "@modern-js/utils/serialize";
+import { JSX_SHELL_STREAM_END_MARK } from "../../common";
+import { serializeErrors } from "./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 = useContext(DataRouterContext);
+  const { staticContext } = context || {};
+  const hydratedRef = useRef(false);
+  useEffect(() => {
+    hydratedRef.current = true;
+  }, []);
+  const deferredScripts = useMemo(() => {
+    if (!staticContext) {
+      return null;
+    }
+    const activeDeferreds = staticContext.activeDeferreds || [];
+    const _ROUTER_DATA = {
+      loaderData: staticContext.loaderData,
+      errors: serializeErrors(staticContext.errors)
+    };
+    let initialScripts = [
+      `_ROUTER_DATA = ${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__ */ 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}, ${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(${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__ */ jsxs(Fragment, { children: [
+    !hydratedRef.current && /* @__PURE__ */ jsx(
+      "script",
+      {
+        async: true,
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: { __html: deferredScripts[0] }
+      }
+    ),
+    !hydratedRef.current && deferredScripts[1],
+    JSX_SHELL_STREAM_END_MARK
+  ] });
+};
+const DeferredDataScript = ({
+  data,
+  routeId,
+  dataKey
+}) => {
+  return /* @__PURE__ */ jsx(Suspense, { children: typeof document === "undefined" && data && dataKey && routeId ? /* @__PURE__ */ jsx(
+    Await,
+    {
+      resolve: data,
+      errorElement: /* @__PURE__ */ jsx(ErrorDeferredDataScript, { routeId, dataKey }),
+      children: (data2) => /* @__PURE__ */ jsx(
+        "script",
+        {
+          async: true,
+          suppressHydrationWarning: true,
+          dangerouslySetInnerHTML: {
+            __html: `_ROUTER_DATA.r(${JSON.stringify(
+              routeId
+            )}, ${JSON.stringify(dataKey)}, ${serializeJson(data2)});`
+          }
+        }
+      )
+    }
+  ) : null });
+};
+const ErrorDeferredDataScript = ({
+  routeId,
+  dataKey
+}) => {
+  const error = useAsyncError();
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        __html: `_ROUTER_DATA.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+          dataKey
+        )}, ${void 0}, ${serializeJson({
+          message: error.message,
+          stack: error.stack
+        })});`
+      }
+    }
+  );
+};
+var DeferredDataScripts_default = DeferredDataScripts;
+export {
+  DeferredDataScripts_default as default
+};