@remix-run/ui 0.7.0 → 0.9.0

package/dist/server/stream.js

@@ -2,10 +2,21 @@ import { Fragment, createComponent, createFrameHandle, Frame } from '../runtime/
 import { isEntry } from '../runtime/client-entries.js';
 import { FRAMEWORK_PROPS as RUNTIME_FRAMEWORK_PROPS, SELF_CLOSING_TAGS, normalizeAttributeName, serializeStyleObject, shouldStringifyBooleanAttribute, } from '../runtime/core/attributes.js';
 import { appendFlushMarker, stripFlushMarkers } from '../runtime/stream-protocol.js';
+import { composeMixedProps, resolveMixDescriptors } from '../runtime/core/mix.js';
 import { REMIX_UI_STYLE_LAYER } from '../style/layers.js';
 export function createVNode(type, props, key) {
     return { type, props, key };
 }
+/**
+ * Renders the document import map and merges maps from server-resolved client entries.
+ *
+ * @param handle Server component handle containing the initial import map and script attributes.
+ * @returns This component is handled directly by the server renderer.
+ */
+export function ImportMap(handle) {
+    void handle;
+    return () => null;
+}
 const TEXTAREA_VALUE_PROPS = new Set(['value', 'defaultValue']);
 const INPUT_DEFAULT_PROPS = new Set(['defaultValue', 'defaultChecked']);
 const DOCTYPE_PATTERN = /<!doctype(?:\s[^>]*)?>/gi;
