@bleedingdev/modern-js-plugin-i18n 3.9.0-ultramodern.4 → 3.9.0-ultramodern.6

package/src/runtime/core.tsx

@@ -4,12 +4,19 @@ import type {
   BaseBackendOptions,
   BaseLocaleDetectionOptions,
 } from '../shared/type';
+import type { I18nUrlStrategy } from '../shared/urlStrategy';
 import type { I18nInitOptions, I18nInstance } from './i18n';
 import {
   type RuntimeContextWithI18n,
   setupI18nBeforeRender,
 } from './pluginSetup';
-import { createI18nRootWrapper } from './providerComposition';
+import {
+  createI18nRootWrapper,
+  type I18nLanguageSynchronizationProps,
+} from './providerComposition';
+
+export type { I18nLanguageSynchronizationProps } from './providerComposition';
+
 import {
   type LoadReactI18nextIntegration,
   resolveReactI18nextIntegration,
@@ -17,6 +24,7 @@ import {
 import './types';
 
 export type { I18nSdkLoader, I18nSdkLoadOptions } from '../shared/type';
+export type { I18nUrlStrategy } from '../shared/urlStrategy';
 export type {
   I18nInitOptions,
   I18nInstance,
@@ -27,6 +35,13 @@ export type {
   LoadReactI18nextIntegration,
   ReactI18nextIntegration,
 } from './reactI18next';
+export {
+  I18nNavigationProvider,
+  type I18nRouterAdapter,
+  type I18nRouterLinkTarget,
+  useI18nRouterAdapter,
+  useNativeI18nRouterAdapter,
+} from './routerAdapter';
 
 export interface I18nPluginOptions {
   entryName?: string;
@@ -37,6 +52,9 @@ export interface I18nPluginOptions {
   initOptions?: I18nInitOptions;
   htmlLangAttr?: boolean;
   reactI18next?: boolean;
+  urlStrategy?: I18nUrlStrategy;
+  NavigationProvider?: React.ComponentType<React.PropsWithChildren>;
+  LanguageSynchronization?: React.ComponentType<I18nLanguageSynchronizationProps>;
   [key: string]: any;
 }
 
@@ -55,6 +73,9 @@ export const createI18nPlugin =
         backend,
         htmlLangAttr = false,
         reactI18next = true,
+        urlStrategy,
+        NavigationProvider,
+        LanguageSynchronization,
       } = options;
       const {
         localePathRedirect = false,
@@ -63,7 +84,6 @@ export const createI18nPlugin =
         fallbackLanguage = 'en',
         detection,
         ignoreRedirectRoutes,
-        localisedUrls,
       } = localeDetection || {};
       const { enabled: backendEnabled = false } = backend || {};
       let latestI18nInstance: I18nInstance | undefined;
@@ -100,7 +120,9 @@ export const createI18nPlugin =
           languages,
           fallbackLanguage,
           ignoreRedirectRoutes,
-          localisedUrls,
+          urlStrategy,
+          NavigationProvider,
+          LanguageSynchronization,
           getLatestI18nInstance: () => latestI18nInstance,
           getI18nextProvider: () => I18nextProvider,
         }),
@@ -128,12 +150,10 @@ export {
   type LinkProps,
 } from './Link';
 export {
-  canonicalPath,
   type LocalizedPathsConfig,
-  localizePath,
   type UseLocalizedLocationReturn,
   type UseLocalizedPathsReturn,
   useLocalizedLocation,
   useLocalizedPaths,
 } from './localizedPaths';
-export { buildLocalizedUrl, splitUrlTarget } from './utils';
+export { splitUrlTarget } from './utils';

package/src/runtime/hooks.ts

@@ -1,7 +1,7 @@
-import type { LocalisedUrlsOption } from '@modern-js/i18n-runtime-extensions';
 import { isBrowser } from '@modern-js/runtime';
 import type React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
+import type { I18nUrlStrategy } from '../shared/urlStrategy';
 import {
   cacheI18nLanguage,
   changeI18nInstanceLanguage,
@@ -54,9 +54,8 @@ export function createContextValue(
   languages: string[],
   localePathRedirect: boolean,
   ignoreRedirectRoutes: string[] | ((pathname: string) => boolean) | undefined,
-  localisedUrls: LocalisedUrlsOption | undefined,
   setLang: (lang: string) => void,
-  synchronizeLanguage: (lang: string) => void,
+  urlStrategy?: I18nUrlStrategy,
 ) {
   const instance = i18nInstance || createMinimalI18nInstance(lang);
   return {
@@ -66,9 +65,8 @@ export function createContextValue(
     languages,
     localePathRedirect,
     ignoreRedirectRoutes,
-    localisedUrls,
+    urlStrategy,
     updateLanguage: setLang,
-    synchronizeLanguage,
   };
 }
 
@@ -179,7 +177,7 @@ export function useClientSideRedirect(
   languages: string[],
   fallbackLanguage: string,
   ignoreRedirectRoutes?: string[] | ((pathname: string) => boolean),
-  localisedUrls?: LocalisedUrlsOption,
+  urlStrategy?: I18nUrlStrategy,
 ) {
   const urlRef = useRef('');
   const { navigate, location, hasRouter } = useI18nRouterAdapter();
@@ -220,7 +218,14 @@ export function useClientSideRedirect(
     const entryPath = getEntryPath();
     const relativePath = currentPathname.replace(entryPath, '');
 
-    if (shouldIgnoreRedirect(relativePath, languages, ignoreRedirectRoutes)) {
+    if (
+      shouldIgnoreRedirect(
+        relativePath,
+        languages,
+        ignoreRedirectRoutes,
+        urlStrategy,
+      )
+    ) {
       return;
     }
 
@@ -241,7 +246,7 @@ export function useClientSideRedirect(
       relativePath,
       targetLanguage,
       languages,
-      localisedUrls,
+      urlStrategy,
     );
     const newUrl = entryPath + newPath + currentSearch + currentHash;
 
@@ -265,7 +270,7 @@ export function useClientSideRedirect(
     languages,
     fallbackLanguage,
     ignoreRedirectRoutes,
-    localisedUrls,
+    urlStrategy,
   ]);
 }
 

package/src/runtime/localizedPaths.ts

@@ -1,20 +1,17 @@
-import {
-  canonicalTargetPathname,
-  type LocalisedUrlsOption,
-} from '@modern-js/i18n-runtime-extensions';
 import { useMemo } from 'react';
+import type { I18nUrlStrategy } from '../shared/urlStrategy';
 import { useModernI18n } from './context';
 import { useI18nRouterAdapter } from './routerAdapter';
 import { buildLocalizedUrl, splitUrlTarget } from './utils';
 
 export interface LocalizedPathsConfig {
   languages: string[];
-  localisedUrls?: LocalisedUrlsOption;
+  urlStrategy?: I18nUrlStrategy;
 }
 
 /**
  * Localize a canonical, language-agnostic target for the given language:
- * adds the language prefix and applies `localisedUrls` pattern mapping.
+ * adds the language prefix and applies the configured URL strategy.
  * `?search`/`#hash` suffixes are preserved verbatim.
  */
 export const localizePath = (
@@ -22,7 +19,7 @@ export const localizePath = (
   language: string,
   config: LocalizedPathsConfig,
 ): string =>
-  buildLocalizedUrl(pathname, language, config.languages, config.localisedUrls);
+  buildLocalizedUrl(pathname, language, config.languages, config.urlStrategy);
 
 /**
  * Reverse of {@link localizePath}: strip the language prefix and map localized
@@ -34,11 +31,19 @@ export const canonicalPath = (
   config: LocalizedPathsConfig,
 ): string => {
   const { pathname, search, hash } = splitUrlTarget(target);
-  const resolvedPath = canonicalTargetPathname(
-    pathname,
-    config.languages,
-    config.localisedUrls,
-  );
+  if (config.urlStrategy) {
+    return `${config.urlStrategy.canonicalPathname(pathname, config.languages)}${search}${hash}`;
+  }
+  const segments = pathname.split('/').filter(Boolean);
+  if (
+    segments[0] &&
+    config.languages.some(
+      language => language.toLowerCase() === segments[0].toLowerCase(),
+    )
+  ) {
+    segments.shift();
+  }
+  const resolvedPath = `/${segments.join('/')}`;
 
   return `${resolvedPath}${search}${hash}`;
 };
@@ -50,16 +55,16 @@ export interface UseLocalizedPathsReturn {
 
 /**
  * Context-bound versions of {@link localizePath} and {@link canonicalPath} —
- * the plugin configuration (languages, localisedUrls) is read from the i18n
+ * the languages and URL strategy are read from the i18n
  * provider, so apps never copy pattern-matching helpers again.
  */
 export const useLocalizedPaths = (): UseLocalizedPathsReturn => {
-  const { supportedLanguages, localisedUrls } = useModernI18n();
+  const { supportedLanguages, urlStrategy } = useModernI18n();
 
   return useMemo(() => {
     const config: LocalizedPathsConfig = {
       languages: supportedLanguages,
-      localisedUrls,
+      urlStrategy,
     };
 
     return {
@@ -67,7 +72,7 @@ export const useLocalizedPaths = (): UseLocalizedPathsReturn => {
         localizePath(pathname, language, config),
       canonicalPath: (pathname: string) => canonicalPath(pathname, config),
     };
-  }, [supportedLanguages, localisedUrls]);
+  }, [supportedLanguages, urlStrategy]);
 };
 
 export interface UseLocalizedLocationReturn {
@@ -83,7 +88,7 @@ export interface UseLocalizedLocationReturn {
  * language switchers. SSR-safe: the location comes from the router adapter.
  */
 export const useLocalizedLocation = (): UseLocalizedLocationReturn => {
-  const { language, supportedLanguages, localisedUrls } = useModernI18n();
+  const { language, supportedLanguages, urlStrategy } = useModernI18n();
   const { location } = useI18nRouterAdapter();
   const pathname = location?.pathname ?? '/';
   const search = location?.search ?? '';
@@ -92,7 +97,7 @@ export const useLocalizedLocation = (): UseLocalizedLocationReturn => {
   return useMemo(() => {
     const config: LocalizedPathsConfig = {
       languages: supportedLanguages,
-      localisedUrls,
+      urlStrategy,
     };
     const alternates: Record<string, string> = {};
     for (const supportedLanguage of supportedLanguages) {
@@ -105,5 +110,5 @@ export const useLocalizedLocation = (): UseLocalizedLocationReturn => {
       canonical: canonicalPath(pathname, config),
       alternates,
     };
-  }, [language, supportedLanguages, localisedUrls, pathname, search, hash]);
+  }, [language, supportedLanguages, urlStrategy, pathname, search, hash]);
 };

package/src/runtime/providerComposition.tsx

@@ -1,13 +1,14 @@
-import { useLanguageSync } from '@modern-js/i18n-runtime-extensions';
 import { RuntimeContext } from '@modern-js/runtime';
 import { Helmet } from '@modern-js/runtime/head';
 import type React from 'react';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import type { BaseLocaleDetectionOptions } from '../shared/type';
+import type { I18nUrlStrategy } from '../shared/urlStrategy';
 import { ModernI18nProvider } from './context';
 import {
   createContextValue,
   useClientSideRedirect,
+  useLanguageSync,
   useSdkResourcesLoader,
 } from './hooks';
 import type { I18nInstance } from './i18n';
@@ -15,6 +16,38 @@ import { getI18nextInstanceForProvider } from './i18n/instance';
 import type { RuntimeContextWithI18n } from './pluginSetup';
 import { useI18nRouterAdapter } from './routerAdapter';
 
+export interface I18nLanguageSynchronizationProps {
+  i18nInstance: I18nInstance | undefined;
+  localePathRedirect: boolean;
+  languages: string[];
+  pathname: string | undefined;
+  prevLangRef: React.MutableRefObject<string>;
+  setLang: (language: string) => void;
+  children: (
+    synchronizeLanguage: (language: string) => void,
+  ) => React.ReactNode;
+}
+
+const NativeLanguageSynchronization = ({
+  i18nInstance,
+  localePathRedirect,
+  languages,
+  pathname,
+  prevLangRef,
+  setLang,
+  children,
+}: I18nLanguageSynchronizationProps) => {
+  const synchronizeLanguage = useLanguageSync(
+    i18nInstance,
+    localePathRedirect,
+    languages,
+    pathname,
+    prevLangRef,
+    setLang,
+  );
+  return children(synchronizeLanguage);
+};
+
 interface I18nRootWrapperOptions {
   entryName?: string;
   htmlLangAttr: boolean;
@@ -22,14 +55,18 @@ interface I18nRootWrapperOptions {
   languages: string[];
   fallbackLanguage: string;
   ignoreRedirectRoutes?: BaseLocaleDetectionOptions['ignoreRedirectRoutes'];
-  localisedUrls?: BaseLocaleDetectionOptions['localisedUrls'];
+  urlStrategy?: I18nUrlStrategy;
+  NavigationProvider?: React.ComponentType<React.PropsWithChildren>;
+  LanguageSynchronization?: React.ComponentType<I18nLanguageSynchronizationProps>;
   getLatestI18nInstance: () => I18nInstance | undefined;
   getI18nextProvider: () => React.ComponentType<any> | null | undefined;
 }
 
 export const createI18nRootWrapper =
   (options: I18nRootWrapperOptions) => (App: React.ComponentType<any>) => {
-    return (props: Record<string, unknown>) => {
+    const LanguageSynchronization =
+      options.LanguageSynchronization ?? NativeLanguageSynchronization;
+    const I18nRoot = (props: Record<string, unknown>) => {
       const {
         entryName,
         htmlLangAttr,
@@ -37,7 +74,7 @@ export const createI18nRootWrapper =
         languages,
         fallbackLanguage,
         ignoreRedirectRoutes,
-        localisedUrls,
+        urlStrategy,
         getLatestI18nInstance,
         getI18nextProvider,
       } = options;
@@ -69,15 +106,6 @@ export const createI18nRootWrapper =
       }, [lang]);
 
       useSdkResourcesLoader(i18nInstance, setForceUpdate);
-      const synchronizeLanguage = useLanguageSync(
-        i18nInstance,
-        localePathRedirect,
-        languages,
-        location?.pathname,
-        prevLangRef,
-        setLang,
-      );
-
       // Handle client-side redirect for static deployments.
       useClientSideRedirect(
         i18nInstance,
@@ -85,7 +113,7 @@ export const createI18nRootWrapper =
         languages,
         fallbackLanguage,
         ignoreRedirectRoutes,
-        localisedUrls,
+        urlStrategy,
       );
 
       const contextValue = useMemo(
@@ -97,9 +125,8 @@ export const createI18nRootWrapper =
             languages,
             localePathRedirect,
             ignoreRedirectRoutes,
-            localisedUrls,
             setLang,
-            synchronizeLanguage,
+            urlStrategy,
           ),
         [
           lang,
@@ -108,9 +135,8 @@ export const createI18nRootWrapper =
           languages,
           localePathRedirect,
           ignoreRedirectRoutes,
-          localisedUrls,
+          urlStrategy,
           forceUpdate,
-          synchronizeLanguage,
         ],
       );
       const I18nextProvider = getI18nextProvider();
@@ -140,13 +166,35 @@ export const createI18nRootWrapper =
       return (
         <>
           {Boolean(htmlLangAttr) && <Helmet htmlAttributes={{ lang }} />}
-          <ModernI18nProvider
-            i18nextProvider={I18nextProvider}
-            value={contextValue}
+          <LanguageSynchronization
+            i18nInstance={i18nInstance}
+            localePathRedirect={localePathRedirect}
+            languages={languages}
+            pathname={location?.pathname}
+            prevLangRef={prevLangRef}
+            setLang={setLang}
           >
-            {appContent}
-          </ModernI18nProvider>
+            {synchronizeLanguage => (
+              <ModernI18nProvider
+                i18nextProvider={I18nextProvider}
+                value={{ ...contextValue, synchronizeLanguage }}
+              >
+                {appContent}
+              </ModernI18nProvider>
+            )}
+          </LanguageSynchronization>
         </>
       );
     };
+    const { NavigationProvider } = options;
+    if (!NavigationProvider) {
+      return I18nRoot;
+    }
+    return function I18nRootWithNavigation(props: Record<string, unknown>) {
+      return (
+        <NavigationProvider>
+          <I18nRoot {...props} />
+        </NavigationProvider>
+      );
+    };
   };