@bleedingdev/modern-js-plugin-tanstack 3.5.0-ultramodern.10 → 3.5.0-ultramodern.101

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/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();
+    }
+  });
+});