@bleedingdev/modern-js-plugin-i18n 3.5.0-ultramodern.6 → 3.5.0-ultramodern.75

package/tests/federatedI18nBoundary.client.test.tsx

@@ -0,0 +1,112 @@
+import { expect, test } from '@rstest/core';
+import i18next, { type i18n } from 'i18next';
+import { act, useState } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { ModernI18nProvider } from '../src/runtime/context';
+import { FederatedI18nBoundary, useModernI18n } from '../src/runtime/core';
+
+const remoteResources = {
+  cs: {
+    inventory: {
+      'inventory.widgetBody': 'C1 skladová plocha vlastněná MicroVerticalem.',
+    },
+  },
+  en: {
+    inventory: {
+      'inventory.widgetBody':
+        'C1 inventory surface owned by the MicroVertical.',
+    },
+  },
+};
+
+function InventoryCopy() {
+  const { t } = useModernI18n();
+
+  return <p data-testid="inventory-copy">{t('inventory.widgetBody')}</p>;
+}
+
+function Host({ hostI18n }: { hostI18n: i18n }) {
+  const [language, setLanguage] = useState('en');
+
+  return (
+    <ModernI18nProvider
+      value={{
+        i18nInstance: hostI18n,
+        language,
+        languages: ['en', 'cs'],
+      }}
+    >
+      <button
+        onClick={async () => {
+          await hostI18n.changeLanguage('cs');
+          setLanguage('cs');
+        }}
+        type="button"
+      >
+        cs
+      </button>
+      <FederatedI18nBoundary
+        defaultNamespace="inventory"
+        fallbackLanguage="en"
+        resources={remoteResources}
+        supportedLanguages={['en', 'cs']}
+      >
+        <InventoryCopy />
+      </FederatedI18nBoundary>
+    </ModernI18nProvider>
+  );
+}
+
+async function createHostI18n() {
+  const instance = i18next.createInstance();
+  await instance.init({
+    defaultNS: 'inventory',
+    fallbackLng: 'en',
+    initImmediate: false,
+    lng: 'en',
+    resources: {
+      cs: {
+        inventory: {
+          'inventory.widgetBody': 'stale host Czech copy',
+        },
+      },
+      en: {
+        inventory: {
+          'inventory.widgetBody': 'stale host English copy',
+        },
+      },
+    },
+    supportedLngs: ['en', 'cs'],
+  });
+  return instance;
+}
+
+test('hydrates remote-owned copy and follows the host language', async () => {
+  const serverI18n = await createHostI18n();
+  const container = document.createElement('div');
+  container.innerHTML = renderToString(<Host hostI18n={serverI18n} />);
+  document.body.appendChild(container);
+
+  const clientI18n = await createHostI18n();
+  const hydrationErrors: unknown[] = [];
+  const root = hydrateRoot(container, <Host hostI18n={clientI18n} />, {
+    onRecoverableError: error => hydrationErrors.push(error),
+  });
+
+  await act(async () => undefined);
+  expect(
+    container.querySelector('[data-testid="inventory-copy"]')?.textContent,
+  ).toBe('C1 inventory surface owned by the MicroVertical.');
+
+  await act(async () => {
+    (container.querySelector('button') as HTMLButtonElement).click();
+  });
+  expect(
+    container.querySelector('[data-testid="inventory-copy"]')?.textContent,
+  ).toBe('C1 skladová plocha vlastněná MicroVerticalem.');
+  expect(hydrationErrors).toEqual([]);
+
+  await act(async () => root.unmount());
+  container.remove();
+});

package/tests/federatedI18nBoundary.test.tsx

