@remix-run/ui 0.4.0 → 0.6.0

package/dist/runtime/frame.js

@@ -1,14 +1,37 @@
-import { jsx } from "./jsx.js";
-import { Frame, createFrameHandle } from "./component.js";
-import { createComponentErrorEvent, getComponentError } from "./error-event.js";
-import { invariant } from "./invariant.js";
-import { createRangeRoot, createRoot } from "./vdom.js";
-import { diffNodes } from "./diff-dom.js";
-import { createStyleManager } from "../style/index.js";
-import { findFlushMarker } from "./stream-protocol.js";
+import { jsx } from './jsx.js';
+import { Frame, createFrameHandle } from './component.js';
+import { createComponentErrorEvent, getComponentError } from './error-event.js';
+import { invariant } from './invariant.js';
+import { createRangeRoot, createRoot } from './vdom.js';
+import { diffNodes } from './diff-dom.js';
+import { createStyleManager } from '../style/index.js';
+import { findFlushMarker } from './stream-protocol.js';
+import { getDocumentModulePreloader } from './module-preloader.js';
+import { unwrapFrameResolution } from './frame-resolution.js';
+import { disposeClientEntryBoundary, getClientEntryBoundaryOwner, setClientEntryBoundaryOwner, } from './client-entry-boundary.js';
 const bufferedFrameTemplates = new Map();
 const frameTemplateListeners = new Map();
 const DOCTYPE_PATTERN = /<!doctype(?:\s[^>]*)?>/gi;
+function createLinkedAbortController(first, second) {
+    let controller = new AbortController();
+    let signals = second ? [first, second] : [first];
+    let abort = () => controller.abort();
+    for (let signal of signals) {
+        if (signal.aborted) {
+            controller.abort();
+            break;
+        }
+        signal.addEventListener('abort', abort, { once: true });
+    }
+    return {
+        controller,
+        disconnect() {
+            for (let signal of signals) {
+                signal.removeEventListener('abort', abort);
+            }
+        },
+    };
+}
 function stripDoctypeMarkup(html) {
     return html.replace(DOCTYPE_PATTERN, '');
 }
@@ -24,11 +47,35 @@ function syncElementAttributes(target, source) {
         }
     }
 }
