@modern-js/runtime 2.69.5 → 3.0.0-alpha.0

package/dist/esm/router/runtime/plugin.mjs

@@ -0,0 +1,181 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { InternalRuntimeContext, getGlobalIsRscClient, getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
+import { modifyRoutes, onBeforeCreateRoutes } from "./hooks";
+import { createClientRouterFromPayload } from "./rsc-router";
+import { createRouteObjectsFromConfig, deserializeErrors, renderRoutes, urlJoin } from "./utils";
+import * as __rspack_external_react from "react";
+let finalRouteConfig = {
+    routes: []
+};
+let beforeCreateRouter = true;
+function plugin_modifyRoutes(modifyFunction) {
+    if (beforeCreateRouter) {
+        const { routes: originRoutes } = finalRouteConfig;
+        const newRoutes = modifyFunction(originRoutes);
+        finalRouteConfig.routes = newRoutes;
+    } else console.error('It is not allowed to modify routes config after create router.');
+}
+const routerPlugin = (userConfig = {})=>({
+        name: '@modern-js/plugin-router',
+        registryHooks: {
+            modifyRoutes: modifyRoutes,
+            onBeforeCreateRoutes: onBeforeCreateRoutes
+        },
+        setup: (api)=>{
+            const routesContainer = {
+                current: []
+            };
+            api.onBeforeRender((context)=>{
+                if (window._SSR_DATA && userConfig.unstable_reloadOnURLMismatch) {
+                    const { ssrContext } = context;
+                    const currentPathname = normalizePathname(window.location.pathname);
+                    const initialPathname = ssrContext?.request?.pathname && normalizePathname(ssrContext.request.pathname);
+                    if (initialPathname && initialPathname !== currentPathname) {
+                        const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
+                        console.error(errorMsg);
+                        window.location.reload();
+                    }
+                }
+                context.router = {
+                    useMatches: useMatches,
+                    useLocation: useLocation,
+                    useHref: useHref
+                };
+                Object.defineProperty(context, 'routes', {
+                    get () {
+                        return routesContainer.current;
+                    },
+                    enumerable: true
+                });
+            });
+            api.wrapRoot((App)=>{
+                const mergedConfig = merge(api.getRuntimeConfig().router || {}, userConfig);
+                const { serverBase = [], supportHtml5History = true, basename = '', routesConfig, createRoutes } = mergedConfig;
+                finalRouteConfig = {
+                    routes: getGlobalRoutes(),
+                    globalApp: getGlobalLayoutApp(),
+                    ...routesConfig
+                };
+                if (!finalRouteConfig.routes && !createRoutes) return App;
+                const selectBasePath = (pathname)=>{
+                    const match = serverBase.find((baseUrl)=>isSegmentPrefix(pathname, baseUrl));
+                    return match || '/';
+                };
+                let cachedRouter = null;
+                const RouterWrapper = (props)=>{
+                    const routerResult = useRouterCreation({
+                        ...props,
+                        rscPayload: props?.rscPayload
+                    }, {
+                        api: api,
+                        createRoutes,
+                        supportHtml5History,
+                        selectBasePath,
+                        basename
+                    });
+                    const router = (0, __rspack_external_react.useMemo)(()=>{
+                        if (cachedRouter) return cachedRouter;
+                        cachedRouter = routerResult.router;
+                        return cachedRouter;
+                    }, []);
+                    const { routes } = routerResult;
+                    routesContainer.current = routes;
+                    beforeCreateRouter = false;
+                    const RouterContent = ()=>/*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsx(RouterProvider, {
+                                    router: router
+                                }),
+                                /*#__PURE__*/ jsx(EmptyComponent, {}),
+                                /*#__PURE__*/ jsx(EmptyComponent, {})
+                            ]
+                        });
+                    return App ? /*#__PURE__*/ jsx(App, {
+                        children: /*#__PURE__*/ jsx(RouterContent, {})
+                    }) : /*#__PURE__*/ jsx(RouterContent, {});
+                };
+                return RouterWrapper;
+            });
+        }
+    });
+const EmptyComponent = ()=>null;
+const safeUse = (promise)=>{
+    const useProp = 'use';
+    const useHook = __rspack_external_react && __rspack_external_react[useProp];
+    if ('function' == typeof useHook) return useHook(promise);
+    return null;
+};
+function normalizeBase(b) {
+    if (b.length > 1 && b.endsWith('/')) return b.slice(0, -1);
+    return b || '/';
+}
+function isSegmentPrefix(pathname, base) {
+    const b = normalizeBase(base);
+    const p = pathname || '/';
+    return p === b || p.startsWith(`${b}/`);
+}
+function useRouterCreation(props, options) {
+    const { api, createRoutes, supportHtml5History, selectBasePath, basename } = options;
+    const runtimeContext = (0, __rspack_external_react.useContext)(InternalRuntimeContext);
+    const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
+    const _basename = '/' === baseUrl ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
+    const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
+    const rscPayload = props?.rscPayload ? safeUse(props.rscPayload) : null;
+    let hydrationData = window._ROUTER_DATA || rscPayload;
+    return (0, __rspack_external_react.useMemo)(()=>{
+        if (hydrationData?.errors) hydrationData = {
+            ...hydrationData,
+            errors: deserializeErrors(hydrationData.errors)
+        };
+        const isRscClient = getGlobalIsRscClient();
+        let routes = null;
+        routes = isRscClient ? createRoutes ? createRoutes() : createRouteObjectsFromConfig({
+            routesConfig: finalRouteConfig
+        }) : createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+            routesConfig: finalRouteConfig,
+            props
+        }));
+        if (!routes) routes = [];
+        const hooks = api.getHooks();
+        if (rscPayload) try {
+            const router = createClientRouterFromPayload(rscPayload, routes, _basename);
+            return {
+                router,
+                routes: router.routes || []
+            };
+        } catch (e) {
+            console.error('Failed to create router from RSC payload:', e);
+        }
+        const modifiedRoutes = hooks.modifyRoutes.call(routes);
+        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, plugin_modifyRoutes as modifyRoutes, routerPlugin };