@@ -0,0 +1,120 @@
+import { describe, expect, test } from '@rstest/core';
+import i18next from 'i18next';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ModernI18nProvider } from '../src/runtime/context';
+import { FederatedI18nBoundary, useModernI18n } from '../src/runtime/core';
+
+const C0_COPY = 'C0 copy bundled by the shell';
+const C1_COPY =
+  'C1 operational independence: inventory UI and localization moved together.';
+const HOST_ONLY_INVENTORY_COPY = 'inventory copy owned only by the shell';
+const HOST_ONLY_SHELL_COPY = 'private shell copy';
+
+function InventoryCopy() {
+  const { t } = useModernI18n();
+
+  return (
+    <p>
+      {t('inventory.widgetBody')}|{t('inventory.hostOnly')}|{t('shell:private')}
+    </p>
+  );
+}
+
+describe('FederatedI18nBoundary', () => {
+  test('renders remote-owned resources instead of stale host resources', async () => {
+    const hostI18n = i18next.createInstance();
+    await hostI18n.init({
+      defaultNS: 'inventory',
+      fallbackLng: 'en',
+      initImmediate: false,
+      lng: 'en',
+      ns: ['inventory'],
+      resources: {
+        en: {
+          inventory: {
+            'inventory.hostOnly': HOST_ONLY_INVENTORY_COPY,
+            'inventory.widgetBody': C0_COPY,
+          },
+          shell: {
+            private: HOST_ONLY_SHELL_COPY,
+          },
+        },
+      },
+      supportedLngs: ['en', 'cs'],
+    });
+
+    const html = renderToStaticMarkup(
+      <ModernI18nProvider
+        value={{
+          i18nInstance: hostI18n,
+          language: 'en',
+          languages: ['en', 'cs'],
+        }}
+      >
+        <FederatedI18nBoundary
+          defaultNamespace="inventory"
+          resources={{
+            en: {
+              inventory: {
+                'inventory.widgetBody': C1_COPY,
+              },
+            },
+          }}
+        >
+          <InventoryCopy />
+        </FederatedI18nBoundary>
+      </ModernI18nProvider>,
+    );
+
+    expect(html).toContain(C1_COPY);
+    expect(html).not.toContain(C0_COPY);
+    expect(html).not.toContain(HOST_ONLY_INVENTORY_COPY);
+    expect(html).not.toContain(HOST_ONLY_SHELL_COPY);
+    expect(hostI18n.t('inventory.widgetBody')).toBe(C0_COPY);
+    expect(hostI18n.t('inventory.hostOnly')).toBe(HOST_ONLY_INVENTORY_COPY);
+    expect(hostI18n.t('shell:private')).toBe(HOST_ONLY_SHELL_COPY);
+  });
+
+  test('fails before mutation when cloneInstance does not isolate the host store', async () => {
+    const hostI18n = i18next.createInstance();
+    await hostI18n.init({
+      defaultNS: 'inventory',
+      initImmediate: false,
+      lng: 'en',
+      resources: {
+        en: {
+          inventory: {
+            'inventory.widgetBody': C0_COPY,
+          },
+        },
+      },
+    });
+    hostI18n.cloneInstance = () => hostI18n;
+
+    expect(() =>
+      renderToStaticMarkup(
+        <ModernI18nProvider
+          value={{
+            i18nInstance: hostI18n,
+            language: 'en',
+            languages: ['en'],
+          }}
+        >
+          <FederatedI18nBoundary
+            defaultNamespace="inventory"
+            resources={{
+              en: {
+                inventory: {
+                  'inventory.widgetBody': C1_COPY,
+                },
+              },
+            }}
+          >
+            <InventoryCopy />
+          </FederatedI18nBoundary>
+        </ModernI18nProvider>,
+      ),
+    ).toThrow(/did not isolate the host resource store/u);
+    expect(hostI18n.t('inventory.widgetBody')).toBe(C0_COPY);
+  });
+});

package/tests/fixtures/localised-routes.golden.json

