@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.8 → 3.2.0-ultramodern.81

package/src/runtime/routeTree.ts

@@ -12,6 +12,7 @@ import {
   notFound,
   redirect,
 } from '@tanstack/react-router';
+import { createElement, type ElementType } from 'react';
 import { DefaultNotFound } from './DefaultNotFound';
 import {
   isTanstackRscPayloadNavigationEnabled,
@@ -118,6 +119,15 @@ type ModernDeferredDataLike = {
   __modern_deferred?: unknown;
   data?: unknown;
 };
+type ModernRouteModule = {
+  Component?: unknown;
+  default?: unknown;
+};
+type PreloadableComponent = {
+  (props: Record<string, unknown>): ReturnType<typeof createElement>;
+  load?: () => Promise<unknown>;
+  preload?: () => Promise<unknown>;
+};
 type RouteTreeOptions = {
   rscPayloadRouter?: boolean;
 };
@@ -219,6 +229,72 @@ function normalizeModernLoaderResponse(result: unknown): unknown {
   return normalizeModernLoaderResult(result);
 }
 
+function pickRouteModuleComponent(
+  routeModule: unknown,
+): ElementType<Record<string, unknown>> | undefined {
+  if (
+    typeof routeModule === 'function' ||
+    (routeModule &&
+      typeof routeModule === 'object' &&
+      '$$typeof' in routeModule)
+  ) {
+    return routeModule as ElementType<Record<string, unknown>>;
+  }
+
+  if (!routeModule || typeof routeModule !== 'object') {
+    return undefined;
+  }
+
+  const module = routeModule as ModernRouteModule;
+  const component = module.default || module.Component;
+  if (
+    typeof component === 'function' ||
+    (component && typeof component === 'object' && '$$typeof' in component)
+  ) {
+    return component as ElementType<Record<string, unknown>>;
+  }
+
+  return undefined;
+}
+
+function createServerLazyImportComponent(
+  lazyImport: () => unknown,
+  fallbackComponent?: unknown,
+): PreloadableComponent | unknown {
+  if (typeof document !== 'undefined') {
+    return fallbackComponent;
+  }
+
+  let resolvedComponent: ElementType<Record<string, unknown>> | undefined;
+  let pendingLoad: Promise<unknown> | undefined;
+
+  const load = async () => {
+    if (resolvedComponent) {
+      return resolvedComponent;
+    }
+
+    const routeModule = await lazyImport();
+    const component = pickRouteModuleComponent(routeModule);
+    if (component) {
+      resolvedComponent = component;
+    }
+    return resolvedComponent;
+  };
+
+  const Component: PreloadableComponent = props => {
+    if (resolvedComponent) {
+      return createElement(resolvedComponent, props);
+    }
+
+    pendingLoad ||= load();
+    throw pendingLoad;
+  };
+  Component.load = load;
+  Component.preload = load;
+
+  return Component;
+}
+
 function isAbsoluteUrl(value: string) {
   try {
     void new URL(value);
@@ -352,9 +428,10 @@ function wrapModernLoader(
             ctx?.location?.url?.href ||
             '';
 
-      const request = baseRequest
-        ? new Request(baseRequest, { signal })
-        : createModernRequest(href, signal);
+      const request =
+        baseRequest !== undefined
+          ? new Request(baseRequest, { signal })
+          : createModernRequest(href, signal);
       const params = mapParamsForModernLoader({
         modernRoute,
         params: ctx.params || {},
@@ -468,9 +545,10 @@ function wrapRouteObjectLoader(
             ctx?.location?.url?.href ||
             '';
 
-      const request = baseRequest
-        ? new Request(baseRequest, { signal })
-        : createModernRequest(href, signal);
+      const request =
+        baseRequest !== undefined
+          ? new Request(baseRequest, { signal })
+          : createModernRequest(href, signal);
 
       const params = mapParamsForRouteObjectLoader({
         route,
@@ -519,6 +597,18 @@ function wrapRouteObjectLoader(
 
 function toRouteComponent(routeObject: RouteObject): unknown {
   const route = routeObject as ModernRouteObject;
+  const lazyImport =
+    typeof route.lazyImport === 'function' ? route.lazyImport : undefined;
+  const fallbackComponent = route.Component
+    ? route.Component
+    : route.element
+      ? () => route.element
+      : undefined;
+
+  if (lazyImport && fallbackComponent) {
+    return createServerLazyImportComponent(lazyImport, fallbackComponent);
+  }
+
   if (route.Component) {
     return route.Component;
   }
@@ -529,6 +619,15 @@ function toRouteComponent(routeObject: RouteObject): unknown {
   return undefined;
 }
 
+function toModernRouteComponent(route: ModernGeneratedRoute): unknown {
+  const component = route.component || undefined;
+  if (typeof route.lazyImport === 'function' && component) {
+    return createServerLazyImportComponent(route.lazyImport, component);
+  }
+
+  return component;
+}
+
 function toErrorComponent(routeObject: RouteObject): unknown {
   const route = routeObject as ModernRouteObject;
   if (route.ErrorBoundary) {
@@ -702,7 +801,7 @@ function createRouteFromModernRoute(opts: {
 
   const pendingComponent = route.loading || route.pendingComponent;
   const errorComponent = route.error || route.errorComponent;
-  const component = route.component;
+  const component = toModernRouteComponent(route);
   const modernLoader = route.loader;
   const modernAction = route.action;
   const modernShouldRevalidate = route.shouldRevalidate;
@@ -788,7 +887,9 @@ export function createRouteTreeFromModernRoutes(
       (r as ModernGeneratedRoute).isRoot,
   ) as ModernGeneratedRoute | undefined;
 
-  const rootComponent = rootModern?.component;
+  const rootComponent = rootModern
+    ? toModernRouteComponent(rootModern)
+    : undefined;
   const pendingComponent = rootModern?.loading;
   const errorComponent = rootModern?.error;
   const rootLoader = rootModern?.loader;

package/tests/router/routeTree.test.ts

@@ -1,7 +1,10 @@
 import type { RouteObject } from '@modern-js/runtime-utils/router';
 import type { NestedRoute } from '@modern-js/types';
 import { createMemoryHistory } from '@tanstack/history';
-import { createRouter } from '@tanstack/react-router';
+import { createRouter, Outlet, RouterProvider } from '@tanstack/react-router';
+import type { ComponentType } from 'react';
+import { createElement, lazy } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import {
   createRouteTreeFromModernRoutes,
   createRouteTreeFromRouteObjects,
@@ -23,6 +26,7 @@ type TestRouteObject = RouteObject & {
   hasLoader?: boolean;
   inValidSSRRoute?: boolean;
   isClientComponent?: boolean;
+  lazyImport?: () => Promise<{ default: ComponentType }>;
 };
 
 type TestNestedRoute = NestedRoute & {
@@ -234,6 +238,73 @@ describe('tanstack route tree from RouteObject[]', () => {
     expect(splatParamValue).toBe('a/b/c');
   });
 
+  test('preloads lazy Modern route components for server rendering', async () => {
+    const LazyRouteComponent = () =>
+      createElement('main', null, 'Lazy route ready');
+    const lazyImport = rstest.fn(async () => ({
+      default: LazyRouteComponent,
+    }));
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => null,
+        children: [
+          {
+            id: 'lazy',
+            path: 'lazy',
+            Component: lazy(lazyImport),
+            lazyImport,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/lazy');
+    const lazyRoute = getLooseRoute(router, '/lazy');
+    const component = lazyRoute.options.component as ComponentType & {
+      preload?: () => Promise<unknown>;
+    };
+
+    await component.preload?.();
+
+    expect(renderToStaticMarkup(createElement(component))).toContain(
+      'Lazy route ready',
+    );
+    expect(lazyImport).toHaveBeenCalled();
+  });
+
+  test('renders preloaded lazy child routes through TanStack router SSR', async () => {
+    const LazyRouteComponent = () =>
+      createElement('main', null, 'Lazy child route ready');
+    const lazyImport = rstest.fn(async () => ({
+      default: LazyRouteComponent,
+    }));
+    const routes: TestRouteObject[] = [
+      {
+        id: 'root',
+        path: '/',
+        Component: () => createElement('section', null, createElement(Outlet)),
+        children: [
+          {
+            id: 'lazy',
+            path: 'lazy',
+            Component: lazy(lazyImport),
+            lazyImport,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/lazy');
+
+    expect(
+      renderToStaticMarkup(createElement(RouterProvider, { router } as never)),
+    ).toContain('Lazy child route ready');
+  });
+
   test('preserves route handle and maps shouldRevalidate to shouldReload', async () => {
     const shouldRevalidate = rstest.fn(({ nextUrl }: ShouldRevalidateArgs) =>
       nextUrl.pathname.endsWith('/456'),

package/tests/router/tanstackTypes.test.ts

@@ -55,8 +55,72 @@ describe('tanstack router type generation', () => {
     );
     expect(routerGenTs).toContain('modernRouteLoader: loader_0');
     expect(routerGenTs).toContain('modernRouteAction: action_0');
+    expect(routerGenTs).toContain('modernRouteId?: string;');
+    expect(routerGenTs).not.toContain(
+      'return Object.keys(staticData).length > 0 ? staticData : undefined;',
+    );
     expect(routerGenTs).toContain(
       "} from '@modern-js/plugin-tanstack/runtime';",
     );
   });
+
+  test('preserves typed child trees for localized nested route aliases', async () => {
+    tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-types-'));
+    const srcDirectory = path.join(tempDir, 'src');
+
+    const { routerGenTs } = await generateTanstackRouterTypesSourceForEntry({
+      appContext: {
+        srcDirectory,
+        internalSrcAlias: '@/_',
+      } as any,
+      entryName: 'index',
+      routes: [
+        {
+          type: 'nested',
+          id: 'layout',
+          isRoot: true,
+          children: [
+            {
+              type: 'nested',
+              id: '(lang)/layout',
+              path: ':lang',
+              children: [
+                {
+                  type: 'nested',
+                  id: '(lang)/products/(slug)/page',
+                  path: 'products/:slug',
+                },
+                {
+                  type: 'nested',
+                  id: '(lang)/products/(slug)/page__localised_produkty_slug',
+                  path: 'produkty/:slug',
+                },
+                {
+                  type: 'nested',
+                  id: '(lang)/optional/(slug$)/page__localised_volitelne_slug',
+                  path: 'volitelne/:slug?',
+                },
+              ],
+            },
+          ],
+        },
+      ] as any,
+    });
+
+    expect(routerGenTs).toContain(
+      'const route__lang__layout__base = createRoute({',
+    );
+    expect(routerGenTs).toContain(
+      'getParentRoute: () => route__lang__layout__base,',
+    );
+    expect(routerGenTs).toContain('path: "produkty/$slug",');
+    expect(routerGenTs).toContain('path: "volitelne/{-$slug}",');
+    expect(routerGenTs).toContain(
+      'const route__lang__layout = route__lang__layout__base.addChildren([route__lang__products__slug__page, route__lang__products__slug__page__localised_produkty_slug, route__lang__optional__slug$__page__localised_volitelne_slug]);',
+    );
+    expect(routerGenTs).toContain(
+      'export const routeTree = rootRoute.addChildren([route__lang__layout]);',
+    );
+    expect(routerGenTs).not.toContain('route__lang__layout.addChildren([');
+  });
 });