@bleedingdev/modern-js-renderer-octane 3.9.3-ultramodern.7 → 3.9.3-ultramodern.9

package/dist/cjs/worker-federation-context.js

@@ -0,0 +1,63 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    WorkerFederationApplication: ()=>WorkerFederationApplication,
+    WorkerFederationContext: ()=>WorkerFederationContext,
+    WorkerFederationRoot: ()=>WorkerFederationRoot
+});
+const external_octane_namespaceObject = require("octane");
+const external_federation_context_js_namespaceObject = require("./federation-context.js");
+const WorkerFederationContext = (0, external_octane_namespaceObject.createContext)(null);
+function WorkerFederationRoot(props) {
+    return (0, external_octane_namespaceObject.createElement)(WorkerFederationContext, {
+        value: props.scope,
+        children: props.children
+    });
+}
+function WorkerFederationApplication(props) {
+    return (0, external_octane_namespaceObject.createElement)(WorkerFederationRoot, {
+        scope: props.scope,
+        children: props.federation ? (0, external_octane_namespaceObject.createElement)(external_federation_context_js_namespaceObject.FederationApplication, {
+            scope: props.federation,
+            application: props.application
+        }) : (0, external_octane_namespaceObject.createElement)(props.application.default, props.application.props)
+    });
+}
+exports.WorkerFederationApplication = __webpack_exports__.WorkerFederationApplication;
+exports.WorkerFederationContext = __webpack_exports__.WorkerFederationContext;
+exports.WorkerFederationRoot = __webpack_exports__.WorkerFederationRoot;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "WorkerFederationApplication",
+    "WorkerFederationContext",
+    "WorkerFederationRoot"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/worker-federation-contexts.js

@@ -0,0 +1,97 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    OCTANE_WORKER_CONTEXT_KEYS: ()=>OCTANE_WORKER_CONTEXT_KEYS,
+    getOctaneWorkerRouterRewrite: ()=>getOctaneWorkerRouterRewrite,
+    registerOctaneWorkerContext: ()=>registerOctaneWorkerContext,
+    registerOctaneWorkerRouterRewrite: ()=>registerOctaneWorkerRouterRewrite,
+    useOctaneWorkerContextKeys: ()=>useOctaneWorkerContextKeys
+});
+const external_octane_namespaceObject = require("octane");
+const OCTANE_WORKER_CONTEXT_KEYS = Object.freeze({
+    router: 'ultramodern.octane.router-context.v1',
+    match: 'ultramodern.octane.match-context.v1',
+    i18n: 'ultramodern.octane.i18n-context.v1'
+});
+const builtinKeys = Object.values(OCTANE_WORKER_CONTEXT_KEYS);
+const contexts = new Map();
+function registerOctaneWorkerContext(context, codec) {
+    const { key, isProvided } = codec;
+    if (!builtinKeys.includes(key) || 'function' != typeof isProvided) throw new TypeError('Invalid Octane Worker builtin context codec');
+    const unregister = (0, external_octane_namespaceObject.registerExternalSnapshotContext)(context, codec);
+    const hasProvider = ()=>isProvided((0, external_octane_namespaceObject.useContext)(context));
+    contexts.set(key, hasProvider);
+    return ()=>{
+        if (contexts.get(key) !== hasProvider) return;
+        unregister();
+        contexts.delete(key);
+    };
+}
+function useOctaneWorkerContextKeys(explicit = []) {
+    const selected = [];
+    for (const key of builtinKeys){
+        const hasProvider = contexts.get(key);
+        if (hasProvider?.() && !explicit.includes(key)) selected.push(key);
+    }
+    return [
+        ...selected,
+        ...explicit
+    ];
+}
+let routerRewrite;
+function registerOctaneWorkerRouterRewrite(codec) {
+    if (routerRewrite || 'function' != typeof codec.capture || 'function' != typeof codec.restore) throw new TypeError('Invalid or duplicate Octane Worker router rewrite codec');
+    const captured = Object.freeze({
+        capture: codec.capture,
+        restore: codec.restore
+    });
+    routerRewrite = captured;
+    return ()=>{
+        if (routerRewrite === captured) routerRewrite = void 0;
+    };
+}
+function getOctaneWorkerRouterRewrite() {
+    return routerRewrite;
+}
+exports.OCTANE_WORKER_CONTEXT_KEYS = __webpack_exports__.OCTANE_WORKER_CONTEXT_KEYS;
+exports.getOctaneWorkerRouterRewrite = __webpack_exports__.getOctaneWorkerRouterRewrite;
+exports.registerOctaneWorkerContext = __webpack_exports__.registerOctaneWorkerContext;
+exports.registerOctaneWorkerRouterRewrite = __webpack_exports__.registerOctaneWorkerRouterRewrite;
+exports.useOctaneWorkerContextKeys = __webpack_exports__.useOctaneWorkerContextKeys;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "OCTANE_WORKER_CONTEXT_KEYS",
+    "getOctaneWorkerRouterRewrite",
+    "registerOctaneWorkerContext",
+    "registerOctaneWorkerRouterRewrite",
+    "useOctaneWorkerContextKeys"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/worker-federation.js

