@bleedingdev/modern-js-plugin-i18n 3.9.0-ultramodern.2 → 3.9.0-ultramodern.21

package/tests/navigation.test.tsx

@@ -0,0 +1,403 @@
+import {
+  InternalRuntimeContext,
+  RuntimeContext,
+} from '@modern-js/runtime/context';
+import { applyRouterRuntimeState } from '@modern-js/runtime-extensions/router-state';
+import type React from 'react';
+import type { ComponentType } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { useModernI18n } from '../src/runtime/context';
+import { createI18nPlugin } from '../src/runtime/core';
+import type { I18nInstance } from '../src/runtime/i18n';
+import { Link } from '../src/runtime/Link';
+import { useIntegratedRouterAdapter } from '../src/runtime/navigation';
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const localisedUrls = {
+  '/terms-of-service': {
+    en: '/terms-of-service',
+    cs: '/obchodni-podminky',
+  },
+};
+
+function createI18nInstance(language = 'en'): I18nInstance {
+  return {
+    language,
+    isInitialized: true,
+    init: () => Promise.resolve(undefined),
+    use: () => {},
+    t: (key: string | string[]) => (Array.isArray(key) ? key[0] : key),
+    createInstance: () => createI18nInstance(language),
+    setLang: rstest.fn(async (next: string) => {
+      void next;
+      return undefined;
+    }),
+    changeLanguage: rstest.fn(async () => undefined),
+    services: {},
+    options: {},
+  };
+}
+
+/** A provider capability whose location can be republished. */
+function createMutableTanstackRouter(pathname: string) {
+  let snapshot = {
+    location: { pathname, search: '', hash: '' },
+    params: { lang: pathname.split('/')[1] ?? '' },
+  };
+  const listeners = new Set<() => void>();
+
+  return {
+    navigate: rstest.fn(async () => undefined),
+    navigation: {
+      getSnapshot: () => snapshot,
+      Link: TanstackLink,
+      navigate: rstest.fn(async () => undefined),
+      subscribe: (listener: () => void) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      },
+    },
+    publishPathname(nextPathname: string) {
+      snapshot = {
+        location: { pathname: nextPathname, search: '', hash: '' },
+        params: { lang: nextPathname.split('/')[1] ?? '' },
+      };
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+  };
+}
+
+const TanstackLink = ({ to, children, ...props }: any) => {
+  const { prefetch: _prefetch, preload: _preload, ...anchorProps } = props;
+  return (
+    <a href={to} data-router-link="tanstack" {...anchorProps}>
+      {children}
+    </a>
+  );
+};
+
+/**
+ * A bare `appTools()` consumer: only `@modern-js/plugin-i18n` is registered, so
+ * nothing supplies a `NavigationProvider`.
+ */
+function setupBareI18nRuntime(i18nInstance: I18nInstance) {
+  let wrapRoot: ((App: ComponentType<any>) => ComponentType<any>) | undefined;
+  let beforeRender: ((context: any) => Promise<void>) | undefined;
+
+  createI18nPlugin()({
+    i18nInstance,
+    reactI18next: false,
+    localeDetection: {
+      fallbackLanguage: 'en',
+      i18nextDetector: false,
+      languages: ['en', 'cs'],
+      localePathRedirect: true,
+      localisedUrls,
+    },
+  }).setup?.({
+    getRuntimeConfig: () => ({}),
+    resolveComponent: () => undefined,
+    onBeforeRender: (callback: (context: any) => Promise<void>) => {
+      beforeRender = callback;
+    },
+    wrapRoot: (callback: (App: ComponentType<any>) => ComponentType<any>) => {
+      wrapRoot = callback;
+    },
+  } as any);
+
+  if (!wrapRoot || !beforeRender) {
+    throw new Error(
+      'Expected the i18n runtime plugin to register wrapRoot and onBeforeRender',
+    );
+  }
+  return { wrapRoot, beforeRender };
+}
+
+function createTanstackRuntimeContext(
+  router: ReturnType<typeof createMutableTanstackRouter>,
+) {
+  const requestContext = { request: {}, response: {} };
+  const runtimeContext: Record<string, unknown> = {
+    isBrowser: true,
+    requestContext,
+    context: requestContext,
+    router: { Link: TanstackLink },
+  };
+  applyRouterRuntimeState(runtimeContext, {
+    framework: 'tanstack',
+    instance: router,
+    navigation: router.navigation,
+  } as any);
+  return runtimeContext;
+}
+
+/**
+ * The CSR boot order: `plugin-tanstack`'s `onBeforeRender` publishes only the
+ * hook API, and no router instance exists until `RouterWrapper` renders -
+ * which is below anything that wraps the app, this provider included.
+ */
+function createTanstackCsrRuntimeContextWithoutRouter() {
+  const requestContext = { request: {}, response: {} };
+  return {
+    isBrowser: true,
+    requestContext,
+    context: requestContext,
+    router: {
+      Link: TanstackLink,
+      // `useRouter({ warn: false })` yields nothing before the instance exists.
+      useRouter: () => null,
+    },
+  } as Record<string, unknown>;
+}
+
+async function renderBareRuntime(
+  App: ComponentType<any>,
+  runtimeContext: Record<string, unknown>,
+  i18nInstance: I18nInstance,
+) {
+  const { wrapRoot, beforeRender } = setupBareI18nRuntime(i18nInstance);
+  // The runtime resolves the active instance in `onBeforeRender`; skipping it
+  // leaves the provider without the language-synchronisation seam, which is
+  // exactly the wiring these cases are about.
+  await beforeRender(runtimeContext);
+  const Wrapped = wrapRoot(App);
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render(
+      <InternalRuntimeContext.Provider value={runtimeContext as any}>
+        <RuntimeContext.Provider value={runtimeContext as any}>
+          <Wrapped />
+        </RuntimeContext.Provider>
+      </InternalRuntimeContext.Provider>,
+    );
+  });
+  return { container, root };
+}
+
+function cleanup(rendered?: { container: HTMLElement; root: Root }) {
+  if (!rendered) {
+    return;
+  }
+  act(() => {
+    rendered.root.unmount();
+  });
+  rendered.container.remove();
+}
+
+describe('bare plugin-i18n navigation adapter', () => {
+  let rendered: { container: HTMLElement; root: Root } | undefined;
+
+  afterEach(() => {
+    cleanup(rendered);
+    rendered = undefined;
+    rstest.restoreAllMocks();
+  });
+
+  test('renders mapped locale URLs through the selected router Link', async () => {
+    const router = createMutableTanstackRouter('/cs/obchodni-podminky');
+    const App = () => (
+      <Link to="/terms-of-service" data-testid="nav-terms">
+        terms
+      </Link>
+    );
+
+    rendered = await renderBareRuntime(
+      App,
+      createTanstackRuntimeContext(router),
+      createI18nInstance('cs'),
+    );
+
+    const anchor = rendered.container.querySelector(
+      '[data-testid="nav-terms"]',
+    );
+    // Without the adapter this is a plain `<a>`: no router link, no active state.
+    expect(anchor?.getAttribute('data-router-link')).toBe('tanstack');
+    expect(anchor?.getAttribute('href')).toBe('/cs/obchodni-podminky');
+  });
+
+  test('keeps active state language-invariant across mapped spellings', async () => {
+    const App = () => (
+      <Link to="/terms-of-service" data-testid="nav-terms">
+        terms
+      </Link>
+    );
+
+    for (const [language, pathname] of [
+      ['en', '/en/terms-of-service'],
+      ['cs', '/cs/obchodni-podminky'],
+    ] as const) {
+      const attempt = await renderBareRuntime(
+        App,
+        createTanstackRuntimeContext(createMutableTanstackRouter(pathname)),
+        createI18nInstance(language),
+      );
+      try {
+        const anchor = attempt.container.querySelector(
+          '[data-testid="nav-terms"]',
+        );
+        expect(anchor?.getAttribute('data-status')).toBe('active');
+        expect(anchor?.getAttribute('aria-current')).toBe('page');
+      } finally {
+        cleanup(attempt);
+      }
+    }
+  });
+
+  test('reports no router until the TanStack instance is installed', async () => {
+    const runtimeContext = createTanstackCsrRuntimeContextWithoutRouter();
+    const App = () => {
+      const adapter = useIntegratedRouterAdapter();
+      return <span data-testid="has-router">{String(adapter.hasRouter)}</span>;
+    };
+
+    rendered = await renderBareRuntime(
+      App,
+      runtimeContext,
+      createI18nInstance('en'),
+    );
+
+    // The hook API is published but the instance is not, so claiming a router
+    // here would hand `changeLanguage()` a `navigate` that only throws.
+    expect(
+      rendered.container.querySelector('[data-testid="has-router"]')
+        ?.textContent,
+    ).toBe('false');
+
+    await act(async () => {
+      applyRouterRuntimeState(runtimeContext, {
+        framework: 'tanstack',
+        navigation: createMutableTanstackRouter('/en/terms-of-service')
+          .navigation,
+      } as any);
+    });
+
+    // Installing the instance has to reach a provider that already rendered.
+    expect(
+      rendered.container.querySelector('[data-testid="has-router"]')
+        ?.textContent,
+    ).toBe('true');
+  });
+
+  test('reports no router for a framework the adapter cannot drive', async () => {
+    // A custom provider may publish an instance under a name `navigate` has
+    // no implementation for. Claiming a router then makes `changeLanguage()`
+    // await a navigate that goes nowhere instead of the full-page fallback.
+    const runtimeContext = createTanstackCsrRuntimeContextWithoutRouter();
+    const App = () => {
+      const adapter = useIntegratedRouterAdapter();
+      return <span data-testid="has-router">{String(adapter.hasRouter)}</span>;
+    };
+
+    rendered = await renderBareRuntime(
+      App,
+      runtimeContext,
+      createI18nInstance('en'),
+    );
+    await act(async () => {
+      applyRouterRuntimeState(runtimeContext, {
+        framework: 'custom-router',
+        instance: { navigate: () => undefined, state: { location: {} } },
+      } as any);
+    });
+
+    expect(
+      rendered.container.querySelector('[data-testid="has-router"]')
+        ?.textContent,
+    ).toBe('false');
+  });
+
+  test('leaves links unrouted until the TanStack instance is installed', async () => {
+    const runtimeContext = createTanstackCsrRuntimeContextWithoutRouter();
+    const App = () => (
+      <Link to="/terms-of-service" data-testid="nav-terms">
+        terms
+      </Link>
+    );
+
+    rendered = await renderBareRuntime(
+      App,
+      runtimeContext,
+      createI18nInstance('en'),
+    );
+    const anchor = () =>
+      rendered?.container.querySelector('[data-testid="nav-terms"]');
+    expect(anchor()?.getAttribute('data-router-link')).toBeNull();
+
+    await act(async () => {
+      applyRouterRuntimeState(runtimeContext, {
+        framework: 'tanstack',
+        navigation: createMutableTanstackRouter('/cs/obchodni-podminky')
+          .navigation,
+      } as any);
+    });
+
+    expect(anchor()?.getAttribute('data-router-link')).toBe('tanstack');
+  });
+
+  test('replaces providers and stops observing the previous router', async () => {
+    const first = createMutableTanstackRouter('/en/products/shoe');
+    const second = createMutableTanstackRouter('/cs/produkty/bota');
+    const runtimeContext = createTanstackRuntimeContext(first);
+    const App = () => {
+      const adapter = useIntegratedRouterAdapter();
+      return <span data-testid="path">{adapter.location?.pathname}</span>;
+    };
+    rendered = await renderBareRuntime(
+      App,
+      runtimeContext,
+      createI18nInstance('en'),
+    );
+    await act(async () => {
+      applyRouterRuntimeState(runtimeContext, {
+        framework: 'custom-provider',
+        navigation: second.navigation,
+      });
+    });
+    expect(
+      rendered.container.querySelector('[data-testid="path"]')?.textContent,
+    ).toBe('/cs/produkty/bota');
+    await act(async () => first.publishPathname('/en/stale'));
+    expect(
+      rendered.container.querySelector('[data-testid="path"]')?.textContent,
+    ).toBe('/cs/produkty/bota');
+    await act(async () => second.publishPathname('/en/current'));
+    expect(
+      rendered.container.querySelector('[data-testid="path"]')?.textContent,
+    ).toBe('/en/current');
+  });
+
+  test('follows the router location so the language tracks a client navigation', async () => {
+    const router = createMutableTanstackRouter('/en/products/shoe');
+    const App = () => {
+      const { language } = useModernI18n();
+      return <span data-testid="language">{language}</span>;
+    };
+    const i18nInstance = createI18nInstance('en');
+
+    rendered = await renderBareRuntime(
+      App,
+      createTanstackRuntimeContext(router),
+      i18nInstance,
+    );
+    expect(
+      rendered.container.querySelector('[data-testid="language"]')?.textContent,
+    ).toBe('en');
+
+    await act(async () => {
+      router.publishPathname('/cs/produkty/bota');
+    });
+
+    expect(
+      rendered.container.querySelector('[data-testid="language"]')?.textContent,
+    ).toBe('cs');
+    expect(i18nInstance.setLang).toHaveBeenCalledWith('cs');
+  });
+});

