@bleedingdev/modern-js-i18n-integration 0.0.0 → 3.9.0-ultramodern.5

package/src/federation/boundary.tsx

@@ -0,0 +1,129 @@
+import {
+  type FederatedI18nBoundaryProps,
+  getActualI18nextInstance,
+  ModernI18nContext,
+  ModernI18nProvider,
+  ReactI18nextProviderContext,
+} from '@modern-js/plugin-i18n/runtime/consumer';
+import { type FC, useContext, useMemo } from 'react';
+
+export type { FederatedI18nBoundaryProps } from '@modern-js/plugin-i18n/runtime/consumer';
+
+/**
+ * Keeps a federated surface's translation resources inside its delivery unit.
+ * The host supplies only the active language; the remote owns and versions the
+ * resources used below this boundary.
+ */
+export const FederatedI18nBoundary: FC<FederatedI18nBoundaryProps> = ({
+  children,
+  defaultNamespace,
+  fallbackLanguage,
+  resources,
+  supportedLanguages,
+}) => {
+  const parent = useContext(ModernI18nContext);
+  const I18nextProvider = useContext(ReactI18nextProviderContext);
+  if (!parent) {
+    throw new Error(
+      'FederatedI18nBoundary must be used within ModernI18nProvider',
+    );
+  }
+
+  const languages =
+    supportedLanguages ?? parent.languages ?? Object.keys(resources);
+  const scopedInstance = useMemo(() => {
+    const parentInstance = getActualI18nextInstance(parent.i18nInstance);
+    const clone = parentInstance.cloneInstance?.({
+      defaultNS: defaultNamespace,
+      fallbackLng: fallbackLanguage ?? languages[0] ?? parent.language,
+      forkResourceStore: true,
+      initImmediate: false,
+      lng: parent.language,
+      ns: [defaultNamespace],
+      resources,
+      supportedLngs: languages,
+    });
+    if (!clone) {
+      throw new Error(
+        'FederatedI18nBoundary requires an i18n instance with cloneInstance support',
+      );
+    }
+    const resourceStore = clone.store;
+    const parentResourceStore = parentInstance.store;
+    const sharesNestedResourceState = Object.entries(
+      resourceStore?.data ?? {},
+    ).some(([language, namespaces]) => {
+      const parentNamespaces = parentResourceStore?.data?.[language];
+      return (
+        namespaces === parentNamespaces ||
+        Object.entries(namespaces).some(
+          ([namespace, resource]) =>
+            resource !== null &&
+            typeof resource === 'object' &&
+            resource === parentNamespaces?.[namespace],
+        )
+      );
+    });
+    if (
+      clone === parentInstance ||
+      resourceStore === parentResourceStore ||
+      resourceStore?.data === parentResourceStore?.data ||
+      sharesNestedResourceState
+    ) {
+      throw new Error(
+        'FederatedI18nBoundary cloneInstance did not isolate the host resource store',
+      );
+    }
+    if (
+      !resourceStore?.addResourceBundle ||
+      !clone.removeResourceBundle ||
+      !resourceStore.data
+    ) {
+      throw new Error(
+        'FederatedI18nBoundary requires an isolated mutable i18n resource store',
+      );
+    }
+    for (const [language, namespaces] of Object.entries(resourceStore.data)) {
+      for (const namespace of Object.keys(namespaces)) {
+        clone.removeResourceBundle(language, namespace);
+      }
+    }
+    for (const [language, namespaces] of Object.entries(resources)) {
+      for (const [namespace, resource] of Object.entries(namespaces)) {
+        resourceStore.addResourceBundle(
+          language,
+          namespace,
+          resource as Record<string, string>,
+          true,
+          true,
+        );
+      }
+    }
+    return clone;
+  }, [
+    defaultNamespace,
+    fallbackLanguage,
+    languages,
+    parent.i18nInstance,
+    parent.language,
+    resources,
+  ]);
+  const value = useMemo(
+    () => ({
+      ...parent,
+      i18nInstance: scopedInstance,
+      language: parent.language,
+      languages,
+    }),
+    [languages, parent, scopedInstance],
+  );
+
+  const scopedContent = (
+    <ModernI18nProvider value={value}>{children}</ModernI18nProvider>
+  );
+  return I18nextProvider ? (
+    <I18nextProvider i18n={scopedInstance}>{scopedContent}</I18nextProvider>
+  ) : (
+    scopedContent
+  );
+};

