@bleedingdev/modern-js-renderer-octane 0.0.0-stage → 3.9.3-ultramodern.10

package/dist/esm/entry-client.mjs

@@ -0,0 +1,57 @@
+import { startNativeClientEntry } from "@modern-js/renderer-core/entry-client";
+import { createNativeRouter } from "@modern-js/renderer-core/router";
+import { hydrateOctaneApplication, mountOctaneApplication, readOctaneDocumentBootstrap } from "./client.mjs";
+import { componentView, localizedRouterRoot, octaneRouterFactory } from "./entry-application.mjs";
+import { OctaneRouterRoot, prepareOctaneRouterHydration } from "./router-client.mjs";
+const LocalizedRouterRoot = localizedRouterRoot(OctaneRouterRoot);
+function startNativeClient(options) {
+    const { nativeHydrationBuildId } = 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
+            });
+            else await router.load();
+        },
+        async start ({ root, identity, bootstrap, signal, load }) {
+            const application = {
+                container: root,
+                identity,
+                nativeHydrationBuildId,
+                federation: options.federation,
+                workerFederation: options.workerFederation,
+                documentId: bootstrap?.documentId,
+                signal,
+                load: async ()=>{
+                    const view = await load();
+                    if ('component' === view.kind) return {
+                        default: componentView(view.component, view.i18n)
+                    };
+                    return view.i18n ? {
+                        default: LocalizedRouterRoot,
+                        props: {
+                            router: view.router,
+                            i18n: view.i18n
+                        }
+                    } : {
+                        default: OctaneRouterRoot,
+                        props: {
+                            router: view.router
+                        }
+                    };
+                }
+            };
+            const handle = bootstrap?.hydrating ? await hydrateOctaneApplication({
+                ...application,
+                documentIdentity: bootstrap.identity,
+                documentId: bootstrap.documentId,
+                documentNativeHydrationBuildId: bootstrap.nativeHydrationBuildId
+            }) : await mountOctaneApplication(application);
+            return ()=>handle.dispose();
+        }
+    });
+}
+export { startNativeClient };

package/dist/esm/entry-server.mjs

