@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.12 → 3.2.0-ultramodern.121

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

@@ -1,28 +1,46 @@
 import { jsx } from "react/jsx-runtime";
-import { InternalRuntimeContext, getGlobalEnableRsc, getGlobalLayoutApp, getGlobalRoutes } from "@modern-js/runtime/context";
-import { merge } from "@modern-js/runtime-utils/merge";
+import { InternalRuntimeContext, getGlobalEnableRsc } from "@modern-js/runtime/context";
 import { createRequestContext, storage } from "@modern-js/runtime-utils/node";
 import { time } from "@modern-js/runtime-utils/time";
 import { LOADER_REPORTER_NAME } from "@modern-js/utils/universal/constants";
 import { RouterProvider, createMemoryHistory, createRouter } from "@tanstack/react-router";
-import { attachRouterServerSsrUtils } from "@tanstack/react-router/ssr/server";
-import { Suspense, useContext } from "react";
+import { attachRouterServerSsrUtils } from "@tanstack/router-core/ssr/server";
+import { useContext } from "react";
 import { createModernBasepathRewrite } from "./basepathRewrite.mjs";
-import { modifyRoutes, onAfterCreateRouter, onAfterHydrateRouter, onBeforeCreateRouter, onBeforeCreateRoutes, onBeforeHydrateRouter } from "./hooks.mjs";
-import { applyRouterServerPrepareResult, createRouterServerSnapshot } from "./lifecycle.mjs";
+import { routerProviderRegistryHooks } from "./hooks.mjs";
+import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
+import { applyRouterServerPrepareResult, createRouterServerSnapshot, getRouterRuntimeState } from "./lifecycle.mjs";
+import { getFinalRouteConfig, getMergedRouterConfig } from "./pluginCore.mjs";
 import { createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches } from "./routeTree.mjs";
 import { createTanstackRscServerPayload, handleTanstackRscRedirect } from "./rsc/payloadRouter.mjs";
+import { getModernTanstackRouterFastDefaults } from "./types.mjs";
 import { createRouteObjectsFromConfig, urlJoin } from "./utils.mjs";
 const setTanstackRscServerPayload = (payload)=>{
     const storageContext = storage.useContext?.();
     if (storageContext) storageContext.serverPayload = payload;
 };
+function isPromiseLike(value) {
+    return Boolean(value && 'function' == typeof value.then);
+}
 function isPreloadableRouteComponent(component) {
     if (!component || 'function' != typeof component) return false;
     const preloadable = component;
     return 'function' == typeof preloadable.load || 'function' == typeof preloadable.preload;
 }
