@bleedingdev/modern-js-plugin-i18n 3.2.0-ultramodern.9 → 3.2.0-ultramodern.90

package/tests/localisedUrls.test.ts

@@ -0,0 +1,312 @@
+import type { NestedRouteForCli } from '@modern-js/types';
+import { describe, expect, test } from '@rstest/core';
+import {
+  collectApiPrefixes,
+  i18nServerPlugin,
+  matchesApiPrefix,
+} from '../src/server';
+import {
+  applyLocalisedUrlsToRoutes,
+  resolveLocalisedPath,
+  validateLocalisedUrls,
+} from '../src/shared/localisedUrls';
+
+const createRoute = (
+  path: string,
+  children?: NestedRouteForCli[],
+): NestedRouteForCli => ({
+  id: path,
+  path,
+  type: 'nested',
+  origin: 'file-system',
+  routeType: children ? 'layout' : 'page',
+  _component: `${path}.tsx`,
+  children,
+});
+
+const createRequestContext = (pathname: string) =>
+  ({
+    req: {
+      url: `http://localhost${pathname}`,
+    },
+  }) as any;
+
+describe('localisedUrls', () => {
+  test('requires every localisable route path to define every language', () => {
+    const routes = [createRoute(':lang', [createRoute('terms-of-service')])];
+
+    expect(() =>
+      validateLocalisedUrls(routes, ['en', 'cs'], {
+        '/terms-of-service': {
+          en: '/terms-of-service',
+        },
+      }),
+    ).toThrow('missing languages: cs');
+  });
+
+  test('expands route paths to localised aliases', () => {
+    const routes = [
+      createRoute(':lang', [
+        createRoute('terms-of-service'),
+        createRoute('products', [createRoute(':slug')]),
+      ]),
+    ];
+
+    const localisedRoutes = applyLocalisedUrlsToRoutes(routes, ['en', 'cs'], {
+      '/terms-of-service': {
+        en: '/terms-of-service',
+        cs: '/podminky-pouzivani',
+      },
+      '/products': {
+        en: '/products',
+        cs: '/produkty',
+      },
+      '/products/:slug': {
+        en: '/products/:slug',
+        cs: '/produkty/:slug',
+      },
+    });
+
+    const localeRoute = localisedRoutes[0] as NestedRouteForCli;
+    expect(localeRoute.children?.map(route => route.path)).toEqual([
+      'terms-of-service',
+      'podminky-pouzivani',
+      'products',
+      'produkty',
+    ]);
+
+    const productRoutes = localeRoute.children?.filter(
+      route => route.path === 'products' || route.path === 'produkty',
+    );
+    expect(productRoutes?.[0].children?.map(route => route.path)).toEqual([
+      ':slug',
+    ]);
+    expect(productRoutes?.[1].children?.map(route => route.path)).toEqual([
+      ':slug',
+    ]);
+  });
+
+  test('expands flat locale-prefixed route paths with canonical keys', () => {
+    const routes = [
+      createRoute('/:lang/about'),
+      createRoute('/:lang/products/:slug'),
+    ];
+
+    const localisedRoutes = applyLocalisedUrlsToRoutes(routes, ['en', 'cs'], {
+      '/about': {
+        en: '/about',
+        cs: '/o-nas',
+      },
+      '/products/:slug': {
+        en: '/products/:slug',
+        cs: '/produkty/:slug',
+      },
+    });
+
+    expect(localisedRoutes.map(route => route.path)).toEqual([
+      ':lang/about',
+      ':lang/o-nas',
+      ':lang/products/:slug',
+      ':lang/produkty/:slug',
+    ]);
+  });
+
+  test('resolves current localized path to the target language', () => {
+    const localisedUrls = {
+      '/terms-of-service': {
+        en: '/terms-of-service',
+        cs: '/podminky-pouzivani',
+      },
+      '/products/:slug': {
+        en: '/products/:slug',
+        cs: '/produkty/:slug',
+      },
+    };
+
+    expect(
+      resolveLocalisedPath(
+        '/terms-of-service',
+        'cs',
+        ['en', 'cs'],
+        localisedUrls,
+      ),
+    ).toBe('/podminky-pouzivani');
+    expect(
+      resolveLocalisedPath('/produkty/cervena-bota', 'en', ['en', 'cs'], {
+        ...localisedUrls,
+        '/products/:slug': {
+          en: '/products/:slug',
+          cs: '/produkty/:slug',
+        },
+      }),
+    ).toBe('/products/cervena-bota');
+  });
+
+  test('resolves optional route params', () => {
+    const localisedUrls = {
+      '/products/:slug?': {
+        en: '/products/:slug?',
+        cs: '/produkty/:slug?',
+      },
+    };
+
+    expect(
+      resolveLocalisedPath('/products', 'cs', ['en', 'cs'], localisedUrls),
+    ).toBe('/produkty');
+    expect(
+      resolveLocalisedPath(
+        '/produkty/cervena-bota',
+        'en',
+        ['en', 'cs'],
+        localisedUrls,
+      ),
+    ).toBe('/products/cervena-bota');
+  });
+
+  test('resolves nested optional route params with translated ancestors', () => {
+    const localisedUrls = {
+      '/checkout': {
+        en: '/checkout',
+        cs: '/pokladna',
+      },
+      '/checkout/thank-you': {
+        en: '/checkout/thank-you',
+        cs: '/pokladna/dekujeme',
+      },
+      '/checkout/thank-you/:orderId?': {
+        en: '/checkout/thank-you/:orderId?',
+        cs: '/pokladna/dekujeme/:orderId?',
+      },
+    };
+
+    expect(
+      resolveLocalisedPath(
+        '/checkout/thank-you',
+        'cs',
+        ['en', 'cs'],
+        localisedUrls,
+      ),
+    ).toBe('/pokladna/dekujeme');
+    expect(
+      resolveLocalisedPath(
+        '/pokladna/dekujeme/ABC-123',
+        'en',
+        ['en', 'cs'],
+        localisedUrls,
+      ),
+    ).toBe('/checkout/thank-you/ABC-123');
+  });
+});
+
+describe('i18n server API prefix skips', () => {
+  test('collects API route prefixes and normalized BFF config prefixes', () => {
+    expect(
+      collectApiPrefixes(
+        [
+          { entryName: 'main', isApi: false, urlPath: '/' },
+          { isApi: true, urlPath: '/bff-api' },
+          { isApi: true, urlPath: '/rpc/*' },
+          { isApi: true, urlPath: '/' },
+          { isApi: true },
+        ],
+        ['bff-api/', '/internal-api'],
+      ),
+    ).toEqual(['/bff-api', '/rpc', '/internal-api']);
+  });
+
+  test('matches API prefixes by exact path or slash-delimited segment', () => {
+    const prefixes = ['/bff-api'];
+
+    expect(matchesApiPrefix('/bff-api', prefixes)).toBe(true);
+    expect(matchesApiPrefix('/bff-api/ping', prefixes)).toBe(true);
+    expect(matchesApiPrefix('/bff-api-v2', prefixes)).toBe(false);
+    expect(matchesApiPrefix('/bff-api-v2/ping', prefixes)).toBe(false);
+  });
+
+  test('skips language detector and redirect middleware for API routes', async () => {
+    const middlewares: any[] = [];
+    const routes = [
+      { entryName: 'main', entryPath: '', urlPath: '/' },
+      { entryPath: '', isApi: true, urlPath: '/bff-api' },
+    ];
+    let prepare: (() => void) | undefined;
+
+    i18nServerPlugin({
+      localeDetection: {
+        fallbackLanguage: 'en',
+        languages: ['en', 'cs'],
+        localePathRedirect: true,
+      },
+      staticRoutePrefixes: [],
+    }).setup({
+      getServerConfig: () => ({}),
+      getServerContext: () => ({ middlewares, routes }),
+      onPrepare: fn => {
+        prepare = fn;
+      },
+    } as any);
+
+    prepare?.();
+
+    const detectorMiddleware = middlewares.find(
+      middleware => middleware.name === 'i18n-language-detector',
+    );
+    const redirectMiddleware = middlewares.find(
+      middleware => middleware.name === 'i18n-server-middleware',
+    );
+
+    expect(detectorMiddleware).toBeDefined();
+    expect(redirectMiddleware).toBeDefined();
+
+    for (const middleware of [detectorMiddleware, redirectMiddleware]) {
+      let nextCalls = 0;
+      const response = await middleware.handler(
+        createRequestContext('/bff-api/ping'),
+        async () => {
+          nextCalls++;
+        },
+      );
+
+      expect(response).toBeUndefined();
+      expect(nextCalls).toBe(1);
+    }
+  });
+
+  test('uses /api as the BFF prefix when BFF config is present without prefix', async () => {
+    const middlewares: any[] = [];
+    const routes = [{ entryName: 'main', entryPath: '', urlPath: '/' }];
+    let prepare: (() => void) | undefined;
+
+    i18nServerPlugin({
+      localeDetection: {
+        fallbackLanguage: 'en',
+        languages: ['en', 'cs'],
+        localePathRedirect: true,
+      },
+      staticRoutePrefixes: [],
+    }).setup({
+      getServerConfig: () => ({ bff: {} }),
+      getServerContext: () => ({ middlewares, routes }),
+      onPrepare: fn => {
+        prepare = fn;
+      },
+    } as any);
+
+    prepare?.();
+
+    const redirectMiddleware = middlewares.find(
+      middleware => middleware.name === 'i18n-server-middleware',
+    );
+
+    let nextCalls = 0;
+    const response = await redirectMiddleware.handler(
+      createRequestContext('/api/ping'),
+      async () => {
+        nextCalls++;
+      },
+    );
+
+    expect(response).toBeUndefined();
+    expect(nextCalls).toBe(1);
+  });
+});

package/tests/routerAdapter.test.tsx

@@ -0,0 +1,382 @@
+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 TanstackLink = ({ to, children, ...props }: any) => (
+  <a href={to} data-router-link="tanstack" {...props}>
+    {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;
+    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('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/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__ };