@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.9 → 3.5.0-ultramodern.90

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/realm-isolation.test.ts

@@ -0,0 +1,114 @@
+import type { RouterProviderFactory } from '@modern-js/runtime/context';
+import { rstest } from '@rstest/core';
+import type { RouterExtendsHooks } from '../src/runtime/hooks';
+
+const REGISTRY_SLOT: unique symbol = Symbol.for(
+  '@modern-js/runtime:router-providers:v3',
+);
+const host = globalThis as { [REGISTRY_SLOT]?: unknown };
+
+type RuntimeContextModule = typeof import('@modern-js/runtime/context');
+type RouterModule = typeof import('../src/runtime/router');
+
+type Vertical = {
+  context: RuntimeContextModule;
+  factory: RouterProviderFactory;
+  hooks: RouterExtendsHooks;
+  Link: unknown;
+  routerPlugin: RouterModule['routerPlugin'];
+  useMatches: unknown;
+};
+
+async function loadVertical(): Promise<Vertical> {
+  rstest.resetModules();
+  const routerModule = (await import('../src/runtime/router')) as RouterModule;
+  const context = (await import(
+    '@modern-js/runtime/context'
+  )) as RuntimeContextModule;
+  const { tanstackRouterProviderFactory } = await import(
+    '../src/runtime/register'
+  );
+  const { routerProviderRegistryHooks } = await import('../src/runtime/hooks');
+  const { Link } = await import('../src/runtime/prefetchLink');
+  const { useMatches } = await import('../src/runtime/routeHooks');
+
+  return {
+    context,
+    factory: tanstackRouterProviderFactory,
+    hooks: routerProviderRegistryHooks,
+    Link,
+    routerPlugin: routerModule.routerPlugin,
+    useMatches,
+  };
+}
+
+function setupRouterWrapper(vertical: Vertical) {
+  let onBeforeRender:
+    | ((context: any, interrupt: (value?: unknown) => unknown) => unknown)
+    | undefined;
+
+  const plugin = vertical.routerPlugin({ framework: 'tanstack' });
+  plugin.setup?.({
+    getHooks: () => vertical.hooks,
+    getRuntimeConfig: () => ({ router: { framework: 'tanstack' } }),
+    onBeforeRender: listener => {
+      onBeforeRender = listener;
+    },
+    wrapRoot: () => undefined,
+  });
+
+  expect(typeof onBeforeRender).toBe('function');
+  const runtimeContext: any = {};
+  onBeforeRender?.(runtimeContext, () => undefined);
+  return runtimeContext.router as { Link: unknown; useMatches: unknown };
+}
+
+describe('TanStack provider runtime-realm isolation', () => {
+  beforeEach(() => {
+    delete host[REGISTRY_SLOT];
+    rstest.resetModules();
+    (
+      globalThis as typeof globalThis & {
+        __webpack_require__?: { u: (chunkId: unknown) => string };
+      }
+    ).__webpack_require__ = { u: chunkId => String(chunkId) };
+  });
+
+  afterEach(() => {
+    delete host[REGISTRY_SLOT];
+    rstest.resetModules();
+  });
+
+  it('binds each production router wrapper to its own real provider graph', async () => {
+    const warnSpy = rstest.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const verticalA = await loadVertical();
+      const routerA = setupRouterWrapper(verticalA);
+      expect(routerA.Link).toBe(verticalA.Link);
+      expect(routerA.useMatches).toBe(verticalA.useMatches);
+
+      const verticalB = await loadVertical();
+      expect(verticalB.context).not.toBe(verticalA.context);
+      expect(verticalB.factory).not.toBe(verticalA.factory);
+      expect(verticalB.Link).not.toBe(verticalA.Link);
+      expect(verticalB.useMatches).not.toBe(verticalA.useMatches);
+
+      const routerB = setupRouterWrapper(verticalB);
+      expect(routerB.Link).toBe(verticalB.Link);
+      expect(routerB.useMatches).toBe(verticalB.useMatches);
+      expect(routerB.Link).not.toBe(verticalA.Link);
+      expect(routerB.useMatches).not.toBe(verticalA.useMatches);
+
+      // Mixed-version callers that do not supply a realm still see the shared
+      // keep-first fallback, but production wrappers no longer consume it.
+      expect(verticalB.context.resolveRouterProvider('tanstack')).toBe(
+        verticalA.factory,
+      );
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringMatching(/keeping the first registration/),
+      );
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+});

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/clientHydration.test.tsx

@@ -0,0 +1,61 @@
+import type { AnyRouter } from '@tanstack/react-router';
+import { render, screen } from '@testing-library/react';
+import React, { Suspense } from 'react';
+import { ModernRouterClient } from '../../src/runtime/clientHydration';
+
+let hydrateImpl: () => Promise<unknown>;
+
+rstest.mock('@tanstack/react-router', () => ({
+  RouterProvider: ({ router }: { router: { label: string } }) => (
+    <div data-testid="router-provider">{router.label}</div>
+  ),
+}));
+
+rstest.mock('@tanstack/react-router/ssr/client', () => ({
+  hydrate: () => hydrateImpl(),
+}));
+
+function createDeferred<T>() {
+  let resolve!: (value: T | PromiseLike<T>) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  return { promise, reject, resolve };
+}
+
+function createRouter(label: string): AnyRouter {
+  return {
+    label,
+    routesById: {},
+    stores: {
+      matches: {
+        get: () => [],
+      },
+    },
+  } as unknown as AnyRouter;
+}
+
+describe('TanStack SSR client hydration', () => {
+  it('keeps the router behind Suspense until late SSR hydration completes', async () => {
+    const hydration = createDeferred<void>();
+    hydrateImpl = () => hydration.promise;
+
+    render(
+      <Suspense fallback={<div data-testid="hydrating">hydrating</div>}>
+        <ModernRouterClient router={createRouter('inventory')} />
+      </Suspense>,
+    );
+
+    expect(screen.getByTestId('hydrating')).toBeTruthy();
+    expect(screen.queryByTestId('router-provider')).toBeNull();
+
+    hydration.resolve();
+
+    expect(
+      (await screen.findByTestId('router-provider')).textContent,
+    ).toContain('inventory');
+    expect(screen.queryByTestId('hydrating')).toBeNull();
+  });
+});

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/legacyRuntimeRouter.ts

@@ -0,0 +1,10 @@
+let invocationCount = 0;
+
+export const routerPlugin = (
+  _userConfig: Record<string, unknown> = {},
+): { name?: string; setup?: (...args: unknown[]) => unknown } => {
+  invocationCount += 1;
+  throw new Error('The legacy global router wrapper must not be invoked.');
+};
+
+export const getLegacyRouterPluginInvocationCount = () => invocationCount;