@@ -0,0 +1,91 @@
+import { collectDataHeaders, dataMetadataToDocumentPolicy, mergeDataResponseIntoResponse, mergeDataResponseMetadata, mergeHeaderFields } from "@modern-js/renderer-core/data";
+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, createSsrStreamResponse, getSsrStatus } from "./router-server.mjs";
+import { renderOctaneApplication, renderOctaneCSRDocument } from "./server.mjs";
+const OCTANE_DOCUMENT_FIELDS = new Set([
+    'content-language',
+    'content-location',
+    'content-disposition'
+]);
+function withOctaneDocumentFields(policy, responseHeaders) {
+    const fields = collectDataHeaders(responseHeaders).filter(([name])=>OCTANE_DOCUMENT_FIELDS.has(name.toLowerCase()));
+    return fields.length ? {
+        ...policy,
+        headers: [
+            ...policy.headers,
+            ...fields
+        ]
+    } : policy;
+}
+const LocalizedRouterServer = localizedRouterRoot(OctaneRouterServer);
+function entry_server_createNativeServerEntry(options) {
+    return createNativeServerEntry(options, {
+        document: (document, nativeManifest, identity)=>({
+                ...document,
+                nativeHydrationBuildId: validateOctaneModuleManifest(nativeManifest, identity).nativeHydrationBuildId
+            }),
+        run: (_session, callback)=>callback(),
+        respond: (_session, response)=>response,
+        createRouter: (application, routerOptions)=>createNativeRouter(application, routerOptions, octaneRouterFactory),
+        renderCSR: ({ session }, document)=>renderOctaneCSRDocument({
+                session,
+                document
+            }),
+        renderComponent: ({ session, workerFederation }, component, document, i18n)=>renderOctaneApplication({
+                session,
+                App: componentView(component, i18n),
+                document,
+                federation: options.federation,
+                workerFederation,
+                workerFederationLocale: options.workerFederationLocale
+            }),
+        async renderRoutes ({ request, context: { session, workerFederation }, router, outcomes, document, forbiddenValues, i18n }) {
+            const response = await createOctaneRequestHandler({
+                request,
+                session,
+                createRouter: ()=>router,
+                serialization: {
+                    forbiddenValues
+                }
+            })(async ({ router, responseHeaders })=>{
+                const metadata = mergeDataResponseMetadata(outcomes, {
+                    status: getSsrStatus(router)
+                });
+                const policy = dataMetadataToDocumentPolicy({
+                    ...metadata,
+                    headers: mergeHeaderFields(collectDataHeaders(responseHeaders), metadata.headers)
+                });
+                session.resolveResponse(withOctaneDocumentFields(policy, responseHeaders));
+                const rendered = await renderOctaneApplication({
+                    session,
+                    ...i18n ? {
+                        App: LocalizedRouterServer,
+                        props: {
+                            router,
+                            i18n
+                        }
+                    } : {
+                        App: OctaneRouterServer,
+                        props: {
+                            router
+                        }
+                    },
+                    document,
+                    federation: options.federation,
+                    workerFederation,
+                    workerFederationLocale: options.workerFederationLocale,
+                    router
+                });
+                return createSsrStreamResponse(router, rendered);
+            });
+            return session.committedPolicy ? response : mergeDataResponseIntoResponse(response, mergeDataResponseMetadata(outcomes, {
+                status: response.status
+            }));
+        }
+    });
+}
+export { createNativeWorkerFederationRuntime } from "./worker-federation.mjs";
+export { entry_server_createNativeServerEntry as createNativeServerEntry, withOctaneDocumentFields };

package/dist/esm/federation-context.mjs

@@ -0,0 +1,25 @@
+import { getFederationHost } from "@modern-js/renderer-core/federation";
+import { createContext, createElement } from "octane";
+const FederationContext = createContext(null);
+function createFederationScope(binding, server, nonce) {
+    return {
+        instance: getFederationHost(binding),
+        server,
+        ...void 0 === nonce ? {} : {
+            nonce
+        }
+    };
+}
+function FederationRoot(props) {
+    return createElement(FederationContext, {
+        value: props.scope,
+        children: props.children
+    });
+}
+function FederationApplication(props) {
+    return createElement(FederationRoot, {
+        scope: props.scope,
+        children: createElement(props.application.default, props.application.props)
+    });
+}
+export { FederationApplication, FederationContext, FederationRoot, createFederationScope };

package/dist/esm/federation.mjs

@@ -0,0 +1,167 @@
+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)=>{
+        const timer = setTimeout(()=>reject(new Error(`Remote module ${label} did not load within ${timeout}ms`)), timeout);
+        timer.unref?.();
+        promise.then((value)=>{
+            clearTimeout(timer);
+            resolve(value);
+        }, (error)=>{
+            clearTimeout(timer);
+            reject(error);
+        });
+    });
+}
+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');
+    const id = 'string' == typeof remote ? remote : void 0;
+    const standalone = {
+        instance: void 0,
+        server: "u" < typeof document
+    };
+    const components = new WeakMap();
+    const workerOwners = new WeakMap();
+    return (props)=>{
+        const context = useContext(FederationContext) ?? standalone;
+        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([
+                context.server ? language : void 0,
+                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');
+                    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');
+                    if (context.server && !assets) throw new Error(`Cannot server-render ${id}: the host has no browser assets for this remote`);
+                    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',
+                            ...void 0 === context.nonce ? {} : {
+                                nonce: context.nonce
+                            }
+                        });
+                        return createElement(component, props);
+                    };
+                    return {
+                        default: Loaded
+                    };
+                } catch (error) {
+                    if (!context.server) components.delete(owner);
+                    throw error;
+                }
+            });
+            components.set(owner, Remote);
+        }
+        return createElement(Suspense, {
+            fallback: options.fallback,
+            children: createElement(Remote, props)
+        });
+    };
+}
+export { federatedComponent };

