@bleedingdev/modern-js-plugin-i18n 3.9.0-ultramodern.2 → 3.9.0-ultramodern.21

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/navigation.tsx

@@ -0,0 +1,20 @@
+import { createI18nRouterNavigation } from '@modern-js/i18n-runtime-extensions/router-navigation';
+import {
+  I18nNavigationProvider,
+  type I18nRouterAdapter,
+  useNativeI18nRouterAdapter,
+} from './routerAdapter';
+
+/**
+ * The seam, and only the seam. The selected-router navigation adapter is a
+ * fork subsystem, so it lives in the fork-owned
+ * `@modern-js/i18n-runtime-extensions` and is attached here through the
+ * `NavigationProvider` extension point this package already exposes. The
+ * factory takes this package's own primitives as arguments, so the fork
+ * package never imports back into it and the dependency stays one-way.
+ */
+export const { I18nRouterNavigationProvider, useIntegratedRouterAdapter } =
+  createI18nRouterNavigation<I18nRouterAdapter>({
+    I18nNavigationProvider,
+    useNativeI18nRouterAdapter,
+  });

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>
+      );
+    };
   };