@modern-js/runtime 2.7.0 → 2.9.0

package/dist/esm-node/router/runtime/DeferredDataScripts.node.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_node_default = DeferredDataScripts;
+export {
+  DeferredDataScripts_node_default as default
+};

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

@@ -5,7 +5,7 @@ import {
   LOADABLE_STATS_FILE,
   isUseSSRBundle,
   createRuntimeExportsUtils,
-  isSingleEntry
+  isSSGEntry
 } from "@modern-js/utils";
 const PLUGIN_IDENTIFIER = "ssr";
 const hasStringSSREntry = (userConfig) => {
@@ -113,8 +113,7 @@ var cli_default = () => ({
             );
           }
         }
-        const ssgConfig = userConfig.output.ssg;
-        const useSSG = isSingleEntry(entrypoints) ? Boolean(ssgConfig) : ssgConfig === true || typeof (ssgConfig == null ? void 0 : ssgConfig[0]) === "function" || Boolean(ssgConfig == null ? void 0 : ssgConfig[entryName]);
+        const useSSG = isSSGEntry(userConfig, entryName, entrypoints);
         ssrConfigMap.set(entryName, ssrConfig || useSSG);
         if (ssrConfig || useSSG) {
           imports.push({

package/dist/esm-node/ssr/serverRender/index.js

@@ -1,5 +1,13 @@
 import { isReact18 } from "../utils";
+import { CSS_CHUNKS_PLACEHOLDER } from "./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>",
+      `${CSS_CHUNKS_PLACEHOLDER}</head>`
+    );
+  }
   if (isReact18() && options.config.mode === "stream") {
     const pipe = await require("./renderToStream").render(options);
     return pipe;

package/dist/esm-node/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -1,11 +1,11 @@
 import ReactHelmet from "react-helmet";
 import { matchRoutes } from "react-router-dom";
 import helmetReplace from "../helmet";
+import { CSS_CHUNKS_PLACEHOLDER } from "../utils";
 import {
   HEAD_REG_EXP,
   buildTemplate
 } from "./buildTemplate.share";
-const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 function getHeadTemplate(beforeEntryTemplate, context) {
   const callbacks = [
     (headTemplate2) => {
@@ -29,7 +29,11 @@ function getHeadTemplate(beforeEntryTemplate, context) {
       }
       const { routeAssets } = routeManifest;
       const cssChunks = [];
-      const matches = matchRoutes(routes, routerContext.location);
+      const matches = matchRoutes(
+        routes,
+        routerContext.location,
+        routerContext.basename
+      );
       matches == null ? void 0 : matches.forEach((match, index) => {
         if (!index) {
           return;

package/dist/esm-node/ssr/serverRender/renderToStream/renderToPipe.worker.js

@@ -1,9 +1,16 @@
 import { RenderLevel } from "../types";
+import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { getTemplates } from "./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"));
@@ -35,11 +42,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(ESCAPED_SHELL_STREAM_END_MARK)) {
+                concatedChunk = concatedChunk.replace(
+                  ESCAPED_SHELL_STREAM_END_MARK,
+                  shellAfter
+                );
+                shellChunkStatus = 2 /* FINIESH */;
+              }
+              controller.enqueue(encodeForWebStream(concatedChunk));
             } else {
               controller.enqueue(value);
             }
@@ -48,7 +64,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 } = getTemplates(
@@ -59,7 +75,7 @@ function renderToPipe(rootElement, context, options) {
       return fallbackHtml;
     }
   };
-  return forUserPipe;
+  return forUserPipe();
 }
 let encoder;
 function encodeForWebStream(thing) {

package/dist/esm-node/ssr/serverRender/utils.js

@@ -1,3 +1,4 @@
+const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 function getLoadableScripts(extractor) {
   const check = (scripts2) => (scripts2 || "").includes("__LOADABLE_REQUIRED_CHUNKS___ext");
   const scripts = extractor.getScriptTags();
@@ -7,5 +8,6 @@ function getLoadableScripts(extractor) {
   return scripts.split("</script>").slice(0, 2).map((i) => `${i}</script>`).join("");
 }
 export {
+  CSS_CHUNKS_PLACEHOLDER,
   getLoadableScripts
 };

package/dist/esm-node/state/runtime/index.js

@@ -1,9 +1,6 @@
 export * from "@modern-js-reduck/react";
-import { model, createStore } from "@modern-js-reduck/store";
 import { default as default2 } from "./plugin";
 export * from "./plugin";
 export {
-  createStore,
-  default2 as default,
-  model
+  default2 as default
 };

package/dist/types/router/runtime/DeferredDataScripts.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="react" />
+declare const _default: () => null;
 
-/**
- * DeferredDataScripts only renders in server side,
- * it doesn't need to be hydrated in client side.
- */
-declare const DeferredDataScripts: () => JSX.Element | null;
-export default DeferredDataScripts;
+export default _default;

package/dist/types/router/runtime/DeferredDataScripts.node.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+
+/**
+ * DeferredDataScripts only renders in server side,
+ * it doesn't need to be hydrated in client side.
+ */
+declare const DeferredDataScripts: () => JSX.Element | null;
+export default DeferredDataScripts;

package/dist/types/router/runtime/index.d.ts

@@ -4,6 +4,6 @@ export type { SingleRouteConfig, RouterConfig };
 export default routerPlugin;
 export { modifyRoutes } from './plugin';
 export * from './withRouter';
-export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To } from 'react-router-dom';
+export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, FetcherWithComponents, BrowserRouterProps, HashRouterProps, HistoryRouterProps, LinkProps, NavLinkProps, FormProps, ScrollRestorationProps, SubmitFunction, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, To } from 'react-router-dom';
 export { createBrowserRouter, createHashRouter, createMemoryRouter, RouterProvider, BrowserRouter, HashRouter, MemoryRouter, Router, Await, Form, Link, NavLink, Navigate, Outlet, Route, Routes, ScrollRestoration, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, createRoutesFromChildren, createRoutesFromElements, createSearchParams, generatePath, isRouteErrorResponse, matchPath, matchRoutes, renderMatches, resolvePath } from 'react-router-dom';
 export { defer, json, redirect } from '@modern-js/utils/remix-router';

package/dist/types/ssr/serverRender/renderToStream/renderToPipe.worker.d.ts

@@ -4,5 +4,5 @@ import type { Writable } from 'stream';
 import type { RenderToReadableStreamOptions } from 'react-dom/server';
 import { RuntimeContext } from '../types';
 export type Pipe<T extends Writable> = (output: T) => Promise<T | string>;
-declare function renderToPipe(rootElement: React.ReactElement, context: RuntimeContext, options?: RenderToReadableStreamOptions): Pipe<Writable>;
+declare function renderToPipe(rootElement: React.ReactElement, context: RuntimeContext, options?: RenderToReadableStreamOptions): Promise<string | ReadableStream<any>>;
 export default renderToPipe;

package/dist/types/ssr/serverRender/utils.d.ts

@@ -1,2 +1,3 @@
 import type { ChunkExtractor } from '@loadable/server';
+export declare const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
 export declare function getLoadableScripts(extractor: ChunkExtractor): string;

package/dist/types/state/runtime/index.d.ts

@@ -1,4 +1,3 @@
 export * from '@modern-js-reduck/react';
-export { model, createStore } from '@modern-js-reduck/store';
 export { default } from './plugin';
 export * from './plugin';

package/package.json

@@ -2,8 +2,8 @@
   "name": "@modern-js/runtime",
   "description": "A Progressive React Framework for modern web development.",
   "homepage": "https://modernjs.dev",
-  "bugs": "https://github.com/modern-js-dev/modern.js/issues",
-  "repository": "modern-js-dev/modern.js",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": "web-infra-dev/modern.js",
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.7.0",
+  "version": "2.9.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -67,7 +67,7 @@
     },
     "./model": {
       "jsnext:source": "./src/state/index.ts",
-      "types": "./dist/types/model.d.ts",
+      "types": "./types/model.d.ts",
       "default": "./dist/esm/state/index.js"
     },
     "./cli": {
@@ -158,9 +158,9 @@
     "react-side-effect": "^2.1.1",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.1",
-    "@modern-js/plugin": "2.7.0",
-    "@modern-js/types": "2.7.0",
-    "@modern-js/utils": "2.7.0"
+    "@modern-js/plugin": "2.9.0",
+    "@modern-js/utils": "2.9.0",
+    "@modern-js/types": "2.9.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -181,11 +181,11 @@
     "react-dom": "^18",
     "ts-jest": "^27.0.4",
     "typescript": "^4",
-    "@modern-js/core": "2.7.0",
-    "@modern-js/server-core": "2.7.0",
-    "@modern-js/app-tools": "2.7.0",
-    "@scripts/build": "2.7.0",
-    "@scripts/jest-config": "2.7.0"
+    "@modern-js/app-tools": "2.9.0",
+    "@modern-js/core": "2.9.0",
+    "@modern-js/server-core": "2.9.0",
+    "@scripts/jest-config": "2.9.0",
+    "@scripts/build": "2.9.0"
   },
   "sideEffects": false,
   "modernConfig": {},

package/types/router.d.ts

@@ -3,7 +3,7 @@ import '../dist/types/router';
 
 declare module '@modern-js/app-tools' {
   interface RuntimeUserConfig {
-    router?: RouterConfig | boolean;
+    router?: Partial<RouterConfig> | boolean;
   }
 }