@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.1 → 3.2.0-ultramodern.100

package/src/runtime/plugin.node.tsx

@@ -1,3 +1,4 @@
+// @effect-diagnostics asyncFunction:off newPromise:off strictBooleanExpressions:off unnecessaryArrowBlock:off
 /// <reference path="./ssr-shim.d.ts" />
 
 import type { Plugin, RuntimePluginExtends } from '@modern-js/plugin';
@@ -25,9 +26,9 @@ import {
   createRouter,
   RouterProvider,
 } from '@tanstack/react-router';
-import { attachRouterServerSsrUtils } from '@tanstack/react-router/ssr/server';
+import { attachRouterServerSsrUtils } from '@tanstack/router-core/ssr/server';
 import type React from 'react';
-import { Suspense, useContext } from 'react';
+import { useContext } from 'react';
 import { createModernBasepathRewrite } from './basepathRewrite';
 import {
   modifyRoutes as modifyRoutesHook,
@@ -38,6 +39,7 @@ import {
   onBeforeHydrateRouter as onBeforeHydrateRouterHook,
   type RouterExtendsHooks,
 } from './hooks';
+import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterServerPrepareResult,
   createRouterServerSnapshot,
@@ -51,7 +53,11 @@ import {
   createTanstackRscServerPayload,
   handleTanstackRscRedirect,
 } from './rsc/payloadRouter';
-import type { InternalRouterServerSnapshot, RouterConfig } from './types';
+import {
+  getModernTanstackRouterFastDefaults,
+  type InternalRouterServerSnapshot,
+  type RouterConfig,
+} from './types';
 import { createRouteObjectsFromConfig, urlJoin } from './utils';
 
 type ModernTanstackRouterContext = {
@@ -118,6 +124,17 @@ type PreloadableRouteComponent = {
   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>;
@@ -148,7 +165,37 @@ function isPreloadableRouteComponent(
   );
 }
 
+function isReactLazyRouteComponent(
+  component: unknown,
+): component is ReactLazyRouteComponent {
+  return (
+    Boolean(component) &&
+    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;
   }
@@ -397,6 +444,7 @@ export const tanstackRouterPlugin = (
         hooks.onBeforeCreateRouter.call(routerLifecycleContext);
 
         const tanstackRouter = createRouter({
+          ...getModernTanstackRouterFastDefaults(mergedConfig),
           routeTree,
           history,
           basepath: '/',
@@ -457,9 +505,12 @@ export const tanstackRouterPlugin = (
         context.ssrContext?.response.status(tanstackRouter.state.statusCode);
 
         await serverRouter.serverSsr?.dehydrate?.();
-        await waitForRouterSerialization(serverRouter);
 
         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,
@@ -514,10 +565,9 @@ export const tanstackRouterPlugin = (
               return App ? <App {...props} /> : null;
             }
 
-            const routerWrapper = (
-              <Suspense fallback={null}>
-                <RouterProvider router={router as AnyRouter} />
-              </Suspense>
+            const routerWrapper = wrapTanstackSsrHydrationBoundary(
+              <RouterProvider router={router as AnyRouter} />,
+              true,
             );
 
             return App ? <App>{routerWrapper}</App> : routerWrapper;