package/src/federation/registration.ts

@@ -0,0 +1,8 @@
+import type { RuntimePluginAPI } from '@modern-js/plugin/runtime';
+import { FederatedI18nBoundary } from './boundary';
+
+export function registerFederatedI18nBoundary(api: RuntimePluginAPI<{}>): void {
+  api.resolveComponent((component, { name }) =>
+    name === 'i18n.FederatedI18nBoundary' ? FederatedI18nBoundary : component,
+  );
+}

package/src/languageSynchronization.tsx

@@ -0,0 +1,23 @@
+import { useLanguageSync } from '@modern-js/i18n-runtime-extensions';
+import type { I18nLanguageSynchronizationProps } from '@modern-js/plugin-i18n/runtime/no-react-i18next';
+
+/** Bind the shared controller to this native provider's instance and state. */
+export const I18nLanguageSynchronization = ({
+  i18nInstance,
+  localePathRedirect,
+  languages,
+  pathname,
+  prevLangRef,
+  setLang,
+  children,
+}: I18nLanguageSynchronizationProps) => {
+  const synchronizeLanguage = useLanguageSync(
+    i18nInstance,
+    localePathRedirect,
+    languages,
+    pathname,
+    prevLangRef,
+    setLang,
+  );
+  return children(synchronizeLanguage);
+};

package/src/navigation.tsx

