@microsoft/fast-element 3.0.0-rc.1 → 3.0.0-rc.2

package/dist/esm/declarative/index.js

@@ -1,3 +1,4 @@
 export { Schema, schemaRegistry, } from "../components/schema.js";
+export { DOMPolicy, } from "../dom-policy.js";
 export { declarativeTemplate } from "./template.js";
 export { TemplateParser } from "./template-parser.js";

package/dist/esm/declarative/interfaces.js

@@ -6,5 +6,4 @@ export var Message;
 (function (Message) {
     Message[Message["noTemplateProvided"] = 2000] = "noTemplateProvided";
     Message[Message["moreThanOneTemplateProvided"] = 2001] = "moreThanOneTemplateProvided";
-    Message[Message["moreThanOneMatchingTemplateProvided"] = 2002] = "moreThanOneMatchingTemplateProvided";
 })(Message || (Message = {}));

package/dist/esm/declarative/observer-map-utilities.js

@@ -7,7 +7,7 @@ const objectTargetsMap = new WeakMap();
 /**
  * A map of arrays being observed.
  */
-const observedArraysMap = new WeakMap();
+const observedArraysMap = new WeakSet();
 /**
  * Determines the data type of the provided data
  * @param data - The data to analyze
@@ -76,6 +76,37 @@ function hasObservedSchemaDescendant(schema) {
 function isSchemaExcluded(schema) {
     return (schema === null || schema === void 0 ? void 0 : schema.$observe) === false && !hasObservedSchemaDescendant(schema);
 }
+function defineObservableProperty(targetObject, key, schema, rootSchema, target, rootProperty) {
+    if (!Observable.getAccessors(targetObject).some(accessor => accessor.name === key)) {
+        const field = `_${key}`;
+        const callback = `${key}Changed`;
+        const accessor = {
+            name: key,
+            getValue(source) {
+                Observable.track(source, key);
+                return source[field];
+            },
+            setValue(source, value) {
+                const oldValue = source[field];
+                const newValue = assignObservables(schema, rootSchema, value, target, rootProperty);
+                if (oldValue !== newValue) {
+                    source[field] = newValue;
+                    const changeCallback = source[callback];
+                    if (typeof changeCallback === "function") {
+                        changeCallback.call(source, oldValue, newValue);
+                    }
+                    Observable.notify(source, key);
+                }
+            },
+        };
+        Observable.defineProperty(targetObject, accessor);
+    }
+}
+function findArrayItemDef(schema) {
+    var _a;
+    const items = schema.items;
+    return (_a = findDef(schema)) !== null && _a !== void 0 ? _a : (items === undefined ? null : findDef(items));
+}
 /**
  * Assigns Observable properties to items in an array and sets up change notifications
  * @param proxiedData - The array data to make observable
@@ -92,28 +123,31 @@ function assignObservablesToArray(proxiedData, schema, rootSchema, target, rootP
     const data = schemaProperties
         ? proxiedData.map((item) => {
             const originalItem = Object.assign({}, item);
-            assignProxyToItemsInArray(item, originalItem, schema, rootSchema);
+            assignProxyToItemsInArray(item, originalItem, schema, rootSchema, target, rootProperty);
             return Object.assign(item, originalItem);
         })
         : proxiedData;
-    Observable.getNotifier(data).subscribe({
-        handleChange(subject, args) {
-            args.forEach((arg) => {
-                if (arg.addedCount > 0) {
-                    if (schemaProperties) {
-                        for (let i = arg.addedCount - 1; i >= 0; i--) {
-                            const item = subject[arg.index + i];
-                            const originalItem = Object.assign({}, item);
-                            assignProxyToItemsInArray(item, originalItem, schema, rootSchema);
-                            Object.assign(item, originalItem);
+    if (!observedArraysMap.has(data)) {
+        observedArraysMap.add(data);
+        Observable.getNotifier(data).subscribe({
+            handleChange(subject, args) {
+                args.forEach((arg) => {
+                    if (arg.addedCount > 0) {
+                        if (schemaProperties) {
+                            for (let i = arg.addedCount - 1; i >= 0; i--) {
+                                const item = subject[arg.index + i];
+                                const originalItem = Object.assign({}, item);
+                                assignProxyToItemsInArray(item, originalItem, schema, rootSchema, target, rootProperty);
+                                Object.assign(item, originalItem);
+                            }
                         }
+                        // Notify observers of the target object's root property
+                        Observable.notify(target, rootProperty);
                     }
-                    // Notify observers of the target object's root property
-                    Observable.notify(target, rootProperty);
-                }
-            });
-        },
-    });
+                });
+            },
+        });
+    }
     if (schemaProperties !== null) {
         return data;
     }
@@ -175,20 +209,6 @@ export function findDef(schema) {
     }
     return null;
 }
-/**
- * Subscribe to a notifier on data that is an observed array
- * @param data - The array being observed
- * @param updateArrayObservables - The function to call to update the array item
- */
-function assignSubscribeToObservableArray(data, updateArrayObservables) {
-    Observable.getNotifier(data).subscribe({
-        handleChange(subject, args) {
-            args.forEach((arg) => {
-                updateArrayObservables();
-            });
-        },
-    });
-}
 /**
  * Assign observables to data
  * @param schema - The schema
@@ -205,15 +225,9 @@ export function assignObservables(schema, rootSchema, data, target, rootProperty
     let proxiedData = data;
     switch (dataType) {
         case "array": {
-            const context = findDef(schema);
+            const context = findArrayItemDef(schema);
             if (context) {
                 proxiedData = assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema, target, rootProperty);
-                if (!observedArraysMap.has(proxiedData)) {
-                    observedArraysMap.set(proxiedData, assignSubscribeToObservableArray(proxiedData, () => {
-                        var _a;
-                        return assignObservablesToArray(proxiedData, (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context], rootSchema, target, rootProperty);
-                    }));
-                }
             }
             else {
                 // Primitive array (items have no schema $ref): wrap in a proxy so that
@@ -237,7 +251,7 @@ export function assignObservables(schema, rootSchema, data, target, rootProperty
  * @param schema - The schema mapping to the items in the array
  * @param rootSchema - The root schema assigned to the root property
  */
