@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.3 → 3.5.0-ultramodern.31

package/src/runtime/plugin.tsx

@@ -20,19 +20,28 @@ import {
 } from '@tanstack/react-router';
 import { useContext, useMemo } from 'react';
 import { createModernBasepathRewrite } from './basepathRewrite';
+import { wrapRouterSubscribeWithBlockState } from './blockingSubscribe';
+import { isSegmentPrefix } from './clientBasepath';
+import {
+  getTanstackSsrHydrationPromise,
+  hasTanstackSsrHydrationRecord,
+  ModernRouterClient,
+  type WindowWithTanstackSsr,
+} from './clientHydration';
 import { routerProviderRegistryHooks } from './hooks';
 import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterRuntimeState,
   type RouterLifecycleContext,
 } from './lifecycle';
-import { withModernRouteMatchContext } from './outlet';
 import {
-  getFinalRouteConfig,
+  createTanstackRouteObjects,
   getMergedRouterConfig,
+  getTanstackRouteConfig,
+  joinBasename,
   type TanstackRouterPluginAPI,
   type TanstackRouterRuntimePlugin,
-} from './pluginCore';
+} from './pluginShared';
 import { Link } from './prefetchLink';
 import { useMatches } from './routeHooks';
 import { createRouteTreeFromRouteObjects } from './routeTree';
@@ -41,245 +50,6 @@ import {
   getModernTanstackRouterFastDefaults,
   type RouterConfig,
 } from './types';