@@ -0,0 +1,399 @@
+import {
+  I18nNavigationProvider,
+  type I18nRouterAdapter,
+  type I18nRouterLinkTarget,
+  useNativeI18nRouterAdapter,
+} from '@modern-js/plugin-i18n/runtime/no-react-i18next';
+import { isBrowser, RuntimeContext } from '@modern-js/runtime';
+import {
+  InternalRuntimeContext,
+  type TInternalRuntimeContext,
+  type TRuntimeContext,
+} from '@modern-js/runtime/context';
+import { getRouterRuntimeState } from '@modern-js/runtime-extensions/router-state';
+import type React from 'react';
+import { useCallback, useContext, useSyncExternalStore } from 'react';
+
+type I18nRouterFramework = 'react-router' | 'tanstack' | string;
+
+interface I18nRouterLocation {
+  pathname: string;
+  search: string;
+  hash: string;
+}
+
+interface I18nRouterNavigateOptions {
+  replace?: boolean;
+  state?: unknown;
+}
+
+type I18nRouterNavigate = (
+  href: string,
+  options?: I18nRouterNavigateOptions,
+) => void | Promise<void>;
+
+type I18nRouterLink = React.ComponentType<{
+  to: string;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}>;
+
+type RuntimeContextWithRouter = TRuntimeContext & {
+  router?: {
+    useInRouterContext?: () => boolean;
+    useRouter?: (options?: { warn?: boolean }) => unknown;
+    useLocation?: () => unknown;
+    useNavigate?: () => I18nRouterNavigate;
+    useParams?: () => Record<string, string>;
+    useHref?: () => unknown;
+    Link?: I18nRouterLink;
+  };
+};
+
+type InternalRuntimeContextWithRouter = TInternalRuntimeContext & {
+  router?: RuntimeContextWithRouter['router'];
+};
+
+type RouterInstance = {
+  navigate?: (...args: any[]) => unknown;
+  state?: {
+    location?: unknown;
+    matches?: Array<{ params?: Record<string, string> }>;
+  };
+  stores?: {
+    location?: {
+      get?: () => unknown;
+      subscribe?: (listener: () => void) => () => void;
+    };
+    matches?: {
+      get?: () => Array<{ params?: Record<string, string> }>;
+    };
+  };
+  subscribe?:
+    | ((listener: () => void) => () => void)
+    | ((eventType: string, listener: () => void) => () => void);
+};
+
+const normalizeUrlPart = (value: unknown, prefix: '?' | '#'): string => {
+  if (typeof value !== 'string' || !value) {
+    return '';
+  }
+  return value.startsWith(prefix) ? value : `${prefix}${value}`;
+};
+
+const normalizeLocation = (location: unknown): I18nRouterLocation | null => {
+  if (!location || typeof location !== 'object') {
+    return null;
+  }
+
+  const locationValue = location as {
+    pathname?: unknown;
+    search?: unknown;
+    searchStr?: unknown;
+    hash?: unknown;
+  };
+
+  if (typeof locationValue.pathname !== 'string') {
+    return null;
+  }
+
+  return {
+    pathname: locationValue.pathname,
+    search: normalizeUrlPart(
+      typeof locationValue.search === 'string'
+        ? locationValue.search
+        : locationValue.searchStr,
+      '?',
+    ),
+    hash: normalizeUrlPart(locationValue.hash, '#'),
+  };
+};
+
+const getWindowLocation = (): I18nRouterLocation | null => {
+  if (!isBrowser()) {
+    return null;
+  }
+
+  return {
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+  };
+};
+
+const getRouterFramework = (
+  runtimeContext: RuntimeContextWithRouter,
+  internalContext: InternalRuntimeContextWithRouter,
+  inReactRouter: boolean,
+): I18nRouterFramework | undefined => {
+  const framework =
+    getRouterRuntimeState(internalContext)?.framework ||
+    getRouterRuntimeState(runtimeContext)?.framework;
+
+  if (framework) {
+    return framework;
+  }
+
+  if (internalContext.router?.useRouter || runtimeContext.router?.useRouter) {
+    return 'tanstack';
+  }
+
+  if (
+    internalContext.router?.useLocation ||
+    internalContext.router?.useHref ||
+    runtimeContext.router?.useLocation ||
+    runtimeContext.router?.useHref
+  ) {
+    return 'react-router';
+  }
+
+  if (inReactRouter) {
+    return 'react-router';
+  }
+
+  return undefined;
+};
+
+const getRouterInstance = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+): RouterInstance | null => {
+  if (contextRouter) {
+    return contextRouter;
+  }
+
+  const router = getRouterRuntimeState(internalContext)?.instance;
+  if (!router || typeof router !== 'object') {
+    return null;
+  }
+  return router as RouterInstance;
+};
+
+const getRouterStateLocation = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+): I18nRouterLocation | null => {
+  const router = getRouterInstance(internalContext, contextRouter);
+  return (
+    normalizeLocation(router?.stores?.location?.get?.()) ||
+    normalizeLocation(router?.state?.location)
+  );
+};
+
+const getRouterParams = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+): Record<string, string> => {
+  const router = getRouterInstance(internalContext, contextRouter);
+  const matches = router?.stores?.matches?.get?.() || router?.state?.matches;
+  if (!Array.isArray(matches)) {
+    return {};
+  }
+
+  return matches.reduce<Record<string, string>>((params, match) => {
+    if (match?.params) {
+      Object.assign(params, match.params);
+    }
+    return params;
+  }, {});
+};
+
+const getRouterSnapshot = (
+  internalContext: InternalRuntimeContextWithRouter,
+  contextRouter?: RouterInstance | null,
+) => {
+  const location = getRouterStateLocation(internalContext, contextRouter);
+  const params = getRouterParams(internalContext, contextRouter);
+  return JSON.stringify([
+    location?.pathname ?? '',
+    location?.search ?? '',
+    location?.hash ?? '',
+    Object.entries(params).sort(([left], [right]) => left.localeCompare(right)),
+  ]);
+};
+
+const useIntegratedRouterAdapter = (): I18nRouterAdapter => {
+  const runtimeContext = useContext(RuntimeContext) as RuntimeContextWithRouter;
+  const internalContext = useContext(
+    InternalRuntimeContext,
+  ) as InternalRuntimeContextWithRouter;
+  const routerApi = internalContext.router || runtimeContext.router;
+  const native = useNativeI18nRouterAdapter();
+  const inReactRouter = native.hasRouter;
+  const reactRouterNavigate = native.navigate;
+  const reactRouterLocation = inReactRouter ? native.location : null;
+  const reactRouterParams = native.params;
+  const framework = getRouterFramework(
+    runtimeContext,
+    internalContext,
+    inReactRouter,
+  );
+  const contextUseRouter =
+    !inReactRouter && framework === 'tanstack'
+      ? internalContext.router?.useRouter || runtimeContext.router?.useRouter
+      : undefined;
+  const contextRouter = contextUseRouter
+    ? (contextUseRouter({ warn: false }) as RouterInstance | null)
+    : null;
+  const hasRouter =
+    framework === 'tanstack' ||
+    framework === 'react-router' ||
+    Boolean(reactRouterNavigate);
+
+  const subscribeToRouter = useCallback(
+    (update: () => void) => {
+      const router = getRouterInstance(internalContext, contextRouter);
+      if (!router) {
+        return () => undefined;
+      }
+
+      const unsubscribers: Array<() => void> = [];
+
+      if (
+        framework === 'react-router' &&
+        !inReactRouter &&
+        typeof router.subscribe === 'function'
+      ) {
+        const subscribe = router.subscribe as (
+          this: RouterInstance,
+          listener: () => void,
+        ) => () => void;
+        const unsubscribe = subscribe.call(router, update);
+        if (typeof unsubscribe === 'function') {
+          unsubscribers.push(unsubscribe);
+        }
+      }
+
+      if (
+        framework === 'tanstack' &&
+        typeof router.stores?.location?.subscribe === 'function'
+      ) {
+        const unsubscribe = router.stores.location.subscribe(update);
+        if (typeof unsubscribe === 'function') {
+          unsubscribers.push(unsubscribe);
+        }
+      }
+
+      if (framework === 'tanstack' && typeof router.subscribe === 'function') {
+        const subscribe = router.subscribe as (
+          this: RouterInstance,
+          eventType: string,
+          listener: () => void,
+        ) => () => void;
+        for (const eventType of ['onBeforeNavigate', 'onBeforeLoad']) {
+          const unsubscribe = subscribe.call(router, eventType, update);
+          if (typeof unsubscribe === 'function') {
+            unsubscribers.push(unsubscribe);
+          }
+        }
+      }
+
+      return () => {
+        for (const unsubscribe of unsubscribers) {
+          unsubscribe();
+        }
+      };
+    },
+    [contextRouter, framework, inReactRouter, internalContext],
+  );
+  const getSnapshot = useCallback(
+    () => getRouterSnapshot(internalContext, contextRouter),
+    [contextRouter, internalContext],
+  );
+  useSyncExternalStore(subscribeToRouter, getSnapshot, getSnapshot);
+
+  const navigate = useCallback<I18nRouterNavigate>(
+    (href, options) => {
+      const router = getRouterInstance(internalContext, contextRouter);
+      const activeFramework = getRouterFramework(
+        runtimeContext,
+        internalContext,
+        inReactRouter,
+      );
+
+      if (activeFramework === 'tanstack') {
+        if (typeof router?.navigate === 'function') {
+          return router.navigate({
+            to: href,
+            replace: options?.replace,
+            ...(options?.state === undefined ? {} : { state: options.state }),
+          }) as void | Promise<void>;
+        }
+        throw new Error('TanStack router instance is not available.');
+      }
+
+      if (reactRouterNavigate) {
+        return reactRouterNavigate(href, options);
+      }
+
+      if (activeFramework === 'react-router') {
+        if (typeof router?.navigate === 'function') {
+          return router.navigate(href, options) as void | Promise<void>;
+        }
+        throw new Error('React Router instance is not available.');
+      }
+    },
+    [
+      contextRouter,
+      internalContext,
+      inReactRouter,
+      reactRouterNavigate,
+      runtimeContext,
+    ],
+  );
+
+  const location =
+    (reactRouterLocation
+      ? normalizeLocation(reactRouterLocation)
+      : getRouterStateLocation(internalContext, contextRouter)) ||
+    getWindowLocation();
+  const params = inReactRouter
+    ? (reactRouterParams as Record<string, string>)
+    : getRouterParams(internalContext, contextRouter);
+  const Link =
+    framework === 'tanstack'
+      ? internalContext.router?.Link || runtimeContext.router?.Link || null
+      : framework === 'react-router' || inReactRouter
+        ? (routerApi?.Link ?? null)
+        : null;
+
+  return {
+    framework,
+    hasRouter,
+    location,
+    navigate: hasRouter ? navigate : null,
+    Link,
+    params,
+    ...(framework === 'tanstack'
+      ? { createLinkProps: createTanstackLinkProps }
+      : {}),
+  };
+};
+
+const createTanstackLinkProps = (target: I18nRouterLinkTarget) => {
+  const preload =
+    target.preload !== undefined
+      ? target.preload
+      : target.prefetch === 'none'
+        ? false
+        : target.prefetch;
+  return {
+    to: target.pathname,
+    ...(target.search ? { search: target.search } : {}),
+    ...(target.hash ? { hash: target.hash } : {}),
+    ...(target.hashScrollIntoView === undefined
+      ? {}
+      : { hashScrollIntoView: target.hashScrollIntoView }),
+    ...(preload === undefined ? {} : { preload }),
+  };
+};
+
+/** Supplies the actual selected router; native links still render its Link. */
+export const I18nRouterNavigationProvider = ({
+  children,
+}: React.PropsWithChildren) => {
+  const value = useIntegratedRouterAdapter();
+  return (
+    <I18nNavigationProvider value={value}>{children}</I18nNavigationProvider>
+  );
+};

