@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.9 → 3.5.0-ultramodern.90

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';
+
+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;
+};
+
+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;
+}
+
+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/register.ts

@@ -1,8 +1,7 @@
 /**
- * Registers the TanStack router provider with the @modern-js/runtime router
- * provider registry. Importing '@modern-js/plugin-tanstack/runtime' is enough
- * to make `runtime.router.framework: 'tanstack'` resolvable by the built-in
- * router runtime plugin.
+ * Registers TanStack in the @modern-js/runtime compatibility registry.
+ * Runtime entries bind the exported local factory into their own provider
+ * realm; registration remains for older runtime wrappers and mixed cohorts.
  *
  * This module is intentionally side-effectful (see `sideEffects` in
  * package.json).
@@ -12,47 +11,16 @@ import {
   type RouterProviderPlugin,
   registerRouterProvider,
 } from '@modern-js/runtime/context';
-import { Form, RouteActionResponseError, useFetcher } from './dataMutation';
-import { Outlet } from './outlet';
 import { tanstackRouterPlugin } from './plugin';
-import { Link, NavLink } from './prefetchLink';
 
-// The TanStack runtime plugin types its API against its own hook registry,
+// TanStack runtime plugin types its API against its own hook registry,
 // while the provider contract is typed against the built-in router hook
-// registry of @modern-js/runtime. The two are runtime-compatible (the
+// registry from @modern-js/runtime. The two are runtime-compatible (the
 // built-in router plugin registers the hooks and forwards its API to the
-// resolved provider), but nominally distinct — hence the explicit adapter
-// cast at this single boundary.
-const tanstackRouterProviderFactory: RouterProviderFactory = userConfig =>
-  tanstackRouterPlugin(userConfig) as unknown as RouterProviderPlugin;
+// resolved provider), but nominally distinct, so keep an explicit adapter
+// cast as the single boundary.
+export const tanstackRouterProviderFactory: RouterProviderFactory =
+  userConfig =>
+    tanstackRouterPlugin(userConfig) as unknown as RouterProviderPlugin;
 
 registerRouterProvider('tanstack', tanstackRouterProviderFactory);
-
-/**
- * Compatibility bindings for the deprecated `@modern-js/runtime/tanstack-router`
- * alias. `@modern-js/runtime` cannot depend on this package (the dependency
- * direction is plugin-tanstack -> runtime), so the alias resolves the
- * Modern.js specific bindings through this `Symbol.for` slot at use time.
- *
- * `??=` keeps the first copy: when Module Federation evaluates a second
- * bundled copy of this module, both copies are functionally identical and the
- * established registration wins (mirroring the router-provider registry).
- */
-const COMPAT_BINDINGS_SLOT: unique symbol = Symbol.for(
-  '@modern-js/plugin-tanstack:runtime-compat-bindings',
-);
-
-export const tanstackRouterCompatBindings = {
-  Form,
-  Link,
-  NavLink,
-  Outlet,
-  RouteActionResponseError,
-  useFetcher,
-};
-
-(
-  globalThis as {
-    [COMPAT_BINDINGS_SLOT]?: typeof tanstackRouterCompatBindings;
-  }
-)[COMPAT_BINDINGS_SLOT] ??= tanstackRouterCompatBindings;