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

package/dist/esm/di/di.js

@@ -11,7 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
  * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
  * for the bulk of this code and many of the associated tests.
  */
-import { Context, ContextEvent, } from "../context.js";
+import { Context, } from "../context.js";
 import { Message } from "../interfaces.js";
 import { Metadata } from "../metadata.js";
 import { emptyArray, FAST } from "../platform.js";
@@ -181,7 +181,7 @@ function createContext(nameConfigOrCallback, configuror) {
             return configure(new ResolverBuilder(container, key !== null && key !== void 0 ? key : Interface));
         };
     }
-    Interface.toString = function toString() {
+    Interface.toString = function interfaceToString() {
         return `DIContext<${Interface.name}>`;
     };
     return Interface;
@@ -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:
@@ -1132,9 +1133,7 @@ export class ContainerImpl {
     }
     getAll(key, searchAncestors = false) {
         validateKey(key);
-        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
-        const requestor = this;
-        let current = requestor;
+        let current = this;
         let resolver;
         if (searchAncestors) {
             let resolutions = emptyArray;
@@ -1143,7 +1142,7 @@ export class ContainerImpl {
                 if (resolver != null) {
                     resolutions = resolutions.concat(
                     /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                    buildAllResponse(resolver, current, requestor));
+                    buildAllResponse(resolver, current, this));
                 }
                 current = current.parent;
             }
@@ -1159,7 +1158,7 @@ export class ContainerImpl {
                     }
                 }
                 else {
-                    return buildAllResponse(resolver, current, requestor);
+                    return buildAllResponse(resolver, current, this);
                 }
             }
         }