package/dist/esm/router/runtime/plugin.node.mjs

@@ -0,0 +1,138 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { merge } from "@modern-js/runtime-utils/merge";
+import { createRequestContext } from "@modern-js/runtime-utils/node";
+import { StaticRouterProvider, createRoutesFromElements, createStaticHandler, createStaticRouter } from "@modern-js/runtime-utils/router";
+import { time } from "@modern-js/runtime-utils/time";
+import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
+import { useContext } from "react";
+import { JSX_SHELL_STREAM_END_MARK } from "../../common";
+import { InternalRuntimeContext, getGlobalEnableRsc, getGlobalLayoutApp, getGlobalRoutes } from "../../core/context";
+import { setServerPayload } from "../../core/context/serverPayload/index.server.mjs";
+import DeferredDataScripts_node from "./DeferredDataScripts.node.mjs";
+import { modifyRoutes, onBeforeCreateRoutes } from "./hooks";
+import { RSCStaticRouter, createServerPayload, handleRSCRedirect, prepareRSCRoutes } from "./rsc-router";
+import { createRouteObjectsFromConfig, renderRoutes, urlJoin } from "./utils";
+function createRemixReuqest(request) {
+    const method = 'GET';
+    const { headers } = request;
+    const controller = new AbortController();
+    return new Request(request.url, {
+        method,
+        headers,
+        signal: controller.signal
+    });
+}
+const routerPlugin = (userConfig = {})=>({
+        name: '@modern-js/plugin-router',
+        registryHooks: {
+            modifyRoutes: modifyRoutes,
+            onBeforeCreateRoutes: onBeforeCreateRoutes
+        },
+        setup: (api)=>{
+            let finalRouteConfig = {};
+            api.onBeforeRender(async (context, interrupt)=>{
+                const pluginConfig = api.getRuntimeConfig();
+                const { basename = '', routesConfig, createRoutes } = merge(pluginConfig.router || {}, userConfig);
+                finalRouteConfig = {
+                    routes: getGlobalRoutes(),
+                    globalApp: getGlobalLayoutApp(),
+                    ...routesConfig
+                };
+                if (!finalRouteConfig.routes && !createRoutes) return;
+                const enableRsc = getGlobalEnableRsc();
+                if (enableRsc) await prepareRSCRoutes(finalRouteConfig.routes);
+                const { request, mode: ssrMode, nonce, loaderFailureMode = 'errorBoundary', baseUrl } = context.ssrContext;
+                const _basename = '/' === baseUrl ? urlJoin(baseUrl, basename) : baseUrl;
+                const requestContext = createRequestContext(context.ssrContext?.loaderContext);
+                const hooks = api.getHooks();
+                await hooks.onBeforeCreateRoutes.call(context);
+                let routes = [];
+                routes = enableRsc ? createRoutes ? createRoutes() : createRouteObjectsFromConfig({
+                    routesConfig: finalRouteConfig
+                }) : createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                    routesConfig: finalRouteConfig,
+                    ssrMode,
+                    props: {
+                        nonce
+                    }
+                }));
+                routes = hooks.modifyRoutes.call(routes);
+                const { query } = createStaticHandler(routes, {
+                    basename: _basename
+                });
+                const remixRequest = createRemixReuqest(context.ssrContext.request.raw);
+                const end = time();
+                const routerContext = await query(remixRequest, {
+                    requestContext
+                });
+                const cost = end();
+                context.ssrContext?.onTiming?.(LOADER_REPORTER_NAME, cost);
+                const isRSCNavigation = 'true' === remixRequest.headers.get('x-rsc-tree');
+                if (routerContext instanceof Response) if (enableRsc && isRSCNavigation) return interrupt(handleRSCRedirect(routerContext.headers, _basename, routerContext.status));
+                else return interrupt(routerContext);
+                const errors = Object.values(routerContext.errors || {});
+                if (errors.length > 0 && 'clientRender' === loaderFailureMode) {
+                    routerContext.statusCode = 200;
+                    throw errors[0];
+                }
+                context.routerContext = routerContext;
+                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;
+                    },
+                    enumerable: true
+                });
+            });
+            api.wrapRoot((App)=>{
+                if (!finalRouteConfig) return App;
+                const getRouteApp = ()=>{
+                    const enableRsc = getGlobalEnableRsc();
+                    return (props)=>{
+                        const context = useContext(InternalRuntimeContext);
+                        const { routerContext, ssrContext, routes } = context;
+                        const { nonce, mode, useJsonScript } = ssrContext;
+                        const { basename } = routerContext;
+                        const remixRouter = createStaticRouter(routes, routerContext);
+                        if (enableRsc) return App ? /*#__PURE__*/ jsx(App, {
+                            children: /*#__PURE__*/ jsx(RSCStaticRouter, {
+                                basename: basename
+                            })
+                        }) : /*#__PURE__*/ jsx(RSCStaticRouter, {
+                            basename: basename
+                        });
+                        {
+                            const routerWrapper = /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(StaticRouterProvider, {
+                                        router: remixRouter,
+                                        context: routerContext,
+                                        hydrate: false
+                                    }),
+                                    'stream' === mode && /*#__PURE__*/ jsx(DeferredDataScripts_node, {
+                                        nonce: nonce,
+                                        context: routerContext,
+                                        useJsonScript: useJsonScript
+                                    }),
+                                    'stream' === mode && JSX_SHELL_STREAM_END_MARK
+                                ]
+                            });
+                            return App ? /*#__PURE__*/ jsx(App, {
+                                children: routerWrapper
+                            }) : routerWrapper;
+                        }
+                    };
+                };
+                return getRouteApp();
+            });
+        }
+    });
+const plugin_node_modifyRoutes = ()=>{};
+export { plugin_node_modifyRoutes as modifyRoutes, routerPlugin };