@@ -60,14 +71,19 @@ export function renderToStream(node, options) {
     let renderAbortController = new AbortController();
     let context = {
         insideSvg: false,
+        insideHead: false,
         onError,
         resolveFrame: options?.resolveFrame ?? defaultResolveFrame,
         styleCache: new Map(),
         pendingFrames: [],
         hydrationData: new Map(),
         unresolvedHydrationData: new Map(),
+        authoredImportMapImports: new Map(),
+        authoredImportMapScopes: new Map(),
+        authoredImportMapIntegrity: new Map(),
+        managedImportMaps: [],
         frameData: new Map(),
-        modulePreloadTags: new Set(),
+        clientEntryHeadResources: { modulePreloadTags: new Set() },
         blockingFrameTails: [],
         signal: renderAbortController.signal,
         flushKind: 'fragment',
@@ -97,6 +113,7 @@ export function renderToStream(node, options) {
                 if (closeIfCancelled(controller, context))
                     return;
                 validateClientEntriesForHydration(context);
+                finalizeManagedImportMap(context);
                 let html = serializeSegment(root);
                 let finalHtml = finalizeHtml(html, context);
                 let bytes = encoder.encode(appendFlushMarker(finalHtml, context.flushKind));
@@ -222,9 +239,11 @@ async function splitFirstChunk(stream) {
     return { html: stripFlushMarkers(stripDoctypeMarkup(decoder.decode(first))), tail };
 }
 async function resolveFrameHtml(input) {
-    if (typeof input === 'string')
-        return { html: stripFlushMarkers(stripDoctypeMarkup(input)) };
-    return await splitFirstChunk(input);
+    if (typeof input === 'string') {
+        let html = stripFlushMarkers(stripDoctypeMarkup(input));
+        return { html };
+    }
+    return splitFirstChunk(input);
 }
 function isRemixElement(node) {
     return typeof node === 'object' && node !== null && '$rmx' in node;
@@ -264,6 +283,9 @@ function buildSegment(node, context, frameState) {
             return buildElementSegment(tag, props, context, frameState);
         }
         if (isElementFunction(type)) {
+            if (type === ImportMap) {
+                return buildImportMapSegment(props, context);
+            }
             if (type === Frame) {
                 return buildFrameSegment(node, context, frameState);
             }
@@ -300,14 +322,17 @@ function buildFrameSegment(node, context, frameState) {
         context.pendingFrames.push({ frameId, promise: framePromise });
     }
     else {
-        seg.pending = Promise.resolve(context.resolveFrame(props.src, props.name, resolveFrameContext)).then(async (resolved) => {
+        let framePromise = Promise.resolve(context.resolveFrame(props.src, props.name, resolveFrameContext)).then(async (resolved) => {
             let { html, tail } = await resolveFrameHtml(resolved);
-            html = hoistModulePreloadsFromFrameHead(html, context);
+            html = hoistClientEntryResourcesFromFrameHead(html, context.clientEntryHeadResources);
             seg.content = staticSeg(html);
             if (tail) {
                 context.blockingFrameTails.push(tail);
             }
         });
+        // An earlier blocking frame may reject before this promise is awaited.
+        framePromise.catch(() => { });
+        seg.pending = framePromise;
     }
     return seg;
 }
@@ -328,6 +353,18 @@ function buildElementSegment(tag, props, context, frameState) {
     if (props.innerHTML) {
         return staticSeg(`<${tag}${attrs}>${props.innerHTML}</${tag}>`);
     }
+    if (tag === 'script') {
+        if (typeof props.children === 'string') {
+            if (context.insideHead) {
+                collectAuthoredImportMap(context, tag, processedProps, props.children);
+            }
+            return staticSeg(`<${tag}${attrs}>${escapeScriptTextContent(props.children)}</${tag}>`);
+        }
+        if (props.children != null) {
+            console.error(new Error('script elements with children must have a single string child'));
+        }
+        return staticSeg(`<${tag}${attrs}></${tag}>`);
+    }
     let open = staticSeg(`<${tag}${attrs}>`);
     // Adjust svg context for children: foreignObject switches back to HTML
     let previousInsideSvg = context.insideSvg;
@@ -342,6 +379,61 @@ function buildTextareaElementSegment(tag, props) {
     let value = props.value ?? props.defaultValue ?? '';
     return staticSeg(`<${tag}${attrs}>${escapeTextContent(String(value))}</${tag}>`);
 }
+function collectAuthoredImportMap(context, tag, props, children) {
+    if (tag !== 'script' ||
+        typeof props.type !== 'string' ||
+        props.type.toLowerCase() !== 'importmap' ||
+        (props.src !== undefined && props.src !== null && props.src !== false) ||
+        typeof children !== 'string') {
+        return;
+    }
+    let importMap = parseAuthoredImportMap(children);
+    if (!importMap)
+        return;
+    if (importMap.imports) {
+        collectAuthoredImportMapEntries(context.authoredImportMapImports, importMap.imports);
+    }
+    if (importMap.scopes) {
+        for (let [scope, imports] of Object.entries(importMap.scopes)) {
+            let authoredScope = context.authoredImportMapScopes.get(scope);
+            if (!authoredScope) {
+                authoredScope = { imports: new Map() };
+                context.authoredImportMapScopes.set(scope, authoredScope);
+            }
+            collectAuthoredImportMapEntries(authoredScope.imports, imports);
+        }
+    }
+    if (importMap.integrity) {
+        for (let [url, integrity] of Object.entries(importMap.integrity)) {
+            if (!context.authoredImportMapIntegrity.has(url)) {
+                context.authoredImportMapIntegrity.set(url, integrity);
+            }
+        }
+    }
+}
+function collectAuthoredImportMapEntries(target, source) {
+    for (let [specifier, address] of Object.entries(source)) {
+        if (!target.has(specifier))
+            target.set(specifier, address);
+    }
+}
+function buildImportMapSegment(props, context) {
+    if (context.flushKind !== 'document' || !context.insideHead) {
+        throw new Error('ImportMap must be rendered inside a document head');
+    }
+    if (context.managedImportMaps.length > 0) {
+        throw new Error('Only one ImportMap can be rendered per document');
+    }
+    let value = props.value;
+    if (!isImportMap(value)) {
+        throw new TypeError('ImportMap value must be a valid import map');
+    }
+    let { value: _value, ...scriptProps } = props;
+    let attrs = renderAttributes(scriptProps, false);
+    let segment = staticSeg('');
+    context.managedImportMaps.push({ attrs, segment, value });
+    return segment;
+}
 function renderInputAttributes(props) {
     let value = props.value === undefined && props.defaultValue !== undefined ? props.defaultValue : props.value;
     let checked = props.checked === undefined && props.defaultChecked !== undefined
@@ -358,7 +450,10 @@ function buildHeadElementSegment(tag, props, context, frameState) {
     let processedProps = processStyleProps(props);
     let attrs = renderAttributes(processedProps, false);
     let open = staticSeg(`<${tag}${attrs}>`);
+    let previousInsideHead = context.insideHead;
+    context.insideHead = true;
     let children = props.children != null ? buildSegment(props.children, context, frameState) : staticSeg('');
+    context.insideHead = previousInsideHead;
     let close = staticSeg(`</${tag}>`);
     return compositeSeg([open, children, close]);
 }
@@ -388,64 +483,22 @@ function renderAttributes(props, isSvg, excludedProps) {
     return attrs;
 }
 function resolveSsrMixedProps(hostType, initialProps, context, frameState) {
-    let descriptors = resolveSsrMixDescriptors(initialProps);
-    if (descriptors.length === 0)
+    if (resolveMixDescriptors(initialProps).length === 0)
         return initialProps;
-    let composedProps = withoutSsrMix(initialProps);
-    let mixinProps = withoutSsrMixinTreeProps(composedProps);
-    let maxDescriptors = 1024;
-    for (let index = 0; index < descriptors.length && index < maxDescriptors; index++) {
-        let descriptor = descriptors[index];
+    return composeMixedProps(hostType, initialProps, (descriptor, _index, mixinProps) => {
         let runner = resolveSsrMixinRunner(hostType, descriptor, context, frameState);
         if (!runner)
-            continue;
-        let result;
+            return undefined;
+        // Unlike the client runtime, a throwing mixin is isolated here so a
+        // single bad mixin cannot take down the whole stream.
         try {
-            result = runner(...descriptor.args, mixinProps);
+            return runner(...descriptor.args, mixinProps);
         }
         catch (error) {
             console.error(error);
-            continue;
-        }
-        if (!result)
-            continue;
-        if (isSsrMixinElement(result))
-            continue;
-        let returnedDescriptors = resolveReturnedSsrMixDescriptors(result);
-        if (returnedDescriptors) {
-            for (let returned of returnedDescriptors)
-                descriptors.push(returned);
-            continue;
-        }
-        if (!isRemixElement(result)) {
-            console.error(new Error('mixins must return a remix element'));
-            continue;
-        }
-        let remixResult = result;
-        let resultType = typeof remixResult.type === 'string'
-            ? remixResult.type
-            : isSsrMixinElement(remixResult.type)
-                ? remixResult.type.__rmxMixinElementType
-                : null;
-        if (resultType !== hostType) {
-            console.error(new Error('mixins must return an element with the same host type'));
-            continue;
-        }
-        if (remixResult.type !== resultType) {
-            remixResult = { ...remixResult, type: resultType };
+            return undefined;
         }
-        let nextProps = sanitizeReturnedSsrMixinProps(remixResult.props);
-        let nestedDescriptors = resolveSsrMixDescriptors(nextProps);
-        for (let nested of nestedDescriptors)
-            descriptors.push(nested);
-        composedProps = { ...composedProps, ...withoutSsrMix(nextProps) };
-        mixinProps = withoutSsrMixinTreeProps(composedProps);
-    }
-    let nextMix = initialProps.mix;
-    return {
-        ...composedProps,
-        ...(nextMix === undefined ? {} : { mix: nextMix }),
-    };
+    });
 }
 function resolveSsrMixinRunner(hostType, descriptor, context, frameState) {
     if (typeof descriptor.type !== 'function')
@@ -508,78 +561,9 @@ function createSsrMixinHandle(hostType, _descriptor, context, frameState) {
         dispatchEvent: () => true,
     };
 }
-function resolveSsrMixDescriptors(props) {
-    let mix = props.mix;
-    if (!mix)
-        return [];
-    if (Array.isArray(mix)) {
-        if (mix.length === 0)
-            return [];
-        return mix.filter(Boolean);
-    }
-    return [mix];
-}
-function withoutSsrMix(props) {
-    if (!('mix' in props))
-        return props;
-    let output = { ...props };
-    delete output.mix;
-    return output;
-}
-function withoutSsrMixinTreeProps(props) {
-    if (!('children' in props) && !('innerHTML' in props))
-        return props;
-    let output = { ...props };
-    delete output.children;
-    delete output.innerHTML;
-    return output;
-}
-function sanitizeReturnedSsrMixinProps(props) {
-    if (!('children' in props) && !('innerHTML' in props))
-        return props;
-    console.error(new Error('mixins must not return children or innerHTML'));
-    return withoutSsrMixinTreeProps(props);
-}
-function resolveReturnedSsrMixDescriptors(value) {
-    let descriptors = [];
-    if (!collectReturnedSsrMixDescriptors(value, descriptors)) {
-        return null;
-    }
-    return descriptors;
-}
-function collectReturnedSsrMixDescriptors(value, output) {
-    if (!value) {
-        return true;
-    }
-    if (Array.isArray(value)) {
-        for (let item of value) {
-            if (!collectReturnedSsrMixDescriptors(item, output)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    if (!isSsrMixinDescriptor(value)) {
-        return false;
-    }
-    output.push(value);
-    return true;
-}
-function isSsrMixinElement(value) {
-    if (typeof value !== 'function')
-        return false;
-    return '__rmxMixinElementType' in value;
-}
 function isElementFunction(value) {
     return typeof value === 'function';
 }
-function isSsrMixinDescriptor(value) {
-    if (!value || typeof value !== 'object' || isRemixElement(value)) {
-        return false;
-    }
-    let descriptor = value;
-    return typeof descriptor.type === 'function' && Array.isArray(descriptor.args);
-}
 function buildComponentSegment(type, props, context, componentId, frameState) {
     let vnode = createVNode(type, props);
     if (context.parentVNode) {
@@ -766,18 +750,24 @@ async function resolveClientEntries(context, resolveClientEntry) {
                 : resolveDefaultClientEntry(entryId, component);
             validateResolvedClientEntry(entryId, resolvedEntry);
             resolvedEntries.set(component, resolvedEntry);
+            collectResolvedClientEntryResources(context.clientEntryHeadResources, resolvedEntry);
         }
         context.hydrationData.set(hydrationId, {
             exportName: resolvedEntry.exportName,
             moduleUrl: resolvedEntry.href,
             props,
         });
-        for (let preload of resolvedEntry.preloads ?? []) {
-            context.modulePreloadTags.add(createModulePreloadTag(preload));
-        }
     }
     context.unresolvedHydrationData.clear();
 }
+function collectResolvedClientEntryResources(resources, resolvedEntry) {
+    for (let preload of resolvedEntry.preloads ?? []) {
+        resources.modulePreloadTags.add(createModulePreloadTag(preload));
+    }
+    if (resolvedEntry.importMap) {
+        mergeImportMap(resources, resolvedEntry.importMap);
+    }
+}
 function validateResolvedClientEntry(entryId, resolvedEntry) {
     if (!resolvedEntry || typeof resolvedEntry !== 'object') {
         throw new Error(`resolveClientEntry must return an object with href and exportName. Received "${entryId}".`);
@@ -798,6 +788,9 @@ function validateResolvedClientEntry(entryId, resolvedEntry) {
             }
         }
     }
+    if (resolvedEntry.importMap !== undefined && !isImportMap(resolvedEntry.importMap)) {
+        throw new Error(`resolveClientEntry importMap must be a valid import map. Received "${entryId}".`);
+    }
 }
 function validateClientEntriesForHydration(context) {
     if (context.unresolvedHydrationData.size > 0) {
@@ -849,36 +842,37 @@ function escapeTextContent(str) {
 function escapeTemplateContent(html) {
     return html.replace(/<\/template/gi, '<\\/template');
 }
+const SCRIPT_TAG_PATTERN = /(<\/|<)(s)(cript)/gi;
+function escapeScriptTextContent(value) {
+    return value.replace(SCRIPT_TAG_PATTERN, (_match, prefix, firstLetter, suffix) => `${prefix}${firstLetter === 's' ? '\\u0073' : '\\u0053'}${suffix}`);
+}
 function transformAttributeName(name, isSvg) {
     return normalizeAttributeName(name, isSvg).attr;
 }
 function finalizeHtml(html, context) {
     let hasHtmlRoot = context.flushKind === 'document';
-    let preloads = collectModulePreloadTags(context);
+    let preloads = collectModulePreloadTags(context.clientEntryHeadResources);
     let styles = collectStyleTags(context);
-    if (preloads || styles) {
-        let headContent = preloads + styles;
-        if (hasHtmlRoot) {
-            // For HTML root, inject into existing head or create one
-            let headCloseIndex = html.indexOf('</head>');
-            if (headCloseIndex !== -1) {
-                // Inject before existing </head>
-                html = html.slice(0, headCloseIndex) + headContent + html.slice(headCloseIndex);
+    let importMapScript = collectImportMapScript(context, context.clientEntryHeadResources);
+    let headContent = importMapScript + preloads + styles;
+    if (hasHtmlRoot && headContent) {
+        let headCloseIndex = html.indexOf('</head>');
+        if (headCloseIndex !== -1) {
+            html = html.slice(0, headCloseIndex) + headContent + html.slice(headCloseIndex);
+        }
+        else {
+            let htmlOpenMatch = html.match(/<html[^>]*>/);
+            if (htmlOpenMatch) {
+                let insertIndex = htmlOpenMatch.index + htmlOpenMatch[0].length;
+                html = html.slice(0, insertIndex) + `<head>${headContent}</head>` + html.slice(insertIndex);
             }
             else {
-                // No existing head, inject after <html>
-                let htmlOpenMatch = html.match(/<html[^>]*>/);
-                if (htmlOpenMatch) {
-                    let insertIndex = htmlOpenMatch.index + htmlOpenMatch[0].length;
-                    html =
-                        html.slice(0, insertIndex) + `<head>${headContent}</head>` + html.slice(insertIndex);
-                }
+                html = headContent + html;
             }
         }
-        else {
-            // No HTML root, prepend head
-            html = `<head>${headContent}</head>${html}`;
-        }
+    }
+    if (!hasHtmlRoot && headContent) {
+        html = `<head>${headContent}</head>${html}`;
     }
     // Append aggregated hydration/frame data script at the end
     let rmxData = buildRmxDataScript(context);
@@ -907,39 +901,54 @@ function finalizeHtml(html, context) {
 }
 const FRAME_HEAD_OPEN_TAG = '<head>';
 const FRAME_HEAD_CLOSE_TAG = '</head>';
-const MARKED_MODULE_PRELOAD_START = '<link data-rmx rel="modulepreload" href="';
+const MARKED_MODULE_PRELOAD_START = '<link data-rmx-module-preload rel="modulepreload" href="';
 const MODULE_PRELOAD_END = '" />';
+const MANAGED_IMPORT_MAP_START = '<script data-rmx-import-map type="importmap">';
+const IMPORT_MAP_SCRIPT_END = '</script>';
 function createModulePreloadTag(href) {
     return `${MARKED_MODULE_PRELOAD_START}${escapeHtml(href)}${MODULE_PRELOAD_END}`;
 }
-function collectModulePreloadTags(context) {
-    return Array.from(context.modulePreloadTags).join('');
+function collectModulePreloadTags(resources) {
+    return Array.from(resources.modulePreloadTags).join('');
 }
-function hoistModulePreloadsFromFrameHead(html, context) {
+function hoistClientEntryResourcesFromFrameHead(html, resources) {
     if (!html.startsWith(FRAME_HEAD_OPEN_TAG))
         return html;
-    let tags = [];
-    let remainingHeadStart = FRAME_HEAD_OPEN_TAG.length;
-    while (html.startsWith(MARKED_MODULE_PRELOAD_START, remainingHeadStart)) {
-        let tagEnd = html.indexOf(MODULE_PRELOAD_END, remainingHeadStart + MARKED_MODULE_PRELOAD_START.length);
-        if (tagEnd === -1)
+    let headClose = html.indexOf(FRAME_HEAD_CLOSE_TAG, FRAME_HEAD_OPEN_TAG.length);
+    if (headClose === -1)
+        return html;
+    let preloadTags = [];
+    let importMaps = [];
+    let cursor = FRAME_HEAD_OPEN_TAG.length;
+    if (html.startsWith(MANAGED_IMPORT_MAP_START, cursor)) {
+        let contentStart = cursor + MANAGED_IMPORT_MAP_START.length;
+        let scriptEnd = html.indexOf(IMPORT_MAP_SCRIPT_END, contentStart);
+        if (scriptEnd === -1 || scriptEnd >= headClose)
+            return html;
+        importMaps.push(parseFrameworkImportMap(html.slice(contentStart, scriptEnd)));
+        cursor = scriptEnd + IMPORT_MAP_SCRIPT_END.length;
+    }
+    while (html.startsWith(MARKED_MODULE_PRELOAD_START, cursor)) {
+        let tagEnd = html.indexOf(MODULE_PRELOAD_END, cursor + MARKED_MODULE_PRELOAD_START.length);
+        if (tagEnd === -1 || tagEnd >= headClose)
             return html;
         tagEnd += MODULE_PRELOAD_END.length;
-        tags.push(html.slice(remainingHeadStart, tagEnd));
-        remainingHeadStart = tagEnd;
+        preloadTags.push(html.slice(cursor, tagEnd));
+        cursor = tagEnd;
     }
-    if (tags.length === 0)
-        return html;
-    let headClose = html.indexOf(FRAME_HEAD_CLOSE_TAG, remainingHeadStart);
-    if (headClose === -1)
+    if (preloadTags.length === 0 && importMaps.length === 0)
         return html;
-    for (let tag of tags) {
-        context.modulePreloadTags.add(tag);
+    for (let tag of preloadTags) {
+        resources.modulePreloadTags.add(tag);
     }
-    if (remainingHeadStart === headClose) {
-        return html.slice(headClose + FRAME_HEAD_CLOSE_TAG.length);
+    for (let importMap of importMaps) {
+        mergeImportMap(resources, importMap);
     }
-    return FRAME_HEAD_OPEN_TAG + html.slice(remainingHeadStart);
+    let remainingHeadHtml = html.slice(cursor, headClose);
+    let contentAfterHead = html.slice(headClose + FRAME_HEAD_CLOSE_TAG.length);
+    if (!remainingHeadHtml)
+        return contentAfterHead;
+    return `${FRAME_HEAD_OPEN_TAG}${remainingHeadHtml}${FRAME_HEAD_CLOSE_TAG}${contentAfterHead}`;
 }
 function processStyleProps(props) {
     let processedProps = { ...props };
@@ -976,11 +985,11 @@ function renderStyleTag(selector, css, layer = REMIX_UI_STYLE_LAYER) {
     let wrappedCss = wrapStyleForLayer(selector, css, layer);
     if (!wrappedCss)
         return '';
-    return `<style data-rmx="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`;
+    return `<style data-rmx-style="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`;
 }
 function escapeStyleText(css) {
-    // A literal "</style" closes an HTML style element even when it appears inside a CSS string.
-    return css.replace(/</g, '\\3C ');
+    // Only neutralize literal style end tags. Escaping every '<' breaks valid range media queries.
+    return css.replace(/<\/style/gi, '\\3C/style');
 }
 function buildRmxDataScript(context) {
     if (context.hydrationData.size === 0 && context.frameData.size === 0) {
@@ -996,10 +1005,212 @@ function buildRmxDataScript(context) {
     let serializedData = escapeScriptJson(JSON.stringify(data));
     return `<script type="application/json" id="rmx-data">${serializedData}</script>`;
 }
+function buildImportMapScript(importMap, attrs = '') {
+    let serializedData = escapeScriptJson(JSON.stringify(importMap));
+    return `<script data-rmx-import-map type="importmap"${attrs}>${serializedData}</script>`;
+}
+function collectImportMapScript(context, resources) {
+    let importMap = getImportMapDelta(context, resources.importMap);
+    return importMap ? buildImportMapScript(importMap) : '';
+}
+function finalizeManagedImportMap(context) {
+    let managed = context.managedImportMaps[0];
+    if (!managed)
+        return;
+    let resources = { modulePreloadTags: new Set() };
+    mergeImportMap(resources, managed.value);
+    if (context.clientEntryHeadResources.importMap) {
+        mergeImportMap(resources, context.clientEntryHeadResources.importMap);
+    }
+    managed.segment.html = buildImportMapScript(resources.importMap ?? {}, managed.attrs);
+    context.clientEntryHeadResources.importMap = undefined;
+}
+function getImportMapDelta(context, importMap) {
+    if (!importMap)
+        return null;
+    let imports = importMap.imports
+        ? getImportMapImportsDelta(context.authoredImportMapImports, importMap.imports)
+        : undefined;
+    let scopes = {};
+    for (let [scope, scopedImports] of Object.entries(importMap.scopes ?? {})) {
+        let authoredImports = context.authoredImportMapScopes.get(scope)?.imports ?? new Map();
+        let importsDelta = getImportMapImportsDelta(authoredImports, scopedImports, scope);
+        if (importsDelta)
+            scopes[scope] = importsDelta;
+    }
+    let integrity = importMap.integrity
+        ? getImportMapIntegrityDelta(context.authoredImportMapIntegrity, importMap.integrity)
+        : undefined;
+    if (!imports && Object.keys(scopes).length === 0 && !integrity)
+        return null;
+    return {
+        ...(imports ? { imports } : null),
+        ...(Object.keys(scopes).length > 0 ? { scopes } : null),
+        ...(integrity ? { integrity } : null),
+    };
+}
+function getImportMapImportsDelta(authoredImports, discoveredImports, scope) {
+    let delta = {};
+    for (let [specifier, address] of Object.entries(discoveredImports)) {
+        if (!authoredImports.has(specifier)) {
+            delta[specifier] = address;
+            continue;
+        }
+        let authoredAddress = authoredImports.get(specifier);
+        if (authoredAddress === address)
+            continue;
+        let scopeDescription = scope ? ` in scope "${scope}"` : '';
+        console.warn(`[remix] Ignoring conflicting import map entry for "${specifier}"${scopeDescription}: ` +
+            `${formatImportMapAddress(authoredAddress)} is already authored, but the discovered map points to ${formatImportMapAddress(address)}`);
+    }
+    return Object.keys(delta).length > 0 ? delta : undefined;
+}
+function getImportMapIntegrityDelta(authoredIntegrity, discoveredIntegrity) {
+    let delta = {};
+    for (let [url, integrity] of Object.entries(discoveredIntegrity)) {
+        if (!authoredIntegrity.has(url)) {
+            delta[url] = integrity;
+            continue;
+        }
+        let authoredIntegrityValue = authoredIntegrity.get(url);
+        if (authoredIntegrityValue === integrity)
+            continue;
+        console.warn(`[remix] Ignoring conflicting import map integrity entry for "${url}": ` +
+            `"${authoredIntegrityValue}" is already authored, but the discovered map points to "${integrity}"`);
+    }
+    return Object.keys(delta).length > 0 ? delta : undefined;
+}
+function parseAuthoredImportMap(json) {
+    let value;
+    try {
+        value = JSON.parse(json);
+    }
+    catch {
+        return null;
+    }
+    if (!isObjectRecord(value))
+        return null;
+    let importMap = {};
+    if (value.imports !== undefined) {
+        if (!isObjectRecord(value.imports))
+            return null;
+        importMap.imports = parseAuthoredImportMapImports(value.imports);
+    }
+    if (value.scopes !== undefined) {
+        if (!isObjectRecord(value.scopes))
+            return null;
+        let scopes = [];
+        for (let [scope, imports] of Object.entries(value.scopes)) {
+            if (!isObjectRecord(imports))
+                continue;
+            scopes.push([scope, parseAuthoredImportMapImports(imports)]);
+        }
+        importMap.scopes = Object.fromEntries(scopes);
+    }
+    if (value.integrity !== undefined) {
+        if (!isObjectRecord(value.integrity))
+            return null;
+        importMap.integrity = Object.fromEntries(Object.entries(value.integrity).filter((entry) => typeof entry[1] === 'string'));
+    }
+    return importMap;
+}
+function parseAuthoredImportMapImports(value) {
+    return Object.fromEntries(Object.entries(value).map(([specifier, address]) => [
+        specifier,
+        address === null || typeof address === 'string' ? address : null,
+    ]));
+}
+function parseFrameworkImportMap(json) {
+    let value;
+    try {
+        value = JSON.parse(json);
+    }
+    catch {
+        throw new Error('Invalid framework-owned import map in frame head');
+    }
+    if (!isImportMap(value)) {
+        throw new Error('Invalid framework-owned import map in frame head');
+    }
+    return value;
+}
+function isImportMap(value) {
+    if (!isObjectRecord(value))
+        return false;
+    if (value.imports !== undefined && !isImportMapImports(value.imports))
+        return false;
+    if (value.scopes !== undefined) {
+        if (!isObjectRecord(value.scopes))
+            return false;
+        for (let imports of Object.values(value.scopes)) {
+            if (!isImportMapImports(imports))
+                return false;
+        }
+    }
+    if (value.integrity !== undefined && !isImportMapIntegrity(value.integrity))
+        return false;
+    return true;
+}
+function isImportMapImports(value) {
+    if (!isObjectRecord(value))
+        return false;
+    return Object.values(value).every((address) => address === null || typeof address === 'string');
+}
+function isImportMapIntegrity(value) {
+    if (!isObjectRecord(value))
+        return false;
+    return Object.values(value).every((integrity) => typeof integrity === 'string');
+}
+function isObjectRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function mergeImportMap(resources, source) {
+    let target = (resources.importMap ??= {});
+    if (source.imports) {
+        target.imports ??= {};
+        mergeImportMapImports(target.imports, source.imports);
+    }
+    if (source.scopes) {
+        target.scopes ??= {};
+        for (let [scope, imports] of Object.entries(source.scopes)) {
+            let targetImports = (target.scopes[scope] ??= {});
+            mergeImportMapImports(targetImports, imports, scope);
+        }
+    }
+    if (source.integrity) {
+        target.integrity ??= {};
+        mergeImportMapIntegrity(target.integrity, source.integrity);
+    }
+}
+function mergeImportMapImports(target, source, scope) {
+    for (let [specifier, address] of Object.entries(source)) {
+        if (!Object.hasOwn(target, specifier)) {
+            target[specifier] = address;
+            continue;
+        }
+        if (target[specifier] !== address) {
+            let scopeDescription = scope ? ` in scope "${scope}"` : '';
+            throw new Error(`Conflicting framework import map entry for "${specifier}"${scopeDescription}`);
+        }
+    }
+}
+function mergeImportMapIntegrity(target, source) {
+    for (let [url, integrity] of Object.entries(source)) {
+        if (!Object.hasOwn(target, url)) {
+            target[url] = integrity;
+            continue;
+        }
+        if (target[url] !== integrity) {
+            throw new Error(`Conflicting framework import map integrity entry for "${url}"`);
+        }
+    }
+}
 function escapeScriptJson(json) {
     // Avoid prematurely closing the script tag when serialized data contains "</script>".
     return json.replace(/</g, '\\u003c');
 }
+function formatImportMapAddress(address) {
+    return address === null ? 'null' : `"${address}"`;
+}
 // Frame styles work end-to-end when frame handlers use their own `renderToStream`:
 // the handler's `finalizeHtml` emits selector-addressed `<style>` tags in its HTML, and on the client,
 // the `adoptServerStyleTag` MutationObserver (stylesheet.ts) picks it up anywhere in the