package/src/options.ts

@@ -0,0 +1,18 @@
+import type { LocalisedUrlsOption } from '@modern-js/i18n-runtime-extensions';
+import type { I18nPluginOptions as NativeRuntimeOptions } from '@modern-js/plugin-i18n/runtime/no-react-i18next';
+import type { I18nPluginOptions as NativeServerOptions } from '@modern-js/plugin-i18n/server';
+
+export type IntegratedLocaleDetectionOptions = NonNullable<
+  NativeRuntimeOptions['localeDetection']
+> & {
+  localisedUrls?: LocalisedUrlsOption;
+  localeDetectionByEntry?: Record<string, IntegratedLocaleDetectionOptions>;
+};
+
+export type I18nPluginOptions = NativeRuntimeOptions & {
+  localeDetection?: IntegratedLocaleDetectionOptions;
+};
+
+export type I18nServerPluginOptions = NativeServerOptions & {
+  localeDetection: IntegratedLocaleDetectionOptions;
+};

package/src/runtime-no-react-i18next.ts

@@ -0,0 +1,5 @@
+import { i18nPlugin as nativeI18nPlugin } from '@modern-js/plugin-i18n/runtime/no-react-i18next';
+import { composeI18nPlugin } from './runtimeComposition';
+
+export const i18nPlugin = composeI18nPlugin(nativeI18nPlugin);
+export default i18nPlugin;

