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

package/src/runtime/loaderBridge.ts

@@ -98,15 +98,15 @@ type LoaderLikeContext = {
   params?: Record<string, string>;
 };
 
-function getLoaderSignal(ctx: LoaderLikeContext | undefined): AbortSignal {
-  const abortSignal = ctx?.abortController?.signal;
-  if (abortSignal instanceof AbortSignal) {
-    return abortSignal;
-  }
-  if (ctx?.signal instanceof AbortSignal) {
-    return ctx.signal;
-  }
-  return new AbortController().signal;
+export function getLoaderSignal(
+  ctx: LoaderLikeContext | undefined,
+): AbortSignal {
+  const matchSignal = ctx?.abortController?.signal ?? ctx?.signal;
+  const requestSignal = ctx?.context?.request?.signal;
+  const signals = [matchSignal, requestSignal].filter(
+    (signal): signal is AbortSignal => signal instanceof AbortSignal,
+  );
+  return AbortSignal.any(signals);
 }
 
 export function getLoaderHref(ctx: LoaderLikeContext | undefined): string {

package/src/runtime/navigation.ts

@@ -0,0 +1,78 @@
+import type {
+  RouterNavigationCapability,
+  RouterNavigationSnapshot,
+} from '@modern-js/runtime-extensions/router-state';
+import type { AnyRouter } from '@tanstack/react-router';
+import { Link } from './prefetchLink';
+
+/** Native TanStack navigation, exposed through the provider contract. */
+export function createTanstackNavigation(
+  router: AnyRouter,
+): RouterNavigationCapability {
+  let location: AnyRouter['state']['location'] | undefined;
+  let matches: AnyRouter['state']['matches'] | undefined;
+  let snapshot: RouterNavigationSnapshot;
+  return {
+    Link: Link as RouterNavigationCapability['Link'],
+    getSnapshot() {
+      const state = router.state;
+      if (
+        location !== state.location ||
+        matches === undefined ||
+        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'] as const
+      ).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 === undefined
+          ? {}
+          : { state: options.state as never }),
+      });
+    },
+    createLinkProps(target) {
+      const preload =
+        target.preload !== undefined
+          ? target.preload
+          : target.prefetch === 'none'
+            ? false
+            : target.prefetch;
+      return {
+        to: target.pathname,
+        ...(target.search !== undefined ? { search: target.search } : {}),
+        ...(target.hash !== undefined && target.hash !== ''
+          ? { hash: target.hash }
+          : {}),
+        ...(target.hashScrollIntoView === undefined
+          ? {}
+          : { hashScrollIntoView: target.hashScrollIntoView }),
+        ...(preload === undefined ? {} : { preload }),
+      };
+    },
+  };
+}

package/src/runtime/plugin.node.tsx

@@ -1,10 +1,10 @@
 // @effect-diagnostics asyncFunction:off newPromise:off strictBooleanExpressions:off unnecessaryArrowBlock:off
 import {
   getGlobalEnableRsc,
-  type InternalRouterServerSnapshot,
   InternalRuntimeContext,
   type TInternalRuntimeContext,
 } from '@modern-js/runtime/context';
+import type { InternalRouterServerSnapshot } from '@modern-js/runtime-extensions/router-state';
 import {
   createRequestContext,
   type RequestContext,
@@ -23,11 +23,13 @@ import { createModernBasepathRewrite } from './basepathRewrite';
 import { routerProviderRegistryHooks } from './hooks';
 import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
+  applyRouterRuntimeState,
   applyRouterServerPrepareResult,
-  createRouterServerSnapshot,
   getRouterRuntimeState,
+  getRouterServerSnapshot,
   type RouterLifecycleContext,
 } from './lifecycle';