@@ -0,0 +1,156 @@
+[
+  {
+    "id": ":lang",
+    "path": ":lang",
+    "type": "nested",
+    "origin": "file-system",
+    "routeType": "layout",
+    "_component": ":lang.tsx",
+    "children": [
+      {
+        "id": "about",
+        "path": "about",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "page",
+        "_component": "about.tsx",
+        "modernCanonicalPath": "/about"
+      },
+      {
+        "id": "about__localised_o-nas",
+        "path": "o-nas",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "page",
+        "_component": "about.tsx",
+        "modernCanonicalPath": "/about"
+      },
+      {
+        "id": "about__localised_ueber-uns",
+        "path": "ueber-uns",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "page",
+        "_component": "about.tsx",
+        "modernCanonicalPath": "/about"
+      },
+      {
+        "id": "products",
+        "path": "products",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "layout",
+        "_component": "products.tsx",
+        "children": [
+          {
+            "id": ":slug",
+            "path": ":slug",
+            "type": "nested",
+            "origin": "file-system",
+            "routeType": "page",
+            "_component": ":slug.tsx",
+            "modernCanonicalPath": "/products/:slug"
+          }
+        ],
+        "modernCanonicalPath": "/products"
+      },
+      {
+        "id": "products__localised_produkty",
+        "path": "produkty",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "layout",
+        "_component": "products.tsx",
+        "children": [
+          {
+            "id": ":slug__localised_produkty",
+            "path": ":slug",
+            "type": "nested",
+            "origin": "file-system",
+            "routeType": "page",
+            "_component": ":slug.tsx",
+            "modernCanonicalPath": "/products/:slug"
+          }
+        ],
+        "modernCanonicalPath": "/products"
+      },
+      {
+        "id": "products__localised_produkte",
+        "path": "produkte",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "layout",
+        "_component": "products.tsx",
+        "children": [
+          {
+            "id": ":slug__localised_produkte",
+            "path": ":slug",
+            "type": "nested",
+            "origin": "file-system",
+            "routeType": "page",
+            "_component": ":slug.tsx",
+            "modernCanonicalPath": "/products/:slug"
+          }
+        ],
+        "modernCanonicalPath": "/products"
+      },
+      {
+        "id": "docs",
+        "path": "docs",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "layout",
+        "_component": "docs.tsx",
+        "children": [
+          {
+            "id": "*",
+            "path": "*",
+            "type": "nested",
+            "origin": "file-system",
+            "routeType": "page",
+            "_component": "*.tsx"
+          }
+        ],
+        "modernCanonicalPath": "/docs"
+      },
+      {
+        "id": "docs__localised_dokumenty",
+        "path": "dokumenty",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "layout",
+        "_component": "docs.tsx",
+        "children": [
+          {
+            "id": "*__localised_dokumenty",
+            "path": "*",
+            "type": "nested",
+            "origin": "file-system",
+            "routeType": "page",
+            "_component": "*.tsx"
+          }
+        ],
+        "modernCanonicalPath": "/docs"
+      },
+      {
+        "id": "docs__localised_dokumente",
+        "path": "dokumente",
+        "type": "nested",
+        "origin": "file-system",
+        "routeType": "layout",
+        "_component": "docs.tsx",
+        "children": [
+          {
+            "id": "*__localised_dokumente",
+            "path": "*",
+            "type": "nested",
+            "origin": "file-system",
+            "routeType": "page",
+            "_component": "*.tsx"
+          }
+        ],
+        "modernCanonicalPath": "/docs"
+      }
+    ]
+  }
+]

package/tests/link.test.tsx

@@ -4,6 +4,7 @@ import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { ModernI18nProvider } from '../src/runtime/context';
 import type { I18nInstance } from '../src/runtime/i18n';
+import { detectLanguageWithPriority } from '../src/runtime/i18n/detection';
 import { interpolateRouteParams, Link } from '../src/runtime/Link';
 import {
   canonicalPath,
@@ -270,6 +271,60 @@ describe('localization utilities', () => {
   });
 });
 
