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

package/src/runtime/utils.tsx

@@ -21,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: ModernRoute[],
-  {
-    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>;
@@ -128,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/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/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),

package/tests/router/routeTree.test.ts

@@ -15,7 +15,7 @@ import {
   getModernRouteIdsFromMatches,
 } from '../../src/runtime/routeTree';
 import { __setTanstackRscPayloadDecoderForTests } from '../../src/runtime/rsc/payloadRouter';
-import { createRouteObjectsFromConfig } from '../../src/runtime/utils';
+import { createTanstackRouteObjectsFromConfig } from '../../src/runtime/utils';
 
 type LoaderArgs = {
   params: Record<string, string>;
@@ -151,15 +151,15 @@ describe('tanstack runtime public exports', () => {
     };
 
     expect(packageJson.exports['./runtime/rsc']).toBeUndefined();
-    expect(packageJson.exports['./runtime/rsc/client']).toBeUndefined();
-    expect(packageJson.exports['./runtime/rsc/server']).toBeUndefined();
+    expect(packageJson.exports['./runtime/rsc/client']).toBeDefined();
+    expect(packageJson.exports['./runtime/rsc/server']).toBeDefined();
     expect(packageJson.typesVersions?.['*']?.['runtime/rsc']).toBeUndefined();
-    expect(
-      packageJson.typesVersions?.['*']?.['runtime/rsc/client'],
-    ).toBeUndefined();
-    expect(
-      packageJson.typesVersions?.['*']?.['runtime/rsc/server'],
-    ).toBeUndefined();
+    expect(packageJson.typesVersions?.['*']?.['runtime/rsc/client']).toEqual([
+      './dist/types/runtime/rsc/client.d.ts',
+    ]);
+    expect(packageJson.typesVersions?.['*']?.['runtime/rsc/server']).toEqual([
+      './dist/types/runtime/rsc/server.d.ts',
+    ]);
   });
 });
 
@@ -201,6 +201,41 @@ describe('tanstack route tree from RouteObject[]', () => {
     expect(userMatch?.loaderData).toEqual({ id: '123' });
   });
 
+  test('keeps unnamed sibling pathless layouts distinct', async () => {
+    const routes: RouteObject[] = [
+      {
+        Component: () => null,
+        children: [
+          {
+            path: 'alpha',
+            loader: () => ({ value: 'alpha' }),
+            Component: () => null,
+          },
+        ],
+      },
+      {
+        Component: () => null,
+        children: [
+          {
+            path: 'beta',
+            loader: () => ({ value: 'beta' }),
+            Component: () => null,
+          },
+        ],
+      },
+    ];
+
+    const routeTree = createRouteTreeFromRouteObjects(routes);
+    const router = await loadRouteTree(routeTree, '/beta');
+
+    const matchedLoaderData = router.state.matches
+      .map(match => match.loaderData)
+      .filter(Boolean);
+
+    expect(matchedLoaderData).toContainEqual({ value: 'beta' });
+    expect(matchedLoaderData).not.toContainEqual({ value: 'alpha' });
+  });
+
   test('reports native TanStack unknown routes as HTTP 404', async () => {
     const routes: RouteObject[] = [
       {
@@ -780,7 +815,7 @@ describe('tanstack route tree from RouteObject[]', () => {
         ],
       },
     ];
-    const routeObjects = createRouteObjectsFromConfig({
+    const routeObjects = createTanstackRouteObjectsFromConfig({
       routesConfig: { routes: modernRoutes },
     });
     const routeTree = createRouteTreeFromRouteObjects(routeObjects || []);
@@ -825,7 +860,7 @@ describe('tanstack route tree from RouteObject[]', () => {
       },
     ];
 
-    const routeObjects = createRouteObjectsFromConfig({
+    const routeObjects = createTanstackRouteObjectsFromConfig({
       routesConfig: { routes: modernRoutes },
     });
     const rootRoute = routeObjects?.[0];