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

package/src/runtime/routeTree/construction.ts

@@ -5,6 +5,10 @@ import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { AnyRoute, AnyRouter } from '@tanstack/react-router';
 import { rootRouteId } from '@tanstack/react-router';
 
+import {
+  describeRouteTree,
+  type RouteDescriptor,
+} from '../../shared/routeDescriptor';
 import { createRouteStaticData } from '../../shared/routeStaticData';
 import { withModernRouteMatchContext } from '../outlet';
 import {
@@ -13,7 +17,6 @@ import {
   toRouteComponent,
 } from './components';
 import { createModernShouldReload, wrapRouteObjectLoader } from './loaders';
-import { isRouteObjectPathlessLayout, toTanstackPath } from './paths';
 import { mergeModernRouteHandle } from './staticData';
 import {
   createTanstackRootRoute,
@@ -23,25 +26,16 @@ import {
 import type {
   ModernRouteObject,
   ModernTanstackRootRoute,
-  MutableTanstackRoute,
   RouteRevalidationState,
   RouteTreeOptions,
   TanstackRootRouteOptions,
   TanstackRouteOptions,
 } from './types';
 
-function createRouteFromRouteObject(opts: {
-  options?: RouteTreeOptions;
-  parent: AnyRoute;
-  pathlessFallbackId?: string;
-  routeObject: RouteObject;
-}): AnyRoute {
-  const {
-    options = {},
-    parent,
-    pathlessFallbackId = 'pathless',
-    routeObject,
-  } = opts;
+function createRouteOptions(
+  routeObject: RouteObject,
+  options: RouteTreeOptions,
+): TanstackRouteOptions {
   const modernRouteObject = routeObject as ModernRouteObject;
   const revalidationState: RouteRevalidationState = {};
   const shouldRevalidate = modernRouteObject.shouldRevalidate;
@@ -49,13 +43,8 @@ function createRouteFromRouteObject(opts: {
     shouldRevalidate,
     revalidationState,
   );
-
-  const stableFallbackId =
-    routeObject.id || modernRouteObject.file || pathlessFallbackId;
-
   const component = toRouteComponent(routeObject);
   const base: TanstackRouteOptions = {
-    getParentRoute: () => parent,
     component,
     pendingComponent: toPendingComponent(routeObject),
     errorComponent: toErrorComponent(routeObject),
@@ -86,116 +75,49 @@ function createRouteFromRouteObject(opts: {
     base.shouldReload = shouldReload;
   }
 
-  if (isRouteObjectPathlessLayout(routeObject)) {
-    base.id = stableFallbackId;
-  } else {
-    base.path = routeObject.index
-      ? '/'
-      : toTanstackPath((routeObject.path as string) || '');
-  }
-
-  const route = createTanstackRoute(base);
-  wrapRouteComponentWithModernContext(route, component, routeObject.id);
+  return base;
+}
 
-  const children = routeObject.children;
-  if (children && children.length > 0) {
-    const childRoutes = children.map((child: RouteObject, index) =>
-      createRouteFromRouteObject({
-        options,
-        parent: route,
-        pathlessFallbackId: `pathless-${index}`,
-        routeObject: child,
-      }),
+function createRouteFromDescriptor(
+  descriptor: RouteDescriptor<RouteObject>,
+  parent: AnyRoute,
+  options: RouteTreeOptions,
+): AnyRoute {
+  const { source, location, children } = descriptor;
+  const routeOptions = createRouteOptions(source, options);
+  const route = createTanstackRoute({
+    ...routeOptions,
+    ...location,
+    getParentRoute: () => parent,
+  });
+  wrapRouteComponentWithModernContext(route, routeOptions.component, source.id);
+  if (children.length) {
+    route.addChildren(
+      children.map(child => createRouteFromDescriptor(child, route, options)),
     );
-    route.addChildren(childRoutes);
   }
-
   return route;
 }
 
-function getRootLikeRouteObject(routes: RouteObject[]) {
-  return routes.find(route => route.path === '/' && !route.index);
-}
-
 export function createRouteTreeFromRouteObjects(
   routes: RouteObject[],
   options: RouteTreeOptions = {},
 ): ModernTanstackRootRoute {
-  const rootLikeRoute = getRootLikeRouteObject(routes) as
-    | ModernRouteObject
-    | undefined;
-  const rootRevalidationState: RouteRevalidationState = {};
-  const rootShouldRevalidate = rootLikeRoute?.shouldRevalidate;
-  const rootShouldReload = createModernShouldReload(
-    rootShouldRevalidate,
-    rootRevalidationState,
-  );
-
-  const rootComponent = rootLikeRoute
-    ? toRouteComponent(rootLikeRoute)
-    : undefined;
+  const { root, children } = describeRouteTree(routes);
   const rootRouteOptions: TanstackRootRouteOptions = {
-    component: rootComponent,
-    pendingComponent: rootLikeRoute
-      ? toPendingComponent(rootLikeRoute)
-      : undefined,
-    errorComponent: rootLikeRoute ? toErrorComponent(rootLikeRoute) : undefined,
-    validateSearch: rootLikeRoute?.validateSearch,
-    loaderDeps: rootLikeRoute?.loaderDeps,
+    ...(root ? createRouteOptions(root, options) : {}),
     notFoundComponent: DefaultNotFound,
-    staticData: createRouteStaticData({
-      modernRouteId: rootLikeRoute?.id,
-      modernRouteAction: rootLikeRoute?.action,
-      modernRouteHandle: rootLikeRoute
-        ? mergeModernRouteHandle(rootLikeRoute)
-        : undefined,
-      modernRouteHasAction:
-        rootLikeRoute?.hasAction || Boolean(rootLikeRoute?.action),
-      modernRouteHasClientLoader:
-        rootLikeRoute?.hasClientLoader ||
-        typeof rootLikeRoute?.clientData !== 'undefined',
-      modernRouteHasLoader:
-        rootLikeRoute?.hasLoader || typeof rootLikeRoute?.loader === 'function',
-      modernRouteIsClientComponent: rootLikeRoute?.isClientComponent,
-      modernRouteLoader: rootLikeRoute?.loader,
-      modernRouteShouldRevalidate: rootShouldRevalidate,
-    }),
-    loader: rootLikeRoute
-      ? wrapRouteObjectLoader(rootLikeRoute, rootRevalidationState, options)
-      : undefined,
   };
-  if (rootShouldReload) {
-    rootRouteOptions.shouldReload = rootShouldReload;
-  }
-  if (rootLikeRoute?.inValidSSRRoute) {
-    rootRouteOptions.ssr = false;
-  }
-
   const rootRoute = createTanstackRootRoute(rootRouteOptions);
-  if (rootComponent) {
+  if (rootRouteOptions.component) {
     rootRoute.options.component = withModernRouteMatchContext(
-      rootComponent,
+      rootRouteOptions.component,
       rootRouteId,
     ) as typeof rootRoute.options.component;
   }
-
-  const topLevel = rootLikeRoute
-    ? [
-        ...((rootLikeRoute.children as RouteObject[] | undefined) || []),
-        ...routes.filter(route => route !== rootLikeRoute),
-      ]
-    : routes;
-
-  const childRoutes = topLevel.map((routeObject, index) =>
-    createRouteFromRouteObject({
-      options,
-      parent: rootRoute,
-      pathlessFallbackId: `pathless-${index}`,
-      routeObject,
-    }),
+  rootRoute.addChildren(
+    children.map(child => createRouteFromDescriptor(child, rootRoute, options)),
   );
-
-  rootRoute.addChildren(childRoutes);
   return rootRoute as unknown as ModernTanstackRootRoute;
 }
 

package/src/runtime/routeTree/loaders.ts

@@ -3,6 +3,7 @@
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import {
   getLoaderHref,
+  getLoaderSignal,
   handleModernLoaderError,
   handleModernLoaderResult,
   mapSplatParamsForModernLoader,
@@ -118,10 +119,7 @@ export function wrapRouteObjectLoader(
         } catch {}
       }
 
-      const signal: AbortSignal =
-        ctx?.abortController?.signal ||
-        ctx?.signal ||
-        new AbortController().signal;
+      const signal = getLoaderSignal(ctx);
       const baseRequest: Request | undefined =
         ctx?.context?.request instanceof Request
           ? ctx.context.request

package/src/runtime/routeTree/paths.ts

@@ -1,7 +1,5 @@
 // @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
 
-import type { RouteObject } from '@modern-js/runtime-utils/router';
-
 export function toTanstackPath(pathname: string): string {
   // TanStack Router uses `$param` and `$` (splat) style params.
   // Modern's conventional routing currently generates React Router style params (e.g. `:id`, `*`).
@@ -30,7 +28,3 @@ export function toTanstackPath(pathname: string): string {
     })
     .join('/');
 }
-
-export function isRouteObjectPathlessLayout(route: RouteObject) {
-  return !route.path && !route.index;
-}

package/src/runtime/router.ts

@@ -1,43 +1,28 @@
-/**
- * Entry-injected router module for entrypoints that are NOT TanStack
- * file-route entrypoints (e.g. apps configuring
- * `router: { framework: 'tanstack', createRoutes }` in modern.runtime.ts).
- *
- * The CLI plugin injects `{ name: 'router', path: '<pkg>/runtime/router' }`
- * for those entries. This module creates a framework-resolving wrapper whose
- * app-owned provider realm contains this module graph's TanStack factory.
- */
-import * as runtimeRouter from '@modern-js/runtime/router/internal';
+/** App-local composition for custom entries using runtime router selection. */
+import { routerProviderRegistryHooks } from '@modern-js/runtime/context';
+import { routerPlugin as nativeRouterPlugin } from '@modern-js/runtime/router/internal';
+import { createRouterPlugin } from '@modern-js/runtime-extensions/router-provider';
+import { createRouterStatePlugin } from '@modern-js/runtime-extensions/router-state-plugin';
 import { tanstackRouterProviderFactory } from './register';
 
-type LegacyRouterPlugin = (typeof runtimeRouter)['routerPlugin'];
-type CurrentRouterPluginCreator = (
-  localProviders: readonly {
-    name: string;
-    factory: typeof tanstackRouterProviderFactory;
-  }[],
-) => LegacyRouterPlugin;
+const createProviderPlugin = createRouterPlugin({
+  defaultProvider: { name: 'react-router', factory: nativeRouterPlugin },
+  registryHooks: routerProviderRegistryHooks,
+  localProviders: [
+    { name: 'tanstack', factory: tanstackRouterProviderFactory },
+  ],
+});
+const statePlugin = createRouterStatePlugin({
+  registryHooks: routerProviderRegistryHooks,
+});
 
-function getRouterPlugin(): LegacyRouterPlugin {
-  const createRouterPlugin = Reflect.get(runtimeRouter, 'createRouterPlugin') as
-    | CurrentRouterPluginCreator
-    | undefined;
-
-  if (typeof createRouterPlugin === 'function') {
-    return createRouterPlugin([
-      { name: 'tanstack', factory: tanstackRouterProviderFactory },
-    ]);
-  }
-
-  const legacyRouterPlugin = Reflect.get(runtimeRouter, 'routerPlugin');
-
-  if (typeof legacyRouterPlugin === 'function') {
-    return tanstackRouterProviderFactory as unknown as LegacyRouterPlugin;
-  }
-
-  throw new Error(
-    '[@modern-js/plugin-tanstack] The installed @modern-js/runtime/router/internal exports neither createRouterPlugin nor routerPlugin. Install a compatible @modern-js/runtime version.',
-  );
-}
-
-export const routerPlugin: LegacyRouterPlugin = getRouterPlugin();
+export const routerPlugin: typeof nativeRouterPlugin = (userConfig = {}) => {
+  const providerPlugin = createProviderPlugin(userConfig);
+  return {
+    ...providerPlugin,
+    setup(api) {
+      statePlugin.setup(api);
+      providerPlugin.setup(api);
+    },
+  };
+};

package/src/runtime/ssrManagedTags.ts

@@ -6,23 +6,6 @@ import type {
   TanstackRouterWithServerSsr,
 } from './ssrTypes';
 
-export async function waitForRouterSerialization(
-  tanstackRouter: TanstackRouterWithServerSsr,
-) {
-  const serverSsr = tanstackRouter.serverSsr;
-  if (
-    !serverSsr ||
-    typeof serverSsr.onSerializationFinished !== 'function' ||
-    serverSsr.isSerializationFinished?.()
-  ) {
-    return;
-  }
-
-  await new Promise<void>(resolve => {
-    serverSsr.onSerializationFinished?.(resolve);
-  });
-}
-
 function htmlEscapeAttr(value: string) {
   return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
 }

package/src/runtime/ssrTypes.ts

@@ -34,13 +34,6 @@ type RouterRouteWithOptions = {
 
 export type TanstackRouterWithServerSsr = AnyRouter & {
   routesById?: Record<string, RouterRouteWithOptions>;
-  serverSsr?: {
-    cleanup?: () => void;
-    dehydrate?: () => Promise<void> | void;
-    isSerializationFinished?: () => boolean;
-    onSerializationFinished?: (listener: () => void) => void;
-    takeBufferedScripts?: () => unknown;
-  };
   state: AnyRouter['state'] & {
     matches?: unknown;
   };

package/src/runtime/state.ts

@@ -1,7 +1,7 @@
 import {
   getRouterRuntimeState,
   type InternalRouterRuntimeState,
-} from '@modern-js/runtime/context';
+} from '@modern-js/runtime-extensions/router-state';
 import type { AnyRouter } from '@tanstack/react-router';
 
 /**

package/src/runtime/types.ts

@@ -2,11 +2,11 @@ import type { ModernRoute } from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type React from 'react';
 
+export type { ModernRoute } from '@modern-js/runtime/context';
 export type {
   InternalRouterServerSnapshot,
-  ModernRoute,
   RouterFramework,
-} from '@modern-js/runtime/context';
+} from '@modern-js/runtime-extensions/router-state';
 
 /** TanStack-specific router config. */
 export type RouterConfig = {

package/src/runtime/utils.tsx

@@ -54,6 +54,8 @@ function toTanstackRouteObject(
 ): RouteObject | null {
   if (route.type === 'nested') {
     return {
+      modernLocalisedRoute: Reflect.get(route, 'modernLocalisedRoute'),
+      isRoot: Reflect.get(route, 'isRoot'),
       path: route.path,
       id: route.id,
       loader: route.loader,
@@ -91,9 +93,10 @@ function toTanstackRouteObject(
     globalApp,
   );
   return {
+    modernLocalisedRoute: Reflect.get(route, 'modernLocalisedRoute'),
     path: route.path,
     element: React.createElement(LayoutComponent),
-  };
+  } as ModernRouteObject;
 }
 
 export function createTanstackRouteObjectsFromConfig({

package/src/shared/routeDescriptor.ts

@@ -0,0 +1,46 @@
+import { toTanstackPath } from '../runtime/routeTree/paths';
+
+type RouteShape = {
+  id?: string;
+  file?: string;
+  path?: string;
+  index?: boolean;
+  isRoot?: boolean;
+  children?: RouteShape[];
+};
+
+/** Browser-safe structure shared by the executable tree and concrete TS emitter. */
+export type RouteDescriptor<T extends RouteShape> = {
+  source: T;
+  location: { id: string; path?: never } | { path: string; id?: never };
+  hasSplat: boolean;
+  children: RouteDescriptor<T>[];
+};
+
+export function describeRouteTree<T extends RouteShape>(routes: T[]) {
+  const root = routes.find(
+    route =>
+      route.isRoot === true || (route.path === '/' && route.index !== true),
+  );
+  const describe = (route: T, index: number): RouteDescriptor<T> => ({
+    source: route,
+    location:
+      (route.path ?? '').length === 0 && route.index !== true
+        ? { id: route.id || route.file || `pathless-${index}` }
+        : {
+            path: route.index === true ? '/' : toTanstackPath(route.path || ''),
+          },
+    hasSplat: Boolean(route.path?.includes('*')),
+    children: ((route.children ?? []) as T[]).map(describe),
+  });
+  return {
+    root,
+    children: (root !== undefined
+      ? [
+          ...((root.children ?? []) as T[]),
+          ...routes.filter(route => route !== root),
+        ]
+      : routes
+    ).map(describe),
+  };
+}