@remix-run/ui 0.7.0 → 0.9.0

package/dist/runtime/frame.js

@@ -9,6 +9,8 @@ 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';
+import { getDocumentImportMapManager } from './import-map-manager.js';
+import { reloadDocument } from './document-reload.js';
 const bufferedFrameTemplates = new Map();
 const frameTemplateListeners = new Map();
 const DOCTYPE_PATTERN = /<!doctype(?:\s[^>]*)?>/gi;
@@ -76,6 +78,7 @@ export function createFrame(root, init) {
     let reloadKind;
     let styleManager = init.styleManager ?? createStyleManager();
     let modulePreloader = getDocumentModulePreloader(container.doc);
+    let importMapManager = getDocumentImportMapManager(container.doc);
     let currentMarker = init.marker;
     let displayedContentStatus = init.marker?.status ?? 'resolved';
     let pendingTemplateMarkerId;
@@ -85,15 +88,35 @@ export function createFrame(root, init) {
     let inheritedReloadAbortUnsubscribe;
     let disposed = false;
     let lifecycleController = new AbortController();
+    async function consumeClientEntryResources(source, documentHref) {
+        let importMapStatus = importMapManager.consumeImportMaps(source);
+        if (importMapStatus !== 'ready') {
+            lifecycleController.abort();
+            if (importMapStatus === 'conflict')
+                reloadDocument(container.doc, documentHref);
+            return false;
+        }
+        await modulePreloader.consumePreloadLinks(source, init.processClientEntryPreloads);
+        return true;
+    }
+    let initialClientEntryResources;
+    function shouldPreserveManagedHeadNode(node) {
+        return (importMapManager.shouldPreserveHeadNode(node) ||
+            (modulePreloader.hasActivePreloads() && modulePreloader.isActivePreload(node)));
+    }
     if (isDocumentNode(container.root)) {
         modulePreloader.adoptInitialPreloadLinks(container.root);
     }
     else {
-        modulePreloader.consumePreloadLinks(container.root);
+        initialClientEntryResources = consumeClientEntryResources(container.root);
     }
     // Merge any rmx-data found in the current document once at startup.
     mergeRmxDataFromDocument(init.data, container.doc);
-    let runtime = createFrameRuntime({ ...init, styleManager, reloadForNavigation: reload });
+    let runtime = createFrameRuntime({
+        ...init,
+        styleManager,
+        reloadForNavigation: startReloadTransition,
+    });
     let frame = createFrameHandle({
         src: init.src,
         $runtime: runtime,
@@ -121,6 +144,7 @@ export function createFrame(root, init) {
         moduleLoads: init.moduleLoads,
         frameInstances: init.frameInstances,
         namedFrames: init.namedFrames,
+        processClientEntryPreloads: init.processClientEntryPreloads,
         lifecycleSignal: lifecycleController.signal,
         regionTailRef: container.regionTailRef,
         regionParent: container.regionParent,
@@ -168,7 +192,24 @@ export function createFrame(root, init) {
             }
             if (isRenderAborted(options.signal))
                 return;
-            contentRoot.render(content);
+            let previousServerFrameReload = runtime.serverFrameReload;
+            if (options.signal) {
+                runtime.serverFrameReload = {
+                    signal: options.signal,
+                    reconciliationTracker: options.reconciliationTracker,
+                    blockingFrameTracker: options.blockingFrameTracker,
+                };
+            }
+            try {
+                contentRoot.render(content);
+                await new Promise((resolve) => context.scheduler.enqueueCommitPhase([resolve]));
+                options.onCommit?.();
+            }
+            finally {
+                runtime.serverFrameReload = previousServerFrameReload;
+            }
+            if (isRenderAborted(options.signal))
+                return;
             displayedContentStatus = options.contentStatus ?? 'resolved';
             return;
         }
@@ -193,10 +234,18 @@ export function createFrame(root, init) {
             options.flushKind === 'document';
         if (isFullDocumentReload && htmlContent !== undefined) {
             let parsed = new DOMParser().parseFromString(htmlContent, 'text/html');
-            modulePreloader.consumePreloadLinks(parsed);
+            if (!(await consumeClientEntryResources(parsed, options.documentHref)))
+                return;
+            if (isRenderAborted(options.signal))
+                return;
             let responseData = options.data;
             mergeRmxDataFromDocument(responseData, parsed);
-            let responseContext = { ...context, data: responseData };
+            let responseContext = {
+                ...context,
+                data: responseData,
+                reconciliationTracker: options.reconciliationTracker,
+                blockingFrameTracker: options.blockingFrameTracker,
+            };
             context.styleManager.adoptServerStyles(collectFrameServerStyleTags(createElementContainer(parsed)));
             syncElementAttributes(container.doc.documentElement, parsed.documentElement);
             diffNodes([container.doc.head], [parsed.head], {
@@ -204,9 +253,7 @@ export function createFrame(root, init) {
                 regionParent: container.doc.documentElement,
                 regionTailRef: null,
                 signal: options.signal,
-                isActiveModulePreload: modulePreloader.hasActivePreloads()
-                    ? modulePreloader.isActivePreload
-                    : undefined,
+                shouldPreserveHeadNode: shouldPreserveManagedHeadNode,
             });
             diffNodes([container.doc.body], [parsed.body], {
                 ...responseContext,
@@ -217,20 +264,30 @@ export function createFrame(root, init) {
             let bodyContainer = createElementContainer(container.doc.body);
             if (isRenderAborted(options.signal))
                 return;
-            scheduleHydrationInContainer(bodyContainer, responseContext, options.initialHydrationTracker, options.signal);
-            await createSubFrames(bodyContainer.childNodes, responseContext, options);
+            scheduleHydrationInContainer(bodyContainer, responseContext, options.reconciliationTracker, options.signal);
+            let subFramesReady = createSubFrames(bodyContainer.childNodes, responseContext, options);
+            options.onCommit?.();
+            await subFramesReady;
             if (isRenderAborted(options.signal))
                 return;
             displayedContentStatus = options.contentStatus ?? 'resolved';
             return;
         }
         let fragment = htmlContent !== undefined ? createFragmentFromString(container.doc, htmlContent) : content;
-        modulePreloader.consumePreloadLinks(fragment);
+        if (!(await consumeClientEntryResources(fragment, options.documentHref)))
+            return;
+        if (isRenderAborted(options.signal))
+            return;
         context.styleManager.adoptServerStyles(collectFrameServerStyleTags(createElementContainer(fragment)));
         removeEmptyHeads(fragment);
         let responseData = options.data;
         mergeRmxDataFromFragment(responseData, fragment);
-        let responseContext = { ...context, data: responseData };
+        let responseContext = {
+            ...context,
+            data: responseData,
+            reconciliationTracker: options.reconciliationTracker,
+            blockingFrameTracker: options.blockingFrameTracker,
+        };
         let nextContainer = createContainer(fragment);
         if (isRenderAborted(options.signal))
             return;
@@ -240,10 +297,10 @@ export function createFrame(root, init) {
             regionParent: container.regionParent,
             signal: options.signal,
         });
-        if (isRenderAborted(options.signal))
-            return;
-        scheduleHydrationInContainer(container, responseContext, options.initialHydrationTracker, options.signal);
-        await createSubFrames(container.childNodes, responseContext, options);
+        scheduleHydrationInContainer(container, responseContext, options.reconciliationTracker, options.signal);
+        let subFramesReady = createSubFrames(container.childNodes, responseContext, options);
+        options.onCommit?.();
+        await subFramesReady;
         if (isRenderAborted(options.signal))
             return;
         displayedContentStatus = options.contentStatus ?? 'resolved';
@@ -286,19 +343,23 @@ export function createFrame(root, init) {
         }
     }
     async function hydrateInitial() {
-        let initialHydrationTracker = createInitialHydrationTracker();
+        let reconciliationTracker = createReconciliationTracker();
+        if ((await initialClientEntryResources) === false)
+            return;
+        if (disposed || context.lifecycleSignal.aborted)
+            return;
         context.styleManager.adoptServerStyles(collectFrameServerStyleTags(container));
         let subFramesReady = createSubFrames(container.childNodes, context);
-        scheduleHydrationInContainer(container, context, initialHydrationTracker);
+        scheduleHydrationInContainer(container, context, reconciliationTracker);
         try {
             await subFramesReady;
             if (disposed || context.lifecycleSignal.aborted)
                 return;
             if (currentMarker?.status === 'pending') {
-                await watchPendingFrameTemplate(currentMarker, initialHydrationTracker);
+                await watchPendingFrameTemplate(currentMarker, reconciliationTracker);
             }
-            initialHydrationTracker.finalize();
-            await initialHydrationTracker.ready();
+            reconciliationTracker.finalize();
+            await reconciliationTracker.ready();
         }
         finally {
             clearRmxData(context.data);
@@ -357,7 +418,7 @@ export function createFrame(root, init) {
             startInheritedReload(options?.signal);
         }
         if (marker.status === 'pending') {
-            await watchPendingFrameTemplate(marker, options?.initialHydrationTracker, options?.signal, isInheritedReload
+            await watchPendingFrameTemplate(marker, options?.reconciliationTracker, options?.signal, isInheritedReload
                 ? () => {
                     completeInheritedReload();
                 }
@@ -389,8 +450,23 @@ export function createFrame(root, init) {
         }
     }
     async function reload(options) {
+        let transition = startReloadTransition(options);
+        void transition.committed.catch(() => { });
+        return await transition.finished;
+    }
+    function startReloadTransition(options) {
         let controller = startReload(options?.signal);
-        return await resolveAndRenderReload(controller, options);
+        let committed = Promise.withResolvers();
+        let commitStarted = false;
+        let finished = resolveAndRenderReload(controller, options, (ready) => {
+            if (commitStarted)
+                return;
+            commitStarted = true;
+            void ready.then(committed.resolve, committed.reject);
+        });
+        // Settle committed when a reload is aborted or fails before rendering any content.
+        void finished.then(() => committed.resolve(), committed.reject);
+        return { signal: controller.signal, committed: committed.promise, finished };
     }
     function startReload(signal) {
         let controller = replaceReloadController(signal);
@@ -438,7 +514,7 @@ export function createFrame(root, init) {
         }
         return controller;
     }
-    async function resolveAndRenderReload(controller, options) {
+    async function resolveAndRenderReload(controller, options, resolveCommit) {
         try {
             let resolution = await init.resolveFrame(frame.src, {
                 ...options,
@@ -452,7 +528,24 @@ export function createFrame(root, init) {
             if (reloadController !== controller || controller.signal.aborted) {
                 return { signal: controller.signal };
             }
-            await render(content, { signal: controller.signal });
+            let reconciliationTracker = createReconciliationTracker();
+            let blockingFrameTracker = createReconciliationTracker();
+            let commitStarted = false;
+            await render(content, {
+                documentHref: isDocumentNode(container.root) ? (redirectedTo ?? frame.src) : undefined,
+                signal: controller.signal,
+                reconciliationTracker,
+                blockingFrameTracker,
+                onCommit() {
+                    if (commitStarted)
+                        return;
+                    commitStarted = true;
+                    blockingFrameTracker.finalize();
+                    resolveCommit?.(blockingFrameTracker.ready());
+                },
+            });
+            reconciliationTracker.finalize();
+            await reconciliationTracker.ready();
             return {
                 signal: controller.signal,
                 redirectedTo: reloadController === controller && !controller.signal.aborted ? redirectedTo : undefined,
@@ -534,7 +627,7 @@ export function createFrame(root, init) {
         pendingTemplateObserver = undefined;
         pendingTemplateMarkerId = undefined;
     }
-    async function watchPendingFrameTemplate(marker, initialHydrationTracker, signal, onResolved) {
+    async function watchPendingFrameTemplate(marker, reconciliationTracker, signal, onResolved) {
         if (disposed || context.lifecycleSignal.aborted || signal?.aborted)
             return;
         if (pendingTemplateMarkerId === marker.id)
@@ -544,7 +637,7 @@ export function createFrame(root, init) {
         let early = consumeFrameTemplate(marker.id) ?? getEarlyFrameContent(marker.id);
         if (early) {
             clearPendingFrameTemplateWatch();
-            await render(early, { initialHydrationTracker, signal, contentStatus: 'resolved' });
+            await render(early, { reconciliationTracker, signal, contentStatus: 'resolved' });
             if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted)
                 onResolved?.();
             return;
@@ -574,7 +667,7 @@ export function createFrame(root, init) {
         let buffered = consumeFrameTemplate(marker.id);
         if (buffered) {
             clearPendingFrameTemplateWatch();
-            await render(buffered, { initialHydrationTracker, signal, contentStatus: 'resolved' });
+            await render(buffered, { reconciliationTracker, signal, contentStatus: 'resolved' });
             if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted)
                 onResolved?.();
         }
@@ -594,38 +687,58 @@ export function createFrameRuntime(init) {
         moduleLoads: init.moduleLoads,
         frameInstances: init.frameInstances,
         namedFrames: init.namedFrames,
+        processClientEntryPreloads: init.processClientEntryPreloads,
         serverFrameReload: undefined,
         reloadForNavigation: init.reloadForNavigation,
     };
 }
-function createInitialHydrationTracker() {
+function createReconciliationTracker() {
     let pending = 0;
     let finalized = false;
+    let failed = false;
+    let failure;
     let resolveReady;
-    let readyPromise = new Promise((resolve) => {
+    let rejectReady;
+    let readyPromise = new Promise((resolve, reject) => {
         resolveReady = resolve;
+        rejectReady = reject;
     });
-    function maybeResolve() {
-        if (finalized && pending === 0) {
+    function maybeSettle() {
+        if (!finalized || pending !== 0)
+            return;
+        if (failed)
+            rejectReady?.(failure);
+        else
             resolveReady?.();
-            resolveReady = undefined;
-        }
+        resolveReady = undefined;
+        rejectReady = undefined;
+    }
+    function track() {
+        pending++;
+        let completed = false;
+        return () => {
+            if (completed)
+                return;
+            completed = true;
+            pending--;
+            maybeSettle();
+        };
     }
     return {
-        track() {
-            pending++;
-            let completed = false;
-            return () => {
-                if (completed)
-                    return;
-                completed = true;
-                pending--;
-                maybeResolve();
-            };
+        track,
+        waitFor(task) {
+            let complete = track();
+            void task.then(complete, (error) => {
+                if (!failed) {
+                    failed = true;
+                    failure = error;
+                }
+                complete();
+            });
         },
         finalize() {
             finalized = true;
-            maybeResolve();
+            maybeSettle();
         },
         ready() {
             return readyPromise;
@@ -678,7 +791,7 @@ function collectOwnedServerStyleTags(nodes, styles) {
             i = findMarkerRangeEndIndex(nodes, end, i);
             continue;
         }
-        if (node instanceof HTMLStyleElement && node.matches('style[data-rmx]')) {
+        if (node instanceof HTMLStyleElement && node.matches('style[data-rmx-style]')) {
             styles.push(node);
             continue;
         }
@@ -717,7 +830,7 @@ function copyOwnRmxEntries(target, source) {
         target[key] = source[key];
     }
 }
-function scheduleHydrationInContainer(container, context, initialHydrationTracker, signal) {
+function scheduleHydrationInContainer(container, context, reconciliationTracker, signal) {
     let hydrationMarkers = findHydrationMarkers(container);
     if (hydrationMarkers.length === 0)
         return;
@@ -728,13 +841,13 @@ function scheduleHydrationInContainer(container, context, initialHydrationTracke
         let entry = hydrationData[marker.id];
         if (!entry)
             continue;
-        scheduleHydrationMarker(marker, entry, context, initialHydrationTracker, signal);
+        scheduleHydrationMarker(marker, entry, context, reconciliationTracker, signal);
     }
 }
-function scheduleHydrationMarker(marker, entry, context, initialHydrationTracker, signal) {
+function scheduleHydrationMarker(marker, entry, context, reconciliationTracker, signal) {
     if (signal?.aborted || context.lifecycleSignal.aborted)
         return;
-    let done = initialHydrationTracker?.track();
+    let done = reconciliationTracker?.track();
     let key = `${entry.moduleUrl}#${entry.exportName}`;
     let identity = {
         moduleUrl: entry.moduleUrl,
@@ -854,25 +967,35 @@ 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.
-    let owner = getClientEntryBoundaryOwner(start);
-    if (owner) {
+    // During a server frame reload, expose the reload signal and reconciliation
+    // tracker to client frames created while this entry renders so blocking
+    // frames keep the reload pending until their content arrives.
+    let renderEntry = (root) => {
         if (!signal) {
-            owner.root.render(vElement);
+            root.render(vElement);
             return;
         }
         let frameRuntime = context.frame.$runtime;
-        invariant(isFrameRuntime(frameRuntime), 'Expected frame runtime while rendering a preserved client entry');
+        invariant(isFrameRuntime(frameRuntime), 'Expected frame runtime while rendering a client entry during a reload');
         let previousServerFrameReload = frameRuntime.serverFrameReload;
-        frameRuntime.serverFrameReload = { signal };
+        frameRuntime.serverFrameReload = {
+            signal,
+            reconciliationTracker: context.reconciliationTracker,
+            blockingFrameTracker: context.blockingFrameTracker,
+        };
         try {
-            owner.root.render(vElement);
+            root.render(vElement);
         }
         finally {
             frameRuntime.serverFrameReload = previousServerFrameReload;
         }
+    };
+    // 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.
+    let owner = getClientEntryBoundaryOwner(start);
+    if (owner) {
+        renderEntry(owner.root);
         return;
     }
     let root = createRangeRoot([start, end], {
@@ -886,7 +1009,7 @@ function hydrateRegion(vElement, start, end, identity, context, signal) {
         context.errorTarget.dispatchEvent(createComponentErrorEvent(getComponentError(event)));
     });
     setClientEntryBoundaryOwner(start, identity, root);
-    root.render(vElement);
+    renderEntry(root);
 }
 async function createSubFrames(nodes, context, options) {
     let tasks = [];
@@ -926,8 +1049,12 @@ async function createSubFrames(nodes, context, options) {
                         moduleLoads: context.moduleLoads,
                         frameInstances: context.frameInstances,
                         namedFrames: context.namedFrames,
+                        processClientEntryPreloads: context.processClientEntryPreloads,
                     });
                     context.frameInstances.set(node, subFrame);
+                    if (frameMarker.status === 'resolved') {
+                        tasks.push(subFrame.ready());
+                    }
                 }
             }
             i = findMarkerRangeEndIndex(nodes, end, i);