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

package/tests/routerAdapter.test.tsx

@@ -3,15 +3,23 @@ import {
   InternalRuntimeContext,
   RuntimeContext,
 } from '@modern-js/runtime/context';
+import {
+  createMemoryRouter,
+  Link as ReactRouterLink,
+  RouterProvider,
+} from '@modern-js/runtime/router';
+import i18next from 'i18next';
 import type React from 'react';
 import type { ComponentType, PropsWithChildren } from 'react';
 import { act, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
+import { useTranslation } from 'react-i18next';
 import { i18nPlugin } from '../src/runtime';
 import { ModernI18nProvider, useModernI18n } from '../src/runtime/context';
 import { I18nLink } from '../src/runtime/I18nLink';
 import type { I18nInstance } from '../src/runtime/i18n';
 import { getReactI18nextIntegration } from '../src/runtime/i18n/react-i18next';
+import { createI18nRootWrapper } from '../src/runtime/providerComposition';
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -110,6 +118,173 @@ function collectI18nWrapRoot() {
   return wrapRoot;
 }
 
+async function collectI18nRuntime(
+  i18nInstance: I18nInstance,
+  reactI18next = false,
+) {
+  let onBeforeRender:
+    | ((
+        context: ReturnType<typeof createTanstackRuntimeContext>,
+      ) => Promise<void>)
+    | undefined;
+  let wrapRoot: ((App: ComponentType<any>) => ComponentType<any>) | undefined;
+
+  i18nPlugin({
+    i18nInstance,
+    reactI18next,
+    localeDetection: {
+      fallbackLanguage: 'en',
+      i18nextDetector: false,
+      languages: ['en', 'cs'],
+      localePathRedirect: true,
+    },
+  }).setup?.({
+    getRuntimeConfig: () => ({}),
+    onBeforeRender: (
+      callback: (
+        context: ReturnType<typeof createTanstackRuntimeContext>,
+      ) => Promise<void>,
+    ) => {
+      onBeforeRender = callback;
+    },
+    wrapRoot: (callback: (App: ComponentType<any>) => ComponentType<any>) => {
+      wrapRoot = callback;
+    },
+  } as any);
+
+  if (!onBeforeRender || !wrapRoot) {
+    throw new Error('Expected i18n runtime plugin lifecycle registrations');
+  }
+
+  return { onBeforeRender, wrapRoot };
+}
+
+async function createEventEmittingDeferredI18nInstance() {
+  const instance = i18next.createInstance();
+  await instance.init({
+    lng: 'en',
+    fallbackLng: 'en',
+    resources: {
+      en: { translation: { languageSwitcher: 'Language' } },
+      cs: { translation: { languageSwitcher: 'Jazyk' } },
+    },
+  });
+  const originalHasLoadedNamespace = instance.hasLoadedNamespace;
+  instance.hasLoadedNamespace = function hasLoadedNamespace(
+    namespace,
+    options,
+  ) {
+    if (this !== instance) {
+      throw new Error('i18next hasLoadedNamespace receiver was not preserved');
+    }
+    return originalHasLoadedNamespace.call(this, namespace, options);
+  };
+
+  const pending: Array<{
+    language: string;
+    promise: Promise<unknown>;
+    resolve: () => void;
+  }> = [];
+  const translator = (instance as unknown as { translator: I18nInstance })
+    .translator;
+
+  instance.changeLanguage = rstest.fn((language = 'en') => {
+    let resolveChange!: (value: unknown) => void;
+    const promise = new Promise<unknown>(resolve => {
+      resolveChange = resolve;
+    });
+    pending.push({
+      language,
+      promise,
+      resolve: () => {
+        instance.language = language;
+        translator.changeLanguage?.(language);
+        instance.emit('languageChanged', language);
+        resolveChange(instance.t.bind(instance));
+      },
+    });
+    return promise;
+  });
+
+  return { instance, pending };
+}
+
+function createMutableTanstackRouter(pathname = '/en') {
+  let location = {
+    pathname,
+    searchStr: '',
+    hash: '',
+  };
+  let matches = [{ params: { lang: pathname.slice(1) } }];
+  const listeners = new Set<() => void>();
+
+  return {
+    navigate: rstest.fn(async () => undefined),
+    stores: {
+      location: {
+        get: () => location,
+        subscribe: (listener: () => void) => {
+          listeners.add(listener);
+          return () => listeners.delete(listener);
+        },
+      },
+      matches: {
+        get: () => matches,
+      },
+    },
+    publishPathname(nextPathname: string) {
+      location = {
+        pathname: nextPathname,
+        searchStr: '',
+        hash: '',
+      };
+      matches = [{ params: { lang: nextPathname.slice(1) } }];
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+  };
+}
+
+function createDeferredI18nInstance() {
+  const resources = {
+    en: { languageSwitcher: 'Language' },
+    cs: { languageSwitcher: 'Jazyk' },
+  };
+  const pending: Array<{
+    language: keyof typeof resources;
+    promise: Promise<void>;
+    resolve: () => void;
+    reject: (error: Error) => void;
+  }> = [];
+  const instance = createI18nInstance('en');
+  delete instance.setLang;
+  instance.t = (key: string) =>
+    resources[instance.language as keyof typeof resources][
+      key as keyof (typeof resources)['en']
+    ];
+  instance.changeLanguage = rstest.fn((language = 'en') => {
+    let resolveChange!: () => void;
+    let rejectChange!: (error: Error) => void;
+    const promise = new Promise<void>((resolve, reject) => {
+      resolveChange = resolve;
+      rejectChange = reject;
+    });
+    pending.push({
+      language: language as keyof typeof resources,
+      promise,
+      resolve: () => {
+        instance.language = language;
+        resolveChange();
+      },
+      reject: rejectChange,
+    });
+    return promise;
+  });
+
+  return { instance, pending };
+}
+
 function createTanstackRouter(pathname = '/en/terms-of-service', lang = 'en') {
   const url = new URL(pathname, 'https://modernjs.test');
 
@@ -179,6 +354,30 @@ async function renderWithRuntime(
   };
 }
 
+async function renderWithRuntimeContexts(
+  node: React.ReactNode,
+  runtimeContext: ReturnType<typeof createTanstackRuntimeContext>,
+) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  await act(async () => {
+    root.render(
+      <InternalRuntimeContext.Provider value={runtimeContext}>
+        <RuntimeContext.Provider value={runtimeContext}>
+          {node}
+        </RuntimeContext.Provider>
+      </InternalRuntimeContext.Provider>,
+    );
+  });
+
+  return {
+    container,
+    root,
+  };
+}
+
 function cleanup(rendered?: { container: HTMLElement; root: Root }) {
   if (!rendered) {
     return;
@@ -195,6 +394,8 @@ describe('i18n runtime wrapRoot', () => {
   afterEach(() => {
     cleanup(rendered);
     rendered = undefined;
+    rstest.restoreAllMocks();
+    window.history.replaceState(null, '', '/');
   });
 
   test('renders children when no root App exists yet', async () => {
@@ -228,6 +429,291 @@ describe('i18n runtime wrapRoot', () => {
     ).toBe('root');
     expect(rendered.container.textContent).toContain('router content');
   });
+
+  test('keeps the optional i18next provider inside Modern i18n context', async () => {
+    const i18nInstance = createI18nInstance('cs');
+    const observedLanguages: string[] = [];
+    const I18nextProvider = ({
+      children,
+      i18n,
+    }: PropsWithChildren<{ i18n: I18nInstance }>) => {
+      const { language } = useModernI18n();
+      observedLanguages.push(`${language}:${i18n.language}`);
+
+      return <section data-testid="i18next-provider">{children}</section>;
+    };
+    const App = () => <main>router content</main>;
+    const I18nRoot = createI18nRootWrapper({
+      htmlLangAttr: false,
+      localePathRedirect: false,
+      languages: ['en', 'cs'],
+      fallbackLanguage: 'en',
+      getLatestI18nInstance: () => i18nInstance,
+      getI18nextProvider: () => I18nextProvider,
+    })(App);
+
+    rendered = await renderI18nRoot(<I18nRoot />);
+
+    expect(observedLanguages).toEqual(['cs:cs']);
+    expect(rendered.container.textContent).toContain('router content');
+  });
+
+  test('commits route language and translated copy after the instance changes', async () => {
+    window.history.replaceState(null, '', '/en');
+    const router = createMutableTanstackRouter();
+    const runtimeContext = createTanstackRuntimeContext(router);
+    const { instance, pending } = createDeferredI18nInstance();
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(instance);
+    await onBeforeRender(runtimeContext);
+
+    const Translation = ({ id }: { id: string }) => {
+      const { language, t } = useModernI18n();
+      return (
+        <span data-testid={id}>
+          {language}:{t('languageSwitcher')}
+        </span>
+      );
+    };
+    const App = () => (
+      <main>
+        <Translation id="first" />
+        <Translation id="second" />
+      </main>
+    );
+    const I18nRoot = wrapRoot(App);
+
+    rendered = await renderWithRuntime(<I18nRoot />, runtimeContext);
+
+    expect(rendered.container.textContent).toBe('en:Languageen:Language');
+
+    await act(async () => {
+      router.publishPathname('/cs');
+    });
+
+    expect(instance.changeLanguage).toHaveBeenCalledTimes(1);
+    expect(instance.changeLanguage).toHaveBeenCalledWith('cs');
+    expect(rendered.container.textContent).toBe('en:Languageen:Language');
+
+    await act(async () => {
+      pending[0].resolve();
+      await pending[0].promise;
+    });
+
+    expect(rendered.container.textContent).toBe('cs:Jazykcs:Jazyk');
+  });
+
+  test('uses the wrapper language operation without changing twice', async () => {
+    window.history.replaceState(null, '', '/en');
+    const router = createMutableTanstackRouter();
+    const runtimeContext = createTanstackRuntimeContext(router);
+    const instance = createI18nInstance();
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(instance);
+    await onBeforeRender(runtimeContext);
+
+    const App = () => {
+      const { language } = useModernI18n();
+      return <main>{language}</main>;
+    };
+    const I18nRoot = wrapRoot(App);
+    rendered = await renderWithRuntime(<I18nRoot />, runtimeContext);
+
+    await act(async () => {
+      router.publishPathname('/cs');
+      await Promise.resolve();
+    });
+
+    expect(instance.setLang).toHaveBeenCalledTimes(1);
+    expect(instance.setLang).toHaveBeenCalledWith('cs');
+    expect(instance.changeLanguage).not.toHaveBeenCalled();
+    expect(rendered.container.textContent).toBe('cs');
+  });
+
+  test('keeps the latest route when language changes resolve out of order', async () => {
+    window.history.replaceState(null, '', '/en');
+    const router = createMutableTanstackRouter();
+    const runtimeContext = createTanstackRuntimeContext(router);
+    const { instance, pending } = createDeferredI18nInstance();
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(instance);
+    await onBeforeRender(runtimeContext);
+
+    const App = () => {
+      const { language, t } = useModernI18n();
+      return (
+        <main>
+          {language}:{t('languageSwitcher')}
+        </main>
+      );
+    };
+    const I18nRoot = wrapRoot(App);
+    rendered = await renderWithRuntime(<I18nRoot />, runtimeContext);
+
+    await act(async () => {
+      router.publishPathname('/cs');
+    });
+    expect(pending).toHaveLength(1);
+
+    await act(async () => {
+      router.publishPathname('/en');
+    });
+    expect(rendered.container.textContent).toBe('en:Language');
+
+    await act(async () => {
+      pending[0].resolve();
+      await pending[0].promise;
+    });
+
+    expect(rendered.container.textContent).toBe('en:Language');
+    expect(pending).toHaveLength(2);
+    expect(pending[1].language).toBe('en');
+
+    await act(async () => {
+      pending[1].resolve();
+      await pending[1].promise;
+    });
+
+    expect(rendered.container.textContent).toBe('en:Language');
+    expect(instance.language).toBe('en');
+  });
+
+  test('does not block a replacement instance behind abandoned language work', async () => {
+    window.history.replaceState(null, '', '/en');
+    const router = createMutableTanstackRouter();
+    const runtimeContext = createTanstackRuntimeContext(router);
+    const oldI18n = createDeferredI18nInstance();
+    runtimeContext.i18nInstance = oldI18n.instance;
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(
+      oldI18n.instance,
+    );
+    await onBeforeRender(runtimeContext);
+
+    const App = () => {
+      const { language } = useModernI18n();
+      return <main>{language}</main>;
+    };
+    const I18nRoot = wrapRoot(App);
+    rendered = await renderWithRuntimeContexts(<I18nRoot />, runtimeContext);
+
+    await act(async () => {
+      router.publishPathname('/cs');
+    });
+    expect(oldI18n.pending).toHaveLength(1);
+
+    const replacementI18n = createDeferredI18nInstance();
+    const replacementContext = createTanstackRuntimeContext(router);
+    replacementContext.i18nInstance = replacementI18n.instance;
+    await act(async () => {
+      rendered?.root.render(
+        <InternalRuntimeContext.Provider value={replacementContext}>
+          <RuntimeContext.Provider value={replacementContext}>
+            <I18nRoot />
+          </RuntimeContext.Provider>
+        </InternalRuntimeContext.Provider>,
+      );
+    });
+
+    expect(replacementI18n.pending).toHaveLength(1);
+    expect(replacementI18n.pending[0].language).toBe('cs');
+  });
+
+  test('does not expose an obsolete route language through react-i18next', async () => {
+    window.history.replaceState(null, '', '/en');
+    const router = createMutableTanstackRouter();
+    const runtimeContext = createTanstackRuntimeContext(router);
+    const { instance, pending } =
+      await createEventEmittingDeferredI18nInstance();
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(
+      instance,
+      true,
+    );
+    await onBeforeRender(runtimeContext);
+
+    const App = () => {
+      const { t } = useTranslation();
+      return <main>{t('languageSwitcher')}</main>;
+    };
+    const I18nRoot = wrapRoot(App);
+    rendered = await renderWithRuntime(<I18nRoot />, runtimeContext);
+
+    await act(async () => {
+      router.publishPathname('/cs');
+    });
+    expect(pending).toHaveLength(1);
+
+    await act(async () => {
+      router.publishPathname('/en');
+    });
+
+    await act(async () => {
+      pending[0].resolve();
+      await pending[0].promise;
+    });
+
+    expect(rendered.container.textContent).toBe('Language');
+  });
+
+  test('keeps committed copy after a failed change and recovers later', async () => {
+    window.history.replaceState(null, '', '/en');
+    const consoleError = rstest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined);
+    const router = createMutableTanstackRouter();
+    const runtimeContext = createTanstackRuntimeContext(router);
+    const { instance, pending } = createDeferredI18nInstance();
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(instance);
+    await onBeforeRender(runtimeContext);
+
+    const RetryConsumer = () => {
+      useModernI18n();
+      return null;
+    };
+    const App = () => {
+      const [showRetryConsumer, setShowRetryConsumer] = useState(false);
+      const { language, t } = useModernI18n();
+      return (
+        <main>
+          {language}:{t('languageSwitcher')}
+          <button type="button" onClick={() => setShowRetryConsumer(true)}>
+            Retry
+          </button>
+          {showRetryConsumer && <RetryConsumer />}
+        </main>
+      );
+    };
+    const I18nRoot = wrapRoot(App);
+    rendered = await renderWithRuntime(<I18nRoot />, runtimeContext);
+
+    await act(async () => {
+      router.publishPathname('/cs');
+    });
+
+    const languageError = new Error('failed to load Czech resources');
+    await act(async () => {
+      pending[0].reject(languageError);
+      await pending[0].promise.catch(() => undefined);
+    });
+
+    expect(rendered.container.textContent).toContain('en:Language');
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(consoleError).toHaveBeenCalledWith(
+      'Failed to synchronize i18n language "cs".',
+      languageError,
+    );
+
+    await act(async () => {
+      rendered?.container
+        .querySelector('button')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(pending).toHaveLength(2);
+
+    await act(async () => {
+      pending[1].resolve();
+      await pending[1].promise;
+    });
+
+    expect(rendered.container.textContent).toContain('cs:Jazyk');
+    expect(instance.language).toBe('cs');
+  });
 });
 
 describe('i18n react-i18next integration', () => {
@@ -399,6 +885,62 @@ describe('i18n router adapter', () => {
     });
   });
 
+  test('updates provider language when target locale is already in URL', async () => {
+    window.history.replaceState(null, '', '/cs/podminky-pouzivani');
+
+    const router = createTanstackRouter('/cs/podminky-pouzivani', 'cs');
+    const i18nInstance = createI18nInstance('en');
+    const updateLanguage = rstest.fn();
+    let changeLanguagePromise: Promise<void> | undefined;
+
+    const Harness = () => {
+      const { changeLanguage } = useModernI18n();
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            changeLanguagePromise = changeLanguage('cs');
+          }}
+        >
+          Change language
+        </button>
+      );
+    };
+
+    rendered = await renderWithRuntime(
+      <ModernI18nProvider
+        value={{
+          language: 'en',
+          i18nInstance,
+          languages: ['en', 'cs'],
+          localePathRedirect: true,
+          localisedUrls,
+          updateLanguage,
+        }}
+      >
+        <Harness />
+      </ModernI18nProvider>,
+      createTanstackRuntimeContext(router),
+    );
+
+    const button = rendered.container.querySelector('button');
+    updateLanguage.mockClear();
+
+    await act(async () => {
+      button?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          button: 0,
+        }),
+      );
+      await changeLanguagePromise;
+    });
+
+    expect(updateLanguage).toHaveBeenCalledWith('cs');
+    expect(router.navigate).not.toHaveBeenCalled();
+  });
+
   test('keeps React Router positional replacement when changeLanguage updates the URL', async () => {
     window.history.replaceState(null, '', '/en/terms-of-service');
 
@@ -454,6 +996,67 @@ describe('i18n router adapter', () => {
     });
   });
 
