@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.12 → 3.2.0-ultramodern.120

package/src/runtime/index.tsx

@@ -1,5 +1,104 @@
-export * from '@tanstack/react-router';
-export { useMatch } from '@tanstack/react-router';
+export type * from '@tanstack/react-router';
+export {
+  Asset,
+  Await,
+  Block,
+  CatchBoundary,
+  CatchNotFound,
+  ClientOnly,
+  cleanPath,
+  composeRewrites,
+  createBrowserHistory,
+  createControlledPromise,
+  createFileRoute,
+  createHashHistory,
+  createHistory,
+  createLazyFileRoute,
+  createLazyRoute,
+  createLink,
+  createMemoryHistory,
+  createRootRoute,
+  createRootRouteWithContext,
+  createRoute,
+  createRouteMask,
+  createRouter,
+  createRouterConfig,
+  createSerializationAdapter,
+  DEFAULT_PROTOCOL_ALLOWLIST,
+  DefaultGlobalNotFound,
+  deepEqual,
+  defaultParseSearch,
+  defaultStringifySearch,
+  defer,
+  ErrorComponent,
+  FileRoute,
+  FileRouteLoader,
+  functionalUpdate,
+  getRouteApi,
+  HeadContent,
+  interpolatePath,
+  isMatch,
+  isNotFound,
+  isPlainArray,
+  isPlainObject,
+  isRedirect,
+  joinPaths,
+  LazyRoute,
+  lazyFn,
+  lazyRouteComponent,
+  linkOptions,
+  Match,
+  Matches,
+  MatchRoute,
+  Navigate,
+  NotFoundRoute,
+  notFound,
+  parseSearchWith,
+  RootRoute,
+  Route,
+  RouteApi,
+  Router,
+  RouterContextProvider,
+  RouterProvider,
+  reactUse,
+  redirect,
+  replaceEqualDeep,
+  resolvePath,
+  retainSearchParams,
+  rootRouteId,
+  rootRouteWithContext,
+  ScriptOnce,
+  Scripts,
+  ScrollRestoration,
+  SearchParamError,
+  stringifySearchWith,
+  stripSearchParams,
+  trimPath,
+  trimPathLeft,
+  trimPathRight,
+  useAwaited,
+  useBlocker,
+  useCanGoBack,
+  useChildMatches,
+  useElementScrollRestoration,
+  useHydrated,
+  useLayoutEffect,
+  useLinkProps,
+  useLoaderData,
+  useLoaderDeps,
+  useLocation,
+  useMatch,
+  useMatches,
+  useMatchRoute,
+  useNavigate,
+  useParams,
+  useParentMatches,
+  useRouteContext,
+  useRouter,
+  useRouterState,
+  useSearch,
+  useTags,
+} from '@tanstack/react-router';
 export type {
   Fetcher,
   FetcherState,
@@ -12,6 +111,7 @@ export {
   RouteActionResponseError,
   useFetcher,
 } from './dataMutation';
+export { Outlet } from './outlet';
 export {
   tanstackRouterPlugin,
   tanstackRouterPlugin as default,
@@ -28,3 +128,8 @@ export type {
   CompositeComponentProps,
 } from './rsc/client';
 export { CompositeComponent } from './rsc/client';
+export type { RouterConfig } from './types';
+export {
+  getModernTanstackRouterFastDefaults,
+  modernTanstackRouterFastDefaults,
+} from './types';

package/src/runtime/outlet.tsx

@@ -0,0 +1,48 @@
+import { Outlet as TanstackOutlet } from '@tanstack/react-router';
+import {
+  createElement,
+  type ElementType,
+  memo,
+  type ReactElement,
+} from 'react';
+
+type RouteComponentProps = Record<string, unknown>;
+type PreloadableComponent = ElementType<RouteComponentProps> & {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+type WrappedPreloadableComponent = ((
+  props: RouteComponentProps,
+) => ReactElement | null) & {
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
+
+export const Outlet = memo(function ModernTanstackOutlet() {
+  return <TanstackOutlet />;
+});
+
+export function withModernRouteMatchContext(
+  component: unknown,
+  _routeId: string,
+): unknown {
+  if (component === null || component === undefined) {
+    return component;
+  }
+
+  const Component = component as ElementType<RouteComponentProps>;
+  const WrappedRouteComponent: WrappedPreloadableComponent = props =>
+    createElement(Component, props);
+
+  const preloadable = component as PreloadableComponent;
+  if (typeof preloadable.load === 'function') {
+    WrappedRouteComponent.load = preloadable.load.bind(preloadable);
+  }
+  if (typeof preloadable.preload === 'function') {
+    WrappedRouteComponent.preload = preloadable.preload.bind(preloadable);
+  } else if (typeof preloadable.load === 'function') {
+    WrappedRouteComponent.preload = WrappedRouteComponent.load;
+  }
+
+  return WrappedRouteComponent;
+}

package/src/runtime/plugin.node.tsx

@@ -26,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,
@@ -39,6 +39,7 @@ import {
   onBeforeHydrateRouter as onBeforeHydrateRouterHook,
   type RouterExtendsHooks,
 } from './hooks';
+import { wrapTanstackSsrHydrationBoundary } from './hydrationBoundary';
 import {
   applyRouterServerPrepareResult,
   createRouterServerSnapshot,
@@ -52,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 = {
@@ -119,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>;
@@ -149,7 +165,38 @@ function isPreloadableRouteComponent(
   );
 }
 
+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;
   }
@@ -398,6 +445,7 @@ export const tanstackRouterPlugin = (
         hooks.onBeforeCreateRouter.call(routerLifecycleContext);
 
         const tanstackRouter = createRouter({
+          ...getModernTanstackRouterFastDefaults(mergedConfig),
           routeTree,
           history,
           basepath: '/',
@@ -458,9 +506,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,
@@ -515,10 +566,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;