@@ -1199,7 +1198,7 @@ export class ContainerImpl {
             if (!(registrationResolver instanceof Object) ||
                 registrationResolver.resolve == null) {
                 const newResolver = handler.resolvers.get(keyAsValue);
-                if (newResolver != void 0) {
+                if (newResolver !== void 0) {
                     return newResolver;
                 }
                 throw FAST.error(Message.invalidResolver);

package/dist/esm/directives/children.js

@@ -0,0 +1 @@
+export { ChildrenDirective, children, } from "../templating/children.js";

package/dist/esm/directives/node-observation.js

@@ -0,0 +1 @@
+export { elements, NodeObservationDirective, } from "../templating/node-observation.js";

package/dist/esm/directives/ref.js

@@ -0,0 +1 @@
+export { RefDirective, ref } from "../templating/ref.js";

package/dist/esm/directives/repeat.js

@@ -0,0 +1 @@
+export { RepeatBehavior, RepeatDirective, repeat, } from "../templating/repeat.js";

package/dist/esm/directives/slotted.js

@@ -0,0 +1 @@
+export { SlottedDirective, slotted, } from "../templating/slotted.js";

package/dist/esm/directives/when.js

@@ -0,0 +1 @@
+export { when } from "../templating/when.js";

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
@@ -295,7 +325,7 @@ function createDOMGuards(config, defaults) {
 function createTrustedType() {
     const createHTML = html => html;
     return globalThis.trustedTypes
-        ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+        ? globalThis.trustedTypes.createPolicy("fast-element", { createHTML })
         : { createHTML };
 }
 function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
@@ -311,10 +341,10 @@ 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.
+     * @param options - The options to use in creating the policy.
      * @returns The newly created DOMPolicy.
      */
     create(options = {}) {
@@ -342,4 +372,3 @@ const DOMPolicy = Object.freeze({
         });
     },
 });
-export { DOMPolicy };

package/dist/esm/dom.js

@@ -36,7 +36,7 @@ export const DOMAspect = Object.freeze({
 });
 const createHTML = html => html;
 const fastTrustedType = globalThis.trustedTypes
-    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+    ? globalThis.trustedTypes.createPolicy("fast-element", { createHTML })
     : { createHTML };
 let defaultPolicy = Object.freeze({
     createHTML(value) {

package/dist/esm/html.js

@@ -0,0 +1,2 @@
+export { html, InlineTemplateDirective, ViewTemplate, } from "./templating/template.js";
+export { HTMLView } from "./templating/view.js";

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;
+}

package/dist/esm/hydration/hydration-debugger.js

@@ -0,0 +1,112 @@
+import { DOMAspect } from "../dom.js";
+import { aspectLabelAttribute, aspectLabelBooleanAttribute, aspectLabelContent, aspectLabelEvent, aspectLabelProperty, aspectLabelTokenList, aspectLabelUnknown, formatAspect, formatExpectedTarget, formatRichMismatchMessage, unknownHostName, } from "./messages.js";
+const aspectLabelsByCode = Object.freeze({
+    [DOMAspect.attribute]: aspectLabelAttribute,
+    [DOMAspect.booleanAttribute]: aspectLabelBooleanAttribute,
+    [DOMAspect.property]: aspectLabelProperty,
+    [DOMAspect.content]: aspectLabelContent,
+    [DOMAspect.tokenList]: aspectLabelTokenList,
+    [DOMAspect.event]: aspectLabelEvent,
+});
+const defaultSnippetLength = 500;
+function describeAspect(aspectType, sourceAspect) {
+    var _a;
+    const base = aspectType !== undefined
+        ? ((_a = aspectLabelsByCode[aspectType]) !== null && _a !== void 0 ? _a : aspectLabelUnknown)
+        : aspectLabelUnknown;
+    return formatAspect(base, sourceAspect);
+}
+function describeExpectedTarget(factory) {
+    var _a;
+    const aspectType = factory.aspectType;
+    const sourceAspect = factory.sourceAspect;
+    return {
+        tagName: (_a = factory.targetTagName) !== null && _a !== void 0 ? _a : null,
+        aspect: describeAspect(aspectType, sourceAspect),
+    };
+}
+function stripEmptyComments(root) {
+    var _a;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+    const empties = [];
+    let current;
+    while ((current = walker.nextNode()) !== null) {
+        if (current.data === "") {
+            empties.push(current);
+        }
+    }
+    for (const comment of empties) {
+        (_a = comment.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(comment);
+    }
+}
+function truncate(value, maxLength) {
+    return value.length > maxLength ? `${value.slice(0, maxLength)}…` : value;
+}
+function serializeNodeForError(node, maxLength = defaultSnippetLength) {
+    const wrapper = document.createElement("div");
+    wrapper.appendChild(node.cloneNode(true));
+    stripEmptyComments(wrapper);
+    return truncate(wrapper.innerHTML.trim(), maxLength);
+}
+function serializeRangeForError(first, last, maxLength = defaultSnippetLength) {
+    const wrapper = document.createElement("div");
+    let current = first;
+    while (current !== null) {
+        wrapper.appendChild(current.cloneNode(true));
+        if (current === last) {
+            break;
+        }
+        current = current.nextSibling;
+    }
+    stripEmptyComments(wrapper);
+    return truncate(wrapper.innerHTML.trim(), maxLength);
+}
+function formatMismatchMessage(hostName, expected, received) {
+    const host = (hostName !== null && hostName !== void 0 ? hostName : unknownHostName).toLowerCase();
+    const expectedText = typeof expected === "string"
+        ? expected
+        : formatExpectedTarget(expected.tagName, expected.aspect);
+    return formatRichMismatchMessage(host, expectedText, received.html);
+}
+const richDiagnostic = {
+    formatBindingMismatch(factory, firstChild, lastChild, hostName) {
+        const expected = describeExpectedTarget(factory);
+        const received = {
+            html: serializeRangeForError(firstChild, lastChild),
+        };
+        const result = {
+            message: formatMismatchMessage(hostName, expected, received),
+            expected,
+            received,
+        };
+        return result;
+    },
+    formatStructuralError(node, hostName, expectedDescription) {
+        const received = {
+            html: serializeNodeForError(node),
+        };
+        const result = {
+            message: formatMismatchMessage(hostName, expectedDescription, received),
+            expected: expectedDescription,
+            received,
+        };
+        return result;
+    },
+};
+/**
+ * Returns a {@link HydrationDebugger} that, when supplied to
+ * `enableHydration({ debugger })`, installs the rich hydration mismatch
+ * formatter: a single-line "Expected … / Received …" message plus an HTML
+ * snippet of the SSR DOM and structured `expected`/`received` fields on
+ * the thrown error (both `HydrationBindingError` and
+ * `HydrationTargetElementError`).
+ *
+ * Without the debugger, hydration errors emit only a minimal one-line
+ * message pointing at this function — keeping the runtime hydration cost
+ * small for production bundles that do not need rich diagnostics.
+ *
+ * @public
+ */
+export function hydrationDebugger() {
+    return { diagnostic: richDiagnostic };
+}

package/dist/esm/hydration/messages.js

@@ -0,0 +1,84 @@
+/**
+ * Centralized hydration mismatch message strings used by both the default
+ * minimal `HydrationDiagnostic` and the opt-in `hydrationDebugger` rich
+ * formatter, and by the structural-error throw sites in
+ * `target-builder.ts`.
+ *
+ * Static text is exported as a plain `const`; interpolated text is exported
+ * as a small builder function. Plain `export const` declarations tree-shake
+ * better than frozen-object property bags, so unused strings drop out of
+ * bundles cleanly.
+ */
+/**
+ * Fallback host tag name used when a hydration mismatch is detected on a
+ * node that is not inside a shadow root.
+ */
+export const unknownHostName = "unknown";
+// -- Aspect labels (consumed by the opt-in hydrationDebugger) ----------------
+export const aspectLabelAttribute = "attribute";
+export const aspectLabelBooleanAttribute = "boolean attribute";
+export const aspectLabelProperty = "property";
+export const aspectLabelContent = "content";
+export const aspectLabelTokenList = "token list";
+export const aspectLabelEvent = "event";
+/** Fallback used when the aspectType is missing or unknown. */
+export const aspectLabelUnknown = "binding";
+/**
+ * Combines an aspect label with the original source aspect identifier from
+ * markup (e.g. `"property className"`). Returns the bare label when no
+ * source aspect was captured.
+ */
+export function formatAspect(label, sourceAspect) {
+    return sourceAspect ? `${label} \`${sourceAspect}\`` : label;
+}
+/**
+ * Formats the "Expected" half of the rich hydration mismatch message, e.g.
+ * `"<span> with content binding"` or `"content binding"` when no tag is
+ * associated with the binding factory.
+ */
+export function formatExpectedTarget(tagName, aspect) {
+    return tagName
+        ? `<${tagName.toLowerCase()}> with ${aspect} binding`
+        : `${aspect} binding`;
+}
+/**
+ * Default minimal hydration mismatch message used when the
+ * `hydrationDebugger` opt-in is not installed. The optional `detail` string
+ * carries the structural expectation surfaced by `target-builder.ts`.
+ */
+export function formatDefaultMismatchMessage(hostName, detail) {
+    const suffix = detail ? `: ${detail}` : "";
+    return (`Hydration mismatch in <${hostName}>${suffix}. Install ` +
+        `hydrationDebugger() from "@microsoft/fast-element/hydration.js" and ` +
+        `pass it as enableHydration({ debugger: hydrationDebugger() }) for an ` +
+        `"Expected / Received" report including the SSR HTML snippet.`);
+}
+/**
+ * Rich `Expected … / Received …` hydration mismatch message format produced
+ * by the `hydrationDebugger` formatter.
+ */
+export function formatRichMismatchMessage(hostName, expectedText, receivedHtml) {
+    return (`Hydration mismatch in <${hostName}>.\n` +
+        `  Expected: ${expectedText}\n` +
+        `  Received: ${receivedHtml}`);
+}
+// -- Structural expectations (used by target-builder.ts throw sites) ---------
+export const expectedContentAfterStartMarker = "content following `<!--fe:b-->` content binding marker";
+export const expectedContentEndMarker = "matching `<!--fe:/b-->` content binding close marker";
+export const expectedElementBoundaryEndMarker = "matching `<!--fe:/e-->` element boundary close marker";
+/**
+ * Builds the "no more attribute bindings" structural expectation message
+ * thrown when an element's `data-fe` count claims more attribute bindings
+ * than the compiled template defines.
+ */
+export function formatNoMoreAttributeBindings(factoryCount) {
+    return `no more attribute bindings (template defines ${factoryCount})`;
+}
+/**
+ * Builds the "no more content bindings" structural expectation message
+ * thrown when the SSR DOM contains more content binding markers than the
+ * compiled template defines.
+ */
+export function formatNoMoreContentBindings(factoryCount) {
+    return `no more content bindings (template defines ${factoryCount})`;
+}

package/dist/esm/hydration/runtime.js

@@ -0,0 +1,33 @@
+import { Hydratable } from "../components/hydration.js";
+import { ViewTemplate } from "../templating/template.js";
+import { HydrationView } from "../templating/hydration-view.js";
+let installed = false;
+/**
+ * Installs the hydration runtime on `ViewTemplate.prototype`,
+ * making all templates hydratable. Call this before any hydration
+ * occurs. Safe to call multiple times — subsequent calls are no-ops.
+ * @internal
+ */
+export function ensureHydrationRuntime() {
+    if (installed) {
+        return;
+    }
+    const prototype = ViewTemplate.prototype;
+    if (prototype[Hydratable] !== Hydratable) {
+        Object.defineProperties(prototype, {
+            [Hydratable]: {
+                value: Hydratable,
+                enumerable: false,
+                configurable: false,
+            },
+            hydrate: {
+                value(firstChild, lastChild, hostBindingTarget) {
+                    return new HydrationView(firstChild, lastChild, this, hostBindingTarget);
+                },
+                enumerable: true,
+                configurable: false,
+            },
+        });
+    }
+    installed = true;
+}