+function isReactLazyRouteComponent(component) {
+    return null != component && 'object' == typeof component && 'function' == typeof component._init && '_payload' in component;
+}
+async function preloadReactLazyRouteComponent(component) {
+    try {
+        component._init?.(component._payload);
+    } catch (thrown) {
+        if (!isPromiseLike(thrown)) throw thrown;
+        await thrown;
+        component._init?.(component._payload);
+    }
+}
 async function preloadRouteComponent(component) {
+    if (isReactLazyRouteComponent(component)) return void await preloadReactLazyRouteComponent(component);
     if (!isPreloadableRouteComponent(component)) return;
     if ('function' == typeof component.load) return void await component.load({});
     await component.preload?.({});
@@ -77,15 +95,6 @@ function createGetSsrHref(request) {
     const url = new URL(request.url);
     return `${url.pathname}${url.search}${url.hash}`;
 }
-function stripSyntheticNotFoundRoute(routes) {
-    return routes.filter((route)=>!('*' === route.path && !route.id && !route.loader)).map((route)=>{
-        if (!route.children?.length) return route;
-        return {
-            ...route,
-            children: stripSyntheticNotFoundRoute(route.children)
-        };
-    });
-}
 function collectRouterErrors(tanstackRouter) {
     const state = tanstackRouter.state;
     const matches = Array.isArray(state.matches) ? state.matches : [];
@@ -100,26 +109,14 @@ function collectRouterErrors(tanstackRouter) {
 const tanstackRouterPlugin = (userConfig = {})=>{
     const plugin = {
         name: '@modern-js/plugin-router-tanstack',
-        registryHooks: {
-            modifyRoutes: modifyRoutes,
-            onAfterCreateRouter: onAfterCreateRouter,
-            onAfterHydrateRouter: onAfterHydrateRouter,
-            onBeforeCreateRouter: onBeforeCreateRouter,
-            onBeforeCreateRoutes: onBeforeCreateRoutes,
-            onBeforeHydrateRouter: onBeforeHydrateRouter
-        },
+        registryHooks: routerProviderRegistryHooks,
         setup: (api)=>{
             api.onBeforeRender(async (context, interrupt)=>{
-                const pluginConfig = api.getRuntimeConfig();
-                const mergedConfig = merge(pluginConfig.router || {}, userConfig);
+                const mergedConfig = getMergedRouterConfig(api, userConfig);
                 const serializationAdapters = getGlobalEnableRsc() ? (await import("./rsc/server.mjs")).getTanstackRscSerializationAdapters() : void 0;
                 const enableRsc = getGlobalEnableRsc();
-                const { basename = '', routesConfig, createRoutes } = mergedConfig;
-                const finalRouteConfig = {
-                    routes: getGlobalRoutes(),
-                    globalApp: getGlobalLayoutApp(),
-                    ...routesConfig
-                };
+                const { basename = '', createRoutes } = mergedConfig;
+                const finalRouteConfig = getFinalRouteConfig(mergedConfig);
                 if (!finalRouteConfig.routes && !createRoutes) return;
                 const hooks = api.getHooks();
                 await hooks.onBeforeCreateRoutes.call(context);
@@ -127,8 +124,7 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                     routesConfig: finalRouteConfig,
                     ssrMode: context.ssrContext?.mode
                 }) || [];
-                const normalizedRouteObjects = createRoutes ? routeObjects : stripSyntheticNotFoundRoute(routeObjects);
-                const modifiedRouteObjects = hooks.modifyRoutes.call(normalizedRouteObjects);
+                const modifiedRouteObjects = hooks.modifyRoutes.call(routeObjects);
                 if (!modifiedRouteObjects.length) return;
                 const { request, nonce, baseUrl, loaderFailureMode = 'errorBoundary' } = context.ssrContext;
                 const _basename = '/' === baseUrl ? urlJoin(baseUrl, basename || '') : baseUrl;
@@ -161,6 +157,7 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                 };
                 hooks.onBeforeCreateRouter.call(routerLifecycleContext);
                 const tanstackRouter = createRouter({
+                    ...getModernTanstackRouterFastDefaults(mergedConfig),
                     routeTree,
                     history,
                     basepath: '/',
@@ -206,10 +203,12 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                 await preloadMatchedRouteComponents(serverRouter);
                 context.ssrContext?.response.status(tanstackRouter.state.statusCode);
                 await serverRouter.serverSsr?.dehydrate?.();
-                await waitForRouterSerialization(serverRouter);
-                if (isRSCNavigation) setTanstackRscServerPayload(createTanstackRscServerPayload(serverRouter, {
-                    omitClientLoaderData: true
-                }));
+                if (isRSCNavigation) {
+                    await waitForRouterSerialization(serverRouter);
+                    setTanstackRscServerPayload(createTanstackRscServerPayload(serverRouter, {
+                        omitClientLoaderData: true
+                    }));
+                }
                 const ssrScriptTags = serverRouter.serverSsr?.takeBufferedScripts?.();
                 const hydrationScripts = routerManagedTagsToHtml(ssrScriptTags);
                 const matchedRouteIds = getModernRouteIdsFromMatches(serverRouter);
@@ -243,16 +242,13 @@ const tanstackRouterPlugin = (userConfig = {})=>{
             api.wrapRoot((App)=>{
                 const getRouteApp = ()=>(props)=>{
                         const context = useContext(InternalRuntimeContext);
-                        const router = context.routerInstance ?? context.routerRuntime?.instance;
+                        const router = getRouterRuntimeState(context)?.instance;
                         if (!router) return App ? /*#__PURE__*/ jsx(App, {
                             ...props
                         }) : null;
-                        const routerWrapper = /*#__PURE__*/ jsx(Suspense, {
-                            fallback: null,
-                            children: /*#__PURE__*/ jsx(RouterProvider, {
-                                router: router
-                            })
-                        });
+                        const routerWrapper = wrapTanstackSsrHydrationBoundary(/*#__PURE__*/ jsx(RouterProvider, {
+                            router: router
+                        }), true);
                         return App ? /*#__PURE__*/ jsx(App, {
                             children: routerWrapper
                         }) : routerWrapper;

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

@@ -0,0 +1 @@
+export { default, tanstackRouterPlugin } from "./plugin.node.mjs";

package/dist/esm/runtime/pluginCore.mjs

@@ -0,0 +1,14 @@
+import { getGlobalLayoutApp, getGlobalRoutes } from "@modern-js/runtime/context";
+import { merge } from "@modern-js/runtime-utils/merge";
+function getMergedRouterConfig(api, userConfig) {
+    const pluginConfig = api.getRuntimeConfig();
+    return merge(pluginConfig.router || {}, userConfig);
+}
+function getFinalRouteConfig(mergedConfig) {
+    return {
+        routes: getGlobalRoutes(),
+        globalApp: getGlobalLayoutApp(),
+        ...mergedConfig.routesConfig
+    };
+}
+export { getFinalRouteConfig, getMergedRouterConfig };

package/dist/esm/runtime/prefetchLink.mjs

@@ -4,7 +4,7 @@ function resolvePreloadFromPrefetch(prefetch, preload) {
     if (void 0 !== preload) return preload;
     if ('none' === prefetch) return false;
     if ('intent' === prefetch || 'render' === prefetch || 'viewport' === prefetch) return prefetch;
-    return preload;
+    return 'viewport';
 }
 const LinkComponentImpl = (props)=>{
     const { prefetch, preload, ...rest } = props;

package/dist/esm/runtime/register.mjs

@@ -0,0 +1,18 @@
+import { registerRouterProvider } from "@modern-js/runtime/context";
+import { Form, RouteActionResponseError, useFetcher } from "./dataMutation.mjs";
+import { Outlet } from "./outlet.mjs";
+import { tanstackRouterPlugin } from "./plugin.mjs";
+import { Link, NavLink } from "./prefetchLink.mjs";
+const tanstackRouterProviderFactory = (userConfig)=>tanstackRouterPlugin(userConfig);
+registerRouterProvider('tanstack', tanstackRouterProviderFactory);
+const COMPAT_BINDINGS_SLOT = Symbol.for('@modern-js/plugin-tanstack:runtime-compat-bindings');
+const tanstackRouterCompatBindings = {
+    Form: Form,
+    Link: Link,
+    NavLink: NavLink,
+    Outlet: Outlet,
+    RouteActionResponseError: RouteActionResponseError,
+    useFetcher: useFetcher
+};
+globalThis[COMPAT_BINDINGS_SLOT] ??= tanstackRouterCompatBindings;
+export { tanstackRouterCompatBindings };

package/dist/esm/runtime/routeTree.mjs

@@ -1,5 +1,8 @@
-import { createRootRoute, createRoute, notFound, redirect } from "@tanstack/react-router";
-import { DefaultNotFound } from "./DefaultNotFound.mjs";
+import { DefaultNotFound } from "@modern-js/runtime/context";
+import { createRootRoute, createRoute, notFound, rootRouteId } from "@tanstack/react-router";
+import { createElement } from "react";
+import { isRedirectResponse, isResponse, isTanstackRedirect, throwTanstackRedirect } from "./loaderBridge.mjs";
+import { withModernRouteMatchContext } from "./outlet.mjs";
 import { isTanstackRscPayloadNavigationEnabled, loadTanstackRscRouteData } from "./rsc/payloadRouter.mjs";
 function createTanstackRoute(options) {
     return createRoute(options);
@@ -7,6 +10,10 @@ function createTanstackRoute(options) {
 function createTanstackRootRoute(options) {
     return createRootRoute(options);
 }
+function wrapRouteComponentWithModernContext(route, component, routeId) {
+    const routeMatchId = routeId || route.id;
+    if (component && routeMatchId) route.options.component = withModernRouteMatchContext(component, routeMatchId);
+}
 function toTanstackPath(pathname) {
     return pathname.split('/').map((segment)=>{
         if (!segment) return segment;
@@ -19,23 +26,6 @@ function toTanstackPath(pathname) {
         return segment;
     }).join('/');
 }
-function isResponse(value) {
-    const record = value;
-    return null != record && 'object' == typeof record && 'number' == typeof record.status && 'object' == typeof record.headers;
-}
-function isTanstackRedirect(value) {
-    return isResponse(value) && 'object' == typeof value.options;
-}
-const redirectStatusCodes = new Set([
-    301,
-    302,
-    303,
-    307,
-    308
-]);
-function isRedirectResponse(res) {
-    return redirectStatusCodes.has(res.status);
-}
 function isModernDeferredData(value) {
     if (!value || 'object' != typeof value) return false;
     const deferred = value;
@@ -54,33 +44,39 @@ function normalizeModernLoaderResponse(result) {
     }
     return normalizeModernLoaderResult(result);
 }
-function isAbsoluteUrl(value) {
-    try {
-        new URL(value);
-        return true;
-    } catch  {
-        return false;
+function pickRouteModuleComponent(routeModule, seen = new Set()) {
+    if ('function' == typeof routeModule || routeModule && 'object' == typeof routeModule && '$$typeof' in routeModule) return routeModule;
+    if (!routeModule || 'object' != typeof routeModule) return;
+    if (seen.has(routeModule)) return;
+    seen.add(routeModule);
+    const module = routeModule;
+    for (const candidate of [
+        module.default,
+        module.Component
+    ]){
+        const component = pickRouteModuleComponent(candidate, seen);
+        if (component) return component;
     }
 }
-function throwTanstackRedirect(location) {
-    const target = location || '/';
-    if (isAbsoluteUrl(target)) throw redirect({
-        href: target
-    });
-    throw redirect({
-        to: target
-    });
-}
-function mapParamsForModernLoader({ modernRoute, params }) {
-    if ('nested' === modernRoute.type && modernRoute.path?.includes('*')) {
-        const { _splat, ...rest } = params;
-        if (void 0 !== _splat) return {
-            ...rest,
-            '*': _splat
-        };
-        return rest;
-    }
-    return params;
+function createServerLazyImportComponent(lazyImport, fallbackComponent) {
+    if ("u" > typeof document) return fallbackComponent;
+    let resolvedComponent;
+    let pendingLoad;
+    const load = async ()=>{
+        if (resolvedComponent) return resolvedComponent;
+        const routeModule = await lazyImport();
+        const component = pickRouteModuleComponent(routeModule);
+        if (component) resolvedComponent = component;
+        return resolvedComponent;
+    };
+    const Component = (props)=>{
+        if (resolvedComponent) return createElement(resolvedComponent, props);
+        pendingLoad ||= load();
+        throw pendingLoad;
+    };
+    Component.load = load;
+    Component.preload = load;
+    return Component;
 }
 function createModernRequest(input, signal) {
     return new Request(input, {
@@ -115,52 +111,6 @@ function createModernShouldReload(shouldRevalidate, state) {
         return 'boolean' == typeof result ? result : void 0;
     };
 }
-function wrapModernLoader(modernRoute, modernLoader, revalidationState, options = {}) {
-    const route = modernRoute;
-    return async (ctx)=>{
-        try {
-            if (revalidationState) rememberRouteLocation(revalidationState, ctx);
-            if ('function' == typeof route.lazyImport) try {
-                await route.lazyImport();
-            } catch  {}
-            const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
-            const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
-            const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
-            const request = baseRequest ? new Request(baseRequest, {
-                signal
-            }) : createModernRequest(href, signal);
-            const params = mapParamsForModernLoader({
-                modernRoute,
-                params: ctx.params || {}
-            });
-            const loadModernData = async ()=>{
-                const result = modernLoader ? await modernLoader({
-                    request,
-                    params,
-                    context: ctx?.context?.requestContext
-                }) : null;
-                return normalizeModernLoaderResponse(result);
-            };
-            if (options.rscPayloadRouter && isTanstackRscPayloadNavigationEnabled()) return loadTanstackRscRouteData({
-                hasClientLoader: route.hasClientLoader || void 0 !== route.clientData,
-                loadClientData: loadModernData,
-                request,
-                routeId: ctx.route?.id
-            });
-            return loadModernData();
-        } catch (err) {
-            if (isResponse(err)) {
-                if (isTanstackRedirect(err)) throw err;
-                if (isRedirectResponse(err)) {
-                    const location = err.headers.get('Location') || '/';
-                    throwTanstackRedirect(location);
-                }
-                if (404 === err.status) throw notFound();
-            }
-            throw err;
-        }
-    };
-}
 function isRouteObjectPathlessLayout(route) {
     return !route.path && !route.index;
 }
@@ -191,7 +141,7 @@ function wrapRouteObjectLoader(route, revalidationState, options = {}) {
             const signal = ctx?.abortController?.signal || ctx?.signal || new AbortController().signal;
             const baseRequest = ctx?.context?.request instanceof Request ? ctx.context.request : void 0;
             const href = 'string' == typeof ctx?.location ? ctx.location : ctx?.location?.publicHref || ctx?.location?.href || ctx?.location?.url?.href || '';
-            const request = baseRequest ? new Request(baseRequest, {
+            const request = void 0 !== baseRequest ? new Request(baseRequest, {
                 signal
             }) : createModernRequest(href, signal);
             const params = mapParamsForRouteObjectLoader({
@@ -228,6 +178,9 @@ function wrapRouteObjectLoader(route, revalidationState, options = {}) {
 }
 function toRouteComponent(routeObject) {
     const route = routeObject;
+    const lazyImport = 'function' == typeof route.lazyImport ? route.lazyImport : void 0;
+    const fallbackComponent = route.Component ? route.Component : route.element ? ()=>route.element : void 0;
+    if (lazyImport && fallbackComponent) return createServerLazyImportComponent(lazyImport, fallbackComponent);
     if (route.Component) return route.Component;
     const element = route.element;
     if (element) return ()=>element;
@@ -269,12 +222,14 @@ function createRouteFromRouteObject(opts) {
     const shouldRevalidate = modernRouteObject.shouldRevalidate;
     const shouldReload = createModernShouldReload(shouldRevalidate, revalidationState);
     const stableFallbackId = routeObject.id || modernRouteObject.file || routeObject.path || 'pathless';
+    const component = toRouteComponent(routeObject);
     const base = {
         getParentRoute: ()=>parent,
-        component: toRouteComponent(routeObject),
+        component,
         pendingComponent: toPendingComponent(routeObject),
         errorComponent: toErrorComponent(routeObject),
-        wrapInSuspense: true,
+        validateSearch: modernRouteObject.validateSearch,
+        loaderDeps: modernRouteObject.loaderDeps,
         staticData: createRouteStaticData({
             modernRouteId: routeObject.id,
             modernRouteAction: modernRouteObject.action,
@@ -293,6 +248,7 @@ function createRouteFromRouteObject(opts) {
     if (isRouteObjectPathlessLayout(routeObject)) base.id = stableFallbackId;
     else base.path = routeObject.index ? '/' : toTanstackPath(routeObject.path || '');
     const route = createTanstackRoute(base);
+    wrapRouteComponentWithModernContext(route, component, routeObject.id);
     const children = routeObject.children;
     if (children && children.length > 0) {
         const childRoutes = children.map((child)=>createRouteFromRouteObject({
@@ -304,101 +260,6 @@ function createRouteFromRouteObject(opts) {
     }
     return route;
 }
-function createRouteFromModernRoute(opts) {
-    const { options = {}, parent, modernRoute } = opts;
-    const route = modernRoute;
-    const revalidationState = {};
-    const modernId = route.id;
-    const stableFallbackId = modernId || route._component || route.filename || route.data || ('function' == typeof route.loader ? route.id : void 0);
-    const pendingComponent = route.loading || route.pendingComponent;
-    const errorComponent = route.error || route.errorComponent;
-    const component = route.component;
-    const modernLoader = route.loader;
-    const modernAction = route.action;
-    const modernShouldRevalidate = route.shouldRevalidate;
-    const shouldReload = createModernShouldReload(modernShouldRevalidate, revalidationState);
-    const isPathlessLayout = 'nested' === route.type && 'boolean' != typeof route.index && void 0 === route.path;
-    const isIndexRoute = 'nested' === route.type && Boolean(route.index);
-    const base = {
-        getParentRoute: ()=>parent,
-        component: component || void 0,
-        pendingComponent: pendingComponent || void 0,
-        errorComponent: errorComponent || void 0,
-        wrapInSuspense: true,
-        staticData: createRouteStaticData({
-            modernRouteId: modernId,
-            modernRouteAction: modernAction,
-            modernRouteHandle: mergeModernRouteHandle(route),
-            modernRouteHasAction: route.hasAction || Boolean(modernAction),
-            modernRouteHasClientLoader: route.hasClientLoader || void 0 !== route.clientData,
-            modernRouteHasLoader: route.hasLoader || 'function' == typeof modernLoader,
-            modernRouteIsClientComponent: route.isClientComponent,
-            modernRouteLoader: modernLoader,
-            modernRouteShouldRevalidate: modernShouldRevalidate
-        }),
-        loader: wrapModernLoader(modernRoute, modernLoader, revalidationState, options)
-    };
-    if (route.inValidSSRRoute) base.ssr = false;
-    if (shouldReload) base.shouldReload = shouldReload;
-    if (isPathlessLayout) base.id = stableFallbackId || 'pathless';
-    else {
-        const rawPath = route.path;
-        base.path = isIndexRoute ? '/' : toTanstackPath(rawPath || '');
-    }
-    const tanstackRoute = createTanstackRoute(base);
-    const children = route.children;
-    if (children && children.length > 0) {
-        const childRoutes = children.map((child)=>createRouteFromModernRoute({
-                options,
-                parent: tanstackRoute,
-                modernRoute: child
-            }));
-        tanstackRoute.addChildren(childRoutes);
-    }
-    return tanstackRoute;
-}
-function createRouteTreeFromModernRoutes(routes, options = {}) {
-    const rootModern = routes.find((r)=>r && 'nested' === r.type && r.isRoot);
-    const rootComponent = rootModern?.component;
-    const pendingComponent = rootModern?.loading;
-    const errorComponent = rootModern?.error;
-    const rootLoader = rootModern?.loader;
-    const rootAction = rootModern?.action;
-    const rootModernId = rootModern?.id;
-    const rootShouldRevalidate = rootModern?.shouldRevalidate;
-    const rootRevalidationState = {};
-    const rootShouldReload = createModernShouldReload(rootShouldRevalidate, rootRevalidationState);
-    const rootRouteOptions = {
-        component: rootComponent || void 0,
-        pendingComponent: pendingComponent || void 0,
-        errorComponent: errorComponent || void 0,
-        wrapInSuspense: true,
-        notFoundComponent: DefaultNotFound,
-        staticData: createRouteStaticData({
-            modernRouteId: rootModernId,
-            modernRouteAction: rootAction,
-            modernRouteHandle: rootModern ? mergeModernRouteHandle(rootModern) : void 0,
-            modernRouteHasAction: rootModern?.hasAction || Boolean(rootAction),
-            modernRouteHasClientLoader: rootModern?.hasClientLoader || void 0 !== rootModern?.clientData,
-            modernRouteHasLoader: rootModern?.hasLoader || 'function' == typeof rootLoader,
-            modernRouteIsClientComponent: rootModern?.isClientComponent,
-            modernRouteLoader: rootLoader,
-            modernRouteShouldRevalidate: rootShouldRevalidate
-        }),
-        loader: rootModern ? wrapModernLoader(rootModern, rootLoader, rootRevalidationState, options) : void 0
-    };
-    if (rootShouldReload) rootRouteOptions.shouldReload = rootShouldReload;
-    if (rootModern?.inValidSSRRoute) rootRouteOptions.ssr = false;
-    const rootRoute = createTanstackRootRoute(rootRouteOptions);
-    const topLevel = rootModern ? rootModern.children || [] : routes;
-    const childRoutes = topLevel.map((child)=>createRouteFromModernRoute({
-            options,
-            parent: rootRoute,
-            modernRoute: child
-        }));
-    rootRoute.addChildren(childRoutes);
-    return rootRoute;
-}
 function getRootLikeRouteObject(routes) {
     return routes.find((route)=>'/' === route.path && !route.index);
 }
@@ -407,11 +268,13 @@ function createRouteTreeFromRouteObjects(routes, options = {}) {
     const rootRevalidationState = {};
     const rootShouldRevalidate = rootLikeRoute?.shouldRevalidate;
     const rootShouldReload = createModernShouldReload(rootShouldRevalidate, rootRevalidationState);
+    const rootComponent = rootLikeRoute ? toRouteComponent(rootLikeRoute) : void 0;
     const rootRouteOptions = {
-        component: rootLikeRoute ? toRouteComponent(rootLikeRoute) : void 0,
+        component: rootComponent,
         pendingComponent: rootLikeRoute ? toPendingComponent(rootLikeRoute) : void 0,
         errorComponent: rootLikeRoute ? toErrorComponent(rootLikeRoute) : void 0,
-        wrapInSuspense: true,
+        validateSearch: rootLikeRoute?.validateSearch,
+        loaderDeps: rootLikeRoute?.loaderDeps,
         notFoundComponent: DefaultNotFound,
         staticData: createRouteStaticData({
             modernRouteId: rootLikeRoute?.id,
@@ -429,6 +292,7 @@ function createRouteTreeFromRouteObjects(routes, options = {}) {
     if (rootShouldReload) rootRouteOptions.shouldReload = rootShouldReload;
     if (rootLikeRoute?.inValidSSRRoute) rootRouteOptions.ssr = false;
     const rootRoute = createTanstackRootRoute(rootRouteOptions);
+    if (rootComponent) rootRoute.options.component = withModernRouteMatchContext(rootComponent, rootRouteId);
     const topLevel = rootLikeRoute ? [
         ...rootLikeRoute.children || [],
         ...routes.filter((route)=>route !== rootLikeRoute)
@@ -443,10 +307,12 @@ function createRouteTreeFromRouteObjects(routes, options = {}) {
 }
 function getModernRouteIdsFromMatches(router) {
     const matches = router.state.matches || [];
+    const routesById = router.routesById;
     const ids = matches.map((match)=>{
-        const route = match.route;
-        return route?.options?.staticData?.modernRouteId;
+        const normalizedMatch = match;
+        const routeId = 'string' == typeof normalizedMatch.routeId ? normalizedMatch.routeId : void 0;
+        return normalizedMatch.route?.options?.staticData?.modernRouteId ?? (routeId ? routesById?.[routeId]?.options?.staticData?.modernRouteId : void 0);
     }).filter((id)=>'string' == typeof id);
     return Array.from(new Set(ids));
 }
-export { createRouteTreeFromModernRoutes, createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches };
+export { createRouteTreeFromRouteObjects, getModernRouteIdsFromMatches };

package/dist/esm/runtime/router.mjs

@@ -0,0 +1,2 @@
+import "./register.mjs";
+export { routerPlugin } from "@modern-js/runtime/router/internal";

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

@@ -1,3 +1,4 @@
+import { isRouteErrorResponse } from "@modern-js/runtime-utils/router";
 import { notFound, redirect } from "@tanstack/react-router";
 const payloadFetchCache = new Map();
 let payloadDecoder;
@@ -37,6 +38,39 @@ function toPayloadRoute(match) {
         pathnameBase: 'string' == typeof match.pathnameBase ? match.pathnameBase : pathname
     };
 }
+function shouldRedactServerError(status = 500) {
+    return status >= 500 && 'development' !== process.env.NODE_ENV && 'test' !== process.env.NODE_ENV;
+}
+function serializePayloadError(error) {
+    if (isRouteErrorResponse(error)) {
+        if (shouldRedactServerError(error.status)) return {
+            status: error.status,
+            statusText: 'Internal Server Error',
+            data: 'Unexpected Server Error',
+            __type: 'RouteErrorResponse'
+        };
+        return {
+            ...error,
+            __type: 'RouteErrorResponse'
+        };
+    }
+    if (error instanceof Error) {
+        if (shouldRedactServerError()) return {
+            message: 'Unexpected Server Error',
+            stack: void 0,
+            __type: 'Error'
+        };
+        return {
+            message: error.message,
+            stack: error.stack,
+            __type: 'Error',
+            ...'Error' !== error.name ? {
+                __subType: error.name
+            } : {}
+        };
+    }
+    return error;
+}
 function createTanstackRscServerPayload(router, options = {}) {
     const matches = Array.isArray(router.state?.matches) ? router.state.matches : [];
     const routes = [];
@@ -47,7 +81,7 @@ function createTanstackRscServerPayload(router, options = {}) {
         if (payloadRoute) {
             routes.push(payloadRoute);
             if ('loaderData' in match && void 0 !== match.loaderData && !(options.omitClientLoaderData && payloadRoute.hasClientLoader)) loaderData[payloadRoute.id] = match.loaderData;
-            if (void 0 !== match.error) errors[payloadRoute.id] = match.error;
+            if (void 0 !== match.error) errors[payloadRoute.id] = serializePayloadError(match.error);
         }
     }
     return {

package/dist/esm/runtime/state.mjs

@@ -0,0 +1,7 @@
+import { getRouterRuntimeState } from "@modern-js/runtime/context";
+function getTanstackRouterState(context) {
+    const state = getRouterRuntimeState(context);
+    if (void 0 === state || 'tanstack' !== state.framework) return;
+    return state;
+}
+export { getTanstackRouterState };

package/dist/esm/runtime/types.mjs

@@ -0,0 +1,7 @@
+const modernTanstackRouterFastDefaults = {
+    defaultStructuralSharing: true
+};
+const getModernTanstackRouterFastDefaults = (config = {})=>({
+        defaultStructuralSharing: config.defaultStructuralSharing ?? modernTanstackRouterFastDefaults.defaultStructuralSharing
+    });
+export { getModernTanstackRouterFastDefaults, modernTanstackRouterFastDefaults };

package/dist/esm/runtime/utils.mjs

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import react from "react";
-import { DefaultNotFound } from "./DefaultNotFound.mjs";
 function getRouteObjects(routes, { globalApp, ssrMode, props }) {
     const createLayoutElement = (Component)=>{
         const GlobalLayout = globalApp;
@@ -57,10 +56,6 @@ function getRouteObjects(routes, { globalApp, ssrMode, props }) {
         };
         routeObjects.push(routeObject);
     }
-    routeObjects.push({
-        path: '*',
-        element: /*#__PURE__*/ jsx(DefaultNotFound, {})
-    });
     return routeObjects;
 }
 function createRouteObjectsFromConfig({ routesConfig, props, ssrMode }) {