@bleedingdev/modern-js-renderer-octane 3.9.3-ultramodern.1 → 3.9.3-ultramodern.11

package/src/federation.ts

@@ -1,21 +1,31 @@
-import {
-  loadFederatedModule,
-  remoteBrowserAssets,
-} from '@modern-js/renderer-core/federation';
+import { loadFederatedModule } from '@modern-js/renderer-core/federation';
 import {
   type ComponentBody,
   createElement,
+  decodeExternalSnapshot,
+  externalSnapshotBoundary,
+  hookSlots,
   lazy,
   type OctaneNode,
   preinit,
+  publisherBoundary,
   Suspense,
+  serializeExternalSnapshotRequest,
   useContext,
+  useEffect,
 } from 'octane';
 import {
   FederationContext,
   type OctaneFederationScope,
 } from './federation-context';
 
+import { I18nContext } from './i18n/context';
+import {
+  type OctaneWorkerFederationScope,
+  WorkerFederationContext,
+} from './worker-federation-context';
+import { useOctaneWorkerContextKeys } from './worker-federation-contexts';
+
 /** The native component shape exposed by a same-renderer Octane remote. */
 export interface FederatedModule<P extends object> {
   readonly default: ComponentBody<P>;
@@ -26,6 +36,8 @@ export interface FederatedComponentOptions {
   readonly fallback?: () => OctaneNode;
   /** A positive load limit; the server defaults to 3000ms. */
   readonly timeout?: number;
+  /** Explicit registered server projections required by an application remote. */
+  readonly contextKeys?: readonly string[];
 }
 
 function withTimeout<T>(
@@ -56,6 +68,9 @@ function withTimeout<T>(
   });
 }
 