package/src/runtime.ts

@@ -0,0 +1,5 @@
+import { i18nPlugin as nativeI18nPlugin } from '@modern-js/plugin-i18n/runtime';
+import { composeI18nPlugin } from './runtimeComposition';
+
+export const i18nPlugin = composeI18nPlugin(nativeI18nPlugin);
+export default i18nPlugin;

package/src/runtimeComposition.ts

@@ -0,0 +1,33 @@
+import type { I18nPluginOptions as NativeI18nPluginOptions } from '@modern-js/plugin-i18n/runtime/no-react-i18next';
+import type { RuntimePlugin } from '@modern-js/runtime';
+import { registerFederatedI18nBoundary } from './federation/registration';
+import { I18nLanguageSynchronization } from './languageSynchronization';
+import { I18nRouterNavigationProvider } from './navigation';
+import type { I18nPluginOptions } from './options';
+import { createI18nUrlStrategy } from './urlStrategy';
+
+export const composeI18nPlugin =
+  (nativeI18nPlugin: (options: NativeI18nPluginOptions) => RuntimePlugin) =>
+  (options: I18nPluginOptions = {}): RuntimePlugin => {
+    const {
+      localisedUrls,
+      localeDetectionByEntry: _entryOptions,
+      ...nativeLocaleDetection
+    } = options.localeDetection ?? {};
+    const native = nativeI18nPlugin({
+      ...options,
+      localeDetection: nativeLocaleDetection,
+      urlStrategy: options.urlStrategy ?? createI18nUrlStrategy(localisedUrls),
+      NavigationProvider:
+        options.NavigationProvider ?? I18nRouterNavigationProvider,
+      LanguageSynchronization:
+        options.LanguageSynchronization ?? I18nLanguageSynchronization,
+    });
+    return {
+      ...native,
+      setup(api) {
+        registerFederatedI18nBoundary(api);
+        return native.setup?.(api);
+      },
+    };
+  };