-import { createRouteObjectsFromConfig, urlJoin } from './utils';
-
-const BLOCKING_SUBSCRIBE_SYMBOL = Symbol.for(
-  '@modern-js/plugin-tanstack:blocking-subscribe',
-);
-const BLOCKING_STATE_SYMBOL = Symbol.for(
-  '@modern-js/plugin-tanstack:blocking-state',
-);
-type TanstackRouterWithSubscribe = {
-  [BLOCKING_STATE_SYMBOL]?: () => boolean;
-  [BLOCKING_SUBSCRIBE_SYMBOL]?: boolean;
-  subscribe?: (
-    eventType: string,
-    listener: (...args: unknown[]) => void,
-  ) => () => void;
-};
-
-type WindowWithTanstackSsr = Window & {
-  $_TSR?: unknown;
-};
-
-type RouteComponentPreloadable = {
-  load?: () => Promise<unknown>;
-  preload?: () => Promise<unknown>;
-};
-
-type ModernRouteModule = {
-  Component?: unknown;
-  default?: unknown;
-};
-
-type RouterWithPreloadableRoutes = AnyRouter & {
-  routesById?: Record<
-    string,
-    {
-      options?: {
-        component?: unknown;
-        staticData?: {
-          modernRouteId?: string;
-        };
-      };
-    }
-  >;
-};
-
-function normalizeBase(b: string) {
-  if (b.length > 1 && b.endsWith('/')) {
-    return b.slice(0, -1);
-  }
-  return b || '/';
-}
-
-function isSegmentPrefix(pathname: string, base: string) {
-  const b = normalizeBase(base);
-  const p = pathname || '/';
-  return p === b || p.startsWith(`${b}/`);
-}
-
-function wrapRouterSubscribeWithBlockState(
-  router: unknown,
-  getBlockNavState?: () => boolean,
-) {
-  if (!router || typeof router !== 'object') {
-    return;
-  }
-
-  const target = router as TanstackRouterWithSubscribe;
-  target[BLOCKING_STATE_SYMBOL] = getBlockNavState;
-  if (
-    target[BLOCKING_SUBSCRIBE_SYMBOL] ||
-    typeof target.subscribe !== 'function'
-  ) {
-    return;
-  }
-
-  const originSubscribe = target.subscribe.bind(target);
-  target.subscribe = (eventType, listener) => {
-    const wrappedListener = (...args: unknown[]) => {
-      const blockRoute = target[BLOCKING_STATE_SYMBOL]?.() || false;
-      if (blockRoute) {
-        return;
-      }
-      return listener(...args);
-    };
-    return originSubscribe(eventType, wrappedListener);
-  };
-  target[BLOCKING_SUBSCRIBE_SYMBOL] = true;
-}
-
-type RouterHydrationRecord = {
-  error?: unknown;
-  promise: Promise<unknown>;
-  status: 'pending' | 'fulfilled' | 'rejected';
-};
-
-const routerHydrationRecords = new WeakMap<AnyRouter, RouterHydrationRecord>();
-const routeModulesKey = '_routeModules';
-
-function pickRouteModuleComponent(
-  routeModule: unknown,
-  seen: Set<unknown> = new Set(),
-): unknown {
-  if (
-    typeof routeModule === 'function' ||
-    (routeModule &&
-      typeof routeModule === 'object' &&
-      '$$typeof' in routeModule)
-  ) {
-    return routeModule;
-  }
-
-  if (!routeModule || typeof routeModule !== 'object') {
-    return undefined;
-  }
-  if (seen.has(routeModule)) {
-    return undefined;
-  }
-  seen.add(routeModule);
-
-  const module = routeModule as ModernRouteModule;
-  for (const candidate of [module.default, module.Component]) {
-    const component = pickRouteModuleComponent(candidate, seen);
-    if (component) {
-      return component;
-    }
-  }
-
-  return undefined;
-}
-
-function getCachedRouteModule(routeId: string) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-
-  return (window as unknown as Record<string, Record<string, unknown>>)[
-    routeModulesKey
-  ]?.[routeId];
-}
-
-function preloadHydratedRouteComponents(router: AnyRouter): Promise<void> {
-  const preloadableRouter = router as RouterWithPreloadableRoutes;
-  const routesById = preloadableRouter.routesById || {};
-  const matches = preloadableRouter.stores.matches.get() as Array<{
-    routeId?: string;
-  }>;
-
-  return Promise.all(
-    matches.map(match => {
-      if (match.routeId === undefined || match.routeId === '') {
-        return undefined;
-      }
-
-      const route = routesById[match.routeId];
-      const component = route?.options?.component as RouteComponentPreloadable;
-      const preload = component?.load || component?.preload;
-      if (typeof preload !== 'function') {
-        return undefined;
-      }
-
-      return Promise.resolve(preload.call(component)).then(routeModule => {
-        const modernRouteId = route?.options?.staticData?.modernRouteId;
-        const cachedRouteModule =
-          typeof modernRouteId === 'string' && modernRouteId !== ''
-            ? getCachedRouteModule(modernRouteId)
-            : undefined;
-        const resolvedComponent = pickRouteModuleComponent(
-          cachedRouteModule ?? routeModule,
-        );
-        if (
-          resolvedComponent !== undefined &&
-          typeof modernRouteId === 'string' &&
-          modernRouteId !== ''
-        ) {
-          route.options.component = withModernRouteMatchContext(
-            resolvedComponent,
-            modernRouteId,
-          );
-        }
-      });
-    }),
-  ).then(() => undefined);
-}
-
-function hydrateTanstackRouter(router: AnyRouter) {
-  return import('@tanstack/react-router/ssr/client').then(({ hydrate }) =>
-    hydrate(router),
-  );
-}
-
-function getTanstackSsrHydrationRecord(router: AnyRouter) {
-  const existingHydrationRecord = routerHydrationRecords.get(router);
-  if (existingHydrationRecord !== undefined) {
-    return existingHydrationRecord;
-  }
-
-  const hydrationRecord: RouterHydrationRecord = {
-    promise: Promise.resolve(),
-    status: 'pending',
-  };
-  routerHydrationRecords.set(router, hydrationRecord);
-  try {
-    hydrationRecord.promise = hydrateTanstackRouter(router)
-      .then(value => preloadHydratedRouteComponents(router).then(() => value))
-      .then(
-        value => {
-          hydrationRecord.status = 'fulfilled';
-          return value;
-        },
-        error => {
-          hydrationRecord.status = 'rejected';
-          hydrationRecord.error = error;
-          throw error;
-        },
-      );
-  } catch (error) {
-    hydrationRecord.status = 'rejected';
-    hydrationRecord.error = error;
-    hydrationRecord.promise = Promise.reject(error);
-    hydrationRecord.promise.catch(() => {});
-  }
-  return hydrationRecord;
-}
-
-function getTanstackSsrHydrationPromise(router: AnyRouter) {
-  return getTanstackSsrHydrationRecord(router).promise;
-}
-
-function hasTanstackSsrHydrationRecord(router: AnyRouter) {
-  return routerHydrationRecords.has(router);
-}
-
-function ModernRouterClient({ router }: { router: AnyRouter }) {
-  const hydrationRecord = getTanstackSsrHydrationRecord(router);
-  if (hydrationRecord.status === 'rejected') {
-    throw hydrationRecord.error;
-  }
-  return <RouterProvider router={router} />;
-}
 
 export const tanstackRouterPlugin = (
   userConfig: Partial<RouterConfig> = {},
@@ -303,19 +73,10 @@ export const tanstackRouterPlugin = (
           return cachedRouteObjects;
         }
 
-        const mergedConfig = getMergedConfig();
-        const { createRoutes } = mergedConfig;
-        const finalRouteConfig = getFinalRouteConfig(mergedConfig);
-
-        const routeObjects = createRoutes
-          ? createRoutes()
-          : createRouteObjectsFromConfig({
-              routesConfig: finalRouteConfig,
-            }) || [];
-
-        cachedRouteObjects = hooks.modifyRoutes.call(
-          routeObjects,
-        ) as RouteObject[];
+        cachedRouteObjects = createTanstackRouteObjects({
+          hooks,
+          routeConfig: getTanstackRouteConfig(api, userConfig),
+        });
         return cachedRouteObjects;
       };
 