+import { createTanstackNavigation } from './navigation';
 import {
   createTanstackRouteObjects,
   getTanstackRouteConfig,
@@ -35,6 +37,7 @@ import {
   type TanstackRouterPluginAPI,
   type TanstackRouterRuntimePlugin,
 } from './pluginShared';
+import { Link } from './prefetchLink';
 import {
   createRouteTreeFromRouteObjects,
   getModernRouteIdsFromMatches,
@@ -53,7 +56,6 @@ import {
   collectRouterErrors,
   createGetSsrHref,
   routerManagedTagsToHtml,
-  waitForRouterSerialization,
 } from './ssrManagedTags';
 import { preloadMatchedRouteComponents } from './ssrPreload';
 import type {
@@ -98,6 +100,8 @@ export const tanstackRouterPlugin = (
           return;
         }
 
+        context.router = { Link };
+
         const {
           request,
           nonce,
@@ -134,7 +138,11 @@ export const tanstackRouterPlugin = (
           initialEntries: [initialHref],
         });
 
-        const rewrite = createModernBasepathRewrite(_basename);
+        const rewrite = createModernBasepathRewrite(
+          _basename,
+          false,
+          modifiedRouteObjects,
+        );
         const routerLifecycleContext: RouterLifecycleContext = {
           framework: 'tanstack',
           phase: 'ssr-prepare',
@@ -161,116 +169,135 @@ export const tanstackRouterPlugin = (
           setTanstackRscRouter(serverRouter);
         }
 
-        await attachServerSsrUtils(serverRouter);
-
-        const end = time();
-
+        let disposed = false;
+        let prepared = false;
+        const onAbort = () => controller.abort(rawRequest.signal.reason);
+        const cleanup = () => {
+          if (disposed) return;
+          disposed = true;
+          rawRequest.signal.removeEventListener('abort', onAbort);
+          controller.abort();
+          serverRouter.serverSsr?.cleanup();
+        };
+        // Acquire the disposer before attachment: every subsequent failure,
+        // including partial attachment, has an owner. Successful preparation
+        // leaves disposal to the response lifetime in the SSR pipeline.
+        applyRouterRuntimeState(context, {
+          framework: 'tanstack',
+          basename: _basename,
+          instance: serverRouter,
+          cleanup,
+        });
+        rawRequest.signal.addEventListener('abort', onAbort, { once: true });
         try {
-          await tanstackRouter.load({ sync: true });
-        } finally {
-          const cost = end();
-          context.ssrContext?.onTiming?.(LOADER_REPORTER_NAME, cost);
-        }
+          rawRequest.signal.throwIfAborted();
+          await attachServerSsrUtils(serverRouter);
+          rawRequest.signal.throwIfAborted();
+
+          const end = time();
 
-        const serverLoadResult = serverRouter._serverResult;
-        if (!serverLoadResult) {
           try {
-            serverRouter.serverSsr?.cleanup?.();
-          } catch {}
-          throw new Error(
-            'TanStack Router completed an SSR load without a server result.',
-          );
-        }
+            await tanstackRouter.load({ sync: true });
+          } finally {
+            const cost = end();
+            context.ssrContext?.onTiming?.(LOADER_REPORTER_NAME, cost);
+          }
 
-        if (serverLoadResult.type === 'redirect') {
-          const { redirect } = serverLoadResult;
+          rawRequest.signal.throwIfAborted();
+          const serverLoadResult = serverRouter._serverResult;
+          if (!serverLoadResult) {
+            throw new Error(
+              'TanStack Router completed an SSR load without a server result.',
+            );
+          }
 
-          try {
-            serverRouter.serverSsr?.cleanup?.();
-          } catch {}
-
-          return interrupt(
-            isRSCNavigation
-              ? handleTanstackRscRedirect(
-                  redirect.headers,
-                  _basename,
-                  redirect.status,
-                )
-              : redirect,
-          );
-        }
+          if (serverLoadResult.type === 'redirect') {
+            const { redirect } = serverLoadResult;
+
+            return interrupt(
+              isRSCNavigation
+                ? handleTanstackRscRedirect(
+                    redirect.headers,
+                    _basename,
+                    redirect.status,
+                  )
+                : redirect,
+            );
+          }
+
+          const routerErrors = collectRouterErrors(tanstackRouter);
+          if (routerErrors && loaderFailureMode === 'clientRender') {
+            (
+              context.ssrContext?.response as
+                | { status: (code: number) => void }
+                | undefined
+            )?.status(200);
+            throw Object.values(routerErrors)[0];
+          }
+
+          await preloadMatchedRouteComponents(serverRouter);
 
-        const routerErrors = collectRouterErrors(tanstackRouter);
-        if (routerErrors && loaderFailureMode === 'clientRender') {
           (
             context.ssrContext?.response as
               | { status: (code: number) => void }
               | undefined
-          )?.status(200);
-          try {
-            serverRouter.serverSsr?.cleanup?.();
-          } catch {}
-          throw Object.values(routerErrors)[0];
-        }
+          )?.status(serverLoadResult.status);
 
-        await preloadMatchedRouteComponents(serverRouter);
+          await serverRouter.serverSsr?.dehydrate();
 
-        (
-          context.ssrContext?.response as
-            | { status: (code: number) => void }
-            | undefined
-        )?.status(serverLoadResult.status);
-
-        await serverRouter.serverSsr?.dehydrate?.();
-
-        if (enableRsc) {
-          if (isRSCNavigation) {
-            // RSC navigations consume the server payload directly. Normal HTML SSR
-            // emits the buffered bootstrap script below and must not wait here
-            // because Modern's non-streaming hook has not rendered the app yet.
-            await waitForRouterSerialization(serverRouter);
+          if (enableRsc) {
+            setTanstackRscServerPayload(
+              createTanstackRscServerPayload(serverRouter, {
+                omitClientLoaderData: isRSCNavigation,
+              }),
+            );
           }
 
-          setTanstackRscServerPayload(
-            createTanstackRscServerPayload(serverRouter, {
-              omitClientLoaderData: isRSCNavigation,
-            }),
-          );
-        }
-
-        const ssrScriptTags = serverRouter.serverSsr?.takeBufferedScripts?.();
-        const hydrationScripts = routerManagedTagsToHtml(ssrScriptTags);
-        const matchedRouteIds = getModernRouteIdsFromMatches(serverRouter);
-        const routerServerSnapshot: InternalRouterServerSnapshot =
-          createRouterServerSnapshot({
+          const initialScriptTags =
+            serverRouter.serverSsr?.takeInitialHydrationScriptTags();
+          const hydrationScripts = initialScriptTags
+            ? routerManagedTagsToHtml([
+                ...initialScriptTags.before,
+                initialScriptTags.boundary,
+              ])
+            : [];
+          const matchedRouteIds = getModernRouteIdsFromMatches(serverRouter);
+          const routerServerSnapshot: InternalRouterServerSnapshot = {
             framework: 'tanstack',
             basename: _basename,
             statusCode: serverLoadResult.status,
             errors: routerErrors,
             matchedRouteIds,
             hydrationScripts,
-          });
-        const runtimeContext = applyRouterServerPrepareResult(
-          context as TInternalRuntimeContext,
-          {
-            snapshot: routerServerSnapshot,
-            cleanup: () => serverRouter.serverSsr?.cleanup?.(),
-            state: {
-              framework: 'tanstack',
-              basename: _basename,
-              instance: serverRouter,
-              hydrationScripts,
-              matchedRouteIds,
-              serverSnapshot: routerServerSnapshot,
+          };
+          const runtimeContext = applyRouterServerPrepareResult(
+            context as TInternalRuntimeContext,
+            {
+              snapshot: routerServerSnapshot,
+              cleanup,
+              state: {
+                framework: 'tanstack',
+                basename: _basename,
+                instance: serverRouter,
+                navigation: createTanstackNavigation(tanstackRouter),
+              },
             },
-          },
-        );
-        hooks.onAfterCreateRouter.call({
-          ...routerLifecycleContext,
-          router: serverRouter,
-          serverSnapshot: routerServerSnapshot,
-          runtimeContext,
-        });
+          );
+          rawRequest.signal.throwIfAborted();
+          hooks.onAfterCreateRouter.call({
+            ...routerLifecycleContext,
+            router: serverRouter,
+            serverSnapshot: getRouterServerSnapshot(runtimeContext),
+            runtimeContext,
+          });
+          prepared = true;
+        } finally {
+          if (!prepared) {
+            try {
+              cleanup();
+            } catch {}
+          }
+        }
       });
 
       api.wrapRoot(App => {

package/src/runtime/plugin.tsx

@@ -32,6 +32,7 @@ import {
   applyRouterRuntimeState,
   type RouterLifecycleContext,
 } from './lifecycle';
+import { createTanstackNavigation } from './navigation';
 import {
   createTanstackRouteObjects,
   getMergedRouterConfig,
@@ -149,7 +150,11 @@ export const tanstackRouterPlugin = (
         const history = supportHtml5History
           ? createBrowserHistory()
           : createHashHistory();
-        const rewrite = createModernBasepathRewrite(_basename);
+        const rewrite = createModernBasepathRewrite(
+          _basename,
+          false,
+          getRouteObjects(),
+        );
         const serializationAdapters = getGlobalEnableRsc()
           ? getTanstackRscSerializationAdapters()
           : undefined;
@@ -255,10 +260,15 @@ export const tanstackRouterPlugin = (
           if (!router) {
             return App ? <App /> : null;
           }
+          const navigation = useMemo(
+            () => createTanstackNavigation(router),
+            [router],
+          );
           const runtimeState = applyRouterRuntimeState(runtimeContext, {
             framework: 'tanstack',
             basename: _basename,
             instance: router,
+            navigation,
           });
           const lifecycleContext: RouterLifecycleContext = {
             framework: 'tanstack',

package/src/runtime/prefetchLink.tsx

@@ -1,3 +1,4 @@
+import { resolvePreloadFromPrefetch } from '@modern-js/runtime-extensions';
 import {
   type AnyRouter,
   type LinkComponentProps,
@@ -8,29 +9,6 @@ import type { AnchorHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
 
 export type PrefetchBehavior = 'intent' | 'render' | 'viewport' | 'none';
 
-function resolvePreloadFromPrefetch(
-  prefetch: PrefetchBehavior | undefined,
-  preload: unknown,
-) {
-  if (typeof preload !== 'undefined') {
-    return preload;
-  }
-
-  if (prefetch === 'none') {
-    return false;
-  }
-
-  if (
-    prefetch === 'intent' ||
-    prefetch === 'render' ||
-    prefetch === 'viewport'
-  ) {
-    return prefetch;
-  }
-
-  return 'viewport';
-}
-
 export type LinkProps<
   TRouter extends AnyRouter = RegisteredRouter,
   TFrom extends string = string,

package/src/runtime/register.ts

@@ -1,16 +1,7 @@
-/**
- * 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).
- */
 import {
   type RouterProviderFactory,
   type RouterProviderPlugin,
-  registerRouterProvider,
-} from '@modern-js/runtime/context';
+} from '@modern-js/runtime-extensions/router-provider';
 import { tanstackRouterPlugin } from './plugin';
 
 // TanStack runtime plugin types its API against its own hook registry,
@@ -22,5 +13,3 @@ import { tanstackRouterPlugin } from './plugin';
 export const tanstackRouterProviderFactory: RouterProviderFactory =
   userConfig =>
     tanstackRouterPlugin(userConfig) as unknown as RouterProviderPlugin;
-
-registerRouterProvider('tanstack', tanstackRouterProviderFactory);