@@ -0,0 +1,97 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createNativeWorkerFederationRuntime: ()=>createNativeWorkerFederationRuntime
+});
+const worker_federation_namespaceObject = require("@modern-js/renderer-core/worker-federation");
+const server_namespaceObject = require("octane/server");
+const external_federation_context_js_namespaceObject = require("./federation-context.js");
+const external_worker_federation_context_js_namespaceObject = require("./worker-federation-context.js");
+function isNativeWorkerComponent(value) {
+    return 'function' == typeof value;
+}
+function createNativeWorkerFederationRuntime(options, compiler) {
+    const { resources } = options;
+    const bindings = options.bindings;
+    const transport = resources.workerFederationServices?.length ? (0, worker_federation_namespaceObject.createWorkerFederationTransport)({
+        admitRendererContract: compiler.admitRendererContract,
+        services: resources.workerFederationServices.map((service)=>{
+            const binding = bindings && Reflect.get(bindings, service.binding);
+            if (!binding || 'object' != typeof binding && 'function' != typeof binding || !('fetch' in binding) || 'function' != typeof binding.fetch) throw new Error(`Native Worker federation requires service binding ${service.binding}.`);
+            return {
+                ...service,
+                fetch: binding.fetch.bind(binding)
+            };
+        })
+    }) : void 0;
+    let handle;
+    if (resources.workerFederation) {
+        if (!compiler.registry || !resources.workerFederationManifestUrl) throw new Error('Native Worker federation requires its compiled expose registry and pinned manifest URL.');
+        handle = compiler.registry.initialize({
+            publication: resources.workerFederation.worker,
+            manifestUrl: resources.workerFederationManifestUrl,
+            admitRendererContract: compiler.admitRendererContract,
+            admitNativeRequest (payload, { admitted, signal }) {
+                const initializeContexts = transport ? (provide, request)=>{
+                    provide(external_federation_context_js_namespaceObject.FederationContext, (0, external_federation_context_js_namespaceObject.createFederationScope)(void 0, true, request.nonce));
+                    provide(external_worker_federation_context_js_namespaceObject.WorkerFederationContext, {
+                        transport,
+                        locale: admitted.locale,
+                        signal
+                    });
+                } : void 0;
+                return (0, server_namespaceObject.prepareExternalSnapshotRequest)(payload, {
+                    authority: admitted.coordinate.native,
+                    signal,
+                    ...initializeContexts ? {
+                        initializeContexts
+                    } : {}
+                });
+            },
+            releaseNativeRequest: server_namespaceObject.releasePreparedExternalSnapshotRequest,
+            async renderNativeSnapshot (module, request, { admitted }) {
+                const component = module && 'object' == typeof module && 'default' in module ? module.default : void 0;
+                if (!isNativeWorkerComponent(component)) throw new TypeError(`Native Worker expose ${admitted.expose} requires a default Octane component.`);
+                return (0, server_namespaceObject.serializeExternalSnapshot)(await (0, server_namespaceObject.renderExternalSnapshot)(component, request));
+            }
+        });
+    }
+    return {
+        transport,
+        handleRequest: handle ?? (()=>Promise.resolve(void 0))
+    };
+}
+exports.createNativeWorkerFederationRuntime = __webpack_exports__.createNativeWorkerFederationRuntime;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "createNativeWorkerFederationRuntime"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/esm/client.mjs

