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

package/src/runtime/plugin.node.tsx

@@ -3,14 +3,13 @@
 
 import {
   getGlobalEnableRsc,
+  type InternalRouterServerSnapshot,
   InternalRuntimeContext,
-  type ServerPayload,
   type TInternalRuntimeContext,
 } from '@modern-js/runtime/context';
 import {
   createRequestContext,
   type RequestContext,
-  storage,
 } from '@modern-js/runtime-utils/node';
 import { time } from '@modern-js/runtime-utils/time';
 import { LOADER_REPORTER_NAME } from '@modern-js/utils/universal/constants';
@@ -32,11 +31,12 @@ import {
   type RouterLifecycleContext,
 } from './lifecycle';
 import {
-  getFinalRouteConfig,
-  getMergedRouterConfig,
+  createTanstackRouteObjects,
+  getTanstackRouteConfig,
+  joinBasename,
   type TanstackRouterPluginAPI,
   type TanstackRouterRuntimePlugin,
-} from './pluginCore';
+} from './pluginShared';
 import {
   createRouteTreeFromRouteObjects,
   getModernRouteIdsFromMatches,
@@ -45,270 +45,27 @@ import {
   createTanstackRscServerPayload,
   handleTanstackRscRedirect,
 } from './rsc/payloadRouter';
+import {
+  getTanstackRscRouter,
+  setTanstackRscRouter,
+  setTanstackRscServerPayload,
+} from './rsc/payloadStorage';
+import {
+  attachServerSsrUtils,
+  collectRouterErrors,
+  createGetSsrHref,
+  routerManagedTagsToHtml,
+  waitForRouterSerialization,
+} from './ssrManagedTags';
+import { preloadMatchedRouteComponents } from './ssrPreload';
+import type {
+  ModernTanstackRouterContext,
+  TanstackRouterWithServerSsr,
+} from './ssrTypes';
 import {
   getModernTanstackRouterFastDefaults,
-  type InternalRouterServerSnapshot,
   type RouterConfig,
 } from './types';
-import { createRouteObjectsFromConfig, urlJoin } from './utils';
-
-type ModernTanstackRouterContext = {
-  request: Request;
-  requestContext: RequestContext<Record<string, unknown>>;
-};
-
-const setTanstackRscServerPayload = (payload: ServerPayload) => {
-  const storageContext = storage.useContext?.() as
-    | { serverPayload?: ServerPayload }
-    | undefined;
-  if (storageContext) {
-    storageContext.serverPayload = payload;
-  }
-};
-
-type RouterManagedTag = {
-  attrs?: Record<string, unknown>;
-  children?: unknown;
-  tag?: unknown;
-};
-
-type RouterMatchWithError = {
-  error?: unknown;
-  route?: {
-    id?: unknown;
-    options?: RouterRouteOptions;
-  };
-  routeId?: unknown;
-};
-
-type RouterRouteOptions = {
-  component?: unknown;
-  errorComponent?: unknown;
-  notFoundComponent?: unknown;
-  pendingComponent?: unknown;
-};
-
-type RouterRouteWithOptions = {
-  options?: RouterRouteOptions;
-};
-
-type PreloadableRouteComponent = {
-  load?: (props?: Record<string, unknown>) => Promise<unknown> | unknown;
-  preload?: (props?: Record<string, unknown>) => Promise<unknown> | unknown;
-};
-
-type ReactLazyRouteComponent = {
-  _init?: (payload: unknown) => unknown;
-  _payload?: unknown;
-};
-
-function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
-  return Boolean(
-    value && typeof (value as PromiseLike<unknown>).then === 'function',
-  );
-}
-
-type TanstackRouterWithServerSsr = AnyRouter & {
-  resolveRedirect?: (redirect: Response) => Response;
-  routesById?: Record<string, RouterRouteWithOptions>;
-  serverSsr?: {
-    cleanup?: () => void;
-    dehydrate?: () => Promise<void> | void;
-    isSerializationFinished?: () => boolean;
-    onSerializationFinished?: (listener: () => void) => void;
-    takeBufferedScripts?: () => unknown;
-  };
-  state: AnyRouter['state'] & {
-    matches?: unknown;
-    redirect?: Response;
-  };
-};
-
-function isPreloadableRouteComponent(
-  component: unknown,
-): component is PreloadableRouteComponent {
-  if (!component || typeof component !== 'function') {
-    return false;
-  }
-
-  const preloadable = component as PreloadableRouteComponent;
-  return (
-    typeof preloadable.load === 'function' ||
-    typeof preloadable.preload === 'function'
-  );
-}
-
-function isReactLazyRouteComponent(
-  component: unknown,
-): component is ReactLazyRouteComponent {
-  return (
-    component !== null &&
-    component !== undefined &&
-    typeof component === 'object' &&
-    typeof (component as ReactLazyRouteComponent)._init === 'function' &&
-    '_payload' in component
-  );
-}
-
-async function preloadReactLazyRouteComponent(
-  component: ReactLazyRouteComponent,
-) {
-  try {
-    component._init?.(component._payload);
-  } catch (thrown) {
-    if (!isPromiseLike(thrown)) {
-      throw thrown;
-    }
-    await thrown;
-    component._init?.(component._payload);
-  }
-}
-
-async function preloadRouteComponent(component: unknown) {
-  if (isReactLazyRouteComponent(component)) {
-    await preloadReactLazyRouteComponent(component);
-    return;
-  }
-
-  if (!isPreloadableRouteComponent(component)) {
-    return;
-  }
-
-  if (typeof component.load === 'function') {
-    await component.load({});
-    return;
-  }
-
-  await component.preload?.({});
-}
-
-async function preloadMatchedRouteComponents(
-  tanstackRouter: TanstackRouterWithServerSsr,
-) {
-  const matches = Array.isArray(tanstackRouter.state.matches)
-    ? (tanstackRouter.state.matches as RouterMatchWithError[])
-    : [];
-  const routesById = tanstackRouter.routesById || {};
-
-  await Promise.all(
-    matches.map(async match => {
-      const routeId =
-        typeof match.routeId === 'string'
-          ? match.routeId
-          : typeof match.route?.id === 'string'
-            ? match.route.id
-            : undefined;
-      const route = routeId ? routesById[routeId] : match.route;
-      const options = route?.options;
-      if (!options) {
-        return;
-      }
-
-      await Promise.all([
-        preloadRouteComponent(options.component),
-        preloadRouteComponent(options.pendingComponent),
-        preloadRouteComponent(options.errorComponent),
-        preloadRouteComponent(options.notFoundComponent),
-      ]);
-    }),
-  );
-}
-
-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;');
-}
-
-function routerManagedTagToHtml(tag: unknown): string {
-  if (!tag || typeof tag !== 'object') {
-    return '';
-  }
-
-  const managedTag = tag as RouterManagedTag;
-  if (!managedTag || managedTag.tag !== 'script') {
-    return '';
-  }
-
-  const attrs: Record<string, unknown> = managedTag.attrs || {};
-  const attrsStr = Object.entries(attrs)
-    .filter(([, v]) => v != null && v !== false)
-    .map(([k, v]) => {
-      const name = k === 'className' ? 'class' : k;
-      if (v === true) {
-        return name;
-      }
-      return `${name}="${htmlEscapeAttr(String(v))}"`;
-    })
-    .join(' ');
-
-  const open = attrsStr.length ? `<script ${attrsStr}>` : '<script>';
-  const children =
-    typeof managedTag.children === 'string' ? managedTag.children : '';
-  return `${open}${children}</script>`;
-}
-
-function routerManagedTagsToHtml(tags: unknown): string[] {
-  const normalizedTags = Array.isArray(tags) ? tags : [tags];
-  return normalizedTags.map(routerManagedTagToHtml).filter(Boolean);
-}
-
-function createGetSsrHref(request: Request): string {
-  const url = new URL(request.url);
-  return `${url.pathname}${url.search}${url.hash}`;
-}
-
-function collectRouterErrors(
-  tanstackRouter: AnyRouter,
-): Record<string, unknown> | undefined {
-  const state = tanstackRouter.state as { matches?: unknown };
-  const matches = Array.isArray(state.matches)
-    ? (state.matches as RouterMatchWithError[])
-    : [];
-  const errors = matches.reduce((acc: Record<string, unknown>, match) => {
-    if (!match.error) {
-      return acc;
-    }
-
-    const routeId =
-      typeof match.routeId === 'string'
-        ? match.routeId
-        : typeof match.route?.id === 'string'
-          ? match.route.id
-          : `match-${Object.keys(acc).length}`;
-
-    acc[routeId] = match.error;
-    return acc;
-  }, {});
-
-  return Object.keys(errors).length > 0 ? errors : undefined;
-}
-
-async function attachServerSsrUtils(router: TanstackRouterWithServerSsr) {
-  const { attachRouterServerSsrUtils } = await import(
-    '@tanstack/router-core/ssr/server'
-  );
-
-  attachRouterServerSsrUtils({
-    router,
-    manifest: undefined,
-  });
-}
 
 export const tanstackRouterPlugin = (
   userConfig: Partial<RouterConfig> = {},
@@ -318,30 +75,27 @@ export const tanstackRouterPlugin = (
     registryHooks: routerProviderRegistryHooks,
     setup: (api: TanstackRouterPluginAPI) => {
       api.onBeforeRender(async (context, interrupt) => {
-        const mergedConfig = getMergedRouterConfig(api, userConfig);
+        const routeConfig = getTanstackRouteConfig(api, userConfig);
+        const { mergedConfig } = routeConfig;
         const serializationAdapters = getGlobalEnableRsc()
           ? (await import('./rsc/server')).getTanstackRscSerializationAdapters()
           : undefined;
         const enableRsc = getGlobalEnableRsc();
 
-        const { basename = '', createRoutes } = mergedConfig;
+        const { basename = '' } = mergedConfig;
 
-        const finalRouteConfig = getFinalRouteConfig(mergedConfig);
-
-        if (!finalRouteConfig.routes && !createRoutes) {
+        if (!routeConfig.hasConfiguredRoutes) {
           return;
         }
 
         const hooks = api.getHooks();
         await hooks.onBeforeCreateRoutes.call(context);
 
-        const routeObjects = createRoutes
-          ? createRoutes()
-          : createRouteObjectsFromConfig({
-              routesConfig: finalRouteConfig,
-              ssrMode: context.ssrContext?.mode,
-            }) || [];
-        const modifiedRouteObjects = hooks.modifyRoutes.call(routeObjects);
+        const modifiedRouteObjects = createTanstackRouteObjects({
+          hooks,
+          routeConfig,
+          ssrMode: context.ssrContext?.mode,
+        });
 
         if (!modifiedRouteObjects.length) {
           return;
@@ -355,20 +109,21 @@ export const tanstackRouterPlugin = (
         } = context.ssrContext!;
 
         const _basename =
-          baseUrl === '/' ? urlJoin(baseUrl, basename || '') : baseUrl;
+          baseUrl === '/' ? joinBasename(baseUrl, basename || '') : baseUrl;
 
-        const initialHref = createGetSsrHref(request.raw);
+        const rawRequest = request.raw as Request;
+        const initialHref = createGetSsrHref(rawRequest);
         const isRSCNavigation =
-          enableRsc && request.raw.headers.get('x-rsc-tree') === 'true';
+          enableRsc && rawRequest.headers.get('x-rsc-tree') === 'true';
 
         const requestContext = createRequestContext(
           context.ssrContext?.loaderContext,
         ) as RequestContext<Record<string, unknown>>;
 
         const controller = new AbortController();
-        const ssrRequest = new Request(request.raw.url, {
+        const ssrRequest = new Request(rawRequest.url, {
           method: 'GET',
-          headers: request.raw.headers,
+          headers: rawRequest.headers,
           signal: controller.signal,
         });
 
@@ -398,13 +153,16 @@ export const tanstackRouterPlugin = (
           history,
           basepath: '/',
           rewrite,
-          origin: new URL(request.raw.url).origin,
+          origin: new URL(rawRequest.url).origin,
           ssr: { nonce },
           context: routerContext as never,
           ...(serializationAdapters ? { serializationAdapters } : {}),
         });
         const serverRouter =
           tanstackRouter as unknown as TanstackRouterWithServerSsr;
+        if (enableRsc) {
+          setTanstackRscRouter(serverRouter);
+        }
 
         await attachServerSsrUtils(serverRouter);
 
@@ -439,7 +197,11 @@ export const tanstackRouterPlugin = (
 
         const routerErrors = collectRouterErrors(tanstackRouter);
         if (routerErrors && loaderFailureMode === 'clientRender') {
-          context.ssrContext?.response.status(200);
+          (
+            context.ssrContext?.response as
+              | { status: (code: number) => void }
+              | undefined
+          )?.status(200);
           try {
             serverRouter.serverSsr?.cleanup?.();
           } catch {}
@@ -448,18 +210,25 @@ export const tanstackRouterPlugin = (
 
         await preloadMatchedRouteComponents(serverRouter);
 
-        context.ssrContext?.response.status(tanstackRouter.state.statusCode);
+        (
+          context.ssrContext?.response as
+            | { status: (code: number) => void }
+            | undefined
+        )?.status(tanstackRouter.state.statusCode);
 
         await serverRouter.serverSsr?.dehydrate?.();
 
-        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) {
+          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);
+          }
+
           setTanstackRscServerPayload(
             createTanstackRscServerPayload(serverRouter, {
-              omitClientLoaderData: true,
+              omitClientLoaderData: isRSCNavigation,
             }),
           );
         }
@@ -501,6 +270,22 @@ export const tanstackRouterPlugin = (
 
       api.wrapRoot(App => {
         const getRouteApp = () => {
+          if (getGlobalEnableRsc()) {
+            return (props => {
+              const router = getTanstackRscRouter();
+              if (!router) {
+                return App ? <App {...props} /> : null;
+              }
+
+              const routerWrapper = wrapTanstackSsrHydrationBoundary(
+                <RouterProvider router={router as AnyRouter} />,
+                true,
+              );
+
+              return App ? <App>{routerWrapper}</App> : routerWrapper;
+            }) as React.FC<Record<string, unknown>>;
+          }
+
           return (props => {
             const context = useContext(
               InternalRuntimeContext,