+  test('tracks React Router link and history navigation without Modern i18n consumers', async () => {
+    window.history.replaceState(null, '', '/en');
+    const i18nInstance = i18next.createInstance();
+    await i18nInstance.init({
+      lng: 'en',
+      fallbackLng: 'en',
+      resources: {
+        en: { translation: { languageSwitcher: 'Language' } },
+        cs: { translation: { languageSwitcher: 'Jazyk' } },
+      },
+    });
+
+    const RouteContent = () => {
+      const { t } = useTranslation();
+      return (
+        <main>
+          <span data-testid="translation">{t('languageSwitcher')}</span>
+          <ReactRouterLink to="/cs">Czech</ReactRouterLink>
+        </main>
+      );
+    };
+    const router = createMemoryRouter(
+      [{ path: '/:lang', element: <RouteContent /> }],
+      { initialEntries: ['/en'] },
+    );
+    const originalSubscribe = router.subscribe;
+    router.subscribe = function subscribe(listener) {
+      if (this !== router) {
+        throw new Error('React Router subscribe receiver was not preserved');
+      }
+      return originalSubscribe.call(this, listener);
+    };
+    const runtimeContext = createReactRouterRuntimeContext(router);
+    const { onBeforeRender, wrapRoot } = await collectI18nRuntime(
+      i18nInstance,
+      true,
+    );
+    await onBeforeRender(runtimeContext);
+    const I18nRoot = wrapRoot(() => <RouterProvider router={router} />);
+    rendered = await renderWithRuntime(<I18nRoot />, runtimeContext);
+
+    await act(async () => {
+      rendered?.container
+        .querySelector('a')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await Promise.resolve();
+    });
+    expect(
+      rendered.container.querySelector('[data-testid="translation"]')
+        ?.textContent,
+    ).toBe('Jazyk');
+
+    await act(async () => {
+      await router.navigate(-1);
+    });
+    expect(
+      rendered.container.querySelector('[data-testid="translation"]')
+        ?.textContent,
+    ).toBe('Language');
+  });
+
   test('exposes a language-scoped t function for rendered copy', async () => {
     const i18nInstance = createI18nInstance('en');
     i18nInstance.t = (key: string) => `${i18nInstance.language}:${key}`;

package/tests/type-fixture/fixture-globals.d.ts

@@ -0,0 +1,11 @@
+// The Window._SSR_DATA augmentation lives in @modern-js/runtime's internal
+// core/types module, which this fixture's isolated program never pulls in.
+interface Window {
+  _SSR_DATA?: {
+    data?: {
+      i18nData?: {
+        lng?: string;
+      };
+    };
+  };
+}

package/tests/type-fixture/tsconfig.json

@@ -7,6 +7,7 @@
     "noEmit": true,
     "skipLibCheck": true,
     "lib": ["ESNext", "DOM"],
+    "types": ["node"],
     "paths": {
       "@modern-js/plugin-i18n/runtime": ["../../src/runtime/index.tsx"]
     }