@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.12 → 3.2.0-ultramodern.120

package/tests/routerAdapter.test.tsx

@@ -0,0 +1,452 @@
+import {
+  InternalRuntimeContext,
+  RuntimeContext,
+} from '@modern-js/runtime/context';
+import type React from 'react';
+import type { ComponentType, PropsWithChildren } from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+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';
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const localisedUrls = {
+  '/terms-of-service': {
+    en: '/terms-of-service',
+    cs: '/podminky-pouzivani',
+  },
+};
+
+const requestContext = {
+  request: {},
+  response: {},
+};
+
+const capturedTanstackLinkProps: any[] = [];
+
+const TanstackLink = ({ to, children, ...props }: any) => {
+  capturedTanstackLinkProps.push({ to, ...props });
+  const { prefetch: _prefetch, preload: _preload, ...anchorProps } = props;
+
+  return (
+    <a href={to} data-router-link="tanstack" {...anchorProps}>
+      {children}
+    </a>
+  );
+};
+
+function createI18nInstance(language = 'en'): I18nInstance {
+  return {
+    language,
+    isInitialized: true,
+    init: () => Promise.resolve(undefined),
+    use: () => {},
+    createInstance: () => createI18nInstance(language),
+    setLang: rstest.fn(async () => undefined),
+    changeLanguage: rstest.fn(async () => undefined),
+    services: {},
+    options: {},
+  };
+}
+
+function createRuntimeContext(
+  router: unknown,
+  framework: 'tanstack' | 'react-router',
+) {
+  return {
+    isBrowser: true,
+    requestContext,
+    context: requestContext,
+    routerFramework: framework,
+    routerInstance: router,
+    routerRuntime: {
+      framework,
+      instance: router,
+    },
+    router: {
+      ...(framework === 'tanstack'
+        ? { Link: TanstackLink, useRouter: () => router }
+        : { useLocation: () => undefined, useHref: () => undefined }),
+    },
+  } as any;
+}
+
+function createTanstackRuntimeContext(router: unknown) {
+  return createRuntimeContext(router, 'tanstack');
+}
+
+function createReactRouterRuntimeContext(router: unknown) {
+  return createRuntimeContext(router, 'react-router');
+}
+
+function collectI18nWrapRoot() {
+  let wrapRoot: ((App: ComponentType<any>) => ComponentType<any>) | undefined;
+
+  i18nPlugin({
+    reactI18next: false,
+    localeDetection: {
+      fallbackLanguage: 'en',
+    },
+  }).setup?.({
+    getRuntimeConfig: () => ({}),
+    onBeforeRender: () => undefined,
+    wrapRoot: (callback: (App: ComponentType<any>) => ComponentType<any>) => {
+      wrapRoot = callback;
+    },
+  } as any);
+
+  if (!wrapRoot) {
+    throw new Error('Expected i18n runtime plugin to register wrapRoot');
+  }
+
+  return wrapRoot;
+}
+
+function createTanstackRouter(pathname = '/en/terms-of-service', lang = 'en') {
+  const url = new URL(pathname, 'https://modernjs.test');
+
+  return {
+    navigate: rstest.fn(async () => undefined),
+    state: {
+      location: {
+        pathname: url.pathname,
+        searchStr: url.search,
+        hash: url.hash,
+      },
+      matches: [
+        {
+          params: {
+            lang,
+          },
+        },
+      ],
+    },
+  };
+}
+
+async function renderI18nRoot(node: React.ReactNode) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+
+  await act(async () => {
+    root.render(
+      <RuntimeContext.Provider
+        value={{
+          isBrowser: true,
+          requestContext,
+          context: requestContext,
+        }}
+      >
+        {node}
+      </RuntimeContext.Provider>,
+    );
+  });
+
+  return {
+    container,
+    root,
+  };
+}
+
+async function renderWithRuntime(
+  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}>
+        {node}
+      </InternalRuntimeContext.Provider>,
+    );
+  });
+
+  return {
+    container,
+    root,
+  };
+}
+
+function cleanup(rendered?: { container: HTMLElement; root: Root }) {
+  if (!rendered) {
+    return;
+  }
+  act(() => {
+    rendered.root.unmount();
+  });
+  rendered.container.remove();
+}
+
+describe('i18n runtime wrapRoot', () => {
+  let rendered: { container: HTMLElement; root: Root } | undefined;
+
+  afterEach(() => {
+    cleanup(rendered);
+    rendered = undefined;
+  });
+
+  test('renders children when no root App exists yet', async () => {
+    const wrapRoot = collectI18nWrapRoot();
+    const I18nRoot = wrapRoot(undefined as unknown as ComponentType<any>);
+
+    rendered = await renderI18nRoot(
+      <I18nRoot>
+        <main>router content</main>
+      </I18nRoot>,
+    );
+
+    expect(rendered.container.textContent).toContain('router content');
+  });
+
+  test('preserves App props and children', async () => {
+    const wrapRoot = collectI18nWrapRoot();
+    const App = ({ children, label }: PropsWithChildren<{ label: string }>) => (
+      <main data-label={label}>{children}</main>
+    );
+    const I18nRoot = wrapRoot(App);
+
+    rendered = await renderI18nRoot(
+      <I18nRoot label="root">
+        <span>router content</span>
+      </I18nRoot>,
+    );
+
+    expect(
+      rendered.container.querySelector('main')?.getAttribute('data-label'),
+    ).toBe('root');
+    expect(rendered.container.textContent).toContain('router content');
+  });
+});
+
+describe('i18n react-i18next integration', () => {
+  test('loads the bundled react-i18next integration', async () => {
+    const integration = await getReactI18nextIntegration();
+
+    expect(integration.I18nextProvider).toEqual(expect.any(Function));
+    expect(integration.initReactI18next).toBeDefined();
+  });
+});
+
+describe('i18n router adapter', () => {
+  let rendered: { container: HTMLElement; root: Root } | undefined;
+
+  afterEach(() => {
+    cleanup(rendered);
+    rendered = undefined;
+    capturedTanstackLinkProps.length = 0;
+    window.history.replaceState(null, '', '/');
+  });
+
+  test('uses the TanStack router Link for I18nLink rendering', async () => {
+    const router = createTanstackRouter('/cs/podminky-pouzivani', 'cs');
+    rendered = await renderWithRuntime(
+      <ModernI18nProvider
+        value={{
+          language: 'cs',
+          i18nInstance: createI18nInstance('cs'),
+          languages: ['en', 'cs'],
+          localePathRedirect: true,
+          localisedUrls,
+        }}
+      >
+        <I18nLink to="/terms-of-service" data-testid="terms-link">
+          Terms
+        </I18nLink>
+      </ModernI18nProvider>,
+      createTanstackRuntimeContext(router),
+    );
+
+    const link = rendered.container.querySelector<HTMLAnchorElement>(
+      '[data-testid="terms-link"]',
+    );
+    expect(link?.getAttribute('href')).toBe('/cs/podminky-pouzivani');
+    expect(link?.getAttribute('data-router-link')).toBe('tanstack');
+  });
+
+  test('forwards warmup props through I18nLink with a localized string target', async () => {
+    const router = createTanstackRouter('/cs/podminky-pouzivani', 'cs');
+    rendered = await renderWithRuntime(
+      <ModernI18nProvider
+        value={{
+          language: 'cs',
+          i18nInstance: createI18nInstance('cs'),
+          languages: ['en', 'cs'],
+          localePathRedirect: true,
+          localisedUrls,
+        }}
+      >
+        <I18nLink
+          to="/terms-of-service"
+          data-testid="terms-link"
+          prefetch="viewport"
+          preload="intent"
+        >
+          Terms
+        </I18nLink>
+      </ModernI18nProvider>,
+      createTanstackRuntimeContext(router),
+    );
+
+    const linkProps = capturedTanstackLinkProps.at(-1);
+    expect(linkProps).toMatchObject({
+      to: '/cs/podminky-pouzivani',
+      prefetch: 'viewport',
+      preload: 'intent',
+    });
+  });
+
+  test('does not leak warmup props to fallback anchors', async () => {
+    rendered = await renderI18nRoot(
+      <ModernI18nProvider
+        value={{
+          language: 'cs',
+          i18nInstance: createI18nInstance('cs'),
+          languages: ['en', 'cs'],
+          localePathRedirect: true,
+          localisedUrls,
+        }}
+      >
+        <I18nLink
+          to="/terms-of-service"
+          data-testid="terms-link"
+          prefetch="none"
+          preload={false}
+        >
+          Terms
+        </I18nLink>
+      </ModernI18nProvider>,
+    );
+
+    const link = rendered.container.querySelector<HTMLAnchorElement>(
+      '[data-testid="terms-link"]',
+    );
+    expect(link?.getAttribute('href')).toBe('/cs/podminky-pouzivani');
+    expect(link?.hasAttribute('prefetch')).toBe(false);
+    expect(link?.hasAttribute('preload')).toBe(false);
+  });
+
+  test('uses TanStack-shaped replacement when changeLanguage updates the URL', async () => {
+    window.history.replaceState(
+      null,
+      '',
+      '/en/terms-of-service?from=test#section',
+    );
+
+    const router = createTanstackRouter(
+      '/en/terms-of-service?from=test#section',
+    );
+    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: createI18nInstance('en'),
+          languages: ['en', 'cs'],
+          localePathRedirect: true,
+          localisedUrls,
+        }}
+      >
+        <Harness />
+      </ModernI18nProvider>,
+      createTanstackRuntimeContext(router),
+    );
+
+    const button = rendered.container.querySelector('button');
+
+    await act(async () => {
+      button?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          button: 0,
+        }),
+      );
+      await changeLanguagePromise;
+    });
+
+    expect(router.navigate).toHaveBeenCalledWith({
+      to: '/cs/podminky-pouzivani?from=test#section',
+      replace: true,
+    });
+  });
+
+  test('keeps React Router positional replacement when changeLanguage updates the URL', async () => {
+    window.history.replaceState(null, '', '/en/terms-of-service');
+
+    const router = {
+      navigate: rstest.fn(async () => undefined),
+    };
+    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: createI18nInstance('en'),
+          languages: ['en', 'cs'],
+          localePathRedirect: true,
+          localisedUrls,
+        }}
+      >
+        <Harness />
+      </ModernI18nProvider>,
+      createReactRouterRuntimeContext(router),
+    );
+
+    const button = rendered.container.querySelector('button');
+
+    await act(async () => {
+      button?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          button: 0,
+        }),
+      );
+      await changeLanguagePromise;
+    });
+
+    expect(router.navigate).toHaveBeenCalledWith('/cs/podminky-pouzivani', {
+      replace: true,
+    });
+  });
+});