package/dist/esm/router/runtime/routerHelper.mjs

@@ -0,0 +1,15 @@
+import { ROUTE_MODULES } from "@modern-js/utils/universal/constants";
+const createShouldRevalidate = (routeId)=>(arg)=>{
+        const routeModule = window?.[ROUTE_MODULES]?.[routeId];
+        if (routeModule && 'function' == typeof routeModule.shouldRevalidate) return routeModule.shouldRevalidate(arg);
+        return arg.defaultShouldRevalidate;
+    };
+const handleRouteModule = (routeModule, routeId)=>{
+    if ("u" > typeof document) window[ROUTE_MODULES][routeId] = routeModule;
+    return routeModule;
+};
+const handleRouteModuleError = (error)=>{
+    console.error(error);
+    return null;
+};
+export { createShouldRevalidate, handleRouteModule, handleRouteModuleError };

package/dist/esm/router/runtime/rsc-router.mjs

@@ -0,0 +1,233 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { ElementsContext, createFromReadableStream } from "@modern-js/render/client";
+import { StaticRouterProvider, createBrowserRouter, createStaticRouter, redirect } from "@modern-js/runtime-utils/router";
+import react from "react";
+const safeUse = (promise)=>{
+    if ('function' == typeof react.use) return react.use(promise);
+    return null;
+};
+const createServerPayload = (routerContext, routes)=>({
+        type: 'render',
+        actionData: routerContext.actionData,
+        errors: routerContext.errors,
+        loaderData: routerContext.loaderData,
+        location: routerContext.location,
+        routes: routerContext.matches.map((match, index, matches)=>{
+            const element = match.route.element;
+            const parentMatch = index > 0 ? matches[index - 1] : void 0;
+            let processedElement;
+            if (element) {
+                const ElementComponent = element.type;
+                processedElement = /*#__PURE__*/ react.createElement(ElementComponent, {
+                    loaderData: routerContext?.loaderData?.[match.route.id],
+                    actionData: routerContext?.actionData?.[match.route.id],
+                    params: match.params,
+                    matches: routerContext.matches.map((m)=>{
+                        const { route, pathname, params } = m;
+                        return {
+                            id: route.id,
+                            pathname,
+                            params,
+                            data: routerContext?.loaderData?.[route.id],
+                            handle: route.handle
+                        };
+                    })
+                });
+            }
+            return {
+                element: processedElement,
+                errorElement: match.route.errorElement,
+                handle: match.route.handle,
+                hasAction: !!match.route.action,
+                hasErrorBoundary: !!match.route.hasErrorBoundary,
+                hasLoader: !!match.route.loader,
+                hasClientLoader: !!match.route.hasClientLoader,
+                id: match.route.id,
+                index: match.route.index,
+                params: match.params,
+                parentId: parentMatch?.route.id || match.route.parentId,
+                path: match.route.path,
+                pathname: match.pathname,
+                pathnameBase: match.pathnameBase
+            };
+        })
+    });
+const handleRSCRedirect = (headers, basename, status)=>{
+    const newHeaders = new Headers(headers);
+    let redirectUrl = headers.get('Location');
+    if ('/' !== basename) redirectUrl = redirectUrl.replace(basename, '');
+    newHeaders.set('X-Modernjs-Redirect', redirectUrl);
+    newHeaders.set('X-Modernjs-BaseUrl', basename);
+    newHeaders.delete('Location');
+    return new Response(null, {
+        status: status,
+        headers: newHeaders
+    });
+};
+const prepareRSCRoutes = async (routes)=>{
+    const isLazyComponent = (component)=>component && 'object' == typeof component && void 0 !== component._init && void 0 !== component._payload;
+    const processRoutes = async (routesList)=>{
+        await Promise.all(routesList.map(async (route)=>{
+            if ('lazyImport' in route && isLazyComponent(route.component)) route.component = (await route.lazyImport()).default;
+            if (route.children && Array.isArray(route.children)) await processRoutes(route.children);
+        }));
+    };
+    await processRoutes(routes);
+};
+const mergeRoutes = (routes, originalRoutes)=>{
+    if (!originalRoutes || !Array.isArray(originalRoutes)) return routes;
+    const routesMap = new Map();
+    const buildRoutesMap = (routesList)=>{
+        routesList.forEach((route)=>{
+            if (route.id) routesMap.set(route.id, route);
+            if ('children' in route && route.children && Array.isArray(route.children)) buildRoutesMap(route.children);
+        });
+    };
+    buildRoutesMap(routes);
+    const mergeRoutesRecursive = (origRoutes)=>origRoutes.map((origRoute)=>{
+            if (origRoute.id && routesMap.has(origRoute.id)) {
+                const matchedRoute = routesMap.get(origRoute.id);
+                const result = {
+                    loader: origRoute.hasClientLoader ? origRoute.loader : void 0,
+                    ...matchedRoute
+                };
+                if (origRoute.children && Array.isArray(origRoute.children)) result.children = mergeRoutesRecursive(origRoute.children);
+                return result;
+            }
+            return origRoute;
+        });
+    return mergeRoutesRecursive(originalRoutes);
+};
+const findRouteInTree = (routes, routeId)=>{
+    for (const route of routes){
+        if (route.id === routeId) return route;
+        if (route.children && Array.isArray(route.children)) {
+            const found = findRouteInTree(route.children, routeId);
+            if (found) return found;
+        }
+    }
+    return null;
+};
+const createClientRouterFromPayload = (payload, originalRoutes, basename = '')=>{
+    const processedRoutes = payload.routes.reduceRight((previous, route)=>{
+        if (previous.length > 0) return [
+            {
+                ...route,
+                children: previous
+            }
+        ];
+        return [
+            route
+        ];
+    }, []);
+    const mergedRoutes = mergeRoutes(processedRoutes, originalRoutes);
+    const router = createBrowserRouter(mergedRoutes, {
+        hydrationData: payload,
+        basename: basename,
+        dataStrategy: async (context)=>{
+            const { request, matches } = context;
+            const results = {};
+            const clientMatches = matches.filter((match)=>match.route.hasClientLoader);
+            const fetchPromise = fetch(request.url, {
+                headers: {
+                    'x-rsc-tree': 'true'
+                }
+            });
+            const clientLoadersPromise = clientMatches.length > 0 ? Promise.all(clientMatches.map(async (clientMatch)=>{
+                const foundRoute = findRouteInTree(originalRoutes, clientMatch.route.id);
+                clientMatch.route.loader = foundRoute?.loader;
+                const res = await clientMatch.resolve();
+                return {
+                    routeId: clientMatch.route.id,
+                    result: res
+                };
+            })) : Promise.resolve([]);
+            const res = await fetchPromise;
+            const redirectLocation = res.headers.get('X-Modernjs-Redirect');
+            if (redirectLocation) {
+                matches.forEach((match)=>{
+                    const routeId = match.route.id;
+                    if (routeId) results[routeId] = {
+                        type: 'redirect',
+                        result: redirect(redirectLocation)
+                    };
+                });
+                return results;
+            }
+            const [clientLoaderResults] = await Promise.all([
+                clientLoadersPromise
+            ]);
+            clientLoaderResults.forEach(({ routeId, result })=>{
+                results[routeId] = result;
+            });
+            const payload = await createFromReadableStream(res.body);
+            if (void 0 === payload.type || 'render' !== payload.type) throw new Error('Unexpected payload type');
+            matches.forEach((match)=>{
+                const routeId = match.route.id;
+                const matchedRoute = payload.routes.find((route)=>route.id === routeId);
+                if (matchedRoute) router.patchRoutes(matchedRoute.parentId, [
+                    matchedRoute
+                ], true);
+                if (payload.loaderData?.[routeId]) results[routeId] = {
+                    type: 'data',
+                    result: payload.loaderData[routeId]
+                };
+            });
+            return results;
+        }
+    });
+    return router;
+};
+const createRSCStaticRouterComponent = (payload, basename)=>{
+    const routerContext = {
+        actionData: payload.actionData,
+        actionHeaders: {},
+        activeDeferreds: {},
+        basename: basename || '',
+        errors: payload.errors,
+        loaderData: payload.loaderData,
+        loaderHeaders: {},
+        location: payload.location,
+        statusCode: 200,
+        matches: payload.routes.map((match)=>({
+                params: match.params,
+                pathname: match.pathname,
+                pathnameBase: match.pathnameBase,
+                route: {
+                    id: match.id,
+                    action: match.hasAction || !!match.clientAction,
+                    handle: match.handle,
+                    hasErrorBoundary: match.hasErrorBoundary,
+                    loader: match.hasLoader || !!match.clientLoader,
+                    index: match.index,
+                    path: match.path,
+                    shouldRevalidate: match.shouldRevalidate
+                }
+            }))
+    };
+    const processedRoutes = payload.routes.reduceRight((previous, route)=>{
+        if (previous.length > 0) return [
+            {
+                ...route,
+                children: previous
+            }
+        ];
+        return [
+            route
+        ];
+    }, []);
+    const router = createStaticRouter(processedRoutes, routerContext);
+    return /*#__PURE__*/ jsx(StaticRouterProvider, {
+        context: routerContext,
+        router: router,
+        hydrate: false
+    });
+};
+const RSCStaticRouter = ({ basename })=>{
+    const payload = safeUse(safeUse(ElementsContext));
+    if (!payload || 'render' !== payload.type) return null;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: createRSCStaticRouterComponent(payload, basename)
+    });
+};
+export { RSCStaticRouter, createClientRouterFromPayload, createServerPayload, handleRSCRedirect, prepareRSCRoutes };

package/dist/esm/router/runtime/rsc.mjs

@@ -0,0 +1 @@
+export * from "@modern-js/runtime-utils/router/rsc";

package/dist/esm/router/runtime/server.mjs

@@ -0,0 +1 @@
+export * from "@modern-js/runtime-utils/router";