package/dist/esm/i18n/I18nProvider.mjs

@@ -0,0 +1,21 @@
+import { createElement, hookSlots, useSyncExternalStore } from "octane";
+import { I18nContext } from "./context.mjs";
+const languageStoreSlot = Symbol(hookSlots(1));
+function I18nProvider(props) {
+    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,
+        localisedUrls: props.localisedUrls,
+        language
+    };
+    return createElement(I18nContext, {
+        value,
+        children: props.children
+    });
+}
+export { I18nProvider };

package/dist/esm/i18n/LocalizedLink.mjs

@@ -0,0 +1,42 @@
+import { configuredLanguage, localizePath } from "@modern-js/i18n-runtime-extensions/paths";
+import { createElement, hookSlots, useContext } from "octane";
+import { Link, useLocation, useRouter } from "../router.mjs";
+import { I18nContext } from "./context.mjs";
+const targetLocationSlot = Symbol(hookSlots(1));
+function LocalizedLink(props) {
+    const context = useContext(I18nContext);
+    if (!context) throw new Error('[renderer-octane] LocalizedLink was used outside of an I18nProvider.');
+    const router = useRouter();
+    const location = useLocation(void 0, targetLocationSlot);
+    const { language: requestedLanguage, to, children, ...options } = props;
+    const language = void 0 === requestedLanguage ? context.language : 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, {
+        ...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
+        }
+    }, children);
+}
+export { LocalizedLink };

package/dist/esm/i18n/context.mjs

@@ -0,0 +1,3 @@
+import { createContext } from "octane";
+const I18nContext = createContext(null);
+export { I18nContext };

package/dist/esm/i18n/index.mjs

@@ -0,0 +1,8 @@
+export { createRequestLanguageRedirect, detectRequestLanguage, languageFromPathname, resolveRequestLanguage } from "@modern-js/i18n-runtime-extensions/request-language";
+export { I18N_SSR_HANDOFF_ELEMENT_ID, createI18nSsrHandoffInlineData, readI18nSsrHandoff } from "@modern-js/i18n-runtime-extensions/ssrLanguageHandoff";
+export { createI18nUrlRewrite } from "@modern-js/i18n-runtime-extensions/urlRewrite";
+export { I18nContext } from "./context.mjs";
+export { I18nProvider } from "./I18nProvider.mjs";
+export { LocalizedLink } from "./LocalizedLink.mjs";
+export { useLatestLanguageSync } from "./languageSync.mjs";
+export { useI18n } from "./useI18n.mjs";

package/dist/esm/i18n/languageSync.mjs

