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

package/dist/dts/templating/slotted.d.ts

@@ -35,4 +35,4 @@ export declare class SlottedDirective extends NodeObservationDirective<SlottedDi
  * @param propertyOrOptions - The options used to configure slotted node observation.
  * @public
  */
-export declare function slotted<TSource = any>(propertyOrOptions: (keyof TSource & string) | SlottedDirectiveOptions<keyof TSource & string>): CaptureType;
+export declare function slotted<TSource = any, TParent = any>(propertyOrOptions: (keyof TSource & string) | SlottedDirectiveOptions<keyof TSource & string>): CaptureType<TSource, TParent>;

package/dist/dts/templating/template.d.ts

@@ -1,5 +1,5 @@
 import { Binding } from "../binding/binding.js";
-import type { DOMPolicy } from "../dom.js";
+import type { DOMPolicy } from "../dom-policy.js";
 import type { Expression } from "../observation/observable.js";
 import { type AddViewBehaviorFactory, type CompiledViewBehaviorFactory, HTMLDirective, type ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
@@ -34,7 +34,7 @@ export interface HydratableElementViewTemplate<TSource = any, TParent = any> ext
  * into templates.
  * @public
  */
-export interface CaptureType {
+export interface CaptureType<TSource = any, TParent = any> {
 }
 /**
  * A template capable of rendering views not specifically connected to custom elements.
@@ -48,7 +48,7 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any> {
     /**
      * Returns a directive that can inline the template.
      */
-    inline(): CaptureType;
+    inline(): CaptureType<TSource, TParent>;
 }
 /**
  * A template capable of hydrating a synthetic view from existing DOM nodes.
@@ -73,7 +73,7 @@ export interface HTMLTemplateCompilationResult<TSource = any, TParent = any> {
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType;
+export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
 /**
  * Inlines a template into another template.
  * @public
@@ -126,7 +126,7 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
     /**
      * Returns a directive that can inline the template.
      */
-    inline(): CaptureType;
+    inline(): CaptureType<TSource, TParent>;
     /**
      * Sets the DOMPolicy for this template.
      * @param policy - The policy to associated with this template.

package/dist/dts/templating/when.d.ts

@@ -9,4 +9,4 @@ import type { CaptureType, SyntheticViewTemplate } from "./template.js";
  * gets the template to render when the conditional is false.
  * @public
  */
-export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType;
+export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;

package/dist/dts/testing/fakes.d.ts

@@ -1,15 +1,15 @@
 import { ExecutionContext } from "../observation/observable.js";
 import type { ViewBehavior, ViewBehaviorTargets } from "../templating/html-directive.js";
 export declare const Fake: Readonly<{
-    executionContext<TParent = any>(parent?: TParent | undefined, parentContext?: ExecutionContext<TParent> | undefined): ExecutionContext<TParent>;
-    viewController<TSource = any, TParent_1 = any>(targets?: ViewBehaviorTargets, ...behaviors: ViewBehavior<TSource, TParent_1>[]): {
+    executionContext<TParent = any>(parent?: TParent, parentContext?: ExecutionContext<TParent>): ExecutionContext<TParent>;
+    viewController<TSource = any, TParent = any>(targets?: ViewBehaviorTargets, ...behaviors: ViewBehavior<TSource, TParent>[]): {
         isBound: boolean;
-        context: ExecutionContext<TParent_1>;
+        context: ExecutionContext<TParent>;
         onUnbind(object: any): void;
         source: TSource;
         targets: ViewBehaviorTargets;
         toJSON: () => undefined;
-        bind(source: TSource, context?: ExecutionContext<TParent_1>): void;
+        bind(source: TSource, context?: ExecutionContext<TParent>): void;
         unbind(): void;
     };
 }>;

package/dist/esm/__test__/helpers.js

@@ -0,0 +1,22 @@
+export function toHTML(node, preserveCommentMarkup = false) {
+    return Array.from(node.childNodes)
+        .map((x) => {
+        if (preserveCommentMarkup && x.nodeType === 8) {
+            return `<!--${x.textContent}-->`;
+        }
+        return x.outerHTML || x.textContent;
+    })
+        .join("");
+}
+export function createTrackableDOMPolicy() {
+    return {
+        used: false,
+        createHTML: (html) => html,
+        protect(tagName, aspect, aspectName, sink) {
+            return (node, aspectName, value, ...args) => {
+                this.used = true;
+                sink(node, aspectName, value, ...args);
+            };
+        },
+    };
+}

package/dist/esm/__test__/setup-node.js

@@ -0,0 +1,18 @@
+"use strict";
+/* eslint-disable */
+if (window.document && !window.document.createRange) {
+    window.document.createRange = () => ({
+        setStart: () => { },
+        setEnd: () => { },
+        // @ts-ignore
+        commonAncestorContainer: {
+            nodeName: "BODY",
+            ownerDocument: document,
+        },
+    });
+}
+if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function (callback) {
+        return setTimeout(callback, 4);
+    };
+}

package/dist/esm/binding/two-way.js

@@ -34,8 +34,7 @@ class TwoWayObserver {
     bind(controller) {
         var _a;
         if (!this.changeEvent) {
-            this.changeEvent =
-                (_a = this.dataBinding.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(this.directive, this.target);
+            this.changeEvent = (_a = this.dataBinding.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(this.directive, this.target);
         }
         if (this.isNotBound) {
             this.target.addEventListener(this.changeEvent, this);

package/dist/esm/components/attributes.js

@@ -23,14 +23,10 @@ export const AttributeConfiguration = Object.freeze({
  */
 export const booleanConverter = {
     toView(value) {
-        return value ? "true" : "false";
+        return value ? "" : null;
     },
     fromView(value) {
-        return !(value === null ||
-            value === void 0 ||
-            value === "false" ||
-            value === false ||
-            value === 0);
+        return !!value;
     },
 };
 /**
@@ -70,7 +66,7 @@ export const nullableNumberConverter = {
     fromView: toNumber,
 };
 /**
- * An implementation of `Accessor` that supports reactivity,
+ * An implementation of {@link Accessor} that supports reactivity,
  * change callbacks, attribute reflection, and type conversion for
  * custom elements.
  * @public
@@ -133,7 +129,15 @@ export class AttributeDefinition {
             return;
         }
         this.guards.add(element);
-        this.setValue(element, value);
+        if (this.mode === booleanMode) {
+            // Native HTML boolean attribute semantics: presence of the attribute
+            // (any string value, including "") means `true`; `null` (the value
+            // passed by the platform on `removeAttribute`) means `false`.
+            this.setValue(element, value !== null);
+        }
+        else {
+            this.setValue(element, value);
+        }
         this.guards.delete(element);
     }
     tryReflectToAttribute(element) {

package/dist/esm/components/element-controller.js

@@ -49,14 +49,16 @@ export class ElementController {
      * The context the expression is evaluated against.
      */
     get context() {
-        var _a, _b;
+        var _a;
+        var _b;
         return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
     }
     /**
      * Indicates whether the controller is bound.
      */
     get isBound() {
-        var _a, _b;
+        var _a;
+        var _b;
         return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
     }
     /**
@@ -82,8 +84,7 @@ export class ElementController {
             }
             else if (definition.template) {
                 // 3. Default to the static definition.
-                this._template =
-                    (_a = definition.template) !== null && _a !== void 0 ? _a : null;
+                this._template = (_a = definition.template) !== null && _a !== void 0 ? _a : null;
             }
         }
         return this._template;
@@ -478,7 +479,8 @@ export class ElementController {
      * customElements.define() completed.
      */
     observeLateAttributes() {
-        if (getLateAttributeLookup(this.definition) === null) {
+        const lateAttributes = getLateAttributeLookup(this.definition);
+        if (lateAttributes === null) {
             return;
         }
         const element = this.source;
@@ -499,7 +501,10 @@ export class ElementController {
                 controller.onAttributeChangedCallback(attributeName, null, element.getAttribute(attributeName));
             }
         });
-        element[lateAttributeObserver].observe(element, { attributes: true });
+        element[lateAttributeObserver].observe(element, {
+            attributes: true,
+            attributeFilter: Object.keys(lateAttributes),
+        });
     }
     /**
      * Connects any existing behaviors on the associated element.

package/dist/esm/components/enable-hydration.js

@@ -1,8 +1,10 @@
+import { installHydrationDiagnostic } from "../hydration/diagnostics.js";
 import { ensureHydrationRuntime } from "../hydration/runtime.js";
 import { SourceLifetime } from "../observation/observable.js";
 import { ElementController } from "./element-controller.js";
 import { isHydratable } from "./hydration.js";
 import { HydrationTracker } from "./hydration-tracker.js";
+export { StopHydration } from "./hydration-tracker.js";
 /**
  * No-op handler used during prerendered bind to discard the
  * upgrade-time burst of attributeChangedCallbacks.
@@ -20,30 +22,52 @@ let hookInstalled = false;
  *
  * Safe to call multiple times — the hydration hook is installed once
  * and subsequent calls merge their options into the shared tracker.
+ * By default, the hook stops hydrating new prerendered elements after
+ * the global `hydrationComplete` callback. Set
+ * `stopHydration` to `StopHydration.never` for streaming scenarios
+ * that append hydratable Declarative Shadow DOM after the initial batch.
+ *
+ * Pass `debugger: hydrationDebugger()` to swap the default minimal
+ * hydration mismatch error message for a rich "Expected / Received"
+ * report including the SSR HTML snippet and structured
+ * `expected`/`received` fields on `HydrationBindingError` /
+ * `HydrationTargetElementError`. The debugger module is tree-shaken
+ * out of production hydration bundles unless explicitly imported.
  *
  * @example
  * ```ts
- * import { enableHydration } from "@microsoft/fast-element/hydration.js";
+ * import { enableHydration, StopHydration } from "@microsoft/fast-element/hydration.js";
  *
  * enableHydration({
+ *     stopHydration: StopHydration.never,
  *     hydrationComplete() {
  *         console.log("hydration complete");
  *     },
  * });
  * ```
  *
- * @param options - Optional callbacks for global hydration events.
+ * @example Rich hydration mismatch diagnostics
+ * ```ts
+ * import { enableHydration, hydrationDebugger } from "@microsoft/fast-element/hydration.js";
+ *
+ * enableHydration({ debugger: hydrationDebugger() });
+ * ```
+ *
+ * @param options - Optional global hydration callbacks and behavior.
  * @public
  */
 export function enableHydration(options) {
     ensureHydrationRuntime();
+    if (options === null || options === void 0 ? void 0 : options.debugger) {
+        installHydrationDiagnostic(options.debugger.diagnostic);
+    }
     if (!hookInstalled) {
         tracker = new HydrationTracker(options !== null && options !== void 0 ? options : {});
         hookInstalled = true;
         const activeTracker = tracker;
         ElementController.installHydrationHook((controller, template, element, host) => {
             var _a, _b;
-            if (!isHydratable(template)) {
+            if (!activeTracker.shouldHydrate || !isHydratable(template)) {
                 return false;
             }
             const callbacks = controller.definition.lifecycleCallbacks;

package/dist/esm/components/fast-definitions.js

@@ -7,18 +7,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var _a;
 import { isFunction, isString } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
-import { createTypeRegistry } from "../platform.js";
+import { createTypeRegistry, } from "../platform.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import { AttributeDefinition } from "./attributes.js";
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
 const fastElementBaseTypes = new Set();
 /**
- * The FAST custom element registry
- * @internal
+ * The FAST custom element registry.
+ * @remarks
+ * This registry stores FAST element definitions by constructor so consumers can
+ * look up the `FASTElementDefinition` associated with an element type or instance.
+ * @public
  */
 export const fastElementRegistry = createTypeRegistry();
 const templateResolvers = new WeakMap();
@@ -45,11 +47,11 @@ function getRegisteredTypes(registry = customElements) {
     return registeredTypes;
 }
 function finalizeResolvedTemplate(definition, template) {
-    var _b, _c;
+    var _a, _b;
     pendingTemplateResolutions.delete(definition);
     if (definition.template === void 0 && template !== void 0) {
         definition.template = template;
-        (_c = (_b = definition.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.templateDidUpdate) === null || _c === void 0 ? void 0 : _c.call(_b, definition.name);
+        (_b = (_a = definition.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.templateDidUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, definition.name);
     }
     if (definition.template !== void 0) {
         templateResolutionErrors.delete(definition);
@@ -101,8 +103,8 @@ export function trackLateAttributeDefinition(definition, attribute) {
  * @internal
  */
 export function getLateAttributeLookup(definition) {
-    var _b;
-    return ((_b = lateAttributeLookups.get(definition)) !== null && _b !== void 0 ? _b : null);
+    var _a;
+    return ((_a = lateAttributeLookups.get(definition)) !== null && _a !== void 0 ? _a : null);
 }
 /**
  * Resolves the concrete template for a FAST element definition when the
@@ -183,14 +185,14 @@ export class FASTElementDefinition {
     }
     constructor(type, nameOrConfig = type
         .definition) {
-        var _b;
+        var _a;
         this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
         this.type = type;
         this.name = nameOrConfig.name;
-        this.registry = (_b = nameOrConfig.registry) !== null && _b !== void 0 ? _b : customElements;
+        this.registry = (_a = nameOrConfig.registry) !== null && _a !== void 0 ? _a : customElements;
         if (isFASTElementTemplateResolver(nameOrConfig.template)) {
             templateResolvers.set(this, nameOrConfig.template);
         }
@@ -244,7 +246,7 @@ export class FASTElementDefinition {
      * This operation is idempotent per registry.
      */
     define(registry = this.registry, extensions) {
-        var _b, _c;
+        var _a, _b;
         const type = this.type;
         if (!registry.get(this.name)) {
             applyFASTElementExtensions(this, registry, extensions);
@@ -252,11 +254,11 @@ export class FASTElementDefinition {
                 void Promise.resolve()
                     .then(() => resolveFASTElementTemplate(this))
                     .then(template => {
-                    var _b, _c;
+                    var _a, _b;
                     if (template !== void 0 && !registry.get(this.name)) {
                         this.platformDefined = true;
                         registry.define(this.name, type, this.elementOptions);
-                        (_c = (_b = this.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.elementDidDefine) === null || _c === void 0 ? void 0 : _c.call(_b, this.name);
+                        (_b = (_a = this.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.elementDidDefine) === null || _b === void 0 ? void 0 : _b.call(_a, this.name);
                     }
                 })
                     .catch(error => {
@@ -267,7 +269,7 @@ export class FASTElementDefinition {
             }
             this.platformDefined = true;
             registry.define(this.name, type, this.elementOptions);
-            (_c = (_b = this.lifecycleCallbacks) === null || _b === void 0 ? void 0 : _b.elementDidDefine) === null || _c === void 0 ? void 0 : _c.call(_b, this.name);
+            (_b = (_a = this.lifecycleCallbacks) === null || _a === void 0 ? void 0 : _a.elementDidDefine) === null || _b === void 0 ? void 0 : _b.call(_a, this.name);
         }
         return this;
     }
@@ -279,9 +281,9 @@ export class FASTElementDefinition {
      */
     static compose(type, nameOrDef) {
         const definition = fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)
-            ? new _a(class extends type {
+            ? new FASTElementDefinition(class extends type {
             }, nameOrDef)
-            : new _a(type, nameOrDef);
+            : new FASTElementDefinition(type, nameOrDef);
         return Promise.resolve(definition);
     }
     /**
@@ -293,7 +295,6 @@ export class FASTElementDefinition {
         fastElementBaseTypes.add(type);
     }
 }
-_a = FASTElementDefinition;
 /**
  * The definition has been registered to the FAST element registry.
  */
@@ -313,7 +314,7 @@ FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
  * @param name - The name of the defined custom element.
  * @alpha
  */
-FASTElementDefinition.register = (name, registry = customElements) => __awaiter(void 0, void 0, void 0, function* () {
+FASTElementDefinition.register = (name_1, ...args_1) => __awaiter(void 0, [name_1, ...args_1], void 0, function* (name, registry = customElements) {
     const registeredTypes = getRegisteredTypes(registry);
     if (!Object.prototype.hasOwnProperty.call(registeredTypes, name)) {
         Observable.defineProperty(registeredTypes, name);

package/dist/esm/components/hydration-tracker.js

@@ -1,3 +1,17 @@
+/**
+ * Describes when FAST should stop hydrating newly connected prerendered elements.
+ * @public
+ */
+export const StopHydration = Object.freeze({
+    /**
+     * Stop hydrating new prerendered elements after the active hydration batch completes.
+     */
+    hydrationComplete: "hydration-complete",
+    /**
+     * Keep the hydration hook active for later prerendered elements.
+     */
+    never: "never",
+});
 /**
  * Tracks prerendered elements through the hydration lifecycle and
  * fires global callbacks at start and completion. Per-element callbacks
@@ -8,10 +22,20 @@
  */
 export class HydrationTracker {
     constructor(options) {
-        this.options = options;
+        var _a;
         this.elements = new Set();
         this.started = false;
+        this.completed = false;
         this.checkTimer = null;
+        this.callbacks = options;
+        this.stopHydration = (_a = options.stopHydration) !== null && _a !== void 0 ? _a : StopHydration.hydrationComplete;
+    }
+    /**
+     * Indicates whether the hydration hook should attempt to hydrate
+     * prerendered elements.
+     */
+    get shouldHydrate() {
+        return !this.completed || this.stopHydration === StopHydration.never;
     }
     /**
      * Registers an element as pending hydration.
@@ -19,10 +43,11 @@ export class HydrationTracker {
      */
     add(element) {
         var _a, _b;
+        this.completed = false;
         if (!this.started) {
             this.started = true;
             try {
-                (_b = (_a = this.options).hydrationStarted) === null || _b === void 0 ? void 0 : _b.call(_a);
+                (_b = (_a = this.callbacks).hydrationStarted) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
             catch (_c) {
                 // A lifecycle callback must never prevent hydration.
@@ -47,13 +72,14 @@ export class HydrationTracker {
                 this.checkTimer = null;
                 if (this.elements.size === 0) {
                     try {
-                        (_b = (_a = this.options).hydrationComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        (_b = (_a = this.callbacks).hydrationComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
                     catch (_c) {
                         // A lifecycle callback must never prevent post-hydration cleanup.
                     }
                     finally {
                         this.started = false;
+                        this.completed = true;
                     }
                 }
             }, 0);
@@ -64,11 +90,14 @@ export class HydrationTracker {
      * callbacks so both the original and new callbacks fire.
      */
     mergeOptions(incoming) {
-        const prev = this.options;
-        this.options = {
+        const prev = this.callbacks;
+        this.callbacks = {
             hydrationStarted: chainCallback(prev.hydrationStarted, incoming.hydrationStarted),
             hydrationComplete: chainCallback(prev.hydrationComplete, incoming.hydrationComplete),
         };
+        if (incoming.stopHydration !== void 0) {
+            this.stopHydration = incoming.stopHydration;
+        }
     }
 }
 function chainCallback(first, second) {

package/dist/esm/components/hydration.js

@@ -20,7 +20,17 @@ import { FAST } from "../platform.js";
  * Attribute bindings use a single `data-fe` attribute whose value is
  * the count of attribute binding factories targeting the element:
  *   <div data-fe="3"> (3 attribute bindings)
+ *
+ * WebUI versions that predate the data-free marker format still emit indexed
+ * markers. The parser below accepts those legacy markers so existing WebUI SSR
+ * output can hydrate against the newer FAST runtime.
  */
+const legacyBindingStartMarker = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const legacyBindingEndMarker = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/;
+const legacyRepeatViewStartMarker = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/;
+const legacyRepeatViewEndMarker = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/;
+const legacyElementBoundaryStartMarker = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/;
+const legacyElementBoundaryEndMarker = /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
 function isComment(node) {
     return node && node.nodeType === Node.COMMENT_NODE;
 }
@@ -31,6 +41,8 @@ function isComment(node) {
 export const HydrationMarkup = Object.freeze({
     // Single attribute marker format (count only)
     attributeMarkerName: "data-fe",
+    legacyAttributeMarkerName: "data-fe-b",
+    legacyCompactAttributeMarkerName: "data-fe-c",
     // Content binding markers (no arguments)
     contentBindingStartMarker() {
         return "fe:b";
@@ -54,22 +66,24 @@ export const HydrationMarkup = Object.freeze({
     },
     // Detection — simple string equality
     isContentBindingStartMarker(data) {
-        return data === "fe:b";
+        return data === "fe:b" || legacyBindingStartMarker.test(data);
     },
     isContentBindingEndMarker(data) {
-        return data === "fe:/b";
+        return data === "fe:/b" || legacyBindingEndMarker.test(data);
     },
     isRepeatViewStartMarker(data) {
-        return data === "fe:r";
+        return data === "fe:r" || legacyRepeatViewStartMarker.test(data);
     },
     isRepeatViewEndMarker(data) {
-        return data === "fe:/r";
+        return data === "fe:/r" || legacyRepeatViewEndMarker.test(data);
     },
     isElementBoundaryStartMarker(node) {
-        return isComment(node) && node.data === "fe:e";
+        return (isComment(node) &&
+            (node.data === "fe:e" || legacyElementBoundaryStartMarker.test(node.data)));
     },
     isElementBoundaryEndMarker(node) {
-        return isComment(node) && node.data === "fe:/e";
+        return (isComment(node) &&
+            (node.data === "fe:/e" || legacyElementBoundaryEndMarker.test(node.data)));
     },
     /**
      * Returns the count of attribute bindings on the element, or null
@@ -97,7 +111,72 @@ export const HydrationMarkup = Object.freeze({
         }
         return count;
     },
+    parseLegacyAttributeBindingIndices(node) {
+        const indices = [];
+        const attr = node.getAttribute(this.legacyAttributeMarkerName);
+        if (attr !== null) {
+            for (const value of attr.trim().split(/\s+/)) {
+                if (value === "") {
+                    continue;
+                }
+                const index = Number(value);
+                if (!Number.isInteger(index) || index < 0) {
+                    throw FAST.error(Message.invalidHydrationAttributeMarker, {
+                        value: attr,
+                    });
+                }
+                indices.push(index);
+            }
+        }
+        const enumeratedPrefix = `${this.legacyAttributeMarkerName}-`;
+        const compactPrefix = `${this.legacyCompactAttributeMarkerName}-`;
+        for (const name of node.getAttributeNames()) {
+            if (name.startsWith(enumeratedPrefix)) {
+                const index = Number(name.slice(enumeratedPrefix.length));
+                if (!Number.isInteger(index) || index < 0) {
+                    throw FAST.error(Message.invalidHydrationAttributeMarker, {
+                        value: name,
+                    });
+                }
+                indices.push(index);
+            }
+            else if (name.startsWith(compactPrefix)) {
+                const [start, count] = name
+                    .slice(compactPrefix.length)
+                    .split("-")
+                    .map(value => Number(value));
+                if (!Number.isInteger(start) ||
+                    !Number.isInteger(count) ||
+                    start < 0 ||
+                    count < 1) {
+                    throw FAST.error(Message.invalidHydrationAttributeMarker, {
+                        value: name,
+                    });
+                }
+                for (let i = 0; i < count; i++) {
+                    indices.push(start + i);
+                }
+            }
+        }
+        return indices.length === 0 ? null : indices;
+    },
+    removeLegacyAttributeBindingMarkers(node) {
+        node.removeAttribute(this.legacyAttributeMarkerName);
+        for (const name of node.getAttributeNames()) {
+            if (name.startsWith(`${this.legacyAttributeMarkerName}-`) ||
+                name.startsWith(`${this.legacyCompactAttributeMarkerName}-`)) {
+                node.removeAttribute(name);
+            }
+        }
+    },
+    parseLegacyContentBindingStartIndex(data) {
+        return parseLegacyIntMarker(legacyBindingStartMarker, data);
+    },
 });
+function parseLegacyIntMarker(pattern, data) {
+    const match = pattern.exec(data);
+    return match === null ? null : Number(match[1]);
+}
 /**
  * @internal
  */

package/dist/esm/debug.js

@@ -11,6 +11,7 @@ const baseDebugMessages = {
     [1208 /* cannotSetTemplatePolicyAfterCompilation */]: "The DOM Policy cannot be set after a template is compiled.",
     [1209 /* blockedByDOMPolicy */]: "'${aspectName}' on '${tagName}' is blocked by the current DOMPolicy.",
     [1210 /* invalidHydrationAttributeMarker */]: "Invalid data-fe attribute value '${value}'. Expected a positive integer.",
+    [1211 /* duplicateRenderInstruction */]: "Replacing existing RenderInstruction for '${type}' with name '${name}'.",
     [1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
     [1501 /* noRegistrationForContext */]: "No registration for Context/Interface '${name}'.",
     [1502 /* noFactoryForResolver */]: "Dependency injection resolver for '${key}' returned a null factory.",

package/dist/esm/declarative/attribute-map.js

@@ -65,7 +65,8 @@ export class AttributeMap {
         this.config = config;
     }
     defineProperties() {
-        var _a, _b;
+        var _a;
+        var _b;
         const propertyNames = this.schema.getRootProperties();
         const existingAccessorNames = new Set(Observable.getAccessors(this.classPrototype).map(a => a.name));
         const strategy = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a["attribute-name-strategy"]) !== null && _b !== void 0 ? _b : "camelCase";

package/dist/esm/declarative/debug.js

@@ -1,5 +1,4 @@
 export const debugMessages = {
     [2000 /* noTemplateProvided */]: "The first child of the <f-template> must be a <template>, this is missing from ${name}.",
     [2001 /* moreThanOneTemplateProvided */]: "There can only be one <template> inside the <f-template>; remove any extra <template> elements and keep exactly one for ${name}.",
-    [2002 /* moreThanOneMatchingTemplateProvided */]: 'There can only be one connected <f-template name="${name}"> in a registry while resolving a declarative template; remove duplicate matches for ${name}.',
 };