package/src/server.ts

@@ -0,0 +1,27 @@
+import { getLocaleDetectionOptions } from '@modern-js/plugin-i18n/config';
+import { i18nServerPlugin as nativeI18nServerPlugin } from '@modern-js/plugin-i18n/server';
+import type {
+  I18nServerPluginOptions,
+  IntegratedLocaleDetectionOptions,
+} from './options';
+import { createI18nUrlStrategy } from './urlStrategy';
+
+export const i18nServerPlugin = (options: I18nServerPluginOptions) =>
+  nativeI18nServerPlugin({
+    ...options,
+    resolveUrlStrategy:
+      options.resolveUrlStrategy ??
+      (entryName =>
+        createI18nUrlStrategy(
+          options.localeDetection
+            ? (
+                getLocaleDetectionOptions(
+                  entryName,
+                  options.localeDetection,
+                ) as IntegratedLocaleDetectionOptions
+              ).localisedUrls
+            : undefined,
+        )),
+  });
+
+export default i18nServerPlugin;

package/src/urlStrategy.ts

@@ -0,0 +1,19 @@
+import {
+  canonicalTargetPathname,
+  isDefaultLocaleRedirectSkipPath,
+  type LocalisedUrlsOption,
+  localiseTargetPathname,
+} from '@modern-js/i18n-runtime-extensions';
+import type { I18nUrlStrategy } from '@modern-js/plugin-i18n/runtime/no-react-i18next';
+
+/** Each integration owns its map; no process-wide configuration is installed. */
+export const createI18nUrlStrategy = (
+  localisedUrls?: LocalisedUrlsOption,
+): I18nUrlStrategy => ({
+  localizePathname: (pathname, language, languages) =>
+    localiseTargetPathname(pathname, language, [...languages], localisedUrls),
+  canonicalPathname: (pathname, languages) =>
+    canonicalTargetPathname(pathname, [...languages], localisedUrls),
+  shouldSkipRedirect: (pathname, languages) =>
+    isDefaultLocaleRedirectSkipPath(pathname, [...languages]),
+});

package/README.md

@@ -1,3 +0,0 @@
-# @bleedingdev/modern-js-i18n-integration
-
-This 0.0.0 version only registers the package name so npm trusted publishing can be configured. It contains no runtime implementation. Use the subsequent UltraModern.js release, published from the repository workflow with provenance.