+const FRAME_RUNTIME = Symbol('FrameRuntime');
+export function isFrameRuntime(value) {
+    return isRecord(value) && Reflect.get(value, FRAME_RUNTIME) === true;
+}
+/**
+ * Reloads a frame and returns response metadata used by the navigation runtime.
+ *
+ * @param frame Frame handle to reload.
+ * @param options Form submission metadata and cancellation signal.
+ * @returns The reload signal and final response URL, when redirected.
+ */
+export function reloadFrameForNavigation(frame, options) {
+    let runtime = frame.$runtime;
+    invariant(isFrameRuntime(runtime), 'Expected a frame runtime');
+    let reload = runtime.reloadForNavigation;
+    invariant(reload, 'Expected frame runtime to support navigation reloads');
+    return reload(options);
+}
 export function createFrame(root, init) {
     let container = createContainer(root);
     let contentRoot;
     let reloadController;
+    // The style registry is document-level and shared by every frame; only the
+    // frame that created it (the runtime root) disposes it.
+    let ownsStyleManager = !init.styleManager;
+    let reloadAbortUnsubscribe;
+    let reloadKind;
     let styleManager = init.styleManager ?? createStyleManager();
+    let modulePreloader = getDocumentModulePreloader(container.doc);
     let currentMarker = init.marker;
     let displayedContentStatus = init.marker?.status ?? 'resolved';
     let pendingTemplateMarkerId;
@@ -36,37 +83,21 @@ export function createFrame(root, init) {
     let pendingTemplateUnsubscribe;
     let inheritedReloadPending = false;
     let inheritedReloadAbortUnsubscribe;
+    let disposed = false;
+    let lifecycleController = new AbortController();
+    if (isDocumentNode(container.root)) {
+        modulePreloader.adoptInitialPreloadLinks(container.root);
+    }
+    else {
+        modulePreloader.consumePreloadLinks(container.root);
+    }
     // Merge any rmx-data found in the current document once at startup.
     mergeRmxDataFromDocument(init.data, container.doc);
-    let runtime = createFrameRuntime({ ...init, styleManager });
+    let runtime = createFrameRuntime({ ...init, styleManager, reloadForNavigation: reload });
     let frame = createFrameHandle({
         src: init.src,
         $runtime: runtime,
-        reload: async () => {
-            reloadController?.abort();
-            let controller = new AbortController();
-            reloadController = controller;
-            frame.dispatchEvent(new Event('reloadStart'));
-            startSubFrameInheritedReloads(getContentNodes(), controller.signal);
-            try {
-                let content = await init.resolveFrame(frame.src, controller.signal, frameName);
-                if (reloadController !== controller || controller.signal.aborted)
-                    return controller.signal;
-                await render(content, { signal: controller.signal });
-                return controller.signal;
-            }
-            catch (error) {
-                if (reloadController !== controller || controller.signal.aborted)
-                    return controller.signal;
-                init.errorTarget.dispatchEvent(createComponentErrorEvent(error));
-                throw error;
-            }
-            finally {
-                if (reloadController === controller) {
-                    frame.dispatchEvent(new Event('reloadComplete'));
-                }
-            }
-        },
+        reload: async () => (await reload()).signal,
         replace: async (content) => {
             await render(content);
         },
@@ -90,18 +121,41 @@ export function createFrame(root, init) {
         moduleLoads: init.moduleLoads,
         frameInstances: init.frameInstances,
         namedFrames: init.namedFrames,
+        lifecycleSignal: lifecycleController.signal,
         regionTailRef: container.regionTailRef,
         regionParent: container.regionParent,
     };
     async function render(content, options) {
-        if (options?.signal?.aborted)
+        if (disposed || lifecycleController.signal.aborted || options?.signal?.aborted)
+            return;
+        let ownsData = options?.data === undefined;
+        let renderOptions = {
+            ...options,
+            data: options?.data ?? {},
+        };
+        try {
+            await renderContent(content, renderOptions);
+        }
+        finally {
+            if (ownsData)
+                clearRmxData(renderOptions.data);
+        }
+    }
+    async function renderContent(content, options) {
+        if (isRenderAborted(options.signal))
             return;
         if (content instanceof ReadableStream) {
-            await renderFrameStream(content, container.doc, async (html, flushKind) => {
-                if (options?.signal?.aborted)
-                    return;
-                await render(html, { ...options, flushKind });
-            });
+            let linkedAbort = createLinkedAbortController(lifecycleController.signal, options.signal);
+            try {
+                await renderFrameStream(content, container.doc, async (html, flushKind) => {
+                    if (isRenderAborted(options.signal))
+                        return;
+                    await render(html, { ...options, flushKind });
+                }, linkedAbort.controller.signal);
+            }
+            finally {
+                linkedAbort.disconnect();
+            }
             return;
         }
         if (isRemixNodeFrameContent(content)) {
@@ -112,10 +166,10 @@ export function createFrame(root, init) {
                 clearFrameContent();
                 contentRoot = createFrameContentRoot();
             }
-            if (options?.signal?.aborted)
+            if (isRenderAborted(options.signal))
                 return;
             contentRoot.render(content);
-            displayedContentStatus = options?.contentStatus ?? 'resolved';
+            displayedContentStatus = options.contentStatus ?? 'resolved';
             return;
         }
         if (contentRoot) {
@@ -136,50 +190,66 @@ export function createFrame(root, init) {
         let htmlContent = typeof content === 'string' ? stripDoctypeMarkup(content) : undefined;
         let isFullDocumentReload = container.root instanceof Document &&
             htmlContent !== undefined &&
-            options?.flushKind === 'document';
+            options.flushKind === 'document';
         if (isFullDocumentReload && htmlContent !== undefined) {
             let parsed = new DOMParser().parseFromString(htmlContent, 'text/html');
-            mergeRmxDataFromDocument(context.data, parsed);
-            context.styleManager.replaceServerStyles(collectFrameServerStyleTags(createElementContainer(parsed)));
+            modulePreloader.consumePreloadLinks(parsed);
+            let responseData = options.data;
+            mergeRmxDataFromDocument(responseData, parsed);
+            let responseContext = { ...context, data: responseData };
+            context.styleManager.adoptServerStyles(collectFrameServerStyleTags(createElementContainer(parsed)));
             syncElementAttributes(container.doc.documentElement, parsed.documentElement);
             diffNodes([container.doc.head], [parsed.head], {
-                ...context,
+                ...responseContext,
                 regionParent: container.doc.documentElement,
                 regionTailRef: null,
-                signal: options?.signal,
+                signal: options.signal,
+                isActiveModulePreload: modulePreloader.hasActivePreloads()
+                    ? modulePreloader.isActivePreload
+                    : undefined,
             });
             diffNodes([container.doc.body], [parsed.body], {
-                ...context,
+                ...responseContext,
                 regionParent: container.doc.documentElement,
                 regionTailRef: null,
-                signal: options?.signal,
+                signal: options.signal,
             });
             let bodyContainer = createElementContainer(container.doc.body);
-            if (options?.signal?.aborted)
+            if (isRenderAborted(options.signal))
                 return;
-            scheduleHydrationInContainer(bodyContainer, context, options?.initialHydrationTracker);
-            await createSubFrames(bodyContainer.childNodes, context, options);
-            displayedContentStatus = options?.contentStatus ?? 'resolved';
+            scheduleHydrationInContainer(bodyContainer, responseContext, options.initialHydrationTracker, options.signal);
+            await createSubFrames(bodyContainer.childNodes, responseContext, options);
+            if (isRenderAborted(options.signal))
+                return;
+            displayedContentStatus = options.contentStatus ?? 'resolved';
             return;
         }
         let fragment = htmlContent !== undefined ? createFragmentFromString(container.doc, htmlContent) : content;
-        context.styleManager.replaceServerStyles(collectFrameServerStyleTags(createElementContainer(fragment)));
+        modulePreloader.consumePreloadLinks(fragment);
+        context.styleManager.adoptServerStyles(collectFrameServerStyleTags(createElementContainer(fragment)));
         removeEmptyHeads(fragment);
-        mergeRmxDataFromFragment(context.data, fragment);
+        let responseData = options.data;
+        mergeRmxDataFromFragment(responseData, fragment);
+        let responseContext = { ...context, data: responseData };
         let nextContainer = createContainer(fragment);
-        if (options?.signal?.aborted)
+        if (isRenderAborted(options.signal))
             return;
         diffNodes(container.childNodes, Array.from(nextContainer.childNodes), {
-            ...context,
+            ...responseContext,
             regionTailRef: container.regionTailRef,
             regionParent: container.regionParent,
-            signal: options?.signal,
+            signal: options.signal,
         });
-        if (options?.signal?.aborted)
+        if (isRenderAborted(options.signal))
+            return;
+        scheduleHydrationInContainer(container, responseContext, options.initialHydrationTracker, options.signal);
+        await createSubFrames(container.childNodes, responseContext, options);
+        if (isRenderAborted(options.signal))
             return;
-        scheduleHydrationInContainer(container, context, options?.initialHydrationTracker);
-        await createSubFrames(container.childNodes, context, options);
-        displayedContentStatus = options?.contentStatus ?? 'resolved';
+        displayedContentStatus = options.contentStatus ?? 'resolved';
+    }
+    function isRenderAborted(signal) {
+        return disposed || lifecycleController.signal.aborted || signal?.aborted === true;
     }
     function createFrameContentRoot() {
         let virtualRoot;
@@ -217,18 +287,34 @@ export function createFrame(root, init) {
     }
     async function hydrateInitial() {
         let initialHydrationTracker = createInitialHydrationTracker();
-        context.styleManager.replaceServerStyles(collectFrameServerStyleTags(container));
-        await createSubFrames(container.childNodes, context);
+        context.styleManager.adoptServerStyles(collectFrameServerStyleTags(container));
+        let subFramesReady = createSubFrames(container.childNodes, context);
         scheduleHydrationInContainer(container, context, initialHydrationTracker);
-        if (currentMarker?.status === 'pending') {
-            await watchPendingFrameTemplate(currentMarker, initialHydrationTracker);
+        try {
+            await subFramesReady;
+            if (disposed || context.lifecycleSignal.aborted)
+                return;
+            if (currentMarker?.status === 'pending') {
+                await watchPendingFrameTemplate(currentMarker, initialHydrationTracker);
+            }
+            initialHydrationTracker.finalize();
+            await initialHydrationTracker.ready();
+        }
+        finally {
+            clearRmxData(context.data);
         }
-        initialHydrationTracker.finalize();
-        await initialHydrationTracker.ready();
     }
     function dispose() {
+        if (disposed)
+            return;
+        disposed = true;
+        lifecycleController.abort();
+        clearRmxData(context.data);
         reloadController?.abort();
         reloadController = undefined;
+        reloadAbortUnsubscribe?.();
+        reloadAbortUnsubscribe = undefined;
+        reloadKind = undefined;
         contentRoot?.dispose();
         contentRoot = undefined;
         clearPendingFrameTemplateWatch();
@@ -236,7 +322,9 @@ export function createFrame(root, init) {
         removeVirtualRoots(container.childNodes);
         // Dispose sub-frames recursively.
         disposeSubFrames(container.childNodes, context);
-        context.styleManager.dispose();
+        if (ownsStyleManager) {
+            context.styleManager.dispose();
+        }
         if (frameName) {
             if (init.namedFrames.get(frameName) === frame) {
                 init.namedFrames.delete(frameName);
@@ -250,14 +338,17 @@ export function createFrame(root, init) {
         flush: () => context.scheduler.dequeue(),
         clearPendingTemplateWatch: clearPendingFrameTemplateWatch,
         isDisplayingResolvedContent: () => displayedContentStatus === 'resolved',
+        beginClientFrameReloadForAncestorReload,
+        cancelReload,
         startInheritedReload,
         updateMarker,
         renderMarkerContent,
+        matchesIdentity: (src, name) => !disposed && frame.src === src && frameName === name,
         dispose,
         handle: frame,
     };
     async function updateMarker(marker, options) {
-        if (options?.signal?.aborted)
+        if (disposed || context.lifecycleSignal.aborted || options?.signal?.aborted)
             return;
         let previousMarker = currentMarker;
         let isInheritedReload = previousMarker !== undefined && previousMarker.id !== marker.id;
@@ -280,7 +371,7 @@ export function createFrame(root, init) {
         }
     }
     async function renderMarkerContent(marker, content, options) {
-        if (options?.signal?.aborted)
+        if (disposed || context.lifecycleSignal.aborted || options?.signal?.aborted)
             return;
         let previousMarker = currentMarker;
         let isInheritedReload = previousMarker !== undefined && previousMarker.id !== marker.id;
@@ -290,10 +381,102 @@ export function createFrame(root, init) {
         }
         clearPendingFrameTemplateWatch();
         await render(content, { ...options, contentStatus: 'resolved' });
-        if (isInheritedReload && !options?.signal?.aborted) {
+        if (isInheritedReload &&
+            !disposed &&
+            !context.lifecycleSignal.aborted &&
+            !options?.signal?.aborted) {
             completeInheritedReload();
         }
     }
+    async function reload(options) {
+        let controller = startReload(options?.signal);
+        return await resolveAndRenderReload(controller, options);
+    }
+    function startReload(signal) {
+        let controller = replaceReloadController(signal);
+        reloadKind = 'direct';
+        frame.dispatchEvent(new Event('reloadStart'));
+        startSubFrameInheritedReloads(getContentNodes(), controller.signal);
+        return controller;
+    }
+    function beginClientFrameReloadForAncestorReload(signal) {
+        let inheritedReloadStarted = reuseInheritedReloadStart();
+        let continuingAncestorReload = reloadKind === 'ancestor';
+        let controller = replaceReloadController(signal);
+        reloadKind = 'ancestor';
+        if (!inheritedReloadStarted && !continuingAncestorReload) {
+            frame.dispatchEvent(new Event('reloadStart'));
+            startSubFrameInheritedReloads(getContentNodes(), controller.signal);
+        }
+        return {
+            controller,
+            complete: () => completeReload(controller),
+        };
+    }
+    function cancelReload() {
+        let controller = reloadController;
+        if (!controller)
+            return;
+        controller.abort();
+        completeReload(controller);
+    }
+    function replaceReloadController(signal) {
+        reloadController?.abort();
+        reloadAbortUnsubscribe?.();
+        reloadAbortUnsubscribe = undefined;
+        let controller = new AbortController();
+        reloadController = controller;
+        if (signal) {
+            if (signal.aborted) {
+                controller.abort();
+            }
+            else {
+                let abort = () => controller.abort();
+                signal.addEventListener('abort', abort, { once: true });
+                reloadAbortUnsubscribe = () => signal.removeEventListener('abort', abort);
+            }
+        }
+        return controller;
+    }
+    async function resolveAndRenderReload(controller, options) {
+        try {
+            let resolution = await init.resolveFrame(frame.src, {
+                ...options,
+                signal: controller.signal,
+                target: frameName,
+            });
+            if (reloadController !== controller || controller.signal.aborted) {
+                return { signal: controller.signal };
+            }
+            let { content, redirectedTo } = await unwrapFrameResolution(resolution);
+            if (reloadController !== controller || controller.signal.aborted) {
+                return { signal: controller.signal };
+            }
+            await render(content, { signal: controller.signal });
+            return {
+                signal: controller.signal,
+                redirectedTo: reloadController === controller && !controller.signal.aborted ? redirectedTo : undefined,
+            };
+        }
+        catch (error) {
+            if (reloadController !== controller || controller.signal.aborted) {
+                return { signal: controller.signal };
+            }
+            init.errorTarget.dispatchEvent(createComponentErrorEvent(error));
+            throw error;
+        }
+        finally {
+            completeReload(controller);
+        }
+    }
+    function completeReload(controller) {
+        if (reloadController !== controller || reloadKind === undefined)
+            return;
+        reloadAbortUnsubscribe?.();
+        reloadAbortUnsubscribe = undefined;
+        reloadKind = undefined;
+        frame.dispatchEvent(new Event('reloadComplete'));
+    }
     function startInheritedReload(signal) {
         if (signal?.aborted)
             return;
@@ -312,6 +495,14 @@ export function createFrame(root, init) {
             };
         }
     }
+    function reuseInheritedReloadStart() {
+        if (!inheritedReloadPending)
+            return false;
+        inheritedReloadPending = false;
+        inheritedReloadAbortUnsubscribe?.();
+        inheritedReloadAbortUnsubscribe = undefined;
+        return true;
+    }
     function completeInheritedReload() {
         if (!inheritedReloadPending)
             return;
@@ -328,7 +519,7 @@ export function createFrame(root, init) {
             if (isFrameStart(node)) {
                 let end = findEndMarker(node, isFrameStart, isFrameEnd);
                 context.frameInstances.get(node)?.startInheritedReload(signal);
-                i = nodes.indexOf(end);
+                i = findMarkerRangeEndIndex(nodes, end, i);
                 continue;
             }
             if (node.childNodes && node.childNodes.length > 0) {
@@ -344,7 +535,7 @@ export function createFrame(root, init) {
         pendingTemplateMarkerId = undefined;
     }
     async function watchPendingFrameTemplate(marker, initialHydrationTracker, signal, onResolved) {
-        if (signal?.aborted)
+        if (disposed || context.lifecycleSignal.aborted || signal?.aborted)
             return;
         if (pendingTemplateMarkerId === marker.id)
             return;
@@ -354,24 +545,24 @@ export function createFrame(root, init) {
         if (early) {
             clearPendingFrameTemplateWatch();
             await render(early, { initialHydrationTracker, signal, contentStatus: 'resolved' });
-            if (!signal?.aborted)
+            if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted)
                 onResolved?.();
             return;
         }
-        if (signal?.aborted) {
+        if (disposed || context.lifecycleSignal.aborted || signal?.aborted) {
             clearPendingFrameTemplateWatch();
             return;
         }
         let observer = setupTemplateObserver();
         pendingTemplateObserver = observer;
         let unsubscribe = subscribeFrameTemplate(marker.id, async (fragment) => {
-            if (signal?.aborted)
+            if (disposed || context.lifecycleSignal.aborted || signal?.aborted)
                 return;
             if (pendingTemplateMarkerId !== marker.id)
                 return;
             clearPendingFrameTemplateWatch();
             await render(fragment, { signal, contentStatus: 'resolved' });
-            if (!signal?.aborted)
+            if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted)
                 onResolved?.();
         });
         pendingTemplateUnsubscribe = unsubscribe;
@@ -384,13 +575,14 @@ export function createFrame(root, init) {
         if (buffered) {
             clearPendingFrameTemplateWatch();
             await render(buffered, { initialHydrationTracker, signal, contentStatus: 'resolved' });
-            if (!signal?.aborted)
+            if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted)
                 onResolved?.();
         }
     }
 }
 export function createFrameRuntime(init) {
     return {
+        [FRAME_RUNTIME]: true,
         topFrame: init.topFrame,
         errorTarget: init.errorTarget,
         loadModule: init.loadModule,
@@ -398,11 +590,12 @@ export function createFrameRuntime(init) {
         pendingClientEntries: init.pendingClientEntries,
         scheduler: init.scheduler,
         styleManager: init.styleManager,
-        data: init.data,
         moduleCache: init.moduleCache,
         moduleLoads: init.moduleLoads,
         frameInstances: init.frameInstances,
         namedFrames: init.namedFrames,
+        serverFrameReload: undefined,
+        reloadForNavigation: init.reloadForNavigation,
     };
 }
 function createInitialHydrationTracker() {
@@ -457,6 +650,10 @@ function mergeRmxDataFromFragment(into, fragment) {
         script.remove();
     }
 }
+function clearRmxData(data) {
+    delete data.h;
+    delete data.f;
+}
 function removeEmptyHeads(fragment) {
     let heads = Array.from(fragment.querySelectorAll('head'));
     for (let head of heads) {
@@ -478,14 +675,14 @@ function collectOwnedServerStyleTags(nodes, styles) {
         let node = nodes[i];
         if (isFrameStart(node)) {
             let end = findEndMarker(node, isFrameStart, isFrameEnd);
-            i = nodes.indexOf(end);
+            i = findMarkerRangeEndIndex(nodes, end, i);
             continue;
         }
         if (node instanceof HTMLStyleElement && node.matches('style[data-rmx]')) {
             styles.push(node);
             continue;
         }
-        if (node instanceof Element || node instanceof Document || node instanceof DocumentFragment) {
+        if (node.childNodes.length > 0) {
             collectOwnedServerStyleTags(Array.from(node.childNodes), styles);
         }
     }
@@ -520,7 +717,7 @@ function copyOwnRmxEntries(target, source) {
         target[key] = source[key];
     }
 }
-function scheduleHydrationInContainer(container, context, initialHydrationTracker) {
+function scheduleHydrationInContainer(container, context, initialHydrationTracker, signal) {
     let hydrationMarkers = findHydrationMarkers(container);
     if (hydrationMarkers.length === 0)
         return;
@@ -531,44 +728,67 @@ function scheduleHydrationInContainer(container, context, initialHydrationTracke
         let entry = hydrationData[marker.id];
         if (!entry)
             continue;
-        scheduleHydrationMarker(marker, entry, context, initialHydrationTracker);
+        scheduleHydrationMarker(marker, entry, context, initialHydrationTracker, signal);
     }
 }
-function scheduleHydrationMarker(marker, entry, context, initialHydrationTracker) {
+function scheduleHydrationMarker(marker, entry, context, initialHydrationTracker, signal) {
+    if (signal?.aborted || context.lifecycleSignal.aborted)
+        return;
     let done = initialHydrationTracker?.track();
     let key = `${entry.moduleUrl}#${entry.exportName}`;
+    let identity = {
+        moduleUrl: entry.moduleUrl,
+        exportName: entry.exportName,
+    };
+    let props = entry.props;
+    let completed = false;
+    let complete = () => {
+        if (completed)
+            return;
+        completed = true;
+        props = undefined;
+        signal?.removeEventListener('abort', complete);
+        context.lifecycleSignal.removeEventListener('abort', complete);
+        done?.();
+    };
+    signal?.addEventListener('abort', complete, { once: true });
+    context.lifecycleSignal.addEventListener('abort', complete, { once: true });
     let hydrateWithComponent = (component) => {
+        if (signal?.aborted || context.lifecycleSignal.aborted)
+            return;
         if (!isHydrationMarkerLive(marker, context))
             return;
-        let vElement = createElement(component, entry.props);
+        if (!props)
+            return;
+        let vElement = createElement(component, props);
         context.pendingClientEntries.set(marker.start, [marker.end, vElement]);
-        hydrateRegion(vElement, marker.start, marker.end, context);
+        hydrateRegion(vElement, marker.start, marker.end, identity, context, signal);
     };
     let cached = context.moduleCache.get(key);
     if (cached) {
         hydrateWithComponent(cached);
-        done?.();
+        complete();
         return;
     }
-    getOrStartModuleLoad(key, entry, marker.id, context)
+    getOrStartModuleLoad(key, identity, marker.id, context)
         .then((component) => {
         if (component) {
             hydrateWithComponent(component);
         }
     })
         .finally(() => {
-        done?.();
+        complete();
     });
 }
-function getOrStartModuleLoad(key, entry, markerId, context) {
+function getOrStartModuleLoad(key, identity, markerId, context) {
     let inFlight = context.moduleLoads.get(key);
     if (inFlight)
         return inFlight;
     let loadPromise = (async () => {
         try {
-            let mod = await context.loadModule(entry.moduleUrl, entry.exportName);
-            if (typeof mod !== 'function') {
-                throw new Error(`Export "${entry.exportName}" from "${entry.moduleUrl}" is not a function`);
+            let mod = await context.loadModule(identity.moduleUrl, identity.exportName);
+            if (!isElementFunction(mod)) {
+                throw new Error(`Export "${identity.exportName}" from "${identity.moduleUrl}" is not a function`);
             }
             context.moduleCache.set(key, mod);
             return mod;
@@ -586,8 +806,12 @@ function getOrStartModuleLoad(key, entry, markerId, context) {
 }
 function createElement(component, props) {
     let revivedProps = reviveSerializedValue(props);
+    invariant(isRecord(revivedProps), 'Expected revived component props to be an object');
     return jsx(component, revivedProps);
 }
+function isElementFunction(value) {
+    return typeof value === 'function';
+}
 function reviveSerializedValue(value) {
     if (value === null || value === undefined)
         return value;
@@ -596,6 +820,8 @@ function reviveSerializedValue(value) {
     if (Array.isArray(value)) {
         return value.map((item) => reviveSerializedValue(item));
     }
+    if (!isRecord(value))
+        return value;
     let record = value;
     if (record.$rmxFrame === true) {
         let props = reviveSerializedObject(record.props);
@@ -619,15 +845,34 @@ function reviveSerializedObject(value) {
     let revived = reviveSerializedValue(value);
     if (!revived || typeof revived !== 'object' || Array.isArray(revived))
         return {};
-    return revived;
+    return isRecord(revived) ? revived : {};
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
-function hydrateRegion(vElement, start, end, context) {
+function hydrateRegion(vElement, start, end, identity, context, signal) {
+    if (signal?.aborted)
+        return;
     context.pendingClientEntries.delete(start);
     // The same marker can be discovered by overlapping hydration passes
     // (for example, document root + nested frame root). Reuse the existing
     // virtual root instead of redefining the marker property.
-    if (isHydratedVirtualRootMarker(start)) {
-        start.$rmx.render(vElement);
+    let owner = getClientEntryBoundaryOwner(start);
+    if (owner) {
+        if (!signal) {
+            owner.root.render(vElement);
+            return;
+        }
+        let frameRuntime = context.frame.$runtime;
+        invariant(isFrameRuntime(frameRuntime), 'Expected frame runtime while rendering a preserved client entry');
+        let previousServerFrameReload = frameRuntime.serverFrameReload;
+        frameRuntime.serverFrameReload = { signal };
+        try {
+            owner.root.render(vElement);
+        }
+        finally {
+            frameRuntime.serverFrameReload = previousServerFrameReload;
+        }
         return;
     }
     let root = createRangeRoot([start, end], {
@@ -640,7 +885,7 @@ function hydrateRegion(vElement, start, end, context) {
             return;
         context.errorTarget.dispatchEvent(createComponentErrorEvent(getComponentError(event)));
     });
-    Object.defineProperty(start, '$rmx', { value: root, enumerable: false });
+    setClientEntryBoundaryOwner(start, identity, root);
     root.render(vElement);
 }
 async function createSubFrames(nodes, context, options) {
@@ -675,6 +920,7 @@ async function createSubFrames(nodes, context, options) {
                         resolveFrame: context.resolveFrame,
                         pendingClientEntries: context.pendingClientEntries,
                         scheduler: context.scheduler,
+                        styleManager: context.styleManager,
                         data: context.data,
                         moduleCache: context.moduleCache,
                         moduleLoads: context.moduleLoads,
@@ -684,7 +930,7 @@ async function createSubFrames(nodes, context, options) {
                     context.frameInstances.set(node, subFrame);
                 }
             }
-            i = nodes.indexOf(end);
+            i = findMarkerRangeEndIndex(nodes, end, i);
             continue;
         }
         if (node.childNodes && node.childNodes.length > 0) {
@@ -719,10 +965,9 @@ function isHydrationMarkerLive(marker, context) {
 function removeVirtualRoots(nodes) {
     for (let i = 0; i < nodes.length; i++) {
         let node = nodes[i];
-        if (isHydratedVirtualRootMarker(node)) {
-            node.$rmx.dispose();
+        if (isCommentNode(node) && isHydrationStart(node) && disposeClientEntryBoundary(node)) {
             let end = findEndMarker(node, isHydrationStart, isHydrationEnd);
-            i = nodes.indexOf(end);
+            i = findMarkerRangeEndIndex(nodes, end, i);
             continue;
         }
         if (node.childNodes && node.childNodes.length > 0) {
@@ -740,7 +985,7 @@ function disposeSubFrames(nodes, context) {
                 subFrame.dispose();
                 context.frameInstances.delete(node);
             }
-            i = nodes.indexOf(end);
+            i = findMarkerRangeEndIndex(nodes, end, i);
             continue;
         }
         if (node.childNodes && node.childNodes.length > 0) {
@@ -801,7 +1046,9 @@ export function publishFrameTemplate(id, fragment) {
         return;
     }
     for (let listener of listeners) {
-        listener(fragment.cloneNode(true));
+        let clone = fragment.cloneNode(true);
+        invariant(isDocumentFragmentNode(clone), 'Expected cloned frame template fragment');
+        listener(clone);
     }
 }
 export function consumeFrameTemplate(id) {
@@ -873,12 +1120,21 @@ function extractTemplatesFromBuffer(doc, buffer, onTemplate) {
         remainder: tail.slice(tailStart),
     };
 }
-async function renderFrameStream(stream, doc, applyHtml) {
+async function renderFrameStream(stream, doc, applyHtml, signal) {
     let reader = stream.getReader();
     let decoder = new TextDecoder();
     let buffer = '';
     let html = '';
     let appliedOnce = false;
+    let abort = () => {
+        void reader.cancel().catch(() => { });
+    };
+    if (signal?.aborted) {
+        await reader.cancel();
+        reader.releaseLock();
+        return;
+    }
+    signal?.addEventListener('abort', abort, { once: true });
     try {
         while (true) {
             let { done, value } = await reader.read();
@@ -913,6 +1169,7 @@ async function renderFrameStream(stream, doc, applyHtml) {
         }
     }
     finally {
+        signal?.removeEventListener('abort', abort);
         reader.releaseLock();
     }
 }
@@ -973,7 +1230,7 @@ function createFragmentFromString(doc, content) {
 }
 function isRemixNodeFrameContent(content) {
     return !(content instanceof ReadableStream ||
-        content instanceof DocumentFragment ||
+        isDocumentFragmentNode(content) ||
         typeof content === 'string');
 }
 function findHydrationMarkers(container) {
@@ -998,10 +1255,10 @@ function walkCommentsInNodes(nodes, cb) {
         // are discovered and hydrated by the nested frame instance only.
         if (isFrameStart(node)) {
             let end = findEndMarker(node, isFrameStart, isFrameEnd);
-            i = nodes.indexOf(end);
+            i = findMarkerRangeEndIndex(nodes, end, i);
             continue;
         }
-        if (node.nodeType === Node.COMMENT_NODE)
+        if (isCommentNode(node))
             cb(node);
         if (node.childNodes && node.childNodes.length > 0) {
             walkCommentsInNodes(Array.from(node.childNodes), cb);
@@ -1014,11 +1271,8 @@ function isHydrationStart(node) {
 function isHydrationEnd(node) {
     return node.data.trim() === '/rmx:h';
 }
-function isHydratedVirtualRootMarker(node) {
-    return node instanceof Comment && '$rmx' in node;
-}
 function isFrameStart(node) {
-    return node instanceof Comment && node.data.trim().startsWith('rmx:f:');
+    return isCommentNode(node) && node.data.trim().startsWith('rmx:f:');
 }
 function isFrameEnd(node) {
     return node.data.trim() === '/rmx:f';
@@ -1028,11 +1282,15 @@ function getFrameId(start) {
     invariant(trimmed.startsWith('rmx:f:'), 'Invalid frame start marker');
     return trimmed.slice('rmx:f:'.length);
 }
+function findMarkerRangeEndIndex(nodes, end, startIndex) {
+    // The snapshot may not contain an end marker moved by a DOM update.
+    return Math.max(startIndex, nodes.indexOf(end));
+}
 function findEndMarker(start, isStart, isEnd) {
     let node = start.nextSibling;
     let depth = 1;
     while (node) {
-        if (node.nodeType === Node.COMMENT_NODE) {
+        if (isCommentNode(node)) {
             let comment = node;
             if (isStart(comment))
                 depth++;
@@ -1046,4 +1304,15 @@ function findEndMarker(start, isStart, isEnd) {
     }
     throw new Error('End marker not found');
 }
+function isCommentNode(node) {
+    return node?.nodeType === Node.COMMENT_NODE;
+}
+function isDocumentNode(node) {
+    return node.nodeType === Node.DOCUMENT_NODE;
+}
+function isDocumentFragmentNode(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        Reflect.get(value, 'nodeType') === Node.DOCUMENT_FRAGMENT_NODE);
+}
 //# sourceMappingURL=frame.js.map