+describe('language detection priority', () => {
+  test('path locale overrides stale SSR data', async () => {
+    const previousSsrData = (window as any)._SSR_DATA;
+    (window as any)._SSR_DATA = { data: { i18nData: { lng: 'en' } } };
+
+    try {
+      await expect(
+        detectLanguageWithPriority(createI18nInstance('en'), {
+          languages,
+          fallbackLanguage: 'en',
+          localePathRedirect: true,
+          i18nextDetector: false,
+          detection: {},
+          userInitOptions: {},
+          pathname: '/cs/produkty',
+          ssrContext: undefined,
+        }),
+      ).resolves.toEqual({ detectedLanguage: 'cs', finalLanguage: 'cs' });
+    } finally {
+      if (previousSsrData === undefined) {
+        delete (window as any)._SSR_DATA;
+      } else {
+        (window as any)._SSR_DATA = previousSsrData;
+      }
+    }
+  });
+
+  test('regional SSR language resolves to supported base language', async () => {
+    const previousSsrData = (window as any)._SSR_DATA;
+    (window as any)._SSR_DATA = { data: { i18nData: { lng: 'en-US' } } };
+
+    try {
+      await expect(
+        detectLanguageWithPriority(createI18nInstance('cs'), {
+          languages,
+          fallbackLanguage: 'cs',
+          localePathRedirect: true,
+          i18nextDetector: false,
+          detection: {},
+          userInitOptions: {},
+          pathname: '/products',
+          ssrContext: undefined,
+        }),
+      ).resolves.toEqual({ detectedLanguage: 'en', finalLanguage: 'en' });
+    } finally {
+      if (previousSsrData === undefined) {
+        delete (window as any)._SSR_DATA;
+      } else {
+        (window as any)._SSR_DATA = previousSsrData;
+      }
+    }
+  });
+});
+
 describe('framework Link', () => {
   let rendered: { container: HTMLElement; root: Root } | undefined;
 
@@ -328,6 +383,26 @@ describe('framework Link', () => {
     expect(props.hash).toBe('list');
   });
 
+  test('preserves array search values natively', async () => {
+    const router = createTanstackRouter('/en/products', 'en');
+    rendered = await renderWithRuntime(
+      <ModernI18nProvider value={providerValue('en')}>
+        <Link
+          to="/products"
+          search={{ tag: ['boots', 'sale'], page: 2 }}
+          data-testid="q"
+        >
+          Products
+        </Link>
+      </ModernI18nProvider>,
+      createTanstackRuntimeContext(router),
+    );
+
+    const props = capturedLinkProps.at(-1);
+    expect(props.to).toBe('/en/products');
+    expect(props.search).toEqual({ tag: ['boots', 'sale'], page: '2' });
+  });
+
   test('renders a plain anchor for external targets', async () => {
     const router = createTanstackRouter('/en', 'en');
     rendered = await renderWithRuntime(
@@ -381,6 +456,42 @@ describe('framework Link', () => {
     expect(link?.hasAttribute('prefetch')).toBe(false);
   });
 
+  test('serializes array search values for fallback anchors', async () => {
+    rendered = await renderWithRuntime(
+      <ModernI18nProvider value={providerValue('en')}>
+        <Link
+          to="/products"
+          search={{ tag: ['boots', 'sale'], page: 2 }}
+          data-testid="q"
+        >
+          Products
+        </Link>
+      </ModernI18nProvider>,
+      { isBrowser: true, requestContext, context: requestContext } as any,
+    );
+
+    const link = rendered.container.querySelector('[data-testid="q"]');
+    expect(link?.getAttribute('href')).toBe(
+      '/en/products?tag=boots&tag=sale&page=2',
+    );
+  });
+
+  test('empty search prop clears query from target fallback anchors', async () => {
+    rendered = await renderWithRuntime(
+      <ModernI18nProvider value={providerValue('en')}>
+        <Link to="/products?tag=x" search="" data-testid="clear-query">
+          Products
+        </Link>
+      </ModernI18nProvider>,
+      { isBrowser: true, requestContext, context: requestContext } as any,
+    );
+
+    const link = rendered.container.querySelector(
+      '[data-testid="clear-query"]',
+    );
+    expect(link?.getAttribute('href')).toBe('/en/products');
+  });
+
   test('maps prefetch to the TanStack preload prop', async () => {
     const router = createTanstackRouter('/en/products', 'en');
     rendered = await renderWithRuntime(

package/tests/localisedUrlRewriteMatrix.fork.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, test } from '@rstest/core';
+import {
+  interpolateRouteParams,
+  normalizeSearch,
+} from '../src/runtime/linkHelpers';
+import { canonicalPath, localizePath } from '../src/runtime/localizedPaths';
+import { buildLocalizedUrl } from '../src/runtime/utils';
+import type { LocalisedUrlsMap } from '../src/shared/localisedUrls';
+
+const languages = ['en', 'cs'];
+
+const localisedUrls = {
+  '/products/:slug': {
+    en: '/products/:slug',
+    cs: '/produkty/:slug',
+  },
+  '/files/*': {
+    en: '/files/*',
+    cs: '/soubory/*',
+  },
+  '/app/products/:slug': {
+    en: '/app/products/:slug',
+    cs: '/app/produkty/:slug',
+  },
+} satisfies LocalisedUrlsMap;
+
+const pathsConfig = {
+  languages,
+  localisedUrls,
+};
+
+describe('fork-owned localised URL rewrite matrix', () => {
+  const rewriteScenarios = [
+    {
+      name: 'adds the target locale prefix and localises canonical segments',
+      target: '/products/red-shoe',
+      language: 'cs',
+      expected: '/cs/produkty/red-shoe',
+    },
+    {
+      name: 'strips a case-insensitive source locale before relocalising',
+      target: '/CS/produkty/red%20shoe?tag=boots#details',
+      language: 'en',
+      expected: '/en/products/red%20shoe?tag=boots#details',
+    },
+    {
+      name: 'preserves repeated query keys and the fragment',
+      target: '/products/red-shoe?tag=boots&tag=sale#details',
+      language: 'cs',
+      expected: '/cs/produkty/red-shoe?tag=boots&tag=sale#details',
+    },
+    {
+      name: 'keeps a base-path segment inside the localised route map',
+      target: '/app/products/red-shoe?ref=nav#details',
+      language: 'cs',
+      expected: '/cs/app/produkty/red-shoe?ref=nav#details',
+    },
+    {
+      name: 'keeps the default locale explicitly prefixed',
+      target: '/products/red-shoe',
+      language: 'en',
+      expected: '/en/products/red-shoe',
+    },
+    {
+      name: 'does not double-prefix an already-localised URL',
+      target: '/cs/produkty/red-shoe?tag=boots#details',
+      language: 'cs',
+      expected: '/cs/produkty/red-shoe?tag=boots#details',
+    },
+  ];
+
+  for (const scenario of rewriteScenarios) {
+    test(scenario.name, () => {
+      expect(
+        buildLocalizedUrl(
+          scenario.target,
+          scenario.language,
+          languages,
+          localisedUrls,
+        ),
+      ).toBe(scenario.expected);
+    });
+  }
+
+  test('canonical and localized path helpers strip and add prefixes exactly', () => {
+    expect(
+      canonicalPath('/CS/produkty/red-shoe?tag=boots#details', pathsConfig),
+    ).toBe('/products/red-shoe?tag=boots#details');
+    expect(
+      localizePath('/products/red-shoe?tag=boots#details', 'cs', pathsConfig),
+    ).toBe('/cs/produkty/red-shoe?tag=boots#details');
+  });
+
+  test('splat params preserve separators and percent-encode each segment', () => {
+    const target = interpolateRouteParams('/files/*', {
+      '*': 'resume drafts/Q1 deck.pdf',
+    });
+
+    expect(target).toBe('/files/resume%20drafts/Q1%20deck.pdf');
+    expect(buildLocalizedUrl(target, 'cs', languages, localisedUrls)).toBe(
+      '/cs/soubory/resume%20drafts/Q1%20deck.pdf',
+    );
+  });
+
+  const searchScenarios: Array<{
+    name: string;
+    search: Parameters<typeof normalizeSearch>[0];
+    searchFromTo: string;
+    expected: ReturnType<typeof normalizeSearch>;
+  }> = [
+    {
+      name: 'object array values are preserved',
+      search: { tag: ['boots', 'sale'], page: 2 },
+      searchFromTo: '?ignored=1',
+      expected: {
+        searchString: '?tag=boots&tag=sale&page=2',
+        searchObject: { tag: ['boots', 'sale'], page: '2' },
+      },
+    },
+    {
+      name: 'target query arrays are preserved',
+      search: undefined,
+      searchFromTo: '?tag=boots&tag=sale&page=2',
+      expected: {
+        searchString: '?tag=boots&tag=sale&page=2',
+        searchObject: { tag: ['boots', 'sale'], page: '2' },
+      },
+    },
+    {
+      name: 'empty search clears the target query',
+      search: '',
+      searchFromTo: '?tag=boots&tag=sale',
+      expected: {
+        searchString: '',
+        searchObject: undefined,
+      },
+    },
+  ];
+
+  for (const scenario of searchScenarios) {
+    test(`normalizes search: ${scenario.name}`, () => {
+      expect(normalizeSearch(scenario.search, scenario.searchFromTo)).toEqual(
+        scenario.expected,
+      );
+    });
+  }
+});