@@ -3,6 +3,7 @@ import { createRoot, hydrateRoot } from "octane";
 import { bootstrapStreamedSignalHydration } from "octane/hydration/streamed-signals";
 import { assertNativeHydrationBuildId, assertOctaneIdentity, readOctaneDocumentBootstrap } from "./bootstrap.mjs";
 import { FederationApplication, createFederationScope } from "./federation-context.mjs";
+import { WorkerFederationApplication } from "./worker-federation-context.mjs";
 const roots = new WeakMap();
 const documents = new WeakMap();
 const moduleResources = new WeakMap();
@@ -186,7 +187,11 @@ function createHandle(input) {
             const nextRelease = claimModuleResources(next);
             releaseModule = nextRelease;
             try {
-                input.federation ? input.root.render(FederationApplication, {
+                input.workerFederation ? input.root.render(WorkerFederationApplication, {
+                    scope: input.workerFederation,
+                    federation: input.federation,
+                    application: next
+                }) : input.federation ? input.root.render(FederationApplication, {
                     scope: input.federation,
                     application: next
                 }) : input.root.render(next.default, next.props);
@@ -204,6 +209,7 @@ function createHandle(input) {
             disposed = true;
             input.signal?.removeEventListener('abort', onAbort);
             cleanupResources([
+                ()=>input.retireWorkerFederation?.(),
                 ()=>input.root.unmount(),
                 ()=>releaseModule(),
                 ()=>input.bridge?.dispose(),
@@ -227,6 +233,12 @@ function createHandle(input) {
 }
 async function startApplication(input, release, hydration) {
     const errors = observeRootErrors(input.options);
+    const workerController = input.workerFederation ? new AbortController() : void 0;
+    let workerFederation;
+    const retireWorkerFederation = ()=>cleanupResources([
+            ()=>workerController?.abort(new DOMException('The Worker federation document was disposed', 'AbortError')),
+            ()=>workerFederation?.transport.dispose()
+        ]);
     let bridge;
     let root;
     let releaseModule;
@@ -237,6 +249,7 @@ async function startApplication(input, release, hydration) {
         if (cleaned) return;
         cleaned = true;
         cleanupResources([
+            retireWorkerFederation,
             ()=>root?.unmount(),
             ()=>releaseModule?.(),
             ()=>bridge?.dispose(),
@@ -244,7 +257,24 @@ async function startApplication(input, release, hydration) {
         ]);
     };
     try {
-        const federation = input.federation ? createFederationScope(input.federation, false) : void 0;
+        if (input.workerFederation && workerController) {
+            const signal = AbortSignal.any([
+                workerController.signal,
+                ...input.signal ? [
+                    input.signal
+                ] : []
+            ]);
+            const scope = 'function' == typeof input.workerFederation ? input.workerFederation(signal) : input.workerFederation;
+            workerFederation = {
+                ...scope,
+                signal: scope.signal ? AbortSignal.any([
+                    signal,
+                    scope.signal
+                ]) : signal
+            };
+        }
+        if (workerFederation && !hydration && !input.documentId) throw new Error('Worker federation requires the trusted document identity before application loading');
+        const federation = input.federation || workerFederation ? createFederationScope(input.federation, false) : void 0;
         if (hydration) {
             const { document, documentId } = hydration;
             bridge = bootstrapStreamedSignalHydration({
@@ -259,16 +289,34 @@ async function startApplication(input, release, hydration) {
         const application = loaded.application;
         releaseModule = loaded.releaseModule;
         input.signal?.throwIfAborted();
-        if (bridge) root = hydrateRoot(input.container, federation ? FederationApplication : application.default, federation ? {
+        if (bridge) root = hydrateRoot(input.container, workerFederation ? WorkerFederationApplication : federation ? FederationApplication : application.default, workerFederation ? {
+            scope: workerFederation,
+            federation,
+            application
+        } : federation ? {
             scope: federation,
             application
         } : application.props, {
             ...errors.options,
-            signalOwner: bridge.signalOwner
+            signalOwner: bridge.signalOwner,
+            externalSnapshots: {
+                documentId: hydration.documentId
+            }
         });
         else {
-            root = createRoot(input.container, errors.options);
-            federation ? root.render(FederationApplication, {
+            root = createRoot(input.container, {
+                ...errors.options,
+                ...input.documentId ? {
+                    externalSnapshots: {
+                        documentId: input.documentId
+                    }
+                } : {}
+            });
+            workerFederation ? root.render(WorkerFederationApplication, {
+                scope: workerFederation,
+                federation,
+                application
+            }) : federation ? root.render(FederationApplication, {
                 scope: federation,
                 application
             }) : root.render(application.default, application.props);
@@ -282,6 +330,8 @@ async function startApplication(input, release, hydration) {
             release,
             bridge,
             federation,
+            workerFederation,
+            retireWorkerFederation,
             ...void 0 === input.signal ? {} : {
                 signal: input.signal
             },

package/dist/esm/entry-application.mjs

@@ -1,6 +1,7 @@
 import { createMemoryHistory, createRouter } from "@octanejs/tanstack-router";
 import { createElement } from "octane";
 import { I18nProvider } from "./i18n/I18nProvider.mjs";
+import { associateOctaneFileRouteSnapshot } from "./router-external-snapshot.mjs";
 import { createFileSystemRouteTree } from "./routes.mjs";
 function componentView(component, i18n) {
     const App = component;
@@ -14,7 +15,8 @@ function componentView(component, i18n) {
 }
 const octaneRouterFactory = {
     routeTree: (routes, modules, options)=>createFileSystemRouteTree(routes, modules, options),
-    router: ({ location, ...options })=>createRouter({
+    router: ({ location, ...options })=>{
+        const router = createRouter({
             ...options,
             ...location ? {
                 origin: location.origin,
@@ -24,7 +26,10 @@ const octaneRouterFactory = {
                     ]
                 })
             } : {}
-        })
+        });
+        associateOctaneFileRouteSnapshot(router);
+        return router;
+    }
 };
 function localizedRouterRoot(Root) {
     return ({ router, i18n })=>createElement(I18nProvider, {

package/dist/esm/entry-client.mjs

@@ -9,6 +9,7 @@ function startNativeClient(options) {
     startNativeClientEntry(options, {
         readBootstrap: (document, identity)=>readOctaneDocumentBootstrap(document, identity, nativeHydrationBuildId),
         createRouter: (application, routerOptions)=>createNativeRouter(application, routerOptions, octaneRouterFactory),
+        disposeRouter: (router)=>router.history.destroy(),
         async prepareRouter (router, hydrating, signal) {
             if (hydrating) await prepareOctaneRouterHydration(router, {
                 signal
@@ -21,6 +22,8 @@ function startNativeClient(options) {
                 identity,
                 nativeHydrationBuildId,
                 federation: options.federation,
+                workerFederation: options.workerFederation,
+                documentId: bootstrap?.documentId,
                 signal,
                 load: async ()=>{
                     const view = await load();

package/dist/esm/entry-server.mjs

@@ -3,7 +3,7 @@ import { createNativeServerEntry } from "@modern-js/renderer-core/entry-server";
 import { createNativeRouter } from "@modern-js/renderer-core/router";
 import { componentView, localizedRouterRoot, octaneRouterFactory } from "./entry-application.mjs";
 import { validateOctaneModuleManifest } from "./manifest.mjs";
-import { OctaneRouterServer, createOctaneRequestHandler, createOctaneRouterInjection, createSsrStreamResponse } from "./router-server.mjs";
+import { OctaneRouterServer, createOctaneRequestHandler, createSsrStreamResponse, getSsrStatus } from "./router-server.mjs";
 import { renderOctaneApplication, renderOctaneCSRDocument } from "./server.mjs";
 const OCTANE_DOCUMENT_FIELDS = new Set([
     'content-language',
@@ -34,13 +34,15 @@ function entry_server_createNativeServerEntry(options) {
                 session,
                 document
             }),
-        renderComponent: ({ session }, component, document, i18n)=>renderOctaneApplication({
+        renderComponent: ({ session, workerFederation }, component, document, i18n)=>renderOctaneApplication({
                 session,
                 App: componentView(component, i18n),
                 document,
-                federation: options.federation
+                federation: options.federation,
+                workerFederation,
+                workerFederationLocale: options.workerFederationLocale
             }),
-        async renderRoutes ({ request, context: { session }, router, outcomes, document, forbiddenValues, i18n }) {
+        async renderRoutes ({ request, context: { session, workerFederation }, router, outcomes, document, forbiddenValues, i18n }) {
             const response = await createOctaneRequestHandler({
                 request,
                 session,
@@ -50,7 +52,7 @@ function entry_server_createNativeServerEntry(options) {
                 }
             })(async ({ router, responseHeaders })=>{
                 const metadata = mergeDataResponseMetadata(outcomes, {
-                    status: router.state.statusCode ?? 200
+                    status: getSsrStatus(router)
                 });
                 const policy = dataMetadataToDocumentPolicy({
                     ...metadata,
@@ -73,7 +75,9 @@ function entry_server_createNativeServerEntry(options) {
                     },
                     document,
                     federation: options.federation,
-                    injection: createOctaneRouterInjection(router, session)
+                    workerFederation,
+                    workerFederationLocale: options.workerFederationLocale,
+                    router
                 });
                 return createSsrStreamResponse(router, rendered);
             });
@@ -83,4 +87,5 @@ function entry_server_createNativeServerEntry(options) {
         }
     });
 }
+export { createNativeWorkerFederationRuntime } from "./worker-federation.mjs";
 export { entry_server_createNativeServerEntry as createNativeServerEntry, withOctaneDocumentFields };

package/dist/esm/federation.mjs

@@ -1,6 +1,9 @@
-import { loadFederatedModule, remoteBrowserAssets } from "@modern-js/renderer-core/federation";
-import { Suspense, createElement, lazy, preinit, useContext } from "octane";
+import { loadFederatedModule } from "@modern-js/renderer-core/federation";
+import { Suspense, createElement, decodeExternalSnapshot, externalSnapshotBoundary, hookSlots, lazy, preinit, publisherBoundary, serializeExternalSnapshotRequest, useContext, useEffect } from "octane";
 import { FederationContext } from "./federation-context.mjs";
+import { I18nContext } from "./i18n/context.mjs";
+import { WorkerFederationContext } from "./worker-federation-context.mjs";
+import { useOctaneWorkerContextKeys } from "./worker-federation-contexts.mjs";
 function withTimeout(promise, timeout, label) {
     if (void 0 === timeout) return promise;
     return new Promise((resolve, reject)=>{
@@ -15,6 +18,7 @@ function withTimeout(promise, timeout, label) {
         });
     });
 }
+const publisherRegistrationEffectSlot = Symbol(hookSlots(1));
 function federatedComponent(remote, options = {}) {
     if ('string' == typeof remote ? !/^[^/]+\/.+/u.test(remote) : 'function' != typeof remote) throw new TypeError("federatedComponent requires a remote id such as 'remote/Widget' or a loader");
     if (void 0 !== options.timeout && (!Number.isFinite(options.timeout) || options.timeout <= 0)) throw new TypeError('federatedComponent timeout must be a positive number of milliseconds');
@@ -24,19 +28,117 @@ function federatedComponent(remote, options = {}) {
         server: "u" < typeof document
     };
     const components = new WeakMap();
+    const workerOwners = new WeakMap();
     return (props)=>{
         const context = useContext(FederationContext) ?? standalone;
-        let Remote = components.get(context);
+        const worker = useContext(WorkerFederationContext);
+        const language = worker ? useContext(I18nContext)?.language ?? worker.locale : void 0;
+        const contextKeys = worker ? useOctaneWorkerContextKeys(options.contextKeys) : void 0;
+        let owner = 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());
+            const key = JSON.stringify([
+                language,
+                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 {
                     if (context.server && !id) throw new Error('A federatedComponent loader renders in the browser only; use a remote id to server-render it');
-                    const module = await withTimeout(Promise.resolve().then(()=>id ? loadFederatedModule(context.instance, id) : remote()), options.timeout ?? (context.server ? 3000 : void 0), id ?? 'loader');
+                    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 : void 0);
+                        let admitted;
+                        try {
+                            admitted = await withTimeout(worker.transport.admit({
+                                remote: remoteName,
+                                expose,
+                                locale: language,
+                                signal
+                            }), timeout, id);
+                        } finally{
+                            controller.abort();
+                        }
+                        const BrowserRemote = lazy(async ()=>{
+                            const { module, assets } = await loadFederatedModule(context.instance, id);
+                            if ('function' != typeof module?.default) throw new TypeError('A federated Octane module must default-export a native component');
+                            const component = module.default;
+                            const Loaded = (props, scope, extra)=>{
+                                for (const href of assets?.css ?? [])preinit(href, {
+                                    as: 'style',
+                                    precedence: 'federated',
+                                    ...void 0 === context.nonce ? {} : {
+                                        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 = (props)=>{
+                            for (const href of admitted.styles)preinit(href, {
+                                as: 'style',
+                                precedence: 'federated',
+                                ...void 0 === context.nonce ? {} : {
+                                    nonce: context.nonce
+                                }
+                            });
+                            return createElement(boundary, props);
+                        };
+                        return {
+                            default: Loaded
+                        };
+                    }
+                    const { module, assets } = await withTimeout(Promise.resolve().then(()=>id ? loadFederatedModule(context.instance, id) : remote().then((module)=>({
+                                module,
+                                assets: void 0
+                            }))), options.timeout ?? (context.server ? 3000 : void 0), id ?? 'loader');
                     if ('function' != typeof module?.default) throw new TypeError('A federated Octane module must default-export a native component');
-                    const assets = id && context.instance ? remoteBrowserAssets(context.instance, id) : void 0;
                     if (context.server && !assets) throw new Error(`Cannot server-render ${id}: the host has no browser assets for this remote`);
-                    const component = module.default;
+                    const component = publisherBoundary(module.default, {
+                        publisherKey: id ?? 'ultramodern:browser-loader'
+                    });
                     const Loaded = (props)=>{
+                        useEffect(()=>{
+                            if (context.server || !id || !context.instance) return;
+                            const register = Reflect.get(context.instance, Symbol.for('ultramodern.federation.browser-dev-boundary.v1'));
+                            if ('function' != typeof register) return;
+                            return register(id, module.default, component);
+                        }, [], publisherRegistrationEffectSlot);
                         for (const href of assets?.css ?? [])preinit(href, {
                             as: 'style',
                             precedence: 'federated',
@@ -50,11 +152,11 @@ function federatedComponent(remote, options = {}) {
                         default: Loaded
                     };
                 } catch (error) {
-                    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/dist/esm/i18n/I18nProvider.mjs

@@ -1,20 +1,12 @@
-import { createElement, hookSlots, useEffect, useState } from "octane";
+import { createElement, hookSlots, useSyncExternalStore } from "octane";
 import { I18nContext } from "./context.mjs";
-const languageStateSlot = Symbol(hookSlots(1));
-const languageSubscriptionSlot = Symbol(hookSlots(1));
+const languageStoreSlot = Symbol(hookSlots(1));
 function I18nProvider(props) {
-    const [language, setLanguage] = useState(()=>props.instance.language, languageStateSlot);
-    useEffect(()=>{
-        const instance = props.instance;
-        setLanguage(instance.language);
-        const handleLanguageChanged = (lng)=>setLanguage(lng);
-        instance.on?.('languageChanged', handleLanguageChanged);
-        return ()=>{
-            instance.off?.('languageChanged', handleLanguageChanged);
-        };
-    }, [
-        props.instance
-    ], languageSubscriptionSlot);
+    const instance = props.instance;
+    const language = useSyncExternalStore((notify)=>{
+        instance.on?.('languageChanged', notify);
+        return ()=>instance.off?.('languageChanged', notify);
+    }, ()=>instance.language, ()=>instance.language, languageStoreSlot);
     const value = {
         instance: props.instance,
         languages: props.languages,