@modern-js/runtime 2.68.0 → 2.68.1

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

@@ -1,25 +1,17 @@
 import { useRouteLoaderData as useRouteData } from "@modern-js/runtime-utils/router";
-import { routerPlugin } from "./plugin";
 export * from "@modern-js/runtime-utils/router";
-import { renderRoutes } from "./utils";
-var runtime_default = routerPlugin;
-import { modifyRoutes } from "./plugin";
-export * from "./withRouter";
 import { Link, NavLink } from "./PrefetchLink";
 const useRouteLoaderData = (routeId) => {
   const realRouteId = routeId.replace(/\[(.*?)\]/g, "($1)");
   return useRouteData(realRouteId);
 };
 import { createShouldRevalidate, handleRouteModule, handleRouteModuleError } from "./routeModule";
+export * from "./withRouter";
 export {
   Link,
   NavLink,
   createShouldRevalidate,
-  runtime_default as default,
   handleRouteModule,
   handleRouteModuleError,
-  modifyRoutes,
-  renderRoutes,
-  routerPlugin,
   useRouteLoaderData
 };

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

@@ -0,0 +1,10 @@
+import { routerPlugin } from "./plugin";
+var internal_default = routerPlugin;
+import { renderRoutes } from "./utils";
+import { modifyRoutes } from "./plugin";
+export {
+  internal_default as default,
+  modifyRoutes,
+  renderRoutes,
+  routerPlugin
+};

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

@@ -2,11 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { merge } from "@modern-js/runtime-utils/merge";
 import { RouterProvider, createBrowserRouter, createHashRouter, createRoutesFromElements, useHref, useLocation, useMatches } from "@modern-js/runtime-utils/router";
 import { normalizePathname } from "@modern-js/runtime-utils/url";
