@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.4 → 3.5.0-ultramodern.40

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: route.hasLoader || Boolean(route.loader),
+      hasClientLoader: route.hasClientLoader || Boolean(route.clientData),
+      hasAction: route.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/flightSerialization.roundtrip.test.tsx

@@ -0,0 +1,137 @@
+import type React from 'react';
+import { isValidElement } from 'react';
+import { createRscProxy } from '../../src/runtime/rsc/createRscProxy';
+import {
+  reviveTanstackRscFlightValues,
+  serializeTanstackRscFlightValues,
+} from '../../src/runtime/rsc/flightSerialization';
+import {
+  RENDERABLE_RSC,
+  SERVER_COMPONENT_STREAM,
+  type ServerComponentStream,
+} from '../../src/runtime/rsc/symbols';
+
+type RoundTripFixture = {
+  bigintValue: bigint;
+  booleanValue: boolean;
+  circular: Record<string, unknown>;
+  dateValue: Date;
+  falseValue: boolean;
+  mapValue: Map<unknown, unknown>;
+  nested: {
+    array: unknown[];
+    object: {
+      child: unknown;
+    };
+  };
+  nullValue: null;
+  numberValue: number;
+  rscProxy: React.ReactElement & Record<PropertyKey, unknown>;
+  setValue: Set<unknown>;
+  sharedA: Record<string, unknown>;
+  sharedB: Record<string, unknown>;
+  stringValue: string;
+  undefinedValue: undefined;
+};
+
+function createStream(): ServerComponentStream {
+  return {
+    createReplayStream: () => new ReadableStream<Uint8Array>(),
+  };
+}
+
+test('round-trips TanStack RSC flight values across supported value types', async () => {
+  const shared = { marker: 'shared' };
+  const circular: Record<string, unknown> = { marker: 'circular' };
+  circular.self = circular;
+
+  const mapValue = new Map<unknown, unknown>([
+    ['primitive', 1],
+    ['shared', shared],
+    [shared, circular],
+  ]);
+  mapValue.set('self', mapValue);
+
+  const setValue = new Set<unknown>(['set-item', shared, circular]);
+  setValue.add(setValue);
+
+  const rscProxy = createRscProxy(() => ({ slot: 'server' }), {
+    renderable: true,
+    stream: createStream(),
+  }) as React.ReactElement & Record<PropertyKey, unknown>;
+
+  const fixture: RoundTripFixture = {
+    bigintValue: 9007199254740993n,
+    booleanValue: true,
+    circular,
+    dateValue: new Date('2026-07-08T12:34:56.789Z'),
+    falseValue: false,
+    mapValue,
+    nested: {
+      array: [shared, [null, undefined, 7n]],
+      object: {
+        child: shared,
+      },
+    },
+    nullValue: null,
+    numberValue: 42,
+    rscProxy,
+    setValue,
+    sharedA: shared,
+    sharedB: shared,
+    stringValue: 'flight',
+    undefinedValue: undefined,
+  };
+
+  const serialized = serializeTanstackRscFlightValues(
+    fixture,
+  ) as RoundTripFixture;
+  const revived = (await reviveTanstackRscFlightValues(
+    serialized,
+  )) as RoundTripFixture;
+
+  expect(revived).not.toBe(fixture);
+  expect(revived.stringValue).toBe('flight');
+  expect(revived.numberValue).toBe(42);
+  expect(revived.booleanValue).toBe(true);
+  expect(revived.falseValue).toBe(false);
+  expect(revived.nullValue).toBeNull();
+  expect(Object.hasOwn(revived, 'undefinedValue')).toBe(true);
+  expect(revived.undefinedValue).toBeUndefined();
+  expect(revived.bigintValue).toBe(9007199254740993n);
+  expect(revived.dateValue).toBeInstanceOf(Date);
+  expect(revived.dateValue.toISOString()).toBe('2026-07-08T12:34:56.789Z');
+
+  expect(revived.nested.array[0]).toBe(revived.sharedA);
+  expect(revived.nested.object.child).toBe(revived.sharedA);
+  expect(revived.sharedB).toBe(revived.sharedA);
+
+  expect(revived.circular).not.toBe(circular);
+  expect(revived.circular.self).toBe(revived.circular);
+
+  expect(revived.mapValue).toBeInstanceOf(Map);
+  expect(revived.mapValue).not.toBe(mapValue);
+  expect(revived.mapValue.get('primitive')).toBe(1);
+  expect(revived.mapValue.get('shared')).toBe(revived.sharedA);
+  expect(revived.mapValue.get(revived.sharedA)).toBe(revived.circular);
+  expect(revived.mapValue.get('self')).toBe(revived.mapValue);
+
+  expect(revived.setValue).toBeInstanceOf(Set);
+  expect(revived.setValue).not.toBe(setValue);
+  expect(revived.setValue.has('set-item')).toBe(true);
+  expect(revived.setValue.has(revived.sharedA)).toBe(true);
+  expect(revived.setValue.has(revived.circular)).toBe(true);
+  expect(revived.setValue.has(revived.setValue)).toBe(true);
+
+  expect(serialized.rscProxy).not.toBe(rscProxy);
+  expect(serialized.rscProxy).toMatchObject({
+    __modernTanstackRsc: true,
+    kind: 'renderable',
+  });
+  expect(serialized.rscProxy.stream).toBeInstanceOf(ReadableStream);
+
+  expect(revived.rscProxy).not.toBe(rscProxy);
+  expect(isValidElement(revived.rscProxy)).toBe(true);
+  expect(revived.rscProxy[RENDERABLE_RSC]).toBe(true);
+  expect(revived.rscProxy[SERVER_COMPONENT_STREAM]).toBeDefined();
+});