+// This library wrapper is published as plain JavaScript, outside app compilation.
+const publisherRegistrationEffectSlot = Symbol(hookSlots(1));
+
 /**
  * Render a native Octane remote by its `remote/Expose` id or a browser loader.
  * Native Suspense owns server fallbacks, streamed styles and hydration adoption;
@@ -90,11 +105,38 @@ export function federatedComponent<P extends object = Record<string, never>>(
   };
   // Native lazy caches its module. Scope the cache to one application/response,
   // so two hosts using the same component definition cannot share a remote.
-  const components = new WeakMap<OctaneFederationScope, ComponentBody<P>>();
+  const components = new WeakMap<object, ComponentBody<P>>();
+  const workerOwners = new WeakMap<
+    OctaneFederationScope,
+    WeakMap<OctaneWorkerFederationScope, Map<string, object>>
+  >();
 
   return props => {
     const context = useContext(FederationContext) ?? standalone;
-    let Remote = components.get(context);
+    const worker = useContext(WorkerFederationContext);
+    const language = worker
+      ? (useContext(I18nContext)?.language ?? worker.locale)
+      : undefined;
+    const contextKeys = worker
+      ? useOctaneWorkerContextKeys(options.contextKeys)
+      : undefined;
+    let owner: object = context;
+    if (worker) {
+      let scopes = workerOwners.get(context);
+      if (!scopes) workerOwners.set(context, (scopes = new WeakMap()));
+      let variants = scopes.get(worker);
+      if (!variants) scopes.set(worker, (variants = new Map()));
+      // Server snapshots are locale-specific. The hydrated browser publisher
+      // keeps its native owner and receives language changes through context.
+      const key = JSON.stringify([
+        context.server ? language : undefined,
+        contextKeys,
+      ]);
+      let variant = variants.get(key);
+      if (!variant) variants.set(key, (variant = {}));
+      owner = variant;
+    }
+    let Remote = components.get(owner);
     if (!Remote) {
       Remote = lazy(async () => {
         try {
@@ -103,11 +145,101 @@ export function federatedComponent<P extends object = Record<string, never>>(
               'A federatedComponent loader renders in the browser only; use a remote id to server-render it',
             );
           }
-          const module = await withTimeout(
+          if (worker) {
+            if (!id || !language) {
+              throw new Error(
+                'Worker federation requires a remote id and the owning entry locale',
+              );
+            }
+            const separator = id.indexOf('/');
+            const remoteName = id.slice(0, separator);
+            const expose = `./${id.slice(separator + 1)}`;
+            const controller = new AbortController();
+            const signal = worker.signal
+              ? AbortSignal.any([worker.signal, controller.signal])
+              : controller.signal;
+            const timeout =
+              options.timeout ?? (context.server ? 3000 : undefined);
+            let admitted;
+            try {
+              admitted = await withTimeout(
+                worker.transport.admit({
+                  remote: remoteName,
+                  expose,
+                  locale: language,
+                  signal,
+                }),
+                timeout,
+                id,
+              );
+            } finally {
+              // Release this admission waiter, including after its own deadline.
+              controller.abort();
+            }
+            const BrowserRemote = lazy(async () => {
+              const { module, assets } = await loadFederatedModule<
+                FederatedModule<P>
+              >(context.instance, id);
+              if (typeof module?.default !== 'function') {
+                throw new TypeError(
+                  'A federated Octane module must default-export a native component',
+                );
+              }
+              const component = module.default;
+              const Loaded: ComponentBody<P> = (props, scope, extra) => {
+                for (const href of assets?.css ?? []) {
+                  preinit(href, {
+                    as: 'style',
+                    precedence: 'federated',
+                    ...(context.nonce === undefined
+                      ? {}
+                      : { nonce: context.nonce }),
+                  });
+                }
+                return component(props, scope, extra);
+              };
+              return { default: Loaded };
+            });
+            const boundary = externalSnapshotBoundary({
+              authority: admitted.coordinate.native,
+              component: BrowserRemote,
+              contextKeys,
+              timeoutMs: timeout,
+              async snapshot(request, signal) {
+                const response = await worker.transport.request({
+                  remote: remoteName,
+                  expose,
+                  locale: language,
+                  payload: serializeExternalSnapshotRequest(request),
+                  signal,
+                });
+                return decodeExternalSnapshot(response.payload);
+              },
+            });
+            const Loaded: ComponentBody<P> = props => {
+              // A Worker server does not execute BrowserRemote. Register the
+              // exact admitted expose's extracted CSS in this active native
+              // render; nested snapshots carry these hints through native head.
+              for (const href of admitted.styles) {
+                preinit(href, {
+                  as: 'style',
+                  precedence: 'federated',
+                  ...(context.nonce === undefined
+                    ? {}
+                    : { nonce: context.nonce }),
+                });
+              }
+              return createElement(boundary, props);
+            };
+            return { default: Loaded };
+          }
+          const { module, assets } = await withTimeout(
             Promise.resolve().then(() =>
               id
                 ? loadFederatedModule<FederatedModule<P>>(context.instance, id)
-                : (remote as () => Promise<FederatedModule<P>>)(),
+                : (remote as () => Promise<FederatedModule<P>>)().then(
+                    module => ({ module, assets: undefined }),
+                  ),
             ),
             options.timeout ?? (context.server ? 3000 : undefined),
             id ?? 'loader',
@@ -117,17 +249,34 @@ export function federatedComponent<P extends object = Record<string, never>>(
               'A federated Octane module must default-export a native component',
             );
           }
-          const assets =
-            id && context.instance
-              ? remoteBrowserAssets(context.instance, id)
-              : undefined;
           if (context.server && !assets) {
             throw new Error(
               `Cannot server-render ${id}: the host has no browser assets for this remote`,
             );
           }
-          const component = module.default;
+          // Native publisher ownership admits this exact compiled component's
+          // signal generations. Keep the boundary in the context-scoped lazy
+          // cache so props and compatible hot updates retain its live owner.
+          const component = publisherBoundary(module.default, {
+            publisherKey: id ?? 'ultramodern:browser-loader',
+          });
           const Loaded: ComponentBody<P> = props => {
+            // A development runtime installs this hook on the actual owning
+            // host. Registration follows the native mounted lifetime; routing
+            // alone grants no replacement authority to a remote name.
+            useEffect(
+              () => {
+                if (context.server || !id || !context.instance) return;
+                const register = Reflect.get(
+                  context.instance,
+                  Symbol.for('ultramodern.federation.browser-dev-boundary.v1'),
+                );
+                if (typeof register !== 'function') return;
+                return register(id, module.default, component);
+              },
+              [],
+              publisherRegistrationEffectSlot,
+            );
             // Resource APIs require an active native render. Late styles travel
             // in Octane's resource carrier ahead of the remote's HTML segment.
             for (const href of assets?.css ?? []) {
@@ -144,11 +293,11 @@ export function federatedComponent<P extends object = Record<string, never>>(
           return { default: Loaded };
         } catch (error) {
           // A later mount or ErrorBoundary reset may retry a failed load.
-          if (!context.server) components.delete(context);
+          if (!context.server) components.delete(owner);
           throw error;
         }
       });
-      components.set(context, Remote);
+      components.set(owner, Remote);
     }
     return createElement(Suspense, {
       fallback: options.fallback,

package/src/i18n/I18nProvider.ts

@@ -1,6 +1,6 @@
-import { createElement, hookSlots, useEffect, useState } from 'octane';
+import { createElement, hookSlots, useSyncExternalStore } from 'octane';
 import { I18nContext } from './context';
-import type { I18nContextValue, I18nInstanceLike } from './types';
+import type { I18nContextValue } from './types';
 
 export interface I18nProviderProps extends Omit<I18nContextValue, 'language'> {
   children?: unknown;
@@ -22,27 +22,18 @@ export interface I18nProviderProps extends Omit<I18nContextValue, 'language'> {
  */
 // Plain TypeScript is not rewritten by the Octane compiler, so each hook call
 // site carries its own stable slot, like `OctaneRouterRoot`.
