@bleedingdev/modern-js-plugin-tanstack 3.2.0-ultramodern.5 → 3.2.0-ultramodern.51

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([');
+  });
 });