@bleedingdev/modern-js-plugin-tanstack 3.9.0-ultramodern.9 → 3.9.3-ultramodern.2

package/dist/esm/cli/artifacts.mjs

@@ -1,5 +1,6 @@
 import node_path from "node:path";
 import { fs } from "@modern-js/utils";
+import { ROUTE_METADATA_MANIFEST_FILE_NAME, ROUTE_METADATA_MANIFEST_HEADER, findRouteMetaFiles, renderRouteMetadataManifest } from "./routeMetadata.mjs";
 import { collectCanonicalRoutesForEntry, generateTanstackRouterTypesSourceForEntry } from "./tanstackTypes.mjs";
 const DEFAULT_GENERATED_DIR_NAME = 'modern-tanstack';
 async function writeFileIfChanged(filePath, content) {
@@ -77,7 +78,16 @@ async function writeTanstackRouterTypesForEntries(opts) {
         canonicalRoutes
     });
 }
+async function writeRouteMetadataManifest(opts) {
+    const routesDirectory = node_path.join(opts.appDirectory, 'src', 'routes');
+    const manifestPath = node_path.join(routesDirectory, ROUTE_METADATA_MANIFEST_FILE_NAME);
+    const manifest = renderRouteMetadataManifest(await findRouteMetaFiles(routesDirectory));
+    if (null !== manifest) return void await writeFileIfChanged(manifestPath, manifest);
+    const previous = await fs.pathExists(manifestPath) ? await fs.readFile(manifestPath, 'utf-8') : null;
+    if (previous?.startsWith(`${ROUTE_METADATA_MANIFEST_HEADER}\n`)) throw new Error(`[plugin-tanstack] ${manifestPath} is generated from route.meta.ts files, but none remain below ${routesDirectory}. Restore at least one route.meta.ts that exports routeMeta, or delete the manifest together with its imports.`);
+}
 async function generateTanstackRouteArtifacts(opts) {
+    await writeRouteMetadataManifest(opts);
     const [{ createRunOptions }, { cli }, utils] = await Promise.all([
         import("@modern-js/app-tools/cli/run"),
         import("@modern-js/plugin/cli"),
@@ -95,9 +105,10 @@ async function generateTanstackRouteArtifacts(opts) {
         version: opts.version || process.env.MODERN_JS_VERSION || '0.0.0-routes-generate',
         internalPlugins: utils.INTERNAL_RUNTIME_PLUGINS
     });
-    await cli.init({
+    const { appContext } = await cli.init({
         ...runOptions,
         command: 'build'
     });
+    await appContext.hooks.onBeforeExit.call();
 }
-export { generateTanstackRouteArtifacts, writeTanstackRegisterFile, writeTanstackRouterTypesForEntries };
+export { generateTanstackRouteArtifacts, writeRouteMetadataManifest, writeTanstackRegisterFile, writeTanstackRouterTypesForEntries };

package/dist/esm/cli/index.mjs

@@ -1,20 +1,15 @@
 import node_path from "node:path";
 import { NESTED_ROUTE_SPEC_FILE, filterRoutesForServer } from "@modern-js/utils";
-import { generateTanstackRouteArtifacts, writeTanstackRegisterFile, writeTanstackRouterTypesForEntries } from "./artifacts.mjs";
+import { generateTanstackRouteArtifacts, writeRouteMetadataManifest, writeTanstackRegisterFile, writeTanstackRouterTypesForEntries } from "./artifacts.mjs";
 import { createTanstackRsbuildRouteSplittingProfile, resolveTanstackRouteCodeSplittingEnabled } from "./routeSplitting.mjs";
-import { __webpack_require__ } from "../rslib-runtime~1.mjs";
-__webpack_require__.add({
-    267 (module) {
-        module.exports = require("@modern-js/runtime/cli");
-    }
-});
+import { TANSTACK_SERVER_ROUTES_FILE, createTanstackRscRouteLayerPlugin } from "./rscRouteLayer.mjs";
 const DEFAULT_ROUTES_DIR = 'routes';
 const DEFAULT_GENERATED_DIR_NAME = 'modern-tanstack';
 const ENTRYPOINTS_KEY = '@modern-js/plugin-tanstack';
 let runtimeRouterCli;
 function getRuntimeRouterCli() {
     if (runtimeRouterCli) return runtimeRouterCli;
-    const cli = __webpack_require__(267);
+    const cli = require("@modern-js/runtime/cli");
     if (cli.handleGeneratorEntryCode && cli.getEntrypointRoutesDir && cli.getEntrypointRoutesOwner && cli.updateNestedRoutesSpec) {
         runtimeRouterCli = cli;
         return runtimeRouterCli;
@@ -96,6 +91,13 @@ function tanstackRouterPlugin(options = {}) {
                 }));
             api.config(()=>({
                     ...routeSplittingProfile.defaultConfig,
+                    builderPlugins: [
+                        createTanstackRscRouteLayerPlugin(()=>({
+                                entryNames: api.getAppContext().entrypoints.filter(isTanstackEntrypoint).map((entrypoint)=>entrypoint.entryName),
+                                internalDirectory: api.getAppContext().internalDirectory,
+                                rsc: api.getNormalizedConfig().server.rsc
+                            }))
+                    ],
                     source: {
                         include: [
                             /[\\/]node_modules[\\/]@tanstack[\\/]react-router[\\/]/,
@@ -122,7 +124,7 @@ function tanstackRouterPlugin(options = {}) {
                     hydrateRscClientRoutes: true,
                     includeRouteServerLoadersInSsrEntry: false,
                     isolateRouteDataInRscLayer: true,
-                    serverRoutesFileName: 'tanstack-routes.server.js'
+                    serverRoutesFileName: TANSTACK_SERVER_ROUTES_FILE
                 });
                 await writeTanstackRouterTypesForEntries({
                     appContext: api.getAppContext(),
@@ -146,7 +148,7 @@ function tanstackRouterPlugin(options = {}) {
                             hydrateRscClientRoutes: true,
                             includeRouteServerLoadersInSsrEntry: false,
                             isolateRouteDataInRscLayer: true,
-                            serverRoutesFileName: 'tanstack-routes.server.js'
+                            serverRoutesFileName: TANSTACK_SERVER_ROUTES_FILE
                         });
                         await writeTanstackRouterTypesForEntries({
                             appContext: api.getAppContext(),
@@ -182,4 +184,4 @@ function tanstackRouterPlugin(options = {}) {
 const src_cli = tanstackRouterPlugin;
 export { collectCanonicalRoutesForEntry, generateTanstackRouterTypesSourceForEntry } from "./tanstackTypes.mjs";
 export default src_cli;
-export { createTanstackRsbuildRouteSplittingProfile, generateTanstackRouteArtifacts, resolveTanstackRouteCodeSplittingEnabled, tanstackRouterPlugin, writeTanstackRegisterFile, writeTanstackRouterTypesForEntries };
+export { createTanstackRsbuildRouteSplittingProfile, generateTanstackRouteArtifacts, resolveTanstackRouteCodeSplittingEnabled, tanstackRouterPlugin, writeRouteMetadataManifest, writeTanstackRegisterFile, writeTanstackRouterTypesForEntries };

package/dist/esm/cli/routeMetadata.mjs

@@ -0,0 +1,71 @@
+import { readdir } from "node:fs/promises";
+import node_path from "node:path";
+const ROUTE_META_FILE_NAME = 'route.meta.ts';
+const ROUTE_METADATA_MANIFEST_FILE_NAME = 'ultramodern-route-metadata.ts';
+const ROUTE_METADATA_MANIFEST_HEADER = `// @generated by @modern-js/plugin-tanstack from ${ROUTE_META_FILE_NAME} files. Run routes-generate; do not edit.`;
+const PRINT_WIDTH = 120;
+const MANIFEST_BODY = `export const ultramodernLocalisedUrls = Object.fromEntries(
+  ultramodernRouteMetadata
+    .filter((route: { canonicalPath: string }) => route.canonicalPath !== '/')
+    .map((route) => [route.canonicalPath, route.localisedPaths]),
+);
+export const ultramodernPublicRoutes = ultramodernRouteMetadata
+  .filter((route) => route.public && route.indexable)
+  .map((route) => ({
+    canonicalPath: route.canonicalPath,
+    descriptionKey: route.descriptionKey,
+    id: route.id,
+    localisedPaths: route.localisedPaths,
+    namespace: route.namespace,
+    ownerAppId: route.ownerAppId,
+    titleKey: route.titleKey,
+    ...('jsonLd' in route ? { jsonLd: route.jsonLd } : {}),
+  }));
+export const ultramodernRouteConfig = {
+  authoring: 'colocated-route-meta',
+  generatedManifest: true,
+  localisedUrls: ultramodernLocalisedUrls,
+  namespace: ultramodernRouteNamespace,
+  publicRoutes: ultramodernPublicRoutes,
+  routes: ultramodernRouteMetadata,
+  source: 'route-owned',
+} as const;
+`;
+const compareCodeUnits = (left, right)=>left < right ? -1 : left > right ? 1 : 0;
+const quoteSpecifier = (specifier)=>specifier.includes("'") ? JSON.stringify(specifier) : `'${specifier}'`;
+function renderRouteMetadataManifest(routeMetaFiles) {
+    const specifiers = routeMetaFiles.map((file)=>`./${file.replaceAll('\\', '/').replace(/\.ts$/u, '')}`).sort(compareCodeUnits);
+    if (0 === specifiers.length) return null;
+    const bindings = specifiers.map((_, index)=>`route${index}`);
+    const imports = specifiers.map((specifier, index)=>`import { routeMeta as ${bindings[index]} } from ${quoteSpecifier(specifier)};`);
+    const inlineRoutes = `export const ultramodernRouteMetadata = [${bindings.join(', ')}] as const;`;
+    const routes = inlineRoutes.length <= PRINT_WIDTH ? inlineRoutes : `export const ultramodernRouteMetadata = [\n${bindings.map((binding)=>`  ${binding},\n`).join('')}] as const;`;
+    return `${ROUTE_METADATA_MANIFEST_HEADER}
+${imports.join('\n')}
+
+export const ultramodernRouteNamespace = route0.namespace;
+${routes}
+${MANIFEST_BODY}`;
+}
+async function findRouteMetaFiles(routesDirectory) {
+    const files = [];
+    const visit = async (relativeDirectory)=>{
+        const entries = await readdir(node_path.join(routesDirectory, relativeDirectory), {
+            withFileTypes: true
+        });
+        for (const entry of entries){
+            const relativePath = node_path.join(relativeDirectory, entry.name);
+            if (entry.isDirectory()) await visit(relativePath);
+            else if (entry.isFile() && entry.name === ROUTE_META_FILE_NAME) files.push(relativePath);
+        }
+    };
+    try {
+        await visit('');
+    } catch (error) {
+        const { code, path: missingPath } = error;
+        if ('ENOENT' === code && missingPath === routesDirectory) return [];
+        throw error;
+    }
+    return files;
+}
+export { ROUTE_METADATA_MANIFEST_FILE_NAME, ROUTE_METADATA_MANIFEST_HEADER, ROUTE_META_FILE_NAME, findRouteMetaFiles, renderRouteMetadataManifest };

package/dist/esm/cli/rscRouteLayer.mjs

@@ -0,0 +1,35 @@
+import node_path from "node:path";
+const TANSTACK_SERVER_ROUTES_FILE = 'tanstack-routes.server.js';
+function exactResource(...filenames) {
+    const escaped = filenames.map((filename)=>filename.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&'));
+    return new RegExp(`^(?:${escaped.join('|')})(?:\\?.*)?$`, 'u');
+}
+function createTanstackRscRouteLayerPlugin(getContext) {
+    return {
+        name: 'modern:tanstack:rsc-route-layer',
+        setup (api) {
+            api.modifyRspackConfig({
+                order: 'post',
+                handler (config, { environment, rspack, target }) {
+                    const { entryNames, internalDirectory, rsc } = getContext();
+                    if (false === rsc || void 0 === rsc || 0 === entryNames.length) return;
+                    const rscServerEnvironment = 'object' == typeof rsc ? rsc.environments?.server ?? 'server' : 'server';
+                    if ('node' !== target && 'node' !== config.target && environment.name !== rscServerEnvironment) return;
+                    config.module ??= {};
+                    config.module.rules ??= [];
+                    config.plugins ??= [];
+                    for (const entryName of entryNames){
+                        const routes = node_path.resolve(internalDirectory, entryName, 'routes.js');
+                        const serverRoutes = node_path.resolve(internalDirectory, entryName, TANSTACK_SERVER_ROUTES_FILE);
+                        config.plugins.push(new rspack.NormalModuleReplacementPlugin(exactResource(routes), serverRoutes));
+                        config.module.rules.push({
+                            resource: exactResource(routes, serverRoutes),
+                            layer: 'server-side-rendering'
+                        });
+                    }
+                }
+            });
+        }
+    };
+}
+export { TANSTACK_SERVER_ROUTES_FILE, createTanstackRscRouteLayerPlugin };

package/dist/esm/cli/tanstackTypes/canonicalRoutes.mjs

@@ -1,3 +1,4 @@
+import { describeRouteTree } from "../../shared/routeDescriptor.mjs";
 import { toTanstackPath } from "./shared.mjs";
 const LOCALE_PARAM_SEGMENTS = new Set([
     ':lang',
@@ -44,11 +45,13 @@ function collectCanonicalRoutesForEntry(routes, options = {}) {
         const key = toTanstackPath(normalized);
         if (!canonicalParams.has(key)) canonicalParams.set(key, paramsTypeForCanonicalPath(normalized));
     };
-    const visit = (route, parentPath)=>{
+    const visit = (descriptor, parentPath)=>{
+        const { source: route, children } = descriptor;
         let currentPath = parentPath;
-        if ('string' == typeof route.modernCanonicalPath) {
+        const canonicalPath = route.modernLocalisedRoute?.canonicalPath ?? route.modernCanonicalPath;
+        if ('string' == typeof canonicalPath) {
             hasI18nSurface = true;
-            currentPath = normalizeJoined(route.modernCanonicalPath);
+            currentPath = canonicalPath ? normalizeJoined(canonicalPath) : '';
         } else if ('string' == typeof route.path && route.path.length > 0) {
             const segments = route.path.replace(/\[(.+?)\]/g, ':$1').split('/').filter(Boolean);
             if (localeParamHeuristic && '' === parentPath && LOCALE_PARAM_SEGMENTS.has(segments[0])) {
@@ -57,16 +60,13 @@ function collectCanonicalRoutesForEntry(routes, options = {}) {
             }
             currentPath = segments.length ? normalizeJoined(`${parentPath}/${segments.join('/')}`) : parentPath;
         }
-        const children = route.children;
         if (children && children.length > 0) {
             for (const child of children)visit(child, currentPath);
             return;
         }
         record(currentPath || '/');
     };
-    const rootModern = routes.find((route)=>route.isRoot);
-    const topLevel = rootModern ? rootModern.children ?? [] : routes;
-    for (const route of topLevel)visit(route, '');
+    for (const route of describeRouteTree(routes).children)visit(route, '');
     if (!hasI18nSurface || 0 === canonicalParams.size) return null;
     return Object.fromEntries([
         ...canonicalParams.entries()

package/dist/esm/cli/tanstackTypes/shared.mjs

@@ -42,14 +42,6 @@ function pickRouteSearchContractModules(route) {
         loaderDepsPath: 'string' == typeof loaderDepsPath ? loaderDepsPath : null
     };
 }
-function isPathlessLayout(route) {
-    const extras = route;
-    return 'nested' === extras.type && 'boolean' != typeof extras.index && void 0 === extras.path;
-}
-function isIndexRoute(route) {
-    const extras = route;
-    return 'nested' === extras.type && Boolean(extras.index);
-}
 function createRouteStaticDataSnippet(opts) {
     const staticData = createRouteStaticData({
         modernRouteId: opts.modernRouteId && quote(opts.modernRouteId),
@@ -60,4 +52,4 @@ function createRouteStaticDataSnippet(opts) {
     return entries.length > 0 ? `staticData: createRouteStaticData({\n    ${entries.map(([key, value])=>`${key}: ${value},`).join('\n    ')}\n  }),` : null;
 }
 export { toTanstackPath } from "../../runtime/routeTree/paths.mjs";
-export { createRouteStaticDataSnippet, isIndexRoute, isPathlessLayout, normalizeRelativeImport, pickModernLoaderModule, pickRouteSearchContractModules, quote, resolveFileNoExt };
+export { createRouteStaticDataSnippet, normalizeRelativeImport, pickModernLoaderModule, pickRouteSearchContractModules, quote, resolveFileNoExt };

package/dist/esm/cli/tanstackTypes/source.mjs

@@ -1,17 +1,11 @@
-import { canonicaliseLocalisedRoutes } from "@modern-js/i18n-runtime-extensions";
 import { makeLegalIdentifier } from "@modern-js/runtime/cli";
 import { upath } from "@modern-js/utils";
-import { createRouteStaticDataSnippet, isIndexRoute, isPathlessLayout, normalizeRelativeImport, pickModernLoaderModule, pickRouteSearchContractModules, quote, resolveFileNoExt, toTanstackPath } from "./shared.mjs";
+import { describeRouteTree } from "../../shared/routeDescriptor.mjs";
+import { createRouteStaticDataSnippet, normalizeRelativeImport, pickModernLoaderModule, pickRouteSearchContractModules, quote, resolveFileNoExt } from "./shared.mjs";
 async function generateTanstackRouterTypesSourceForEntry(opts) {
-    const { appContext, entryName, generatedDirName = 'modern-tanstack', routes: rawRoutes } = opts;
-    const routes = canonicaliseLocalisedRoutes(rawRoutes);
+    const { appContext, entryName, generatedDirName = 'modern-tanstack', routes } = opts;
     const outDir = upath.join(appContext.srcDirectory, generatedDirName, entryName);
-    const rootModern = routes.find((r)=>{
-        const extras = r;
-        return r && 'nested' === extras.type && extras.isRoot;
-    });
-    const rootExtras = rootModern;
-    const topLevel = rootModern ? rootExtras?.children || [] : routes;
+    const { root: rootModern, children: topLevel } = describeRouteTree(routes);
     const imports = [];
     const statements = [];
     const loaderImportMap = new Map();
@@ -28,9 +22,8 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
         let pendingImportName = componentImportMap.get(componentPath);
         if (!pendingImportName) {
             pendingImportName = (async ()=>{
-                const resolvedNoExt = await resolveRouteModuleNoExt(componentPath);
-                if (!resolvedNoExt) return null;
-                const relImport = normalizeRelativeImport(upath.relative(outDir, resolvedNoExt));
+                const relImport = await resolveRouteImport(componentPath);
+                if (!relImport) return null;
                 const componentName = `component_${componentIndex++}`;
                 imports.push(`import ${componentName} from ${quote(relImport)};`);
                 return componentName;
@@ -39,14 +32,15 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
         }
         return pendingImportName;
     };
-    const resolveRouteModuleNoExt = async (aliasedNoExtPath)=>{
+    const resolveRouteImport = async (aliasedNoExtPath)=>{
         const prefix = `${appContext.internalSrcAlias}/`;
         let absNoExt;
         if (aliasedNoExtPath.startsWith(prefix)) {
             const rel = aliasedNoExtPath.slice(prefix.length);
             absNoExt = upath.join(appContext.srcDirectory, rel);
         } else absNoExt = upath.isAbsolute(aliasedNoExtPath) ? aliasedNoExtPath : upath.join(appContext.srcDirectory, aliasedNoExtPath);
-        return resolveFileNoExt(absNoExt);
+        const resolvedNoExt = await resolveFileNoExt(absNoExt);
+        return resolvedNoExt ? normalizeRelativeImport(upath.relative(outDir, resolvedNoExt)) : null;
     };
     const getImportNamesForLoader = async (aliasedNoExtPath, inline, hasAction)=>{
         const key = `${inline ? 'inline' : 'default'}:${hasAction ? 'action' : 'loader'}:${aliasedNoExtPath}`;
@@ -55,9 +49,8 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             loaderName: existing,
             actionName: hasAction ? existing.replace(/^loader_/, 'action_') : null
         };
-        const resolvedNoExt = await resolveRouteModuleNoExt(aliasedNoExtPath);
-        if (!resolvedNoExt) return null;
-        const relImport = normalizeRelativeImport(upath.relative(outDir, resolvedNoExt));
+        const relImport = await resolveRouteImport(aliasedNoExtPath);
+        if (!relImport) return null;
         const importName = `loader_${loaderIndex++}`;
         const actionName = hasAction ? importName.replace(/^loader_/, 'action_') : null;
         if (inline) {
@@ -77,9 +70,8 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
         const key = `${exportName}:${aliasedNoExtPath}`;
         const existing = searchContractImportMap.get(key);
         if (existing) return existing;
-        const resolvedNoExt = await resolveRouteModuleNoExt(aliasedNoExtPath);
-        if (!resolvedNoExt) return null;
-        const relImport = normalizeRelativeImport(upath.relative(outDir, resolvedNoExt));
+        const relImport = await resolveRouteImport(aliasedNoExtPath);
+        if (!relImport) return null;
         const importName = 'validateSearch' === exportName ? `validateSearch_${validateSearchIndex++}` : `loaderDeps_${loaderDepsIndex++}`;
         imports.push(`import { ${exportName} as ${importName} } from ${quote(relImport)};`);
         searchContractImportMap.set(key, importName);
@@ -97,9 +89,7 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
         const base = id ? makeLegalIdentifier(id) : `r_${routeIndex++}`;
         return reserveRouteVarName(`route_${base}`);
     };
-    const buildRoute = async (opts)=>{
-        const { parentVar, route } = opts;
-        const varName = createRouteVarName(route);
+    const createRouteOptions = async (route, hasSplat)=>{
         const routeExtras = route;
         const loaderInfo = pickModernLoaderModule(route);
         const routeAction = routeExtras.action;
@@ -109,20 +99,9 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
         const searchContractInfo = pickRouteSearchContractModules(route);
         const validateSearchName = searchContractInfo.validateSearchPath ? await getImportNameForSearchContract(searchContractInfo.validateSearchPath, 'validateSearch') : null;
         const loaderDepsName = searchContractInfo.loaderDepsPath ? await getImportNameForSearchContract(searchContractInfo.loaderDepsPath, 'loaderDeps') : null;
-        const rawPath = routeExtras.path;
-        const hasSplat = 'string' == typeof rawPath && rawPath.includes('*');
-        const routeOpts = [
-            `getParentRoute: () => ${parentVar},`
-        ];
+        const routeOpts = [];
         const componentName = await getImportNameForComponent(routeExtras._component);
         if (componentName) routeOpts.push(`component: ${componentName},`);
-        if (isPathlessLayout(route)) {
-            const id = routeExtras.id;
-            routeOpts.push(`id: ${quote(id || 'pathless')},`);
-        } else {
-            const p = isIndexRoute(route) ? '/' : toTanstackPath(rawPath || '');
-            routeOpts.push(`path: ${quote(p)},`);
-        }
         if (loaderName) routeOpts.push(`loader: modernLoaderToTanstack({ hasSplat: ${hasSplat} }, ${loaderName}),`);
         if (validateSearchName) routeOpts.push(`validateSearch: ${validateSearchName},`);
         if (loaderDepsName) routeOpts.push(`loaderDeps: ${loaderDepsName},`);
@@ -132,39 +111,29 @@ async function generateTanstackRouterTypesSourceForEntry(opts) {
             actionName
         });
         if (staticDataSnippet) routeOpts.push(staticDataSnippet);
-        const children = routeExtras.children;
+        return routeOpts;
+    };
+    const buildRoute = async (descriptor, parentVar)=>{
+        const { source: route, location, hasSplat, children } = descriptor;
+        const varName = createRouteVarName(route);
+        const routeOpts = [
+            `getParentRoute: () => ${parentVar},`,
+            ...Object.entries(location).map(([key, value])=>`${key}: ${quote(value)},`),
+            ...await createRouteOptions(route, hasSplat)
+        ];
         const hasChildren = Boolean(children && children.length > 0);
         const routeCtorVarName = hasChildren ? reserveRouteVarName(`${varName}__base`) : varName;
         statements.push(`const ${routeCtorVarName} = createRoute({\n  ${routeOpts.join('\n  ')}\n});`);
         if (children && children.length > 0) {
             const childVars = [];
-            for (const child of children)childVars.push(await buildRoute({
-                parentVar: routeCtorVarName,
-                route: child
-            }));
+            for (const child of children)childVars.push(await buildRoute(child, routeCtorVarName));
             statements.push(`const ${varName} = ${routeCtorVarName}.addChildren([${childVars.join(', ')}]);`);
         }
         return varName;
     };
-    const rootLoaderInfo = rootModern ? pickModernLoaderModule(rootModern) : null;
-    const rootAction = rootExtras?.action;
-    const rootLoaderImports = rootLoaderInfo?.loaderPath ? await getImportNamesForLoader(rootLoaderInfo.loaderPath, rootLoaderInfo.inline, Boolean(rootLoaderInfo.inline && rootAction === rootLoaderInfo.loaderPath)) : null;
-    const rootLoaderName = rootLoaderImports?.loaderName || null;
-    const rootActionName = rootLoaderImports?.actionName || null;
-    const rootSearchContractInfo = rootModern ? pickRouteSearchContractModules(rootModern) : null;
-    const rootValidateSearchName = rootSearchContractInfo?.validateSearchPath ? await getImportNameForSearchContract(rootSearchContractInfo.validateSearchPath, 'validateSearch') : null;
-    const rootLoaderDepsName = rootSearchContractInfo?.loaderDepsPath ? await getImportNameForSearchContract(rootSearchContractInfo.loaderDepsPath, 'loaderDeps') : null;
     const topLevelVars = [];
-    for (const route of topLevel)topLevelVars.push(await buildRoute({
-        parentVar: 'rootRoute',
-        route
-    }));
-    const rootOpts = [];
-    const rootComponentName = await getImportNameForComponent(rootExtras?._component);
-    if (rootComponentName) rootOpts.push(`component: ${rootComponentName},`);
-    if (rootLoaderName) rootOpts.push(`loader: modernLoaderToTanstack({ hasSplat: false }, ${rootLoaderName}),`);
-    if (rootValidateSearchName) rootOpts.push(`validateSearch: ${rootValidateSearchName},`);
-    if (rootLoaderDepsName) rootOpts.push(`loaderDeps: ${rootLoaderDepsName},`);
+    for (const route of topLevel)topLevelVars.push(await buildRoute(route, 'rootRoute'));
+    const rootOpts = rootModern ? await createRouteOptions(rootModern, false) : [];
     const routerGenTs = `// This file is auto-generated by Modern.js. Do not edit manually.
 
 import {
@@ -181,11 +150,7 @@ ${imports.join('\n')}
 
 export const rootRoute = createRootRouteWithContext<ModernRouterContext>()({
   ${rootOpts.join('\n  ')}
-  ${createRouteStaticDataSnippet({
-        modernRouteId: rootExtras?.id,
-        loaderName: rootLoaderName,
-        actionName: rootActionName
-    }) || ''}
+
 });
 
 ${statements.join('\n\n')}

package/dist/esm/runtime/lifecycle.mjs

@@ -1 +1 @@
-export { applyRouterRuntimeState, applyRouterServerPrepareResult, createRouterRuntimeState, createRouterServerSnapshot, getRouterRuntimeState, getRouterServerSnapshot } from "@modern-js/runtime-extensions/router-state";
+export { applyRouterRuntimeState, applyRouterServerPrepareResult, createRouterServerSnapshot, getRouterRuntimeState, getRouterServerSnapshot } from "@modern-js/runtime-extensions/router-state";

package/dist/esm/runtime/loaderBridge.mjs

@@ -36,10 +36,13 @@ function mapSplatParamsForModernLoader(params, hasSplat) {
     return rest;
 }
 function getLoaderSignal(ctx) {
-    const abortSignal = ctx?.abortController?.signal;
-    if (abortSignal instanceof AbortSignal) return abortSignal;
-    if (ctx?.signal instanceof AbortSignal) return ctx.signal;
-    return new AbortController().signal;
+    const matchSignal = ctx?.abortController?.signal ?? ctx?.signal;
+    const requestSignal = ctx?.context?.request?.signal;
+    const signals = [
+        matchSignal,
+        requestSignal
+    ].filter((signal)=>signal instanceof AbortSignal);
+    return AbortSignal.any(signals);
 }
 function getLoaderHref(ctx) {
     if ('string' == typeof ctx?.location) return ctx.location;
@@ -101,4 +104,4 @@ function modernLoaderToTanstack(opts, modernLoader) {
     };
 }
 export { createRouteStaticData } from "../shared/routeStaticData.mjs";
-export { getLoaderHref, handleModernLoaderError, handleModernLoaderResult, isAbsoluteUrl, isRedirectResponse, isResponse, isTanstackRedirect, mapSplatParamsForModernLoader, modernLoaderToTanstack, throwTanstackRedirect };
+export { getLoaderHref, getLoaderSignal, handleModernLoaderError, handleModernLoaderResult, isAbsoluteUrl, isRedirectResponse, isResponse, isTanstackRedirect, mapSplatParamsForModernLoader, modernLoaderToTanstack, throwTanstackRedirect };

package/dist/esm/runtime/navigation.mjs

@@ -0,0 +1,64 @@
+import { Link } from "./prefetchLink.mjs";
+function createTanstackNavigation(router) {
+    let location;
+    let matches;
+    let snapshot;
+    return {
+        Link: Link,
+        getSnapshot () {
+            const state = router.state;
+            if (location !== state.location || void 0 === matches || matches.length !== state.matches.length || matches.some((match, index)=>match.params !== state.matches[index]?.params)) {
+                location = state.location;
+                matches = state.matches;
+                snapshot = {
+                    location: {
+                        pathname: location.pathname,
+                        search: location.searchStr,
+                        hash: '' !== location.hash ? `#${location.hash.replace(/^#/, '')}` : ''
+                    },
+                    params: Object.assign({}, ...matches.map((match)=>match.params))
+                };
+            }
+            return snapshot;
+        },
+        subscribe (listener) {
+            const stops = [
+                'onBeforeNavigate',
+                'onBeforeLoad',
+                'onLoad',
+                'onResolved'
+            ].map((event)=>router.subscribe(event, listener));
+            return ()=>{
+                for (const stop of stops)stop();
+            };
+        },
+        navigate (href, options) {
+            return router.navigate({
+                to: href,
+                replace: options?.replace,
+                ...options?.state === void 0 ? {} : {
+                    state: options.state
+                }
+            });
+        },
+        createLinkProps (target) {
+            const preload = void 0 !== target.preload ? target.preload : 'none' === target.prefetch ? false : target.prefetch;
+            return {
+                to: target.pathname,
+                ...void 0 !== target.search ? {
+                    search: target.search
+                } : {},
+                ...void 0 !== target.hash && '' !== target.hash ? {
+                    hash: target.hash
+                } : {},
+                ...void 0 === target.hashScrollIntoView ? {} : {
+                    hashScrollIntoView: target.hashScrollIntoView
+                },
+                ...void 0 === preload ? {} : {
+                    preload
+                }
+            };
+        }
+    };
+}
+export { createTanstackNavigation };

package/dist/esm/runtime/plugin.mjs

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { InternalRuntimeContext, getGlobalEnableRsc } from "@modern-js/runtime/context";
+import { createRouterStatePlugin } from "@modern-js/runtime-extensions/router-state-plugin";
 import { normalizePathname } from "@modern-js/runtime-utils/url";
 import { RouterProvider, createBrowserHistory, createHashHistory, createRouter, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
 import { useContext, useMemo } from "react";
@@ -10,6 +11,7 @@ import { ModernRouterClient, getTanstackSsrHydrationPromise, hasTanstackSsrHydra
 import { routerProviderRegistryHooks } from "./hooks.mjs";
 import { wrapTanstackSsrHydrationBoundary } from "./hydrationBoundary.mjs";
 import { applyRouterRuntimeState } from "./lifecycle.mjs";
+import { createTanstackNavigation } from "./navigation.mjs";
 import { createTanstackRouteObjects, getMergedRouterConfig, getTanstackRouteConfig, joinBasename } from "./pluginShared.mjs";
 import { Link } from "./prefetchLink.mjs";
 import { useMatches } from "./routeHooks.mjs";
@@ -21,6 +23,9 @@ const tanstackRouterPlugin = (userConfig = {})=>{
         name: '@modern-js/plugin-router-tanstack',
         registryHooks: routerProviderRegistryHooks,
         setup: (api)=>{
+            createRouterStatePlugin({
+                registryHooks: routerProviderRegistryHooks
+            }).setup(api);
             const hooks = api.getHooks();
             let cachedRouteObjects;
             let cachedRouteTree = null;
@@ -142,10 +147,14 @@ const tanstackRouterPlugin = (userConfig = {})=>{
                         runtimeContext
                     ]);
                     if (!router) return App ? /*#__PURE__*/ jsx(App, {}) : null;
+                    const navigation = useMemo(()=>createTanstackNavigation(router), [
+                        router
+                    ]);
                     const runtimeState = applyRouterRuntimeState(runtimeContext, {
                         framework: 'tanstack',
                         basename: _basename,
-                        instance: router
+                        instance: router,
+                        navigation
                     });
                     const lifecycleContext = {
                         framework: 'tanstack',