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

package/src/runtime/plugin.node.tsx

@@ -357,18 +357,19 @@ export const tanstackRouterPlugin = (
         const _basename =
           baseUrl === '/' ? urlJoin(baseUrl, basename || '') : baseUrl;
 
-        const initialHref = createGetSsrHref(request.raw);
+        const rawRequest = request.raw as Request;
+        const initialHref = createGetSsrHref(rawRequest);
         const isRSCNavigation =
-          enableRsc && request.raw.headers.get('x-rsc-tree') === 'true';
+          enableRsc && rawRequest.headers.get('x-rsc-tree') === 'true';
 
         const requestContext = createRequestContext(
           context.ssrContext?.loaderContext,
         ) as RequestContext<Record<string, unknown>>;
 
         const controller = new AbortController();
-        const ssrRequest = new Request(request.raw.url, {
+        const ssrRequest = new Request(rawRequest.url, {
           method: 'GET',
-          headers: request.raw.headers,
+          headers: rawRequest.headers,
           signal: controller.signal,
         });
 
@@ -398,7 +399,7 @@ export const tanstackRouterPlugin = (
           history,
           basepath: '/',
           rewrite,
-          origin: new URL(request.raw.url).origin,
+          origin: new URL(rawRequest.url).origin,
           ssr: { nonce },
           context: routerContext as never,
           ...(serializationAdapters ? { serializationAdapters } : {}),
@@ -439,7 +440,11 @@ export const tanstackRouterPlugin = (
 
         const routerErrors = collectRouterErrors(tanstackRouter);
         if (routerErrors && loaderFailureMode === 'clientRender') {
-          context.ssrContext?.response.status(200);
+          (
+            context.ssrContext?.response as
+              | { status: (code: number) => void }
+              | undefined
+          )?.status(200);
           try {
             serverRouter.serverSsr?.cleanup?.();
           } catch {}
@@ -448,7 +453,11 @@ export const tanstackRouterPlugin = (
 
         await preloadMatchedRouteComponents(serverRouter);
 
-        context.ssrContext?.response.status(tanstackRouter.state.statusCode);
+        (
+          context.ssrContext?.response as
+            | { status: (code: number) => void }
+            | undefined
+        )?.status(tanstackRouter.state.statusCode);
 
         await serverRouter.serverSsr?.dehydrate?.();
 

package/src/runtime/pluginCore.ts

@@ -1,5 +1,3 @@
-import type { Plugin, RuntimePluginExtends } from '@modern-js/plugin';
-import type { RuntimePluginAPI } from '@modern-js/plugin/runtime';
 import {
   getGlobalLayoutApp,
   getGlobalRoutes,
@@ -15,19 +13,27 @@ export type TanstackRouterRuntimeConfig = {
   [key: string]: unknown;
 };
 
-type TanstackRouterRuntimeExtends = Required<
-  RuntimePluginExtends<TanstackRouterRuntimeConfig, TInternalRuntimeContext>
-> & {
-  extendHooks: RouterExtendsHooks;
-};
+type RuntimeInterrupt = (value?: unknown) => unknown;
 
-export type TanstackRouterPluginAPI =
-  RuntimePluginAPI<TanstackRouterRuntimeExtends>;
+export type TanstackRouterPluginAPI = {
+  getRuntimeConfig: () => TanstackRouterRuntimeConfig;
+  getHooks: () => RouterExtendsHooks;
+  onBeforeRender: (
+    listener: (
+      context: TInternalRuntimeContext,
+      interrupt: RuntimeInterrupt,
+    ) => unknown,
+  ) => void;
+  wrapRoot: (listener: (App: any) => any) => void;
+  [key: string]: any;
+};
 
-export type TanstackRouterRuntimePlugin = Plugin<
-  TanstackRouterPluginAPI,
-  TInternalRuntimeContext
->;
+export type TanstackRouterRuntimePlugin = {
+  name?: string;
+  registryHooks?: RouterExtendsHooks;
+  setup?: (api: TanstackRouterPluginAPI) => unknown;
+  [key: string]: unknown;
+};
 
 export function getMergedRouterConfig(
   api: TanstackRouterPluginAPI,
@@ -39,9 +45,11 @@ export function getMergedRouterConfig(
   return merge(pluginConfig.router || {}, userConfig) as RouterConfig;
 }
 
-export function getFinalRouteConfig(mergedConfig: RouterConfig) {
+export function getFinalRouteConfig(
+  mergedConfig: RouterConfig,
+): RouterConfig['routesConfig'] {
   return {
-    routes: getGlobalRoutes(),
+    routes: getGlobalRoutes() as RouterConfig['routesConfig']['routes'],
     globalApp: getGlobalLayoutApp(),
     ...mergedConfig.routesConfig,
   };

package/src/runtime/prefetchLink.tsx

@@ -2,9 +2,9 @@ import {
   type AnyRouter,
   type LinkComponentProps,
   type RegisteredRouter,
-  Link as TanStackLink,
+  useLinkProps,
 } from '@tanstack/react-router';
-import type { ReactElement } from 'react';
+import type { AnchorHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
 
 export type PrefetchBehavior = 'intent' | 'render' | 'viewport' | 'none';
 
@@ -65,21 +65,84 @@ type LinkComponentImplProps = LinkProps<
   string | undefined,
   string,
   string
->;
+> & { ref?: Ref<HTMLAnchorElement> };
 
 const LinkComponentImpl = (props: LinkComponentImplProps) => {
-  const { prefetch, preload, ...rest } = props;
-  return (
-    <TanStackLink
-      {...rest}
-      preload={
-        resolvePreloadFromPrefetch(
-          prefetch,
-          preload,
-        ) as LinkComponentImplProps['preload']
-      }
-    />
-  );
+  const {
+    prefetch,
+    preload,
+    'aria-current': ariaCurrentProp,
+    ref,
+    children,
+    ...rest
+  } = props as LinkComponentImplProps & {
+    children?:
+      | ReactNode
+      | ((state: { isActive: boolean; isTransitioning: boolean }) => ReactNode);
+  };
+  const hasAriaCurrentOverride = 'aria-current' in props;
+
+  // Children are rendered by us, not by useLinkProps() — the hook filters
+  // unknown/function props out of its return value, so anything routed
+  // through it would be silently dropped.
+  const linkOptions = {
+    ...rest,
+    preload: resolvePreloadFromPrefetch(
+      prefetch,
+      preload,
+    ) as LinkComponentImplProps['preload'],
+  } as LinkComponentImplProps;
+
+  // TanStack Router's useLinkProps() unconditionally spreads
+  // STATIC_ACTIVE_PROPS = { "data-status": "active", "aria-current": "page" }
+  // as the LAST entry of the props object it returns for an active link
+  // (@tanstack/react-router dist/esm/link.js:369 `...isActive &&
+  // STATIC_ACTIVE_PROPS`, defined at line 379-382, spread after
+  // `...propsSafeToSpread`, `...resolvedActiveProps`, and
+  // `...resolvedInactiveProps`). That means any caller-supplied aria-current
+  // -- whether passed directly or via activeProps -- is always clobbered by
+  // the time <Link>/createLink render the anchor; there is no props-merge
+  // order that lets a caller win from inside <Link>. So instead of
+  // delegating rendering to <Link>, we call useLinkProps() ourselves and
+  // re-apply the caller's original aria-current (including `false`, meaning
+  // "suppress the attribute entirely") as the final word on the anchor we
+  // render.
+  const linkProps = useLinkProps(
+    linkOptions as Parameters<typeof useLinkProps>[0],
+    ref as Parameters<typeof useLinkProps>[1],
+  ) as AnchorHTMLAttributes<HTMLAnchorElement> & {
+    disabled?: boolean;
+    type?: string;
+  };
+
+  // TanStack's own Link strips `type` and `disabled` before rendering the
+  // anchor (link.js:449-452) — mirror that.
+  const { disabled: _disabled, type: _type, ...anchorProps } = linkProps;
+
+  if (hasAriaCurrentOverride) {
+    if (ariaCurrentProp === false || typeof ariaCurrentProp === 'undefined') {
+      delete anchorProps['aria-current'];
+    } else {
+      anchorProps['aria-current'] = ariaCurrentProp;
+    }
+  }
+
+  // TanStack's Link resolves render-prop children with the active state
+  // (link.js:450) — without this, function children reach React as an
+  // invalid child and crash the render.
+  const resolvedChildren =
+    typeof children === 'function'
+      ? children({
+          isActive:
+            (anchorProps as Record<string, unknown>)['data-status'] ===
+            'active',
+          isTransitioning:
+            (anchorProps as Record<string, unknown>)['data-transitioning'] ===
+            'transitioning',
+        })
+      : children;
+
+  return <a {...anchorProps}>{resolvedChildren}</a>;
 };
 
 export const Link = LinkComponentImpl as LinkComponent;

package/src/runtime/types.ts

@@ -1,21 +1,51 @@
-import type {
-  RouterFramework,
-  // The router runtime state types are owned by @modern-js/runtime; they are
-  // imported through the `/context` seam instead of being copied here so
-  // upstream fixes propagate to this package automatically.
-} from '@modern-js/runtime/context';
 import type { RouteObject } from '@modern-js/runtime-utils/router';
-import type { NestedRoute, PageRoute } from '@modern-js/types';
 import type React from 'react';
 
-export type {
-  BuiltInRouterFramework,
-  InternalRouterRuntimeState,
-  InternalRouterServerSnapshot,
-  RouterFramework,
-  RouterRouteMatchSnapshot,
-  RouterServerPrepareResult,
-} from '@modern-js/runtime/context';
+export type BuiltInRouterFramework = 'react-router' | 'tanstack';
+export type RouterFramework = BuiltInRouterFramework | (string & {});
+
+export type ModernRoute = {
+  type: 'nested' | 'page';
+  path?: string;
+  id?: string;
+  component?: React.ComponentType | string;
+  children?: ModernRoute[];
+  [key: string]: any;
+};
+
+export type RouterRouteMatchSnapshot = {
+  routeId: string;
+  assetRouteId?: string;
+  pathname?: string;
+  params?: Record<string, string>;
+};
+
+export type InternalRouterServerSnapshot = {
+  framework?: RouterFramework;
+  basename?: string;
+  statusCode?: number;
+  errors?: Record<string, unknown>;
+  routerData?: {
+    loaderData?: Record<string, unknown>;
+    errors?: Record<string, unknown>;
+  };
+  hydrationScript?: string;
+  hydrationScripts?: string[];
+  matchedRouteIds?: string[];
+  matches?: RouterRouteMatchSnapshot[];
+};
+
+export type InternalRouterRuntimeState = {
+  framework: RouterFramework;
+  basename?: string;
+  instance?: unknown;
+  hydrationScript?: string;
+  hydrationScripts?: string[];
+  matchedRouteIds?: string[];
+  matches?: RouterRouteMatchSnapshot[];
+  serverSnapshot?: InternalRouterServerSnapshot;
+  cleanup?: () => void | Promise<void>;
+};
 
 /**
  * TanStack-specific router config. Unlike the react-router provider config,
@@ -26,7 +56,7 @@ export type RouterConfig = {
   framework?: RouterFramework;
   routesConfig: {
     globalApp?: React.ComponentType<any>;
-    routes?: (NestedRoute | PageRoute)[];
+    routes?: ModernRoute[];
   };
   serverBase?: string[];
   supportHtml5History?: boolean;

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[];
   };
 };
 
@@ -29,7 +31,7 @@ export type ModernRouteObject = RouteObject & {
 };
 
 export function getRouteObjects(
-  routes: (NestedRoute | PageRoute)[],
+  routes: ModernRoute[],
   {
     globalApp,
     ssrMode,

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

@@ -1,79 +1,126 @@
-import { render } from '@testing-library/react';
+import { createMemoryHistory } from '@tanstack/history';
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+} from '@tanstack/react-router';
+import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Link, NavLink } from '../../src/runtime/prefetchLink';
 
-type MockLinkProps = {
-  children?: React.ReactNode;
-  preload?: unknown;
-};
-
-let capturedPreloads: unknown[] = [];
-
-rstest.mock('@tanstack/react-router', () => ({
-  Link: (props: MockLinkProps) => {
-    capturedPreloads.push(props.preload);
-    return <a href="/settings">{props.children}</a>;
-  },
-}));
-
-describe('tanstack prefetch link adapter', () => {
-  beforeEach(() => {
-    capturedPreloads = [];
+// Real-router harness (no module mocking): STATIC_ACTIVE_PROPS (the
+// TanStack behavior this adapter works around) is injected by
+// useLinkProps() based on live route match state, which a mocked
+// useLinkProps() cannot reproduce faithfully. We tried spying on
+// useLinkProps via rstest.mock()+importActual while re-exporting the rest
+// of the module untouched, but rstest's module-mock hoisting resolves the
+// "actual" import for a module through its own in-progress mock
+// registration, so every named export (createRootRoute included) comes
+// back undefined -- see the sibling prefetchLinkPreload.test.tsx file for
+// the fully-mocked preload-mapping coverage instead. This file renders
+// through an actual createRouter()/RouterProvider tree with in-memory
+// history so the active/inactive aria-current behavior is exercised for
+// real.
+function buildRouter(options: {
+  initialPath: string;
+  linkProps?: Record<string, unknown>;
+  useNavLink?: boolean;
+  children?:
+    | React.ReactNode
+    | ((state: { isActive: boolean }) => React.ReactNode);
+}) {
+  // The Link lives on the always-rendered root component (not a route
+  // that's only matched at "/settings") so the "inactive link" case -
+  // sitting at "/" while linking to "/settings" - actually mounts it.
+  const rootRoute = createRootRoute({
+    component: () => {
+      const Component = options.useNavLink ? NavLink : Link;
+      return (
+        <Component to="/settings" {...(options.linkProps ?? {})}>
+          {options.children ?? 'Settings'}
+        </Component>
+      );
+    },
   });
-
-  it('defaults TanStack preload to viewport', () => {
-    render(<Link to="/settings">Settings</Link>);
-
-    expect(capturedPreloads).toEqual(['viewport']);
+  const homeRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+    component: () => null,
+  });
+  const settingsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/settings',
+    component: () => null,
   });
 
-  it('preserves explicit preload', () => {
-    render(
-      <Link to="/settings" prefetch="render" preload="intent">
-        Settings
-      </Link>,
-    );
+  const routeTree = rootRoute.addChildren([homeRoute, settingsRoute]);
 
-    expect(capturedPreloads).toEqual(['intent']);
+  return createRouter({
+    routeTree,
+    history: createMemoryHistory({ initialEntries: [options.initialPath] }),
+  });
+}
+
+async function renderLink(options: Parameters<typeof buildRouter>[0]) {
+  const router = buildRouter(options);
+  const utils = render(<RouterProvider router={router} />);
+
+  const anchor = await waitFor(() => {
+    const found = utils.container.querySelector('a[href="/settings"]');
+    if (!found) {
+      throw new Error('anchor not rendered yet');
+    }
+    return found as HTMLAnchorElement;
   });
 
-  it('preserves explicit disabled preload', () => {
-    render(
-      <Link to="/settings" prefetch="render" preload={false}>
-        Settings
-      </Link>,
-    );
+  return { anchor, ...utils };
+}
 
-    expect(capturedPreloads).toEqual([false]);
+describe('tanstack prefetch link adapter - aria-current override', () => {
+  it('defaults active link to aria-current="page" when caller passes nothing', async () => {
+    const { anchor } = await renderLink({ initialPath: '/settings' });
+    expect(anchor.getAttribute('aria-current')).toBe('page');
   });
 
-  it('maps none prefetch to disabled TanStack preload', () => {
-    render(
-      <Link to="/settings" prefetch="none">
-        Settings
-      </Link>,
-    );
-
-    expect(capturedPreloads).toEqual([false]);
+  it('lets caller aria-current="true" win over the TanStack-forced value', async () => {
+    const { anchor } = await renderLink({
+      initialPath: '/settings',
+      linkProps: { 'aria-current': 'true' },
+    });
+    expect(anchor.getAttribute('aria-current')).toBe('true');
+    expect(anchor.outerHTML.match(/aria-current=/g)).toHaveLength(1);
   });
 
-  it.each([
-    'intent',
-    'render',
-    'viewport',
-  ] as const)('maps %s prefetch to TanStack preload', prefetch => {
-    render(
-      <Link to="/settings" prefetch={prefetch}>
-        Settings
-      </Link>,
-    );
+  it('suppresses aria-current entirely when caller passes false', async () => {
+    const { anchor } = await renderLink({
+      initialPath: '/settings',
+      linkProps: { 'aria-current': false },
+    });
+    expect(anchor.hasAttribute('aria-current')).toBe(false);
+  });
 
-    expect(capturedPreloads).toEqual([prefetch]);
+  it('leaves an inactive link untouched when caller passes nothing', async () => {
+    const { anchor } = await renderLink({ initialPath: '/' });
+    expect(anchor.hasAttribute('aria-current')).toBe(false);
+    expect(anchor.getAttribute('data-status')).not.toBe('active');
   });
 
-  it('defaults NavLink preload to viewport', () => {
-    render(<NavLink to="/settings">Settings</NavLink>);
+  it('resolves render-prop children with the active state like TanStack Link', async () => {
+    const { anchor } = await renderLink({
+      initialPath: '/settings',
+      children: ({ isActive }: { isActive: boolean }) =>
+        isActive ? 'Active settings' : 'Settings',
+    });
+    expect(anchor.textContent).toBe('Active settings');
+  });
 
-    expect(capturedPreloads).toEqual(['viewport']);
+  it('resolves render-prop children as inactive on a non-matching route', async () => {
+    const { anchor } = await renderLink({
+      initialPath: '/',
+      children: ({ isActive }: { isActive: boolean }) =>
+        isActive ? 'Active settings' : 'Settings',
+    });
+    expect(anchor.textContent).toBe('Settings');
   });
 });