@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.3 → 3.5.0-ultramodern.31

package/src/runtime/utils.tsx

@@ -1,12 +1,14 @@
 // @effect-diagnostics strictBooleanExpressions:off
 import type { RouteObject } from '@modern-js/runtime-utils/router';
-import type { NestedRoute, PageRoute, SSRMode } from '@modern-js/types';
 import React from 'react';
+import type { ModernRoute } from './types';
+
+export type SSRMode = 'string' | 'stream';
 
 type RouterConfig = {
   routesConfig: {
     globalApp?: React.ComponentType<any>;
-    routes?: (NestedRoute | PageRoute)[];
+    routes?: ModernRoute[];
   };
 };
 
@@ -19,101 +21,91 @@ type GlobalAppProps = {
   [key: string]: unknown;
 };
 
-export type ModernRouteObject = RouteObject & {
-  isClientComponent?: boolean;
+type ModernRouteObject = RouteObject & {
+  Component?: React.ComponentType | string;
+  action?: unknown;
+  clientData?: unknown;
+  config?: { handle?: Record<string, unknown> } | unknown;
+  handle?: Record<string, unknown>;
+  hasAction?: boolean;
   hasClientLoader?: boolean;
   hasLoader?: boolean;
-  hasAction?: boolean;
   inValidSSRRoute?: boolean;
+  isClientComponent?: boolean;
   lazyImport?: () => Promise<{ default: React.ComponentType }>;
 };
 
-export function getRouteObjects(
-  routes: (NestedRoute | PageRoute)[],
-  {
-    globalApp,
-    ssrMode,
-    props,
-  }: {
-    globalApp?: React.ComponentType<GlobalAppProps>;
-    ssrMode?: SSRMode;
-    props?: Record<string, unknown>;
-  },
-) {
-  const createLayoutElement = (
-    Component: React.ComponentType,
-  ): React.ComponentType => {
-    const GlobalLayout = globalApp;
-    if (!GlobalLayout) {
-      return Component;
-    }
-
-    const LayoutWrapper = (props: LayoutWrapperProps) => {
-      const LayoutComponent = GlobalLayout;
-      return <LayoutComponent Component={Component} {...props} />;
-    };
+function withGlobalLayout(
+  Component: React.ComponentType,
+  globalApp?: React.ComponentType<GlobalAppProps>,
+): React.ComponentType {
+  if (!globalApp) {
+    return Component;
+  }
 
-    return LayoutWrapper;
+  const GlobalLayout = globalApp;
+  return function LayoutWrapper(props: LayoutWrapperProps) {
+    return <GlobalLayout Component={Component} {...props} />;
   };
+}
 
-  const routeObjects: RouteObject[] = [];
-
-  for (const route of routes) {
-    if (route.type === 'nested') {
-      const nestedRouteObject = {
-        path: route.path,
-        id: route.id,
-        loader: route.loader,
-        action: route.action,
-        shouldRevalidate: route.shouldRevalidate,
-        handle: {
-          ...route.handle,
-          ...(typeof route.config === 'object' ? route.config?.handle : {}),
-        },
-        index: route.index,
-        hasLoader: Boolean(route.loader),
-        hasClientLoader: Boolean(route.clientData),
-        hasAction: Boolean(route.action),
-        ...(route.isClientComponent ? { isClientComponent: true } : {}),
-        ...(route.inValidSSRRoute ? { inValidSSRRoute: true } : {}),
-        lazyImport: route.lazyImport,
-        Component: route.component ? route.component : undefined,
-        errorElement: route.error ? <route.error /> : undefined,
-        children: route.children
-          ? route.children.map(
-              child =>
-                getRouteObjects([child], { globalApp, ssrMode, props })[0],
-            )
-          : undefined,
-      } as ModernRouteObject;
+function getRouteHandle(route: ModernRoute) {
+  return {
+    ...route.handle,
+    ...(typeof route.config === 'object' ? route.config?.handle : {}),
+  };
+}
 
-      routeObjects.push(nestedRouteObject);
-    } else if (
-      typeof route.component === 'function' ||
-      typeof route.component === 'object'
-    ) {
-      const LayoutComponent = createLayoutElement(
-        route.component as React.ComponentType,
-      );
-      const routeObject: RouteObject = {
-        path: route.path,
-        element: React.createElement(LayoutComponent),
-      };
+function toTanstackRouteObject(
+  route: ModernRoute,
+  globalApp?: React.ComponentType<GlobalAppProps>,
+): RouteObject | null {
+  if (route.type === 'nested') {
+    return {
+      path: route.path,
+      id: route.id,
+      loader: route.loader,
+      action: route.action,
+      shouldRevalidate: route.shouldRevalidate,
+      handle: getRouteHandle(route),
+      index: route.index,
+      hasLoader: Boolean(route.loader),
+      hasClientLoader: Boolean(route.clientData),
+      hasAction: Boolean(route.action),
+      ...(route.isClientComponent ? { isClientComponent: true } : {}),
+      ...(route.inValidSSRRoute ? { inValidSSRRoute: true } : {}),
+      lazyImport: route.lazyImport,
+      Component: route.component ? route.component : undefined,
+      errorElement: route.error
+        ? React.createElement(route.error as React.ComponentType)
+        : undefined,
+      children: route.children
+        ? route.children
+            .map(child => toTanstackRouteObject(child, globalApp))
+            .filter((child): child is RouteObject => child !== null)
+        : undefined,
+    } as ModernRouteObject;
+  }
 
-      routeObjects.push(routeObject);
-    }
+  if (
+    typeof route.component !== 'function' &&
+    typeof route.component !== 'object'
+  ) {
+    return null;
   }
 
-  // No synthetic `{ path: '*' }` 404 route here: TanStack Router handles
-  // not-found matches through the root route's `notFoundComponent`
-  // (see routeTree.ts), so the react-router style catch-all is unnecessary.
-  return routeObjects;
+  const LayoutComponent = withGlobalLayout(
+    route.component as React.ComponentType,
+    globalApp,
+  );
+  return {
+    path: route.path,
+    element: React.createElement(LayoutComponent),
+  };
 }
 
-export function createRouteObjectsFromConfig({
+export function createTanstackRouteObjectsFromConfig({
   routesConfig,
-  props,
-  ssrMode,
 }: {
   routesConfig: RouterConfig['routesConfig'];
   props?: Record<string, unknown>;
@@ -126,33 +118,7 @@ export function createRouteObjectsFromConfig({
   if (!routes) {
     return null;
   }
-  return getRouteObjects(routes, {
-    globalApp,
-    ssrMode,
-    props,
-  });
-}
-
-export const urlJoin = (...parts: string[]) => {
-  const separator = '/';
-  const replace = new RegExp(`${separator}{1,}`, 'g');
-  return standardSlash(parts.join(separator).replace(replace, separator));
-};
-
-export function standardSlash(str: string) {
-  let addr = str;
-  if (!addr || typeof addr !== 'string') {
-    return addr;
-  }
-  if (addr.startsWith('.')) {
-    addr = addr.slice(1);
-  }
-  if (!addr.startsWith('/')) {
-    addr = `/${addr}`;
-  }
-  if (addr.endsWith('/') && addr !== '/') {
-    addr = addr.slice(0, addr.length - 1);
-  }
-
-  return addr;
+  return routes
+    .map(route => toTanstackRouteObject(route, globalApp))
+    .filter((route): route is RouteObject => route !== null);
 }

package/src/types/react-server-dom-rspack.d.ts

@@ -0,0 +1,56 @@
+declare module 'react-server-dom-rspack/client.edge' {
+  import type { TemporaryReferenceSet } from 'react-server-dom-rspack';
+
+  export type { TemporaryReferenceSet };
+
+  export const createTemporaryReferenceSet: (
+    ...args: unknown[]
+  ) => TemporaryReferenceSet;
+
+  export function createServerReference(
+    id: string,
+  ): (...args: unknown[]) => Promise<unknown>;
+
+  export type EncodeFormActionCallback = <A>(
+    id: unknown,
+    args: Promise<A>,
+  ) => ReactCustomFormAction;
+
+  export type ReactCustomFormAction = {
+    name?: string;
+    action?: string;
+    encType?: string;
+    method?: string;
+    target?: string;
+    data?: null | FormData;
+  };
+
+  export interface Options {
+    nonce?: string;
+    encodeFormAction?: EncodeFormActionCallback;
+    temporaryReferences?: TemporaryReferenceSet;
+    replayConsoleLogs?: boolean;
+    environmentName?: string;
+    debugChannel?: {
+      readable?: ReadableStream;
+    };
+  }
+
+  export function createFromFetch<T>(
+    promiseForResponse: Promise<Response>,
+    options?: Options,
+  ): Promise<T>;
+
+  export function createFromReadableStream<T>(
+    stream: ReadableStream,
+    options?: Options,
+  ): Promise<T>;
+
+  export const encodeReply: (
+    value: unknown,
+    options?: {
+      temporaryReferences?: TemporaryReferenceSet;
+      signal?: AbortSignal;
+    },
+  ) => Promise<string | FormData>;
+}

package/tests/castRatchet.test.ts

@@ -0,0 +1,85 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+
+const SRC_DIR = path.join(__dirname, '../src');
+const CAST_RATCHET_BASELINE = 40;
+const CAST_PATTERN = /\bas\s+unknown\s+as\b|\bas\s+any\b/g;
+const SOURCE_FILE_PATTERN = /\.(?:ts|tsx)$/u;
+
+type CastLocation = {
+  cast: string;
+  columnNumber: number;
+  filePath: string;
+  lineNumber: number;
+  sourceLine: string;
+};
+
+const collectSourceFiles = (directory: string): string[] => {
+  const entries = readdirSync(directory, { withFileTypes: true }).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+
+  return entries.flatMap(entry => {
+    const entryPath = path.join(directory, entry.name);
+
+    if (entry.isDirectory()) {
+      return collectSourceFiles(entryPath);
+    }
+
+    return SOURCE_FILE_PATTERN.test(entry.name) ? [entryPath] : [];
+  });
+};
+
+const collectCastLocations = (): CastLocation[] =>
+  collectSourceFiles(SRC_DIR).flatMap(filePath => {
+    const relativeFilePath = path
+      .relative(SRC_DIR, filePath)
+      .split(path.sep)
+      .join('/');
+    const lines = readFileSync(filePath, 'utf-8').split(/\r?\n/u);
+    const locations: CastLocation[] = [];
+
+    lines.forEach((sourceLine, index) => {
+      CAST_PATTERN.lastIndex = 0;
+
+      let match: RegExpExecArray | null;
+      while ((match = CAST_PATTERN.exec(sourceLine))) {
+        locations.push({
+          cast: match[0],
+          columnNumber: match.index + 1,
+          filePath: relativeFilePath,
+          lineNumber: index + 1,
+          sourceLine: sourceLine.trim(),
+        });
+      }
+    });
+
+    return locations;
+  });
+
+const formatCastLocations = (locations: CastLocation[]): string =>
+  locations
+    .map(
+      location =>
+        `  ${location.filePath}:${location.lineNumber}:${location.columnNumber} ${location.cast} :: ${location.sourceLine}`,
+    )
+    .join('\n');
+
+describe('tanstack unsafe cast ratchet', () => {
+  test('does not add new as-any casts in src', () => {
+    const castLocations = collectCastLocations();
+
+    if (castLocations.length > CAST_RATCHET_BASELINE) {
+      throw new Error(
+        [
+          `Expected at most ${CAST_RATCHET_BASELINE} unsafe casts in plugin-tanstack src, found ${castLocations.length}.`,
+          'Remove the new cast or lower the ratchet baseline after deleting existing casts.',
+          'Current cast locations:',
+          formatCastLocations(castLocations),
+        ].join('\n'),
+      );
+    }
+
+    expect(castLocations.length).toBeLessThanOrEqual(CAST_RATCHET_BASELINE);
+  });
+});

package/tests/router/cli.test.ts

@@ -6,6 +6,7 @@ import type { Entrypoint } from '@modern-js/types';
 import { fs, NESTED_ROUTE_SPEC_FILE } from '@modern-js/utils';
 import {
   createTanstackRsbuildRouteSplittingProfile,
+  generateTanstackRouteArtifacts,
   tanstackRouterPlugin,
   writeTanstackRegisterFile,
   writeTanstackRouterTypesForEntries,
@@ -977,3 +978,9 @@ describe('tanstack router cli plugin', () => {
     });
   });
 });
+
+describe('generateTanstackRouteArtifacts export', () => {
+  test('is exported as a function', () => {
+    expect(typeof generateTanstackRouteArtifacts).toBe('function');
+  });
+});

package/tests/router/dataMutation.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React, { act } from 'react';
 import type { Fetcher } from '../../src/runtime/dataMutation';
 import { Form, useFetcher } from '../../src/runtime/dataMutation';
+import { createFormDataFromSubmit } from '../../src/runtime/formData';
 
 type RouteHandler = (args: {
   request: Request;
@@ -276,6 +277,28 @@ describe('tanstack data mutation fetcher', () => {
     expect(states).toEqual(['idle', 'loading', 'idle']);
   });
 
+  test('GET Form navigation replaces action query before hash', async () => {
+    currentRouter = createRouter({});
+
+    render(
+      <Form method="get" action="/products?sort=old#results">
+        <input name="q" defaultValue="boots" />
+        <button type="submit">Search</button>
+      </Form>,
+    );
+
+    const form = document.querySelector('form');
+    expect(form).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.submit(form!);
+    });
+
+    expect(currentRouter.navigate).toHaveBeenCalledWith({
+      href: '/products?q=boots#results',
+    });
+  });
+
   test('keeps non-idle state while overlapping mutation submits are still active', async () => {
     const actionResults = [
       createDeferred<Response>(),
@@ -361,6 +384,42 @@ describe('tanstack data mutation fetcher', () => {
     expect(screen.getByTestId('data').textContent).toBe('{"count":3}');
   });
 
+  test('preserves submitter name value when FormData submitter overload is unavailable', () => {
+    const NativeFormData = globalThis.FormData;
+
+    class SingleArgumentFormData extends NativeFormData {
+      constructor(form?: HTMLFormElement, submitter?: HTMLElement) {
+        if (submitter) {
+          throw new TypeError('FormData submitter overload unavailable');
+        }
+        super(form);
+      }
+    }
+
+    globalThis.FormData = SingleArgumentFormData as typeof FormData;
+
+    try {
+      const form = document.createElement('form');
+      form.innerHTML = `
+        <input name="amount" value="2" />
+        <button type="submit" name="intent" value="save">Save</button>
+      `;
+
+      const submitter = form.querySelector('button');
+      expect(submitter).toBeInstanceOf(HTMLButtonElement);
+
+      const formData = createFormDataFromSubmit({
+        form,
+        submitter,
+      });
+
+      expect(formData.get('amount')).toBe('2');
+      expect(formData.get('intent')).toBe('save');
+    } finally {
+      globalThis.FormData = NativeFormData;
+    }
+  });
+
   test('does not throw for Form submit with non-2xx response and still invalidates', async () => {
     const action = rstest.fn(
       async () =>

package/tests/router/fixtures/router-gen.golden.txt

@@ -0,0 +1,72 @@
+/* eslint-disable */
+// This file is auto-generated by Modern.js. Do not edit manually.
+
+import {
+  createMemoryHistory,
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+  createRouteStaticData,
+  type ModernRouterContext,
+  modernLoaderToTanstack,
+  modernTanstackRouterFastDefaults,
+} from '@modern-js/plugin-tanstack/runtime';
+
+import component_0 from "../../routes/(app)/layout";
+import { loader as loader_0, action as action_0 } from "../../routes/(app)/users/(userId)/page.data";
+import { validateSearch as validateSearch_0 } from "../../routes/search.contract";
+import { loaderDeps as loaderDeps_0 } from "../../routes/search.contract";
+import component_1 from "../../routes/(app)/users/(userId)/page";
+import component_2 from "../../routes/(app)/docs/splat";
+
+export const rootRoute = createRootRouteWithContext<ModernRouterContext>()({
+  
+  staticData: createRouteStaticData({
+    modernRouteId: "layout",
+  }),
+});
+
+const route__app__layout__base = createRoute({
+  getParentRoute: () => rootRoute,
+  component: component_0,
+  id: "(app)/layout",
+  staticData: createRouteStaticData({
+    modernRouteId: "(app)/layout",
+  }),
+});
+
+const route__app__users__userId__page = createRoute({
+  getParentRoute: () => route__app__layout__base,
+  component: component_1,
+  path: "users/$userId",
+  loader: modernLoaderToTanstack({ hasSplat: false }, loader_0),
+  validateSearch: validateSearch_0,
+  loaderDeps: loaderDeps_0,
+  staticData: createRouteStaticData({
+    modernRouteId: "(app)/users/(userId)/page",
+    modernRouteLoader: loader_0,
+    modernRouteAction: action_0,
+  }),
+});
+
+const route__app__docs_splat_page = createRoute({
+  getParentRoute: () => route__app__layout__base,
+  component: component_2,
+  path: "docs/$",
+  staticData: createRouteStaticData({
+    modernRouteId: "(app)/docs/splat/page",
+  }),
+});
+
+const route__app__layout = route__app__layout__base.addChildren([route__app__users__userId__page, route__app__docs_splat_page]);
+
+export const routeTree = rootRoute.addChildren([route__app__layout]);
+
+export const router = createRouter({
+  ...modernTanstackRouterFastDefaults,
+  routeTree,
+  history: createMemoryHistory({
+    initialEntries: ['/'],
+  }),
+  context: {} as ModernRouterContext,
+});

package/tests/router/generateRouteArtifacts.test.ts

@@ -0,0 +1,106 @@
+// Behavioral coverage for the headless routes-generate entry point: the
+// export-shape test in cli.test.ts would pass even if the body were
+// reverted, so this file pins the actual prepare-only drive contract —
+// createRunOptions against the app dir, cli.init with build-command
+// semantics, the MODERN_ARGV gate that makes analyze.onPrepare fire
+// generateEntryCode, and the absolute config-file resolution that keeps
+// headless runs (cwd != appDirectory) from feeding `false` into node's
+// path APIs.
+const createRunOptionsMock = rstest.fn(async (options: unknown) => ({
+  mockRunOptions: true,
+  received: options,
+}));
+const cliInitMock = rstest.fn(async (options: unknown) => ({
+  appContext: {},
+  received: options,
+}));
+
+rstest.mock('@modern-js/app-tools/cli/run', () => ({
+  createRunOptions: createRunOptionsMock,
+}));
+rstest.mock('@modern-js/plugin/cli', () => ({
+  cli: { init: cliInitMock },
+}));
+
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { INTERNAL_RUNTIME_PLUGINS } from '@modern-js/utils';
+import { generateTanstackRouteArtifacts } from '../../src/cli';
+
+function makeAppDir(withConfig: boolean): string {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'tanstack-routes-gen-'));
+  if (withConfig) {
+    fs.writeFileSync(
+      path.join(dir, 'modern.config.ts'),
+      'export default {};\n',
+      'utf-8',
+    );
+  }
+  return dir;
+}
+
+describe('generateTanstackRouteArtifacts (headless routes-generate)', () => {
+  beforeEach(() => {
+    createRunOptionsMock.mockClear();
+    cliInitMock.mockClear();
+  });
+
+  it('drives a prepare-only cli.init with build-command semantics', async () => {
+    const previousArgv = process.env.MODERN_ARGV;
+    const appDirectory = makeAppDir(true);
+
+    try {
+      await generateTanstackRouteArtifacts({
+        appDirectory,
+        version: '9.9.9-test',
+      });
+
+      expect(createRunOptionsMock).toHaveBeenCalledTimes(1);
+      const runOptionsArg = createRunOptionsMock.mock.calls[0][0] as Record<
+        string,
+        unknown
+      >;
+      expect(runOptionsArg.cwd).toBe(appDirectory);
+      expect(runOptionsArg.version).toBe('9.9.9-test');
+      expect(runOptionsArg.internalPlugins).toBe(INTERNAL_RUNTIME_PLUGINS);
+
+      // The config file is resolved to an absolute base path against the app
+      // directory (not process.cwd()). Without this, a headless run from a
+      // different cwd finds no config, `findExists` returns `false`, and that
+      // boolean reaches `path.isAbsolute` deep inside plugin/cli.
+      expect(runOptionsArg.configFile).toBe(
+        path.resolve(appDirectory, 'modern.config'),
+      );
+
+      expect(cliInitMock).toHaveBeenCalledTimes(1);
+      const initArg = cliInitMock.mock.calls[0][0] as Record<string, unknown>;
+      expect(initArg.command).toBe('build');
+      expect(initArg.mockRunOptions).toBe(true);
+
+      // checkIsBuildCommands() resolves the command from MODERN_ARGV — this
+      // is what lets analyze.onPrepare fire generateEntryCode headlessly.
+      expect(process.env.MODERN_ARGV).toBe('node modern build');
+    } finally {
+      fs.rmSync(appDirectory, { force: true, recursive: true });
+      if (previousArgv === undefined) {
+        delete process.env.MODERN_ARGV;
+      } else {
+        process.env.MODERN_ARGV = previousArgv;
+      }
+    }
+  });
+
+  it('throws a clear error (never a boolean path crash) when no config file exists', async () => {
+    const appDirectory = makeAppDir(false);
+
+    try {
+      await expect(
+        generateTanstackRouteArtifacts({ appDirectory }),
+      ).rejects.toThrow(/Unable to locate a Modern\.js config file/u);
+      expect(createRunOptionsMock).not.toHaveBeenCalled();
+    } finally {
+      fs.rmSync(appDirectory, { force: true, recursive: true });
+    }
+  });
+});

package/tests/router/loaderBridge.test.ts

@@ -117,6 +117,27 @@ describe('modernLoaderToTanstack', () => {
     expect(seen.context).toEqual({ user: 'u1' });
   });
 
+  test('uses current location when context carries a previous request', async () => {
+    const seen: { request?: Request } = {};
+    const loader = modernLoaderToTanstack({ hasSplat: false }, (args: any) => {
+      seen.request = args.request;
+      return { ok: true };
+    });
+
+    await expect(
+      loader({
+        ...baseCtx,
+        location: { href: 'http://localhost/products/2?sort=price' },
+        context: {
+          request: new Request('http://localhost/products/1?sort=name'),
+        },
+      }),
+    ).resolves.toEqual({ ok: true });
+
+    expect(seen.request).toBeInstanceOf(Request);
+    expect(seen.request?.url).toBe('http://localhost/products/2?sort=price');
+  });
+
   test('translates an absolute-URL redirect Response into redirect({ href })', async () => {
     const loader = modernLoaderToTanstack({ hasSplat: false }, () =>
       Response.redirect('https://example.com/away', 302),