-const languageStateSlot = Symbol(hookSlots(1));
-const languageSubscriptionSlot = Symbol(hookSlots(1));
+const languageStoreSlot = Symbol(hookSlots(1));
 
 export function I18nProvider(props: I18nProviderProps) {
-  const [language, setLanguage] = useState(
-    () => props.instance.language,
-    languageStateSlot,
-  );
-
-  useEffect(
-    () => {
-      const instance: I18nInstanceLike = props.instance;
-      setLanguage(instance.language);
-      const handleLanguageChanged = (lng: string) => setLanguage(lng);
-      instance.on?.('languageChanged', handleLanguageChanged);
-      return () => {
-        instance.off?.('languageChanged', handleLanguageChanged);
-      };
+  const instance = props.instance;
+  const language = useSyncExternalStore(
+    notify => {
+      instance.on?.('languageChanged', notify);
+      return () => instance.off?.('languageChanged', notify);
     },
-    [props.instance],
-    languageSubscriptionSlot,
+    () => instance.language,
+    () => instance.language,
+    languageStoreSlot,
   );
 
   const value: I18nContextValue = {

package/src/i18n/LocalizedLink.ts

@@ -1,10 +1,10 @@
 import {
-  canonicalPath,
   configuredLanguage,
   localizePath,
 } from '@modern-js/i18n-runtime-extensions/paths';
 import { createElement, hookSlots, type OctaneNode, useContext } from 'octane';
 import {
+  type AnyRouter,
   Link,
   type LinkComponentProps,
   useLocation,
@@ -14,41 +14,23 @@ import { I18nContext } from './context';
 
 // Plain TypeScript is not rewritten by the Octane compiler: router hooks take
 // their stable slot explicitly.
-const locationSlot = Symbol(hookSlots(1));
+const targetLocationSlot = Symbol(hookSlots(1));
 
-export interface LocalizedLinkProps {
+export interface LocalizedLinkProps
+  extends Omit<
+    LinkComponentProps<'a', AnyRouter, string, string>,
+    'to' | 'mask' | 'href' | 'publicHref' | '_fromLocation'
+  > {
   /** A canonical, language-agnostic target, e.g. `/products/red-shoe`. */
   to: string;
   /** Localize for a specific language instead of the current one. */
   language?: string;
-  children?: unknown;
-  class?: string;
-  activeProps?: LinkComponentProps<'a'>['activeProps'];
-  inactiveProps?: LinkComponentProps<'a'>['inactiveProps'];
-  activeOptions?: LinkComponentProps<'a'>['activeOptions'];
-  replace?: boolean;
-  preload?: LinkComponentProps<'a'>['preload'];
 }
 
 /**
- * A thin wrapper over the native Octane router `Link`
- * (`@octanejs/tanstack-router`'s precompiled `Link.tsrx`) that localizes a
- * canonical `to` for the current (or an explicit) language before handing it
- * to the real link — the same contract as `@modern-js/plugin-i18n`'s React
- * `Link`. It resolves the href itself via the shared pathname helpers, so it
- * works with or without the router's i18n `rewrite`. Every link, including
- * one to another language, is the native `Link`: navigation, preloading and
- * active state stay with the router.
- *
- * Under the i18n `rewrite` the router matches canonical paths and localizes
- * outgoing locations to the current language, so a link to another language
- * routes to the canonical `to` and publishes the target language's URL as a
- * route mask (the rewrite keeps a mask's explicit language). The entry's
- * router language synchronization (`syncWithRouter`) switches the i18next
- * instance from the navigated URL, as it does for history navigation.
- *
- * No JSX: built with `createElement`, matching this package's existing
- * style (see `src/routes.ts`).
+ * The native router owns client navigation, preloading and active state. Its mask
+ * keeps the canonical route while publishing the selected language URL;
+ * the entry's i18n router subscription synchronizes the instance on navigation.
  */
 export function LocalizedLink(props: LocalizedLinkProps): OctaneNode {
   const context = useContext(I18nContext);
@@ -58,55 +40,47 @@ export function LocalizedLink(props: LocalizedLinkProps): OctaneNode {
     );
   }
   const router = useRouter();
-
-  // An explicit language must be configured: it becomes the locale prefix.
+  const location = useLocation(undefined, targetLocationSlot);
+  const { language: requestedLanguage, to, children, ...options } = props;
   const language =
-    props.language === undefined
+    requestedLanguage === undefined
       ? context.language
-      : configuredLanguage(props.language, context.languages);
-  const href = localizePath(props.to, language, {
-    languages: [...context.languages],
-    localisedUrls: context.localisedUrls,
-  });
-  const crossLanguage = language !== context.language;
-  const rewrite = Boolean(router.options.rewrite);
+      : configuredLanguage(requestedLanguage, context.languages);
+  const externalTarget = to.startsWith('//') || URL.canParse(to);
+  const pathname = externalTarget
+    ? to
+    : localizePath(
+        router.buildLocation({
+          to,
+          from: options.from,
+          params: options.params,
+          unsafeRelative: options.unsafeRelative,
+          _fromLocation: location,
+        }).pathname,
+        language,
+        {
+          languages: [...context.languages],
+          localisedUrls: context.localisedUrls,
+        },
+      );
 
   return createElement(
-    Link,
+    Link<AnyRouter, string, string, string, string>,
     {
-      // Octane's `Link` builds its location from `to` alone. Under the i18n
-      // router rewrite the router matches canonical paths and localizes the
-      // public href itself; without it, the localized path is the route path.
-      to: rewrite ? props.to : href,
-      ...(rewrite && crossLanguage ? { mask: { to: href } } : {}),
-      ...(crossLanguage ? { hreflang: language } : {}),
-      class: props.class,
-      activeProps: props.activeProps,
-      inactiveProps: props.inactiveProps,
-      activeOptions: props.activeOptions,
-      replace: props.replace,
-      preload: props.preload,
+      ...options,
+      to: router.options.rewrite ? to : pathname,
+      ...(router.options.rewrite && !externalTarget
+        ? {
+            mask: {
+              to: pathname,
+              inheritSearch: true,
+              hash: options.hash,
+              state: options.state,
+            },
+          }
+        : {}),
+      ...(language === context.language ? {} : { hreflang: language }),
     },
-    props.children,
-  );
-}
-
-/**
- * Language-invariant active check: `to="/products"` is active whether the
- * current location is `/en/products` or `/produkty` under a mapped locale.
- */
-export function useIsLocalizedActive(canonicalTarget: string): boolean {
-  const context = useContext(I18nContext);
-  if (!context) {
-    throw new Error(
-      '[renderer-octane] useIsLocalizedActive was used outside of an I18nProvider.',
-    );
-  }
-  const location = useLocation(undefined, locationSlot);
-  return (
-    canonicalPath(location.pathname, {
-      languages: [...context.languages],
-      localisedUrls: context.localisedUrls,
-    }) === canonicalTarget
+    children,
   );
 }

package/src/i18n/context.ts

@@ -6,7 +6,7 @@ export type { I18nContextValue, I18nInstanceLike } from './types';
 /**
  * Octane's `createContext<T>(defaultValue: T)` requires a default (unlike
  * Solid 2's default-less form), so a missing provider is detected by
- * checking for `null` in `useI18n`/`useIsLocalizedActive` instead — the same
+ * checking for `null` in `useI18n`/`LocalizedLink` instead — the same
  * guard shape `@modern-js/plugin-i18n`'s React `ModernI18nContext` uses.
  */
 export const I18nContext = createContext<I18nContextValue | null>(null);

package/src/i18n/index.ts

@@ -22,11 +22,7 @@ export {
 } from '@modern-js/i18n-runtime-extensions/urlRewrite';
 export { I18nContext } from './context';
 export { I18nProvider, type I18nProviderProps } from './I18nProvider';
-export {
-  LocalizedLink,
-  type LocalizedLinkProps,
-  useIsLocalizedActive,
-} from './LocalizedLink';
+export { LocalizedLink, type LocalizedLinkProps } from './LocalizedLink';
 export {
   type OctaneLatestLanguageSyncOptions,
   useLatestLanguageSync,