-import { useContext, useMemo } from "react";
+import * as React from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { RuntimeReactContext } from "../../core";
 import { getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
+import { getGlobalIsRscClient } from "../../core/context";
 import { modifyRoutes as modifyRoutesHook, onBeforeCreateRoutes as onBeforeCreateRoutesHook } from "./hooks";
-import { deserializeErrors, renderRoutes, urlJoin } from "./utils";
+import { createClientRouterFromPayload } from "./rsc-router";
+import { createRouteObjectsFromConfig, deserializeErrors, renderRoutes, urlJoin } from "./utils";
 let finalRouteConfig = {
   routes: []
 };
@@ -28,7 +31,9 @@ const routerPlugin = (userConfig = {}) => {
       onBeforeCreateRoutes: onBeforeCreateRoutesHook
     },
     setup: (api) => {
-      let routes = [];
+      const routesContainer = {
+        current: []
+      };
       api.onBeforeRender((context) => {
         if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
           var _ssrContext_request;
@@ -48,15 +53,14 @@ const routerPlugin = (userConfig = {}) => {
         };
         Object.defineProperty(context, "routes", {
           get() {
-            return routes;
+            return routesContainer.current;
           },
           enumerable: true
         });
       });
       api.wrapRoot((App) => {
-        const pluginConfig = api.getRuntimeConfig();
-        const { serverBase = [], supportHtml5History = true, basename = "", routesConfig, createRoutes, future } = merge(pluginConfig.router || {}, userConfig);
-        const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+        const mergedConfig = merge(api.getRuntimeConfig().router || {}, userConfig);
+        const { serverBase = [], supportHtml5History = true, basename = "", routesConfig, createRoutes, future } = mergedConfig;
         finalRouteConfig = {
           routes: getGlobalRoutes(),
           globalApp: getGlobalLayoutApp(),
@@ -65,82 +69,127 @@ const routerPlugin = (userConfig = {}) => {
         if (!finalRouteConfig.routes && !createRoutes) {
           return App;
         }
-        const getRouteApp = () => {
-          const useCreateRouter = (props) => {
-            const runtimeContext = useContext(RuntimeReactContext);
-            const baseUrl = select(location.pathname).replace(/^\/*/, "/");
-            const _basename = baseUrl === "/" ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename) : baseUrl;
-            let hydrationData = window._ROUTER_DATA;
-            const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
-            return useMemo(() => {
-              if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
-                hydrationData = {
-                  ...hydrationData,
-                  errors: deserializeErrors(hydrationData.errors)
-                };
-              }
-              routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-                routesConfig: finalRouteConfig,
-                props
-              }));
-              const hooks = api.getHooks();
-              routes = hooks.modifyRoutes.call(routes);
-              const router = supportHtml5History ? createBrowserRouter(routes, {
-                basename: _basename,
-                hydrationData
-              }) : createHashRouter(routes, {
-                basename: _basename,
-                hydrationData
-              });
-              const originSubscribe = router.subscribe;
-              router.subscribe = (listener) => {
-                const wrapedListener = (...args) => {
-                  const blockRoute = getBlockNavState ? getBlockNavState() : false;
-                  if (blockRoute) {
-                    return;
-                  }
-                  return listener(...args);
-                };
-                return originSubscribe(wrapedListener);
-              };
-              return router;
-            }, [
-              finalRouteConfig,
-              props,
-              _basename,
-              hydrationData,
-              getBlockNavState
-            ]);
-          };
-          const Null = () => null;
-          return (props) => {
-            beforeCreateRouter = false;
-            const router = useCreateRouter(props);
-            const routerWrapper = (
-              // To match the node tree about https://github.com/web-infra-dev/modern.js/blob/v2.59.0/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx#L150-L168
-              // According to react [useId generation algorithm](https://github.com/facebook/react/pull/22644), `useId` will generate id with the react node react struct.
-              // To void hydration failed, we must guarantee that the node tree when browser hydrate must have same struct with node tree when ssr render.
-              /* @__PURE__ */ _jsxs(_Fragment, {
-                children: [
-                  /* @__PURE__ */ _jsx(RouterProvider, {
-                    router,
-                    future
-                  }),
-                  /* @__PURE__ */ _jsx(Null, {}),
-                  /* @__PURE__ */ _jsx(Null, {})
-                ]
-              })
-            );
-            return App ? /* @__PURE__ */ _jsx(App, {
-              children: routerWrapper
-            }) : routerWrapper;
-          };
+        const selectBasePath = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+        const RouterWrapper = (props) => {
+          const { router, routes } = useRouterCreation({
+            ...props,
+            rscPayload: props === null || props === void 0 ? void 0 : props.rscPayload
+          }, {
+            api,
+            createRoutes,
+            supportHtml5History,
+            selectBasePath,
+            basename,
+            future
+          });
+          useEffect(() => {
+            routesContainer.current = routes;
+          }, [
+            routes
+          ]);
+          beforeCreateRouter = false;
+          const RouterContent = () => /* @__PURE__ */ _jsxs(_Fragment, {
+            children: [
+              /* @__PURE__ */ _jsx(RouterProvider, {
+                router,
+                future
+              }),
+              /* @__PURE__ */ _jsx(EmptyComponent, {}),
+              /* @__PURE__ */ _jsx(EmptyComponent, {})
+            ]
+          });
+          return App ? /* @__PURE__ */ _jsx(App, {
+            children: /* @__PURE__ */ _jsx(RouterContent, {})
+          }) : /* @__PURE__ */ _jsx(RouterContent, {});
         };
-        return getRouteApp();
+        return RouterWrapper;
       });
     }
   };
 };
+const EmptyComponent = () => null;
+const safeUse = (promise) => {
+  const useProp = "use";
+  const useHook = React && React[useProp];
+  if (typeof useHook === "function") {
+    return useHook(promise);
+  }
+  return null;
+};
+function useRouterCreation(props, options) {
+  const { api, createRoutes, supportHtml5History, selectBasePath, basename } = options;
+  const runtimeContext = useContext(RuntimeReactContext);
+  const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, "/");
+  const _basename = baseUrl === "/" ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename) : baseUrl;
+  const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
+  const rscPayload = (props === null || props === void 0 ? void 0 : props.rscPayload) ? safeUse(props.rscPayload) : null;
+  let hydrationData = window._ROUTER_DATA || rscPayload;
+  return useMemo(() => {
+    if (hydrationData === null || hydrationData === void 0 ? void 0 : hydrationData.errors) {
+      hydrationData = {
+        ...hydrationData,
+        errors: deserializeErrors(hydrationData.errors)
+      };
+    }
+    const isRscClient = getGlobalIsRscClient();
+    let routes = null;
+    if (isRscClient) {
+      routes = createRoutes ? createRoutes() : createRouteObjectsFromConfig({
+        routesConfig: finalRouteConfig
+      });
+    } else {
+      routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+        routesConfig: finalRouteConfig,
+        props
+      }));
+    }
+    if (!routes) {
+      routes = [];
+    }
+    const hooks = api.getHooks();
+    if (rscPayload) {
+      try {
+        const router2 = createClientRouterFromPayload(rscPayload, routes, _basename);
+        return {
+          router: router2,
+          routes: router2.routes || []
+        };
+      } catch (e) {
+        console.error("Failed to create router from RSC payload:", e);
+      }
+    }
+    const modifiedRoutes = hooks.modifyRoutes.call(routes);
+    console.log("modifiedRoutes111111", modifiedRoutes, _basename, hydrationData);
+    const router = supportHtml5History ? createBrowserRouter(modifiedRoutes, {
+      basename: _basename,
+      hydrationData
+    }) : createHashRouter(modifiedRoutes, {
+      basename: _basename,
+      hydrationData
+    });
+    const originSubscribe = router.subscribe;
+    router.subscribe = (listener) => {
+      const wrappedListener = (...args) => {
+        const blockRoute = getBlockNavState ? getBlockNavState() : false;
+        if (blockRoute) {
+          return;
+        }
+        return listener(...args);
+      };
+      return originSubscribe(wrappedListener);
+    };
+    return {
+      router,
+      routes: modifiedRoutes
+    };
+  }, [
+    finalRouteConfig,
+    props,
+    _basename,
+    hydrationData,
+    getBlockNavState
+  ]);
+}
 export {
   beforeCreateRouter,
   finalRouteConfig,

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

@@ -9,10 +9,12 @@ import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
 import { useContext } from "react";
 import { JSX_SHELL_STREAM_END_MARK } from "../../common";
 import { RuntimeReactContext } from "../../core";
-import { getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
+import { getGlobalEnableRsc, getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
+import { setServerPayload } from "../../core/context/serverPayload.server";
 import DeferredDataScripts from "./DeferredDataScripts.node";
 import { modifyRoutes as modifyRoutesHook, onBeforeCreateRoutes as onBeforeCreateRoutesHook } from "./hooks";
-import { renderRoutes, urlJoin } from "./utils";
+import { RSCStaticRouter, createServerPayload, handleRSCRedirect, prepareRSCRoutes } from "./rsc-router";
+import { createRouteObjectsFromConfig, renderRoutes, urlJoin } from "./utils";
 function createRemixReuqest(request) {
   const method = "GET";
   const { headers } = request;
@@ -44,6 +46,10 @@ const routerPlugin = (userConfig = {}) => {
         if (!finalRouteConfig.routes && !createRoutes) {
           return;
         }
+        const enableRsc = getGlobalEnableRsc();
+        if (enableRsc) {
+          await prepareRSCRoutes(finalRouteConfig.routes);
+        }
         const { request, mode: ssrMode, nonce, loaderFailureMode = "errorBoundary" } = context.ssrContext;
         const { baseUrl } = request;
         const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
@@ -52,13 +58,20 @@ const routerPlugin = (userConfig = {}) => {
         requestContext.set(reporterCtx, reporter);
         const hooks = api.getHooks();
         await hooks.onBeforeCreateRoutes.call(context);
-        let routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-          routesConfig: finalRouteConfig,
-          ssrMode,
-          props: {
-            nonce
-          }
-        }));
+        let routes = [];
+        if (enableRsc) {
+          routes = createRoutes ? createRoutes() : createRouteObjectsFromConfig({
+            routesConfig: finalRouteConfig
+          });
+        } else {
+          routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+            routesConfig: finalRouteConfig,
+            ssrMode,
+            props: {
+              nonce
+            }
+          }));
+        }
         routes = hooks.modifyRoutes.call(routes);
         const { query } = createStaticHandler(routes, {
           basename: _basename
@@ -70,8 +83,13 @@ const routerPlugin = (userConfig = {}) => {
         });
         const cost = end();
         (_context_ssrContext1 = context.ssrContext) === null || _context_ssrContext1 === void 0 ? void 0 : (_context_ssrContext_onTiming = _context_ssrContext1.onTiming) === null || _context_ssrContext_onTiming === void 0 ? void 0 : _context_ssrContext_onTiming.call(_context_ssrContext1, LOADER_REPORTER_NAME, cost);
+        const isRSCNavigation = remixRequest.headers.get("x-rsc-tree") === "true";
         if (routerContext instanceof Response) {
-          return interrupt(routerContext);
+          if (enableRsc && isRSCNavigation) {
+            return interrupt(handleRSCRedirect(routerContext.headers, _basename, routerContext.status));
+          } else {
+            return interrupt(routerContext);
+          }
         }
         const errors = Object.values(routerContext.errors || {});
         if (
@@ -81,9 +99,19 @@ const routerPlugin = (userConfig = {}) => {
           routerContext.statusCode = 200;
           throw errors[0];
         }
-        const router = createStaticRouter(routes, routerContext);
         context.routerContext = routerContext;
-        context.remixRouter = router;
+        let payload;
+        if (enableRsc) {
+          if (isRSCNavigation) {
+            for (const match of routerContext.matches) {
+              if (match.route.hasClientLoader) {
+                delete routerContext.loaderData[match.route.id];
+              }
+            }
+          }
+          payload = createServerPayload(routerContext, routes);
+          setServerPayload(payload);
+        }
         Object.defineProperty(context, "routes", {
           get() {
             return routes;
@@ -96,30 +124,43 @@ const routerPlugin = (userConfig = {}) => {
           return App;
         }
         const getRouteApp = () => {
-          return () => {
+          const enableRsc = getGlobalEnableRsc();
+          return (props) => {
             const context = useContext(RuntimeReactContext);
-            const { remixRouter, routerContext, ssrContext } = context;
+            const { routerContext, ssrContext, routes } = context;
             const { nonce, mode, useJsonScript } = ssrContext;
-            const routerWrapper = /* @__PURE__ */ _jsxs(_Fragment, {
-              children: [
-                /* @__PURE__ */ _jsx(StaticRouterProvider, {
-                  router: remixRouter,
-                  context: routerContext,
-                  hydrate: false
-                }),
-                mode === "stream" && // ROUTER_DATA will inject in `packages/runtime/plugin-runtime/src/core/server/string/ssrData.ts` in string ssr
-                // So we can inject it only when streaming ssr
-                /* @__PURE__ */ _jsx(DeferredDataScripts, {
-                  nonce,
-                  context: routerContext,
-                  useJsonScript
-                }),
-                mode === "stream" && JSX_SHELL_STREAM_END_MARK
-              ]
-            });
-            return App ? /* @__PURE__ */ _jsx(App, {
-              children: routerWrapper
-            }) : routerWrapper;
+            const { basename } = routerContext;
+            const remixRouter = createStaticRouter(routes, routerContext);
+            if (!enableRsc) {
+              const routerWrapper = /* @__PURE__ */ _jsxs(_Fragment, {
+                children: [
+                  /* @__PURE__ */ _jsx(StaticRouterProvider, {
+                    router: remixRouter,
+                    context: routerContext,
+                    hydrate: false
+                  }),
+                  mode === "stream" && // ROUTER_DATA will inject in `packages/runtime/plugin-runtime/src/core/server/string/ssrData.ts` in string ssr
+                  // So we can inject it only when streaming ssr
+                  /* @__PURE__ */ _jsx(DeferredDataScripts, {
+                    nonce,
+                    context: routerContext,
+                    useJsonScript
+                  }),
+                  mode === "stream" && JSX_SHELL_STREAM_END_MARK
+                ]
+              });
+              return App ? /* @__PURE__ */ _jsx(App, {
+                children: routerWrapper
+              }) : routerWrapper;
+            } else {
+              return App ? /* @__PURE__ */ _jsx(App, {
+                children: /* @__PURE__ */ _jsx(RSCStaticRouter, {
+                  basename
+                })
+              }) : /* @__PURE__ */ _jsx(RSCStaticRouter, {
+                basename
+              });
+            }
           };
         };
         return getRouteApp();