package/tests/type-fixture/linkTypes.fixture.tsx

@@ -0,0 +1,51 @@
+import { Link } from '@modern-js/plugin-i18n/runtime';
+
+declare module '@modern-js/plugin-i18n/runtime' {
+  interface UltramodernCanonicalRoutes {
+    '/': Record<string, never>;
+    '/talks': Record<string, never>;
+    '/talks/$slug': { slug: string };
+  }
+}
+
+// --- valid uses ---
+
+// Known route with required params: must compile.
+const _a = <Link to="/talks/$slug" params={{ slug: 'x' }} />;
+
+// Known route without params: must compile.
+const _b = <Link to="/talks" />;
+
+// Root route: must compile.
+const _c = <Link to="/" />;
+
+// Canonical path with hash suffix: must compile.
+const _d = <Link to="/#work-with-me" />;
+
+// Canonical path with query and hash: must compile.
+const _e = <Link to="/talks?tag=x#abstract" />;
+
+// Bare hash: must compile.
+const _f = <Link to="#hash" />;
+
+// External HTTPS URL: must compile.
+const _g = <Link to="https://example.com" />;
+
+// Dynamic (computed) value — escape hatch: must compile.
+declare function compute(): string;
+const dynamic: string = compute();
+const _h = <Link to={dynamic} />;
+
+// --- invalid uses (each preceded by @ts-expect-error) ---
+
+// Unknown route.
+// @ts-expect-error
+const _i = <Link to="/talkz" />;
+
+// Known param route but params prop is missing.
+// @ts-expect-error
+const _j = <Link to="/talks/$slug" />;
+
+// Known route without params but params are provided (forbidden).
+// @ts-expect-error
+const _k = <Link to="/talks" params={{ slug: 'x' }} />;

package/tests/type-fixture/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true,
+    "moduleResolution": "Bundler",
+    "module": "Preserve",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "lib": ["ESNext", "DOM"],
+    "paths": {
+      "@modern-js/plugin-i18n/runtime": ["../../src/runtime/index.tsx"]
+    }
+  },
+  "include": ["*.tsx", "*.ts"]
+}

package/dist/esm/rslib-runtime.mjs

@@ -1,18 +0,0 @@
-var __webpack_modules__ = {};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
-__webpack_require__.m = __webpack_modules__;
-(()=>{
-    __webpack_require__.add = function(modules) {
-        Object.assign(__webpack_require__.m, modules);
-    };
-})();
-export { __webpack_require__ };

package/dist/esm-node/rslib-runtime.mjs

@@ -1,19 +0,0 @@
-import "node:module";
-var __webpack_modules__ = {};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
-__webpack_require__.m = __webpack_modules__;
-(()=>{
-    __webpack_require__.add = function(modules) {
-        Object.assign(__webpack_require__.m, modules);
-    };
-})();
-export { __webpack_require__ };