-function assignProxyToItemsInArray(proxiableItem, originalItem, schema, rootSchema) {
+function assignProxyToItemsInArray(proxiableItem, originalItem, schema, rootSchema, target, rootProperty) {
     const schemaProperties = getSchemaProperties(schema);
     getObjectProperties(proxiableItem, schemaProperties).forEach(key => {
         const childSchema = schemaProperties[key];
@@ -252,7 +266,7 @@ function assignProxyToItemsInArray(proxiableItem, originalItem, schema, rootSche
         // Assign the proxy first
         originalItem[key] = assignProxyToItemsInObject(proxiableItem, key, originalItem[key], schemaProperties[key], rootSchema);
         // Then make the property observable
-        Observable.defineProperty(proxiableItem, key);
+        defineObservableProperty(proxiableItem, key, childSchema, rootSchema, target, rootProperty);
     });
 }
 /**
@@ -303,14 +317,11 @@ function assignProxyToItemsInObject(target, rootProperty, data, schema, rootSche
         }
     }
     else if (type === "array") {
-        const context = findDef(schema.items);
+        const context = findArrayItemDef(schema);
         if (context) {
             const definition = (_a = rootSchema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[context];
             if ((definition === null || definition === void 0 ? void 0 : definition.type) === "object") {
                 proxiedData = assignObservablesToArray(proxiedData, definition, rootSchema, target, rootProperty);
-                if (!observedArraysMap.has(proxiedData)) {
-                    observedArraysMap.set(proxiedData, assignSubscribeToObservableArray(proxiedData, () => assignObservablesToArray(proxiedData, definition, rootSchema, target, rootProperty)));
-                }
             }
         }
     }
@@ -374,7 +385,7 @@ export function assignProxy(schema, rootSchema, target, rootProperty, object) {
                     obj[prop] = value;
                     return true;
                 }
-                obj[prop] = assignObservables(schema, rootSchema, value, target, rootProperty);
+                obj[prop] = assignObservables(childSchema !== null && childSchema !== void 0 ? childSchema : schema, rootSchema, value, target, rootProperty);
                 notifyObservables(proxy);
                 return true;
             },
@@ -531,16 +542,8 @@ export function deepMerge(target, source) {
         }
         hasChanges = true;
         if (Array.isArray(sourceValue)) {
-            const isTargetArray = Array.isArray(targetValue);
             const clonedItems = sourceValue.map((item) => isPlainObject(item) ? Object.assign({}, item) : item);
-            if (isTargetArray) {
-                // Use splice to maintain observable array tracking
-                targetValue.splice(0, targetValue.length, ...clonedItems);
-            }
-            else {
-                // Target isn't an array, replace it
-                target[key] = clonedItems;
-            }
+            target[key] = clonedItems;
             continue;
         }
         if (isPlainObject(sourceValue)) {

package/dist/esm/declarative/template-bridge.js

@@ -1,5 +1,3 @@
-import { FAST } from "../platform.js";
-import { Message } from "./interfaces.js";
 /**
  * Coordinates declarative template publishers and FAST element definitions.
  * Requests are keyed by registry + element name so scoped registries can
@@ -75,20 +73,12 @@ export class DeclarativeTemplateBridge {
         if (!bucket) {
             return;
         }
-        const publishers = [...bucket.publishers];
-        if (publishers.length > 1) {
-            const error = FAST.error(Message.moreThanOneMatchingTemplateProvided, {
-                name,
-            });
-            for (const request of [...bucket.requests]) {
-                this.rejectRequest(registry, name, bucket, request, error);
-            }
-            return;
-        }
-        if (publishers.length === 0) {
+        // Set iteration preserves insertion order, so duplicate publishers leave
+        // the first connected publisher responsible for pending requests.
+        const publisher = bucket.publishers.values().next().value;
+        if (publisher === undefined) {
             return;
         }
-        const [publisher] = publishers;
         for (const request of bucket.requests) {
             if (request.settled) {
                 continue;

package/dist/esm/declarative/template.js

@@ -14,7 +14,7 @@ import { Message } from "./interfaces.js";
 import { ensureDeclarativeRuntime } from "./runtime.js";
 import { declarativeTemplateBridge } from "./template-bridge.js";
 import { TemplateParser } from "./template-parser.js";
-import { transformInnerHTML } from "./utilities.js";
+import { escapeBracesInCodeElements, transformInnerHTML } from "./utilities.js";
 const templateElementName = "f-template";
 const ensuredTemplateElements = new WeakMap();
 function isTemplateElementConstructor(value) {
@@ -114,7 +114,8 @@ class FTemplateElement extends HTMLElement {
         declarativeTemplateBridge.movePublisher(this.registry, previousName !== null && previousName !== void 0 ? previousName : undefined, nextName !== null && nextName !== void 0 ? nextName : undefined, this);
     }
     publishTemplate(definition) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
+        var _e;
         ensureDeclarativeRuntime();
         const name = definition.name;
         const templates = Array.from(this.children).filter((child) => child.tagName === "TEMPLATE");
@@ -130,7 +131,7 @@ class FTemplateElement extends HTMLElement {
         (_d = (_c = definition.lifecycleCallbacks) === null || _c === void 0 ? void 0 : _c.templateWillUpdate) === null || _d === void 0 ? void 0 : _d.call(_c, name);
         const schema = (_e = definition.schema) !== null && _e !== void 0 ? _e : new Schema(name);
         definition.schema = schema;
-        const innerHTML = transformInnerHTML(this.innerHTML);
+        const innerHTML = transformInnerHTML(escapeBracesInCodeElements(this.innerHTML));
         const parser = new TemplateParser();
         const { strings, values } = parser.parse(innerHTML, schema);
         for (const transform of getDefinitionSchemaTransforms(definition)) {

package/dist/esm/declarative/utilities.js

@@ -6,7 +6,7 @@ export { assignObservables, assignProxy, deepEqual, deepMerge, findDef, isPlainO
  * @public
  */
 export const contextPrefixDot = `${executionContextAccessor}.`;
-export { eventArgAccessor, executionContextAccessor };
+export { attributeDirectivePrefix, clientSideCloseExpression, clientSideOpenExpression, closeExpression, eventArgAccessor, executionContextAccessor, openExpression, };
 /**
  * Parses the arguments string of an event handler binding into an array of
  * typed argument descriptors. Unrecognised tokens are returned as `"binding"`
@@ -754,6 +754,241 @@ export function transformInnerHTML(innerHTML, index = 0) {
     }
     return transformedInnerHTML;
 }
+/**
+ * Tag name of the HTML element whose contents are auto-escaped to render
+ * code samples literally. Inside this element FAST binding delimiters
+ * (`{{...}}`, `{{{...}}}`, `{...}`) are neutralised by replacing each
+ * `{` / `}` with the HTML numeric character reference `{` /
+ * `}` so the literal text is rendered instead of a binding.
+ *
+ * The escape behaviour is split between the server-side renderer
+ * (`escape_code_sample_elements` in `microsoft-fast-build`) and the
+ * client-side `<f-template>` parser (`escapeBracesInCodeElements`
+ * below):
+ *
+ *  - Curly-brace escape runs in **both** server and client because
+ *    `&#123;` / `&#125;` are decoded to literal `{` / `}` in the DOM
+ *    and the `.innerHTML` serializer does not re-encode them — so the
+ *    server-side escape would otherwise be undone on the client.
+ *  - Angle brackets of FAST directive tags (`<f-when>`, `</f-when>`,
+ *    `<f-repeat>`, `</f-repeat>`, case-insensitive) inside this element
+ *    are escaped on the **server only**. The DOM serializer
+ *    re-encodes `<` / `>` in text content automatically, so the client
+ *    never sees raw directive tags inside `<code>` regardless of what
+ *    the page source contained.
+ *  - Real HTML elements (`<button>`) and custom elements (`<my-widget>`)
+ *    inside this element keep their angle brackets and continue to
+ *    render as live DOM elements; only the brace-binding syntax inside
+ *    their text and attribute values is neutralised.
+ * @public
+ */
+export const codeElementName = "code";
+const CODE_ESCAPE_VOID_ELEMENTS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+/**
+ * Parse an opening tag at `pos` (which points at `<`). Returns the parsed tag
+ * descriptor if `<` introduces an element opening tag, otherwise `null`
+ * (e.g. for `</tag>`, `<!--`, `<!doctype`, `<?...`, or end-of-input).
+ *
+ * The parser is tolerant of attribute values containing `>` only when they
+ * are quoted; quoted attribute values are correctly handled so that a `>`
+ * inside quotes does not terminate the tag.
+ */
+function parseOpeningTagForCodeEscape(html, pos) {
+    if (html.charAt(pos) !== "<")
+        return null;
+    const next = html.charAt(pos + 1);
+    if (next === "/" || next === "!" || next === "?" || next === "")
+        return null;
+    if (!/[A-Za-z]/.test(next))
+        return null;
+    let nameEnd = pos + 1;
+    while (nameEnd < html.length && /[A-Za-z0-9-]/.test(html.charAt(nameEnd))) {
+        nameEnd++;
+    }
+    const tagName = html.slice(pos + 1, nameEnd).toLowerCase();
+    if (tagName === "")
+        return null;
+    let cursor = nameEnd;
+    while (cursor < html.length) {
+        while (cursor < html.length && /\s/.test(html.charAt(cursor)))
+            cursor++;
+        const ch = html.charAt(cursor);
+        if (ch === ">" || ch === "" || (ch === "/" && html.charAt(cursor + 1) === ">")) {
+            break;
+        }
+        while (cursor < html.length &&
+            !/[\s=>/]/.test(html.charAt(cursor)) &&
+            html.charAt(cursor) !== "") {
+            cursor++;
+        }
+        let attrTerminator = cursor;
+        while (attrTerminator < html.length && /\s/.test(html.charAt(attrTerminator))) {
+            attrTerminator++;
+        }
+        if (html.charAt(attrTerminator) === "=") {
+            cursor = attrTerminator + 1;
+            while (cursor < html.length && /\s/.test(html.charAt(cursor)))
+                cursor++;
+            const quote = html.charAt(cursor);
+            if (quote === '"' || quote === "'") {
+                const end = html.indexOf(quote, cursor + 1);
+                cursor = end === -1 ? html.length : end + 1;
+            }
+            else {
+                while (cursor < html.length && !/[\s>]/.test(html.charAt(cursor))) {
+                    cursor++;
+                }
+            }
+        }
+    }
+    let isSelfClosing = false;
+    if (html.charAt(cursor) === "/" && html.charAt(cursor + 1) === ">") {
+        isSelfClosing = true;
+        cursor += 2;
+    }
+    else if (html.charAt(cursor) === ">") {
+        cursor += 1;
+    }
+    else {
+        return null;
+    }
+    return {
+        tagName,
+        tagStart: pos,
+        tagEnd: cursor,
+        contentStart: cursor,
+        isSelfClosing: isSelfClosing || CODE_ESCAPE_VOID_ELEMENTS.has(tagName),
+    };
+}
+/**
+ * Find the position of the matching close tag for an element opened at
+ * `contentStart` with name `tagName`. Returns the index of the `<` of the
+ * matching `</tagName>` close tag, or `html.length` if no matching tag is
+ * found. Nested same-name elements are tracked via a depth counter.
+ */
+function findMatchingCloseTagForCodeEscape(html, contentStart, tagName) {
+    let depth = 1;
+    let pos = contentStart;
+    const closeNeedle = `</${tagName}`;
+    while (pos < html.length) {
+        const lt = html.indexOf("<", pos);
+        if (lt === -1)
+            return html.length;
+        const lowerSlice = html.slice(lt, lt + closeNeedle.length).toLowerCase();
+        if (lowerSlice === closeNeedle) {
+            const charAfter = html.charAt(lt + closeNeedle.length);
+            if (charAfter === ">" || /\s/.test(charAfter)) {
+                depth--;
+                if (depth === 0)
+                    return lt;
+                const gt = html.indexOf(">", lt);
+                pos = gt === -1 ? html.length : gt + 1;
+                continue;
+            }
+        }
+        if (html.startsWith("<!--", lt)) {
+            const end = html.indexOf("-->", lt + 4);
+            pos = end === -1 ? html.length : end + 3;
+            continue;
+        }
+        if (html.charAt(lt + 1) === "!" || html.charAt(lt + 1) === "?") {
+            const end = html.indexOf(">", lt);
+            pos = end === -1 ? html.length : end + 1;
+            continue;
+        }
+        if (html.charAt(lt + 1) === "/") {
+            const end = html.indexOf(">", lt);
+            pos = end === -1 ? html.length : end + 1;
+            continue;
+        }
+        const opening = parseOpeningTagForCodeEscape(html, lt);
+        if (opening === null) {
+            pos = lt + 1;
+            continue;
+        }
+        if (opening.tagName === tagName && !opening.isSelfClosing) {
+            depth++;
+        }
+        pos = opening.tagEnd;
+    }
+    return html.length;
+}
+function escapeBracesInCodeContent(content) {
+    return content.replace(/[{}]/g, c => (c === "{" ? "&#123;" : "&#125;"));
+}
+/**
+ * Preprocess an HTML string by escaping FAST brace characters inside every
+ * `<code>` element. Mirrors part of the brace/angle-bracket escaping
+ * behaviour of Microsoft WebUI's `webui-press` markdown renderer so that
+ * example template snippets inside `<code>` render literally instead of
+ * being interpreted as bindings.
+ *
+ * Nested `<code>` elements are handled via depth tracking. The pass is
+ * idempotent because `{` / `}` inside an already-processed `<code>` have
+ * been replaced with entities, so a second pass finds nothing to escape.
+ *
+ * This is the client-side half of a two-stage escape — see the JSDoc on
+ * {@link codeElementName} for why only braces are handled here and
+ * `<` / `>` are exclusively handled on the server.
+ * @public
+ */
+export function escapeBracesInCodeElements(innerHTML) {
+    if (innerHTML.indexOf("<code") === -1) {
+        return innerHTML;
+    }
+    let pos = 0;
+    let result = "";
+    while (pos < innerHTML.length) {
+        const lt = innerHTML.indexOf("<", pos);
+        if (lt === -1) {
+            result += innerHTML.slice(pos);
+            break;
+        }
+        if (innerHTML.startsWith("<!--", lt)) {
+            const end = innerHTML.indexOf("-->", lt + 4);
+            const tail = end === -1 ? innerHTML.length : end + 3;
+            result += innerHTML.slice(pos, tail);
+            pos = tail;
+            continue;
+        }
+        const opening = parseOpeningTagForCodeEscape(innerHTML, lt);
+        if (opening === null) {
+            result += innerHTML.slice(pos, lt + 1);
+            pos = lt + 1;
+            continue;
+        }
+        if (opening.tagName !== codeElementName) {
+            result += innerHTML.slice(pos, opening.tagEnd);
+            pos = opening.tagEnd;
+            continue;
+        }
+        result += innerHTML.slice(pos, opening.tagEnd);
+        if (opening.isSelfClosing) {
+            pos = opening.tagEnd;
+            continue;
+        }
+        const closeStart = findMatchingCloseTagForCodeEscape(innerHTML, opening.contentStart, codeElementName);
+        const innerContent = innerHTML.slice(opening.contentStart, closeStart);
+        result += escapeBracesInCodeContent(innerContent);
+        pos = closeStart;
+    }
+    return result;
+}
 /**
  * Resolves boolean logic
  * used for f-when and boolean attributes

package/dist/esm/di/di.js

@@ -800,7 +800,8 @@ export class ResolverImpl {
         }
     }
     getFactory(container) {
-        var _a, _b, _c;
+        var _a, _b;
+        var _c;
         switch (this.strategy) {
             case ResolverStrategy.singleton:
             case ResolverStrategy.transient:

package/dist/esm/dom-policy.js

@@ -1,10 +1,40 @@
 import { DOMAspect } from "./dom.js";
 import { isString, Message } from "./interfaces.js";
 import { FAST } from "./platform.js";
+const surroundingWhitespaceAndControlChars = /^[\u0000-\u0020\u007F]+|[\u0000-\u0020\u007F]+$/g;
+const whitespaceAndControlChars = /[\u0000-\u0020\u007F]+/g;
+const unsafeURLProtocol = /^(?:javascript|vbscript|data):/;
+function trimURL(value) {
+    return value.replace(surroundingWhitespaceAndControlChars, "");
+}
+function decodeURL(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch (_a) {
+        return value;
+    }
+}
+function hasUnsafeURLProtocol(value) {
+    let normalized = trimURL(value);
+    for (let i = 0; i < 3; ++i) {
+        const decoded = decodeURL(normalized);
+        if (decoded === normalized) {
+            break;
+        }
+        normalized = trimURL(decoded);
+    }
+    normalized = normalized.replace(whitespaceAndControlChars, "").toLowerCase();
+    return unsafeURLProtocol.test(normalized);
+}
+function sanitizeURL(value) {
+    const trimmed = trimURL(value);
+    return hasUnsafeURLProtocol(trimmed) ? "" : trimmed;
+}
 function safeURL(tagName, aspect, aspectName, sink) {
     return (target, name, value, ...rest) => {
         if (isString(value)) {
-            value = value.replace(/(javascript:|vbscript:|data:)/, "");
+            value = sanitizeURL(value);
         }
         sink(target, name, value, ...rest);
     };
@@ -266,7 +296,7 @@ function createElementGuards(config, defaults) {
                 break;
             case undefined:
                 // keep the default
-                result[tag] = createDOMAspectGuards(overrideValue, {});
+                result[tag] = createDOMAspectGuards(defaultValue, {});
                 break;
             default:
                 // override the default aspects
@@ -311,7 +341,7 @@ function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
  * A helper for creating DOM policies.
  * @public
  */
-const DOMPolicy = Object.freeze({
+export const DOMPolicy = Object.freeze({
     /**
      * Creates a new DOM Policy object.
      * @param options - The options to use in creating the policy.
@@ -342,4 +372,3 @@ const DOMPolicy = Object.freeze({
         });
     },
 });
-export { DOMPolicy };

package/dist/esm/hydration/diagnostics.js

@@ -0,0 +1,50 @@
+import { formatDefaultMismatchMessage, unknownHostName } from "./messages.js";
+function formatMinimalMessage(hostName, detail) {
+    const host = (hostName !== null && hostName !== void 0 ? hostName : unknownHostName).toLowerCase();
+    return formatDefaultMismatchMessage(host, detail);
+}
+const defaultDiagnostic = {
+    formatBindingMismatch(_factory, _firstChild, _lastChild, hostName) {
+        return {
+            message: formatMinimalMessage(hostName, undefined),
+        };
+    },
+    formatStructuralError(_node, hostName, expectedDescription) {
+        return {
+            message: formatMinimalMessage(hostName, expectedDescription),
+        };
+    },
+};
+let activeDiagnostic = defaultDiagnostic;
+/**
+ * Installs a {@link HydrationDiagnostic} as the active formatter for
+ * hydration mismatch errors. Called by `enableHydration()` when an opt-in
+ * debugger configuration is supplied; not exposed as `@public` because
+ * library consumers should always go through `enableHydration` to install
+ * a debugger.
+ * @internal
+ */
+export function installHydrationDiagnostic(diagnostic) {
+    activeDiagnostic = diagnostic;
+}
+/**
+ * Returns the currently active {@link HydrationDiagnostic} — either the
+ * minimal default or one installed by an opt-in debugger.
+ * @internal
+ */
+export function getHydrationDiagnostic() {
+    return activeDiagnostic;
+}
+/**
+ * Reads the host element's tag name from any node inside a hydration view.
+ * Returns `undefined` when the node is not inside a shadow root.
+ * @internal
+ */
+export function getHostName(node) {
+    var _a;
+    if (!node) {
+        return undefined;
+    }
+    const root = node.getRootNode();
+    return (_a = root.host) === null || _a === void 0 ? void 0 : _a.nodeName;
+}