package/tests/reactI18nextRuntimeBoundary.test.ts

@@ -1,13 +1,12 @@
 import { mkdtemp, rm } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
-import { basename, resolve } from 'node:path';
+import { resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { describe, expect, test } from '@rstest/core';
 import { build } from 'esbuild';
 import i18next from 'i18next';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { i18nPlugin as noReactI18nextPlugin } from '../src/runtime/no-react-i18next';
 
 const runtimeRoot = resolve(__dirname, '../src/runtime');
 
@@ -37,31 +36,6 @@ describe('react-i18next runtime boundary', () => {
     ).resolves.toBeDefined();
   });
 
-  test('bundles the default runtime entry with the react-i18next adapter', async () => {
-    let adapterResolutions = 0;
-    await build({
-      bundle: true,
-      entryPoints: [resolve(runtimeRoot, 'index.tsx')],
-      format: 'esm',
-      packages: 'external',
-      platform: 'node',
-      plugins: [
-        {
-          name: 'observe-react-i18next',
-          setup(buildApi) {
-            buildApi.onResolve({ filter: /^react-i18next$/ }, args => {
-              adapterResolutions += 1;
-              return { external: true, path: args.path };
-            });
-          },
-        },
-      ],
-      write: false,
-    });
-
-    expect(adapterResolutions).toBeGreaterThan(0);
-  });
-
   test('gets router capabilities from the selected runtime provider', async () => {
     await expect(
       build({
@@ -90,62 +64,7 @@ describe('react-i18next runtime boundary', () => {
     ).resolves.toBeDefined();
   });
 
-  test('keeps expensive lifecycle helpers behind asynchronous bundle edges', async () => {
-    const result = await build({
-      bundle: true,
-      entryPoints: [resolve(runtimeRoot, 'pluginSetup.ts')],
-      format: 'esm',
-      metafile: true,
-      outdir: 'out',
-      packages: 'external',
-      platform: 'node',
-      splitting: true,
-      write: false,
-    });
-
-    const entryOutput = Object.values(result.metafile.outputs).find(output =>
-      output.entryPoint?.endsWith('/pluginSetup.ts'),
-    );
-    if (!entryOutput) {
-      throw new Error('pluginSetup entry output was not generated');
-    }
-    const dynamicOutputNames = entryOutput.imports
-      .filter(moduleImport => moduleImport.kind === 'dynamic-import')
-      .map(moduleImport => basename(moduleImport.path));
-    const dynamicOutputs = Object.entries(result.metafile.outputs)
-      .filter(([outputPath]) =>
-        dynamicOutputNames.includes(basename(outputPath)),
-      )
-      .map(([, output]) => output);
-    const dynamicEntries = dynamicOutputs.map(output =>
-      basename(output.entryPoint ?? ''),
-    );
-
-    expect(dynamicEntries).toEqual(
-      expect.arrayContaining(['middleware.ts', 'utils.ts']),
-    );
-  });
-
-  test('registers plugin lifecycle hooks synchronously', () => {
-    let beforeRender: unknown;
-    let rootWrapper: unknown;
-    const plugin = noReactI18nextPlugin({ reactI18next: false });
-    const setupResult = plugin.setup?.({
-      getRuntimeConfig: () => ({}),
-      onBeforeRender: hook => {
-        beforeRender = hook;
-      },
-      wrapRoot: wrapper => {
-        rootWrapper = wrapper;
-      },
-    } as any);
-
-    expect(setupResult).toBeUndefined();
-    expect(typeof beforeRender).toBe('function');
-    expect(typeof rootWrapper).toBe('function');
-  });
-
-  test('shares Modern i18n context across independently bundled runtime copies', async () => {
+  test('independently bundled runtime copies share the contexts subpath', async () => {
     const tempDir = await mkdtemp(
       resolve(__dirname, '.modern-i18n-runtime-boundary-'),
     );
@@ -162,6 +81,9 @@ describe('react-i18next runtime boundary', () => {
             outfile,
             packages: 'external',
             platform: 'node',
+            // Resolve the contexts self-reference like an installed package,
+            // not through this package's tsconfig `paths`.
+            tsconfigRaw: {},
           });
           return import(pathToFileURL(outfile).href);
         }),
@@ -191,6 +113,9 @@ describe('react-i18next runtime boundary', () => {
       );
 
       expect(html).toBe('<span>cs</span>');
+      expect(
+        Object.getOwnPropertySymbols(globalThis).map(String),
+      ).not.toContainEqual(expect.stringContaining('@modern-js/plugin-i18n'));
     } finally {
       await rm(tempDir, { force: true, recursive: true });
     }

package/tests/redirectPolicy.test.ts

@@ -5,41 +5,103 @@ import {
   shouldIgnoreRedirect as shouldIgnoreServerRedirect,
 } from '../src/server/redirectPolicy';
 
-const languages = ['en', 'cs'];
-
-const defaultSkippedPaths = [
-  '/backend-mf-manifest.json',
-  '/backendRemoteEntry.cjs',
-  '/mf-manifest.json',
-  '/mf-stats.json',
-  '/remoteEntry.js',
-  '/static/app.js',
-  '/upload/avatar.png',
-];
-
-describe('locale redirect default skip policy', () => {
-  test('skips ADR-0002 Module Federation and static endpoints on the server', () => {
-    for (const pathname of defaultSkippedPaths) {
-      expect(isStaticResourceRequest(pathname, [], languages)).toBe(true);
-      expect(shouldIgnoreServerRedirect(pathname, '/', undefined)).toBe(true);
+describe('native locale redirect safeguards', () => {
+  test('never locale-redirects federation artifacts, with no URL strategy configured', () => {
+    // 3.9.0-ultramodern.9 regression: with `localisedUrls: {}` no strategy is
+    // derived, and the backend federation manifest was redirected to
+    // `/en/backend-mf-manifest.json` (an HTML page) — the Node backend
+    // federation proof then read a 404 instead of the manifest.
+    const languages = ['en', 'cs'];
+    for (const pathname of [
+      '/backend-mf-manifest.json',
+      '/backendRemoteEntry.cjs',
+      '/mf-manifest.json',
+      '/mf-stats.json',
+      '/remoteEntry.js',
+      '/remoteEntry.catalog.js',
+      '/backendRemoteEntry.catalog.cjs',
+      '/cs/backend-mf-manifest.json',
+    ]) {
+      expect(
+        shouldIgnoreServerRedirect(
+          pathname,
+          '/*',
+          undefined,
+          undefined,
+          languages,
+        ),
+      ).toBe(true);
+      expect(
+        shouldIgnoreServerRedirect(
+          `/app${pathname}`,
+          '/app/*',
+          undefined,
+          undefined,
+          languages,
+        ),
+      ).toBe(true);
+      expect(
+        shouldIgnoreRuntimeRedirect(pathname, languages, undefined, undefined),
+      ).toBe(true);
     }
+    // A page is still redirected.
+    expect(
+      shouldIgnoreServerRedirect(
+        '/products',
+        '/*',
+        undefined,
+        undefined,
+        languages,
+      ),
+    ).toBe(false);
+    expect(
+      shouldIgnoreRuntimeRedirect('/products', languages, undefined, undefined),
+    ).toBe(false);
   });
 
-  test('skips language-prefixed static and upload endpoints', () => {
-    expect(isStaticResourceRequest('/cs/static/app.js', [], languages)).toBe(
-      true,
-    );
+  test('retains configured ignores across runtime and server entry prefixes', () => {
+    const rules = ['/private'];
+    expect(
+      shouldIgnoreRuntimeRedirect('/cs/private/data', ['en', 'cs'], rules),
+    ).toBe(true);
+    expect(
+      shouldIgnoreRuntimeRedirect('/cs/private-data', ['en', 'cs'], rules),
+    ).toBe(false);
     expect(
-      isStaticResourceRequest('/en/upload/avatar.png', [], languages),
+      shouldIgnoreServerRedirect(
+        '/app/cs/private/data',
+        '/app/*',
+        rules,
+        undefined,
+        ['en', 'cs'],
+      ),
     ).toBe(true);
+    expect(
+      shouldIgnoreServerRedirect(
+        '/app/cs/private-data',
+        '/app/*',
+        rules,
+        undefined,
+        ['en', 'cs'],
+      ),
+    ).toBe(false);
   });
-
-  test('uses the same default skip policy in runtime redirects', () => {
-    for (const pathname of defaultSkippedPaths) {
-      expect(shouldIgnoreRuntimeRedirect(pathname, languages)).toBe(true);
-      expect(shouldIgnoreRuntimeRedirect(`/cs${pathname}`, languages)).toBe(
+  test('retains configured and native static paths without fork policy', () => {
+    for (const pathname of [
+      '/static/app.js',
+      '/upload/a.png',
+      '/cs/assets/main.js',
+    ]) {
+      expect(isStaticResourceRequest(pathname, ['/assets'], ['en', 'cs'])).toBe(
         true,
       );
     }
+    expect(
+      isStaticResourceRequest(
+        '/assets-other/main.js',
+        ['/assets'],
+        ['en', 'cs'],
+      ),
+    ).toBe(false);
   });
 });