@@ -0,0 +1,61 @@
+import { createLatestLanguageSyncBinding } from "@modern-js/i18n-runtime-extensions/language-sync/controller";
+import { hookSlots, useCallback, useEffect, useRef } from "octane";
+const bindingSlot = Symbol(hookSlots(1));
+const callbacksSlot = Symbol(hookSlots(1));
+const activationSlot = Symbol(hookSlots(1));
+const requestSlot = Symbol(hookSlots(1));
+const retrySlot = Symbol(hookSlots(1));
+const requestCallbackSlot = Symbol(hookSlots(1));
+const useLatestLanguageSync = ({ changeLanguage, commitLanguage, desiredLanguage, enabled = true, policy, readLanguage, reportFailure, target })=>{
+    const bindingRef = useRef(null, bindingSlot);
+    if (null === bindingRef.current) bindingRef.current = createLatestLanguageSyncBinding(policy);
+    const binding = bindingRef.current;
+    useEffect(()=>{
+        binding.updateCallbacks({
+            changeLanguage,
+            commitLanguage,
+            readLanguage,
+            reportFailure
+        });
+    }, void 0, callbacksSlot);
+    useEffect(()=>{
+        if (!enabled || !target) return;
+        binding.activate(target);
+        return ()=>binding.deactivate();
+    }, [
+        binding,
+        enabled,
+        target
+    ], activationSlot);
+    useEffect(()=>{
+        if (!enabled || !target || !desiredLanguage) return void binding.clearRequest();
+        binding.request(desiredLanguage);
+    }, [
+        binding,
+        desiredLanguage,
+        enabled,
+        target
+    ], requestSlot);
+    useEffect(()=>{
+        if (!enabled || !target || !desiredLanguage || "u" < typeof window) return;
+        const retryCurrentIntent = ()=>binding.request(desiredLanguage);
+        const retryVisibleIntent = ()=>{
+            if ('visible' === document.visibilityState) retryCurrentIntent();
+        };
+        window.addEventListener('online', retryCurrentIntent);
+        document.addEventListener('visibilitychange', retryVisibleIntent);
+        return ()=>{
+            window.removeEventListener('online', retryCurrentIntent);
+            document.removeEventListener('visibilitychange', retryVisibleIntent);
+        };
+    }, [
+        binding,
+        desiredLanguage,
+        enabled,
+        target
+    ], retrySlot);
+    return useCallback((language)=>binding.request(language), [
+        binding
+    ], requestCallbackSlot);
+};
+export { useLatestLanguageSync };

package/dist/esm/i18n/useI18n.mjs

@@ -0,0 +1,72 @@
+import { configuredLanguage, localizePath } from "@modern-js/i18n-runtime-extensions/paths";
+import { languageFromPathname } from "@modern-js/i18n-runtime-extensions/request-language";
+import { useContext } from "octane";
+import { useRouter } from "../router.mjs";
+import { I18nContext } from "./context.mjs";
+const languageSwitches = new WeakMap();
+function useI18n() {
+    const context = useContext(I18nContext);
+    if (!context) throw new Error('[renderer-octane] useI18n() was called outside of an I18nProvider.');
+    const { instance, languages, localisedUrls, language } = context;
+    const t = (key, options)=>instance.t(key, options);
+    const router = useRouter({
+        warn: false
+    });
+    const changeLanguage = (requested)=>{
+        let nextLanguage;
+        try {
+            nextLanguage = configuredLanguage(requested, languages);
+        } catch (error) {
+            return Promise.reject(error);
+        }
+        const state = languageSwitches.get(instance) ?? {
+            latest: 0,
+            queue: Promise.resolve()
+        };
+        languageSwitches.set(instance, state);
+        const generation = ++state.latest;
+        const run = state.queue.then(async ()=>{
+            if (state.latest !== generation) return;
+            const committed = instance.language;
+            const publicLanguage = ()=>router ? languageFromPathname(new URL(router.state.location.publicHref, 'http://localhost').pathname, languages, router.options.basepath) : void 0;
+            const reconcile = async ()=>{
+                const language = publicLanguage() ?? committed;
+                if (instance.language !== language) await instance.changeLanguage?.(language);
+            };
+            try {
+                await instance.changeLanguage?.(nextLanguage);
+            } catch (error) {
+                await reconcile();
+                throw error;
+            }
+            if (!router) return;
+            const href = localizePath(router.state.location.href, nextLanguage, {
+                languages: [
+                    ...languages
+                ],
+                localisedUrls
+            });
+            try {
+                await router.navigate({
+                    to: '.',
+                    href,
+                    replace: true
+                });
+            } catch (error) {
+                await reconcile();
+                throw error;
+            }
+            if (publicLanguage() !== nextLanguage) await reconcile();
+        });
+        state.queue = run.catch(()=>{});
+        return run;
+    };
+    return {
+        t,
+        language,
+        languages,
+        instance,
+        changeLanguage
+    };
+}
+export { useI18n };