@modern-js/runtime 2.4.1-alpha.1 → 2.5.0-alpha.0

package/dist/{js/modern → esm-node}/router/cli/index.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
   getEntryOptions,
   createRuntimeExportsUtils,
@@ -89,11 +70,11 @@ var cli_default = () => ({
           const serverBase = serverRoutes.filter((route) => route.entryName === entryName).map((route) => route.urlPath).sort((a, b) => a.length - b.length > 0 ? -1 : 1);
           plugins.push({
             name: PLUGIN_IDENTIFIER,
-            options: JSON.stringify(__spreadProps(__spreadValues({
-              serverBase
-            }, runtimeConfig.router), {
+            options: JSON.stringify({
+              serverBase,
+              ...runtimeConfig.router,
               routesConfig: fileSystemRoutes ? `{ ${ROUTES_IDENTIFIER}, globalApp: App }` : void 0
-            })).replace(
+            }).replace(
               /"routesConfig"\s*:\s*"((\S|\s)+)"/g,
               '"routesConfig": $1,'
             )

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

@@ -0,0 +1,7 @@
+import { routerPlugin } from "./runtime/plugin.node";
+import { routerPlugin as routerPlugin2 } from "./runtime/plugin.node";
+export * from "./runtime";
+export {
+  routerPlugin2 as default,
+  routerPlugin as router
+};

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

@@ -0,0 +1,131 @@
+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";
+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(() => {
+    const activeDeferreds = (staticContext == null ? void 0 : staticContext.activeDeferreds) || [];
+    const _ROUTER_DATA = {
+      loaderData: staticContext == null ? void 0 : staticContext.loaderData
+    };
+    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];
+  }, []);
+  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
+};

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

@@ -0,0 +1,58 @@
+import { routerPlugin } from "./plugin";
+var runtime_default = routerPlugin;
+import { modifyRoutes } from "./plugin";
+export * from "./withRouter";
+import {
+  Form,
+  Outlet,
+  useAsyncError,
+  useAsyncValue,
+  isRouteErrorResponse,
+  useBeforeUnload,
+  useFormAction,
+  useHref,
+  useLocation,
+  useNavigate,
+  useNavigation,
+  useNavigationType,
+  useOutlet,
+  useOutletContext,
+  useParams,
+  useResolvedPath,
+  useRevalidator,
+  useRouteError,
+  useRouteLoaderData,
+  useSearchParams,
+  useSubmit,
+  unstable_useBlocker,
+  unstable_usePrompt
+} from "react-router-dom";
+import { defer } from "@modern-js/utils/remix-router";
+export {
+  Form,
+  Outlet,
+  runtime_default as default,
+  defer,
+  isRouteErrorResponse,
+  modifyRoutes,
+  unstable_useBlocker,
+  unstable_usePrompt,
+  useAsyncError,
+  useAsyncValue,
+  useBeforeUnload,
+  useFormAction,
+  useHref,
+  useLocation,
+  useNavigate,
+  useNavigation,
+  useNavigationType,
+  useOutlet,
+  useOutletContext,
+  useParams,
+  useResolvedPath,
+  useRevalidator,
+  useRouteError,
+  useRouteLoaderData,
+  useSearchParams,
+  useSubmit
+};

package/dist/{js/modern → esm-node}/router/runtime/plugin.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import {
   createBrowserRouter,
@@ -74,12 +55,20 @@ const routerPlugin = ({
               const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(finalRouteConfig));
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
-              const router = supportHtml5History ? createBrowserRouter(routes, { basename: _basename }) : createHashRouter(routes, { basename: _basename });
-              return /* @__PURE__ */ jsx(App, __spreadProps(__spreadValues({}, props), {
+              const hydrationData = window._ROUTER_DATA;
+              const router = supportHtml5History ? createBrowserRouter(routes, {
+                basename: _basename,
+                hydrationData
+              }) : createHashRouter(routes, {
+                basename: _basename,
+                hydrationData
+              });
+              return /* @__PURE__ */ jsx(App, {
+                ...props,
                 children: /* @__PURE__ */ jsx(RouterProvider, {
                   router
                 })
-              }));
+              });
             };
           };
           const RouteApp = getRouteApp();

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

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { createStaticHandler } from "@modern-js/utils/remix-router";
+import {
+  createStaticRouter,
+  StaticRouterProvider
+} from "react-router-dom/server";
+import hoistNonReactStatics from "hoist-non-react-statics";
+import { createRoutesFromElements } from "react-router-dom";
+import { RuntimeReactContext } from "../../core";
+import { renderRoutes, urlJoin } from "./utils";
+import { installGlobals } from "./fetch";
+installGlobals();
+function createFetchRequest(req) {
+  const origin = `${req.protocol}://${req.host}`;
+  const url = new URL(req.originalUrl || req.url, origin);
+  const controller = new AbortController();
+  const init = {
+    method: req.method,
+    headers: createFetchHeaders(req.headers),
+    signal: controller.signal
+  };
+  return new Request(url.href, init);
+}
+function createFetchHeaders(requestHeaders) {
+  const headers = new Headers();
+  for (const [key, values] of Object.entries(requestHeaders || {})) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (const value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+  return headers;
+}
+const routerPlugin = ({
+  basename = "",
+  routesConfig,
+  createRoutes
+}) => {
+  return {
+    name: "@modern-js/plugin-router",
+    setup: () => {
+      return {
+        async init({ context }, next) {
+          if (!routesConfig && !createRoutes) {
+            return next({ context });
+          }
+          const { request } = context.ssrContext;
+          const baseUrl = request.baseUrl;
+          const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
+          const routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes(routesConfig));
+          const { query } = createStaticHandler(routes, {
+            basename: _basename
+          });
+          const remixRequest = createFetchRequest(request);
+          const routerContext = await query(remixRequest);
+          if (routerContext instanceof Response) {
+            return routerContext;
+          }
+          const router = createStaticRouter(routes, routerContext);
+          context.router = router;
+          context.routerContext = routerContext;
+          context.routes = routes;
+          context.routeManifest = context.ssrContext.routeManifest;
+          return next({ context });
+        },
+        hoc: ({ App }, next) => {
+          if (!routesConfig) {
+            return next({ App });
+          }
+          const getRouteApp = () => {
+            return (props) => {
+              const { router, routerContext } = useContext(RuntimeReactContext);
+              return /* @__PURE__ */ jsx(App, {
+                ...props,
+                children: /* @__PURE__ */ jsx(StaticRouterProvider, {
+                  router,
+                  context: routerContext,
+                  hydrate: false
+                })
+              });
+            };
+          };
+          const RouteApp = getRouteApp();
+          if (routesConfig == null ? void 0 : routesConfig.globalApp) {
+            return next({
+              App: hoistNonReactStatics(RouteApp, routesConfig.globalApp)
+            });
+          }
+          return next({
+            App: RouteApp
+          });
+        }
+      };
+    }
+  };
+};
+const modifyRoutes = () => {
+};
+export {
+  createFetchHeaders,
+  modifyRoutes,
+  routerPlugin
+};

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

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { Route } from "react-router-dom";
+import { renderNestedRoute } from "@modern-js/utils/nestedRoutes";
+import { DefaultNotFound } from "./DefaultNotFound";
+import DeferredDataScripts from "./DeferredDataScripts";
+function getRouteComponents(routes, globalApp) {
+  const Layout = ({ Component, ...props }) => {
+    const GlobalLayout = globalApp;
+    if (!GlobalLayout) {
+      return /* @__PURE__ */ jsx(Component, {
+        ...props
+      });
+    }
+    return /* @__PURE__ */ jsx(GlobalLayout, {
+      Component,
+      ...props
+    });
+  };
+  const routeElements = [];
+  for (const route of routes) {
+    if (route.type === "nested") {
+      const routeElement = renderNestedRoute(route, {
+        DeferredDataComponent: DeferredDataScripts
+      });
+      routeElements.push(routeElement);
+    } else {
+      const routeElement = /* @__PURE__ */ jsx(Route, {
+        path: route.path,
+        element: /* @__PURE__ */ jsx(Layout, {
+          Component: route.component
+        })
+      }, route.path);
+      routeElements.push(routeElement);
+    }
+  }
+  routeElements.push(/* @__PURE__ */ jsx(Route, {
+    path: "*",
+    element: /* @__PURE__ */ jsx(DefaultNotFound, {})
+  }, "*"));
+  return routeElements;
+}
+function renderRoutes(routesConfig) {
+  if (!routesConfig) {
+    return null;
+  }
+  const { routes, globalApp } = routesConfig;
+  if (!routes) {
+    return null;
+  }
+  const routeElements = getRouteComponents(routes, globalApp);
+  return routeElements;
+}
+function getLocation(serverContext) {
+  var _a;
+  const { pathname, url } = (serverContext == null ? void 0 : serverContext.request) || {};
+  const cleanUrl = (_a = url == null ? void 0 : url.replace("http://", "")) == null ? void 0 : _a.replace("https://", "");
+  const index = (cleanUrl || "").indexOf(pathname);
+  if (index === -1) {
+    return pathname;
+  }
+  return cleanUrl.substring(index);
+}
+const urlJoin = (...parts) => {
+  const separator = "/";
+  const replace = new RegExp(`${separator}{1,}`, "g");
+  return standardSlash(parts.join(separator).replace(replace, separator));
+};
+function standardSlash(str) {
+  let addr = str;
+  if (!addr || typeof addr !== "string") {
+    return addr;
+  }
+  if (addr.startsWith(".")) {
+    addr = addr.slice(1);
+  }
+  if (!addr.startsWith("/")) {
+    addr = `/${addr}`;
+  }
+  if (addr.endsWith("/") && addr !== "/") {
+    addr = addr.slice(0, addr.length - 1);
+  }
+  return addr;
+}
+export {
+  getLocation,
+  getRouteComponents,
+  renderRoutes,
+  standardSlash,
+  urlJoin
+};

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

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+const withRouter = (Component) => {
+  return (props) => {
+    const location = useLocation();
+    const params = useParams();
+    const navigate = useNavigate();
+    return /* @__PURE__ */ jsx(Component, {
+      ...props,
+      location,
+      params,
+      navigate
+    });
+  };
+};
+export {
+  withRouter
+};

package/dist/{js/modern → esm-node}/ssr/cli/index.js

@@ -1,19 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import path from "path";
 import {
   getEntryOptions,
@@ -59,9 +43,9 @@ var cli_default = () => ({
             }
           },
           tools: {
-            webpackChain: (chain, { name, isServer, isServiceWorker, CHAIN_ID }) => {
+            webpackChain: (chain, { isServer, isServiceWorker, CHAIN_ID }) => {
               const userConfig = api.useResolvedConfigContext();
-              if (isUseSSRBundle(userConfig) && name !== "server" && hasStringSSREntry(userConfig)) {
+              if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig)) {
                 const LoadableWebpackPlugin = require("@loadable/webpack-plugin");
                 chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableWebpackPlugin, [
                   { filename: LOADABLE_STATS_FILE }
@@ -75,7 +59,10 @@ var cli_default = () => ({
               chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap((args) => {
                 const [vars, ...rest] = args;
                 return [
-                  __spreadValues(__spreadValues({}, vars), modernVars),
+                  {
+                    ...vars,
+                    ...modernVars
+                  },
                   ...rest
                 ];
               });

package/dist/{js/modern → esm-node}/ssr/index.js

@@ -1,42 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
 import hoistNonReactStatics from "hoist-non-react-statics";
@@ -50,11 +11,12 @@ const ssr = (config) => ({
   setup: () => {
     const mockResp = mockResponse();
     return {
-      client: (_0) => __async(void 0, [_0], function* ({ App, context, ModernRender, ModernHydrate }) {
+      client: async ({ App, context, ModernRender, ModernHydrate }) => {
         var _a;
-        const hydrateContext = __spreadProps(__spreadValues({}, context), {
+        const hydrateContext = {
+          ...context,
           _hydration: true
-        });
+        };
         const callback = () => {
           delete hydrateContext._hydration;
         };
@@ -112,15 +74,16 @@ const ssr = (config) => ({
             }));
           }
         }
-      }),
+      },
       init({ context }, next) {
         var _a, _b;
         const request = (_b = (_a = window == null ? void 0 : window._SSR_DATA) == null ? void 0 : _a.context) == null ? void 0 : _b.request;
         if (!request) {
-          context.ssrContext = __spreadProps(__spreadValues({}, context.ssrContext), {
+          context.ssrContext = {
+            ...context.ssrContext,
             response: mockResp,
             request: formatClient({})
-          });
+          };
           return next({ context });
         }
         context.ssrContext.response = mockResp;
@@ -134,18 +97,20 @@ const ssr = (config) => ({
         if (!request) {
           return next({
             context,
-            pickedContext: __spreadProps(__spreadValues({}, pickedContext), {
+            pickedContext: {
+              ...pickedContext,
               initialData
-            })
+            }
           });
         }
         return next({
           context,
-          pickedContext: __spreadProps(__spreadValues({}, pickedContext), {
+          pickedContext: {
+            ...pickedContext,
             initialData,
             request,
             response: mockResp
-          })
+          }
         });
       }
     };