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

package/tests/router/tanstackTypes.test.ts

@@ -1,7 +1,14 @@
+import { execFile } from 'node:child_process';
 import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
-import { generateTanstackRouterTypesSourceForEntry } from '../../src/cli/tanstackTypes';
+import { promisify } from 'node:util';
+import {
+  collectCanonicalRoutesForEntry,
+  generateTanstackRouterTypesSourceForEntry,
+} from '../../src/cli/tanstackTypes';
+
+const execFileAsync = promisify(execFile);
 
 describe('tanstack router type generation', () => {
   let tempDir: string | undefined;
@@ -58,5 +65,570 @@ describe('tanstack router type generation', () => {
     expect(routerGenTs).toContain(
       "} from '@modern-js/plugin-tanstack/runtime';",
     );
+    expect(routerGenTs).toContain('modernTanstackRouterFastDefaults,');
+    expect(routerGenTs).toContain('...modernTanstackRouterFastDefaults,');
+
+    // The loader-bridge helpers are imported from the package runtime instead
+    // of being inlined into every generated file (bugfixes ship via package
+    // update, and the broken inline absolute-redirect handler is gone).
+    expect(routerGenTs).toContain('createRouteStaticData,');
+    expect(routerGenTs).toContain('modernLoaderToTanstack,');
+    expect(routerGenTs).toContain('type ModernRouterContext,');
+    expect(routerGenTs).not.toContain('function modernLoaderToTanstack');
+    expect(routerGenTs).not.toContain('function createRouteStaticData');
+    expect(routerGenTs).not.toContain('function throwTanstackRedirect');
+  });
+
+  test('emits resolvable relative component imports for routes carrying _component', async () => {
+    tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-types-'));
+    const srcDirectory = path.join(tempDir, 'src');
+    for (const componentFile of [
+      'routes/layout.tsx',
+      'routes/page.tsx',
+      'routes/about/page.tsx',
+    ]) {
+      const componentPath = path.join(srcDirectory, componentFile);
+      await mkdir(path.dirname(componentPath), { recursive: true });
+      await writeFile(componentPath, 'export default () => null;');
+    }
+
+    const { routerGenTs } = await generateTanstackRouterTypesSourceForEntry({
+      appContext: {
+        srcDirectory,
+        internalSrcAlias: '@/_',
+      } as any,
+      entryName: 'index',
+      routes: [
+        {
+          type: 'nested',
+          id: 'layout',
+          isRoot: true,
+          _component: '@/_/routes/layout',
+          children: [
+            {
+              type: 'nested',
+              id: 'page',
+              index: true,
+              _component: '@/_/routes/page',
+            },
+            {
+              type: 'nested',
+              id: 'about/page',
+              path: 'about',
+              _component: '@/_/routes/about/page',
+            },
+            {
+              // Shares the page component module: the import must be reused.
+              type: 'nested',
+              id: 'about-alias/page',
+              path: 'about-alias',
+              _component: '@/_/routes/about/page',
+            },
+            {
+              // No _component: no component option may be emitted.
+              type: 'nested',
+              id: 'data-only/page',
+              path: 'data-only',
+            },
+          ],
+        },
+      ] as any,
+    });
+
+    // Children are emitted first, the root route component import last.
+    // Imports are relative (resolved like loader modules) — the raw
+    // `@/_` internal alias is not mapped by app tsconfigs.
+    expect(routerGenTs).toContain(
+      'import component_0 from "../../routes/page";',
+    );
+    expect(routerGenTs).toContain(
+      'import component_1 from "../../routes/about/page";',
+    );
+    expect(routerGenTs).toContain(
+      'import component_2 from "../../routes/layout";',
+    );
+    expect(routerGenTs).not.toContain('@/_/routes');
+    // The shared module is imported exactly once.
+    expect(routerGenTs).not.toContain('component_3');
+    expect(
+      routerGenTs.match(/from "\.\.\/\.\.\/routes\/about\/page";/g),
+    ).toHaveLength(1);
+
+    expect(routerGenTs).toContain('component: component_0,');
+    // The shared component import is referenced by both aliased routes.
+    expect(routerGenTs.match(/component: component_1,/g)).toHaveLength(2);
+    // The root route gets its component option.
+    expect(routerGenTs).toContain('component: component_2,');
+
+    const dataOnlyRoute = routerGenTs
+      .split('const ')
+      .find(block => block.includes('path: "data-only",'));
+    expect(dataOnlyRoute).toBeDefined();
+    expect(dataOnlyRoute).not.toContain('component:');
+  });
+
+  test('typechecks generated TanStack search contracts', async () => {
+    tempDir = await mkdtemp(path.join(tmpdir(), 'modern-tanstack-types-'));
+    const srcDirectory = path.join(tempDir, 'src');
+    const routeDir = path.join(srcDirectory, 'routes');
+    const generatedDir = path.join(srcDirectory, 'modern-tanstack', 'index');
+    await mkdir(routeDir, { recursive: true });
+    await mkdir(generatedDir, { recursive: true });
+    await writeFile(
+      path.join(routeDir, 'search.contract.ts'),
+      [
+        'export const validateSearch = (search: { q?: string }) => ({ q: search.q ?? "" });',
+        'export const loaderDeps = ({ search }: { search: { q: string } }) => ({ q: search.q });',
+      ].join('\n'),
+    );
+
+    const { routerGenTs } = await generateTanstackRouterTypesSourceForEntry({
+      appContext: {
+        srcDirectory,
+        internalSrcAlias: '@/_',
+      } as any,
+      entryName: 'index',
+      routes: [
+        {
+          type: 'nested',
+          id: 'layout',
+          isRoot: true,
+          validateSearch: '@/_/routes/search.contract',
+          loaderDeps: '@/_/routes/search.contract',
+          children: [
+            {
+              type: 'nested',
+              id: 'search/page',
+              path: 'search',
+              validateSearch: '@/_/routes/search.contract',
+              loaderDeps: '@/_/routes/search.contract',
+            },
+          ],
+        },
+      ] as any,
+    });
+
+    await writeFile(path.join(generatedDir, 'router.gen.ts'), routerGenTs);
+    await writeFile(
+      path.join(srcDirectory, 'runtime-shim.d.ts'),
+      [
+        "declare module '@modern-js/plugin-tanstack/runtime' {",
+        '  type RouteOptions = {',
+        '    getParentRoute?: () => unknown;',
+        '    id?: string;',
+        '    loader?: unknown;',
+        '    loaderDeps?: unknown;',
+        '    path?: string;',
+        '    staticData?: unknown;',
+        '    validateSearch?: unknown;',
+        '  };',
+        '  type Route<TOptions extends RouteOptions> = {',
+        '    options: TOptions;',
+        '    addChildren<TChildren extends readonly unknown[]>(children: TChildren): Route<TOptions> & { children: TChildren };',
+        '  };',
+        '  export type ModernRouterContext = {',
+        '    request?: Request;',
+        '    requestContext?: unknown;',
+        '  };',
+        '  export function createMemoryHistory(options: unknown): unknown;',
+        '  export const modernTanstackRouterFastDefaults: Record<string, unknown>;',
+        '  export function createRootRouteWithContext<TContext>(): <TOptions extends RouteOptions>(options: TOptions) => Route<TOptions>;',
+        '  export function createRoute<TOptions extends RouteOptions>(options: TOptions): Route<TOptions>;',
+        '  export function createRouter<TOptions extends Record<string, unknown>>(options: TOptions): TOptions;',
+        '  export function createRouteStaticData(opts: { modernRouteId?: string; modernRouteAction?: unknown; modernRouteLoader?: unknown }): Record<string, unknown>;',
+        '  export function modernLoaderToTanstack<TLoader extends (args: never) => unknown>(opts: { hasSplat: boolean }, modernLoader: TLoader): (ctx: unknown) => Promise<Awaited<ReturnType<TLoader>>>;',
+        '}',
+      ].join('\n'),
+    );
+    await writeFile(
+      path.join(srcDirectory, 'assert-search-contracts.ts'),
+      [
+        "import { rootRoute, routeTree } from './modern-tanstack/index/router.gen';",
+        "import { loaderDeps, validateSearch } from './routes/search.contract';",
+        '',
+        'const rootValidateSearch: typeof validateSearch = rootRoute.options.validateSearch;',
+        'const rootLoaderDeps: typeof loaderDeps = rootRoute.options.loaderDeps;',
+        'const childValidateSearch: typeof validateSearch = routeTree.children[0].options.validateSearch;',
+        'const childLoaderDeps: typeof loaderDeps = routeTree.children[0].options.loaderDeps;',
+        '',
+        "rootValidateSearch({ q: 'root' });",
+        "rootLoaderDeps({ search: { q: 'root' } });",
+        "childValidateSearch({ q: 'child' });",
+        "childLoaderDeps({ search: { q: 'child' } });",
+      ].join('\n'),
+    );
+    await writeFile(
+      path.join(tempDir, 'tsconfig.json'),
+      JSON.stringify(
+        {
+          compilerOptions: {
+            lib: ['ESNext', 'DOM'],
+            module: 'Preserve',
+            moduleResolution: 'Bundler',
+            noEmit: true,
+            skipLibCheck: true,
+            strict: true,
+            target: 'ESNext',
+            types: [],
+          },
+          include: ['src/**/*.ts', 'src/**/*.d.ts'],
+        },
+        null,
+        2,
+      ),
+    );
+
+    await expect(
+      execFileAsync('tsgo', ['--noEmit', '-p', 'tsconfig.json'], {
+        cwd: tempDir,
+      }),
+    ).resolves.toBeDefined();
+  });
+
+  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([');
+  });
+});
+
+describe('collectCanonicalRoutesForEntry', () => {
+  test('returns null for a route tree with no locale param and no canonical metadata', () => {
+    const result = collectCanonicalRoutesForEntry([
+      {
+        type: 'nested',
+        id: 'layout',
+        isRoot: true,
+        children: [
+          {
+            type: 'nested',
+            id: 'about/page',
+            path: 'about',
+          },
+          {
+            type: 'nested',
+            id: 'contact/page',
+            path: 'contact',
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).toBeNull();
+  });
+
+  test('ignores a leading :lang param when the locale-param heuristic is disabled (no plugin-i18n)', () => {
+    const routes = [
+      {
+        type: 'nested',
+        id: 'layout',
+        isRoot: true,
+        children: [
+          {
+            type: 'nested',
+            id: '(lang)/layout',
+            path: ':lang',
+            children: [
+              {
+                type: 'nested',
+                id: '(lang)/about/page',
+                path: 'about',
+              },
+            ],
+          },
+        ],
+      },
+    ] as any;
+
+    // Without plugin-i18n, a hand-rolled `/:lang/` param must NOT trigger the
+    // i18n surface (the emitted module augmentation would break typechecking).
+    expect(
+      collectCanonicalRoutesForEntry(routes, { localeParamHeuristic: false }),
+    ).toBeNull();
+    // With plugin-i18n installed the heuristic strips the locale prefix.
+    expect(
+      collectCanonicalRoutesForEntry(routes, { localeParamHeuristic: true }),
+    ).toEqual({
+      '/about': 'Record<string, never>',
+    });
+  });
+
+  test('still honors modernCanonicalPath metadata when the heuristic is disabled', () => {
+    const result = collectCanonicalRoutesForEntry(
+      [
+        {
+          type: 'nested',
+          id: 'layout',
+          isRoot: true,
+          children: [
+            {
+              type: 'nested',
+              id: '(lang)/products/(slug)/page',
+              path: 'products/:slug',
+              modernCanonicalPath: '/products/:slug',
+            },
+          ],
+        },
+      ] as any,
+      { localeParamHeuristic: false },
+    );
+
+    expect(result).not.toBeNull();
+    expect(result!['/products/$slug']).toBe('{ "slug": string }');
+  });
+
+  test('strips leading :lang param and maps index under :lang to "/"', () => {
+    const result = collectCanonicalRoutesForEntry([
+      {
+        type: 'nested',
+        id: 'layout',
+        isRoot: true,
+        children: [
+          {
+            type: 'nested',
+            id: '(lang)/layout',
+            path: ':lang',
+            children: [
+              {
+                type: 'nested',
+                id: '(lang)/page',
+                index: true,
+              },
+              {
+                type: 'nested',
+                id: '(lang)/about/page',
+                path: 'about',
+              },
+            ],
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).not.toBeNull();
+    expect(result!['/']).toBe('Record<string, never>');
+    expect(result!['/about']).toBe('Record<string, never>');
+  });
+
+  test('converts :slug to $slug with required params type', () => {
+    const result = collectCanonicalRoutesForEntry([
+      {
+        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',
+              },
+            ],
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).not.toBeNull();
+    expect(result!['/products/$slug']).toBe('{ "slug": string }');
+  });
+
+  test('converts :slug? to optional {-$slug} with optional params type', () => {
+    const result = collectCanonicalRoutesForEntry([
+      {
+        type: 'nested',
+        id: 'layout',
+        isRoot: true,
+        children: [
+          {
+            type: 'nested',
+            id: '(lang)/layout',
+            path: ':lang',
+            children: [
+              {
+                type: 'nested',
+                id: '(lang)/optional/(slug$)/page',
+                path: 'optional/:slug?',
+              },
+            ],
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).not.toBeNull();
+    expect(result!['/optional/{-$slug}']).toBe('{ "slug"?: string }');
+  });
+
+  test('converts * splat to $ with optional _splat param', () => {
+    const result = collectCanonicalRoutesForEntry([
+      {
+        type: 'nested',
+        id: 'layout',
+        isRoot: true,
+        children: [
+          {
+            type: 'nested',
+            id: '(lang)/layout',
+            path: ':lang',
+            children: [
+              {
+                type: 'nested',
+                id: '(lang)/files/page',
+                path: 'files/*',
+              },
+            ],
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).not.toBeNull();
+    expect(result!['/files/$']).toBe("{ '_splat'?: string }");
+  });
+
+  test('collapses localized variants with shared modernCanonicalPath to one canonical key', () => {
+    // This reuses the same fixture shape as the 'preserves typed child trees'
+    // test but adds modernCanonicalPath fields as plugin-i18n now emits.
+    const result = collectCanonicalRoutesForEntry([
+      {
+        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',
+                modernCanonicalPath: '/products/:slug',
+              },
+              {
+                type: 'nested',
+                id: '(lang)/products/(slug)/page__localised_produkty_slug',
+                path: 'produkty/:slug',
+                modernCanonicalPath: '/products/:slug',
+              },
+              {
+                type: 'nested',
+                id: '(lang)/optional/(slug$)/page__localised_volitelne_slug',
+                path: 'volitelne/:slug?',
+                modernCanonicalPath: '/optional/:slug?',
+              },
+            ],
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).not.toBeNull();
+    // Two physical variants share the same canonical path — only one entry.
+    const keys = Object.keys(result!);
+    // /products/$slug and /optional/{-$slug} — exactly 2 keys with params
+    expect(keys.filter(k => k.startsWith('/products'))).toHaveLength(1);
+    expect(result!['/products/$slug']).toBe('{ "slug": string }');
+    expect(result!['/optional/{-$slug}']).toBe('{ "slug"?: string }');
+    // The Czech localized path must not appear as a separate key.
+    expect('/produkty/$slug' in result!).toBe(false);
+  });
+
+  test('output is sorted alphabetically by canonical key', () => {
+    const result = collectCanonicalRoutesForEntry([
+      {
+        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)/about/page',
+                path: 'about',
+              },
+              {
+                type: 'nested',
+                id: '(lang)/page',
+                index: true,
+              },
+            ],
+          },
+        ],
+      },
+    ] as any);
+
+    expect(result).not.toBeNull();
+    const keys = Object.keys(result!);
+    expect(keys).toEqual([...keys].sort((a, b) => a.localeCompare(b)));
   });
 });

package/dist/cjs/runtime/DefaultNotFound.js

@@ -1,47 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    DefaultNotFound: ()=>DefaultNotFound
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
-const DefaultNotFound = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: {
-            margin: '150px auto',
-            textAlign: 'center',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-        },
-        children: "404"
-    });
-exports.DefaultNotFound = __webpack_exports__.DefaultNotFound;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "DefaultNotFound"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/esm/runtime/DefaultNotFound.mjs

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-const DefaultNotFound = ()=>/*#__PURE__*/ jsx("div", {
-        style: {
-            margin: '150px auto',
-            textAlign: 'center',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-        },
-        children: "404"
-    });
-export { DefaultNotFound };

package/dist/esm-node/runtime/DefaultNotFound.mjs

@@ -1,14 +0,0 @@
-import "node:module";
-import { jsx } from "react/jsx-runtime";
-import "react";
-const DefaultNotFound = ()=>/*#__PURE__*/ jsx("div", {
-        style: {
-            margin: '150px auto',
-            textAlign: 'center',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-        },
-        children: "404"
-    });
-export { DefaultNotFound };

package/dist/types/runtime/DefaultNotFound.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultNotFound: () => React.JSX.Element;

package/src/runtime/DefaultNotFound.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-export const DefaultNotFound = () => (
-  <div
-    style={{
-      margin: '150px auto',
-      textAlign: 'center',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}
-  >
-    404
-  </div>
-);