@@ -347,7 +108,7 @@ export const tanstackRouterPlugin = (
         const { basename = '' } = getMergedConfig();
         const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
         return baseUrl === '/'
-          ? urlJoin(
+          ? joinBasename(
               baseUrl,
               runtimeContext._internalRouterBaseName || basename || '',
             )
@@ -394,9 +155,12 @@ export const tanstackRouterPlugin = (
         const serializationAdapters = getGlobalEnableRsc()
           ? getTanstackRscSerializationAdapters()
           : undefined;
+        const routerFastDefaults =
+          getModernTanstackRouterFastDefaults(mergedConfig);
 
         cachedRouter = createRouter({
-          ...getModernTanstackRouterFastDefaults(mergedConfig),
+          ...routerFastDefaults,
+          ...(serializationAdapters ? { defaultStructuralSharing: false } : {}),
           routeTree,
           basepath: '/',
           rewrite,

package/src/runtime/pluginShared.ts

@@ -0,0 +1,112 @@
+import {
+  getGlobalLayoutApp,
+  getGlobalRoutes,
+  type TInternalRuntimeContext,
+} from '@modern-js/runtime/context';
+import { merge } from '@modern-js/runtime-utils/merge';
+import type { RouteObject } from '@modern-js/runtime-utils/router';
+import type { RouterExtendsHooks } from './hooks';
+import type { RouterConfig } from './types';
+import { createTanstackRouteObjectsFromConfig, type SSRMode } from './utils';
+
+export type TanstackRouterRuntimeConfig = {
+  plugins?: TanstackRouterRuntimePlugin[];
+  router?: Partial<RouterConfig>;
+  [key: string]: unknown;
+};
+
+type RuntimeInterrupt = (value?: unknown) => unknown;
+
+export type TanstackRouterPluginAPI = {
+  getRuntimeConfig: () => TanstackRouterRuntimeConfig;
+  getHooks: () => RouterExtendsHooks;
+  onBeforeRender: (
+    listener: (
+      context: TInternalRuntimeContext,
+      interrupt: RuntimeInterrupt,
+    ) => unknown,
+  ) => void;
+  wrapRoot: (listener: (App: any) => any) => void;
+  [key: string]: any;
+};
+
+export type TanstackRouterRuntimePlugin = {
+  name?: string;
+  registryHooks?: RouterExtendsHooks;
+  setup?: (api: TanstackRouterPluginAPI) => unknown;
+  [key: string]: unknown;
+};
+
+export type TanstackRouteConfig = {
+  mergedConfig: RouterConfig;
+  finalRouteConfig: RouterConfig['routesConfig'];
+  hasConfiguredRoutes: boolean;
+};
+
+export function getMergedRouterConfig(
+  api: TanstackRouterPluginAPI,
+  userConfig: Partial<RouterConfig>,
+): RouterConfig {
+  const pluginConfig = api.getRuntimeConfig() as {
+    router?: Partial<RouterConfig>;
+  };
+  return merge(pluginConfig.router || {}, userConfig) as RouterConfig;
+}
+
+export function getFinalRouteConfig(
+  mergedConfig: RouterConfig,
+): RouterConfig['routesConfig'] {
+  return {
+    routes: getGlobalRoutes() as RouterConfig['routesConfig']['routes'],
+    globalApp: getGlobalLayoutApp(),
+    ...mergedConfig.routesConfig,
+  };
+}
+
+export function getTanstackRouteConfig(
+  api: TanstackRouterPluginAPI,
+  userConfig: Partial<RouterConfig>,
+): TanstackRouteConfig {
+  const mergedConfig = getMergedRouterConfig(api, userConfig);
+  const finalRouteConfig = getFinalRouteConfig(mergedConfig);
+  return {
+    mergedConfig,
+    finalRouteConfig,
+    hasConfiguredRoutes:
+      Boolean(finalRouteConfig.routes) || Boolean(mergedConfig.createRoutes),
+  };
+}
+
+export function createTanstackRouteObjects({
+  hooks,
+  routeConfig,
+  ssrMode,
+}: {
+  hooks: RouterExtendsHooks;
+  routeConfig: TanstackRouteConfig;
+  ssrMode?: SSRMode;
+}): RouteObject[] {
+  const { mergedConfig, finalRouteConfig } = routeConfig;
+  const routeObjects = mergedConfig.createRoutes
+    ? mergedConfig.createRoutes()
+    : createTanstackRouteObjectsFromConfig({
+        routesConfig: finalRouteConfig,
+        ssrMode,
+      }) || [];
+
+  return hooks.modifyRoutes.call(routeObjects) as RouteObject[];
+}
+
+export function joinBasename(baseUrl: string, basename: string): string {
+  const base = baseUrl || '/';
+  const normalizedBase = base.startsWith('/') ? base : `/${base}`;
+  const trimmedBase =
+    normalizedBase.length > 1
+      ? normalizedBase.replace(/\/+$/g, '')
+      : normalizedBase;
+  const trimmedBasename = basename.replace(/^\/+|\/+$/g, '');
+  if (!trimmedBasename) {
+    return trimmedBase || '/';
+  }
+  return `${trimmedBase}/${trimmedBasename}`.replace(/\/{2,}/g, '/');
+}

package/src/runtime/prefetchLink.tsx

@@ -2,9 +2,9 @@ import {
   type AnyRouter,
   type LinkComponentProps,
   type RegisteredRouter,
-  Link as TanStackLink,
+  useLinkProps,
 } from '@tanstack/react-router';
-import type { ReactElement } from 'react';
+import type { AnchorHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
 
 export type PrefetchBehavior = 'intent' | 'render' | 'viewport' | 'none';
 
@@ -65,21 +65,84 @@ type LinkComponentImplProps = LinkProps<
   string | undefined,
   string,
   string
->;
+> & { ref?: Ref<HTMLAnchorElement> };
 
 const LinkComponentImpl = (props: LinkComponentImplProps) => {
-  const { prefetch, preload, ...rest } = props;
-  return (
-    <TanStackLink
-      {...rest}
-      preload={
-        resolvePreloadFromPrefetch(
-          prefetch,
-          preload,
-        ) as LinkComponentImplProps['preload']
-      }
-    />
-  );
+  const {
+    prefetch,
+    preload,
+    'aria-current': ariaCurrentProp,
+    ref,
+    children,
+    ...rest
+  } = props as LinkComponentImplProps & {
+    children?:
+      | ReactNode
+      | ((state: { isActive: boolean; isTransitioning: boolean }) => ReactNode);
+  };
+  const hasAriaCurrentOverride = 'aria-current' in props;
+
+  // Children are rendered by us, not by useLinkProps() — the hook filters
+  // unknown/function props out of its return value, so anything routed
+  // through it would be silently dropped.
+  const linkOptions = {
+    ...rest,
+    preload: resolvePreloadFromPrefetch(
+      prefetch,
+      preload,
+    ) as LinkComponentImplProps['preload'],
+  } as LinkComponentImplProps;
+
+  // TanStack Router's useLinkProps() unconditionally spreads
+  // STATIC_ACTIVE_PROPS = { "data-status": "active", "aria-current": "page" }
+  // as the LAST entry of the props object it returns for an active link
+  // (@tanstack/react-router dist/esm/link.js:369 `...isActive &&
+  // STATIC_ACTIVE_PROPS`, defined at line 379-382, spread after
+  // `...propsSafeToSpread`, `...resolvedActiveProps`, and
+  // `...resolvedInactiveProps`). That means any caller-supplied aria-current
+  // -- whether passed directly or via activeProps -- is always clobbered by
+  // the time <Link>/createLink render the anchor; there is no props-merge
+  // order that lets a caller win from inside <Link>. So instead of
+  // delegating rendering to <Link>, we call useLinkProps() ourselves and
+  // re-apply the caller's original aria-current (including `false`, meaning
+  // "suppress the attribute entirely") as the final word on the anchor we
+  // render.
+  const linkProps = useLinkProps(
+    linkOptions as Parameters<typeof useLinkProps>[0],
+    ref as Parameters<typeof useLinkProps>[1],
+  ) as AnchorHTMLAttributes<HTMLAnchorElement> & {
+    disabled?: boolean;
+    type?: string;
+  };
+
+  // TanStack's own Link strips `type` and `disabled` before rendering the
+  // anchor (link.js:449-452) — mirror that.
+  const { disabled: _disabled, type: _type, ...anchorProps } = linkProps;
+
+  if (hasAriaCurrentOverride) {
+    if (ariaCurrentProp === false || typeof ariaCurrentProp === 'undefined') {
+      delete anchorProps['aria-current'];
+    } else {
+      anchorProps['aria-current'] = ariaCurrentProp;
+    }
+  }
+
+  // TanStack's Link resolves render-prop children with the active state
+  // (link.js:450) — without this, function children reach React as an
+  // invalid child and crash the render.
+  const resolvedChildren =
+    typeof children === 'function'
+      ? children({
+          isActive:
+            (anchorProps as Record<string, unknown>)['data-status'] ===
+            'active',
+          isTransitioning:
+            (anchorProps as Record<string, unknown>)['data-transitioning'] ===
+            'transitioning',
+        })
+      : children;
+
+  return <a {...anchorProps}>{resolvedChildren}</a>;
 };
 
 export const Link = LinkComponentImpl as LinkComponent;

package/src/runtime/routeTree/components.ts

@@ -0,0 +1,130 @@
+// @effect-diagnostics asyncFunction:off strictBooleanExpressions:off
+
+import type { RouteObject } from '@modern-js/runtime-utils/router';
+import { createElement, type ElementType } from 'react';
+
+import type { ModernRouteObject, RouteTreeOptions } from './types';
+
+type ModernRouteModule = {
+  Component?: unknown;
+  default?: unknown;
+};
+type PreloadableComponent = {
+  (props: Record<string, unknown>): ReturnType<typeof createElement>;
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+
+export function pickRouteModuleComponent(
+  routeModule: unknown,
+  seen: Set<unknown> = new Set(),
+): ElementType<Record<string, unknown>> | undefined {
+  if (
+    typeof routeModule === 'function' ||
+    (routeModule &&
+      typeof routeModule === 'object' &&
+      '$$typeof' in routeModule)
+  ) {
+    return routeModule as ElementType<Record<string, unknown>>;
+  }
+
+  if (!routeModule || typeof routeModule !== 'object') {
+    return undefined;
+  }
+  if (seen.has(routeModule)) {
+    return undefined;
+  }
+  seen.add(routeModule);
+
+  const module = routeModule as ModernRouteModule;
+  for (const candidate of [module.default, module.Component]) {
+    const component = pickRouteModuleComponent(candidate, seen);
+    if (component) {
+      return component;
+    }
+  }
+
+  return undefined;
+}
+
+function createServerLazyImportComponent(
+  lazyImport: () => unknown,
+  fallbackComponent?: unknown,
+): PreloadableComponent | unknown {
+  if (typeof document !== 'undefined') {
+    return fallbackComponent;
+  }
+
+  let resolvedComponent: ElementType<Record<string, unknown>> | undefined;
+  let pendingLoad: Promise<unknown> | undefined;
+
+  const load = async () => {
+    if (resolvedComponent) {
+      return resolvedComponent;
+    }
+
+    const routeModule = await lazyImport();
+    const component = pickRouteModuleComponent(routeModule);
+    if (component) {
+      resolvedComponent = component;
+    }
+    return resolvedComponent;
+  };
+
+  const Component: PreloadableComponent = props => {
+    if (resolvedComponent) {
+      return createElement(resolvedComponent, props);
+    }
+
+    pendingLoad ||= load();
+    throw pendingLoad;
+  };
+  Component.load = load;
+  Component.preload = load;
+
+  return Component;
+}
+
+export function toRouteComponent(
+  routeObject: RouteObject,
+  options: RouteTreeOptions = {},
+): unknown {
+  const route = routeObject as ModernRouteObject;
+  const lazyImport =
+    typeof route.lazyImport === 'function' ? route.lazyImport : undefined;
+  const routeComponent = route.Component || route.component;
+  const fallbackComponent = routeComponent
+    ? routeComponent
+    : route.element
+      ? () => route.element
+      : undefined;
+
+  if (lazyImport && fallbackComponent) {
+    return createServerLazyImportComponent(lazyImport, fallbackComponent);
+  }
+
+  if (routeComponent) {
+    return routeComponent;
+  }
+  const element = route.element;
+  if (element) {
+    return () => element;
+  }
+  return undefined;
+}
+
+export function toErrorComponent(routeObject: RouteObject): unknown {
+  const route = routeObject as ModernRouteObject;
+  if (route.ErrorBoundary) {
+    return route.ErrorBoundary;
+  }
+  if (route.errorElement) {
+    return () => route.errorElement;
+  }
+  return undefined;
+}
+
+export function toPendingComponent(routeObject: RouteObject): unknown {
+  const route = routeObject as ModernRouteObject;
+  return route.HydrateFallback || route.pendingComponent || undefined;
+}