@microsoft/fast-element 2.9.0 → 2.9.2

package/dist/fast-element.js

@@ -1691,18 +1691,6 @@ function setNonEnumerable(target, property, value, writable = true) {
     });
 }
 class DefaultArrayObserver extends SubscriberSet {
-    constructor(subject) {
-        super(subject);
-        this.oldCollection = void 0;
-        this.splices = void 0;
-        this.sorts = void 0;
-        this.needsQueue = true;
-        this._strategy = null;
-        this._lengthObserver = void 0;
-        this._sortObserver = void 0;
-        this.call = this.flush;
-        setNonEnumerable(subject, "$fastController", this);
-    }
     get strategy() {
         return this._strategy;
     }
@@ -1743,6 +1731,18 @@ class DefaultArrayObserver extends SubscriberSet {
         }
         return observer;
     }
+    constructor(subject) {
+        super(subject);
+        this.oldCollection = void 0;
+        this.splices = void 0;
+        this.sorts = void 0;
+        this.needsQueue = true;
+        this._strategy = null;
+        this._lengthObserver = void 0;
+        this._sortObserver = void 0;
+        this.call = this.flush;
+        setNonEnumerable(subject, "$fastController", this);
+    }
     subscribe(subscriber) {
         this.flush();
         super.subscribe(subscriber);
@@ -1966,6 +1966,15 @@ function reduceStyles(styles) {
  * @public
  */
 class ElementStyles {
+    /**
+     * Gets the StyleStrategy associated with these element styles.
+     */
+    get strategy() {
+        if (this._strategy === null) {
+            this.withStrategy(DefaultStyleStrategy);
+        }
+        return this._strategy;
+    }
     /**
      * Creates an instance of ElementStyles.
      * @param styles - The styles that will be associated with elements.
@@ -1978,15 +1987,6 @@ class ElementStyles {
             .map((x) => x instanceof ElementStyles ? x.behaviors : null)
             .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
     }
-    /**
-     * Gets the StyleStrategy associated with these element styles.
-     */
-    get strategy() {
-        if (this._strategy === null) {
-            this.withStrategy(DefaultStyleStrategy);
-        }
-        return this._strategy;
-    }
     /** @internal */
     addStylesTo(target) {
         this.strategy.addStylesTo(target);
@@ -2658,6 +2658,7 @@ function isShadowRoot(node) {
 function buildViewBindingTargets(firstNode, lastNode, factories) {
     const range = createRangeForNodes(firstNode, lastNode);
     const treeRoot = range.commonAncestorContainer;
+    const hydrationIndexOffset = getHydrationIndexOffset(factories);
     const walker = document.createTreeWalker(treeRoot, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
         acceptNode(node) {
             return range.comparePoint(node, 0) === 0
@@ -2671,11 +2672,11 @@ function buildViewBindingTargets(firstNode, lastNode, factories) {
     while (node !== null) {
         switch (node.nodeType) {
             case Node.ELEMENT_NODE: {
-                targetElement(node, factories, targets);
+                targetElement(node, factories, targets, hydrationIndexOffset);
                 break;
             }
             case Node.COMMENT_NODE: {
-                targetComment(node, walker, factories, targets, boundaries);
+                targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset);
                 break;
             }
         }
@@ -2684,21 +2685,22 @@ function buildViewBindingTargets(firstNode, lastNode, factories) {
     range.detach();
     return { targets, boundaries };
 }
-function targetElement(node, factories, targets) {
+function targetElement(node, factories, targets, hydrationIndexOffset) {
     var _a, _b;
     // Check for attributes and map any factories.
     const attrFactoryIds = (_b = (_a = HydrationMarkup.parseAttributeBinding(node)) !== null && _a !== void 0 ? _a : HydrationMarkup.parseEnumeratedAttributeBinding(node)) !== null && _b !== void 0 ? _b : HydrationMarkup.parseCompactAttributeBinding(node);
     if (attrFactoryIds !== null) {
         for (const id of attrFactoryIds) {
-            if (!factories[id]) {
+            const factory = factories[id + hydrationIndexOffset];
+            if (!factory) {
                 throw new HydrationTargetElementError(`HydrationView was unable to successfully target factory on ${node.nodeName} inside ${node.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, factories, node);
             }
-            targetFactory(factories[id], node, targets);
+            targetFactory(factory, node, targets);
         }
         node.removeAttribute(HydrationMarkup.attributeMarkerName);
     }
 }
-function targetComment(node, walker, factories, targets, boundaries) {
+function targetComment(node, walker, factories, targets, boundaries, hydrationIndexOffset) {
     if (HydrationMarkup.isElementBoundaryStartMarker(node)) {
         skipToElementBoundaryEndMarker(node, walker);
         return;
@@ -2709,7 +2711,7 @@ function targetComment(node, walker, factories, targets, boundaries) {
             return;
         }
         const [index, id] = parsed;
-        const factory = factories[index];
+        const factory = factories[index + hydrationIndexOffset];
         const nodes = [];
         let current = walker.nextSibling();
         node.data = "";
@@ -2773,6 +2775,18 @@ function skipToElementBoundaryEndMarker(node, walker) {
         current = walker.nextSibling();
     }
 }
+function getHydrationIndexOffset(factories) {
+    let offset = 0;
+    for (let i = 0, ii = factories.length; i < ii; ++i) {
+        if (factories[i].targetNodeId === "h") {
+            offset++;
+        }
+        else {
+            break;
+        }
+    }
+    return offset;
+}
 function targetFactory(factory, node, targets) {
     if (factory.targetNodeId === undefined) {
         // Dev error, this shouldn't ever be thrown
@@ -2781,7 +2795,7 @@ function targetFactory(factory, node, targets) {
     targets[factory.targetNodeId] = node;
 }
 
-var _a;
+var _a$1;
 function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
     let current = firstNode;
@@ -3057,13 +3071,22 @@ class HydrationBindingError extends Error {
     }
 }
 class HydrationView extends DefaultExecutionContext {
+    get hydrationStage() {
+        return this._hydrationStage;
+    }
+    get targets() {
+        return this._targets;
+    }
+    get bindingViewBoundaries() {
+        return this._bindingViewBoundaries;
+    }
     constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
         super();
         this.firstChild = firstChild;
         this.lastChild = lastChild;
         this.sourceTemplate = sourceTemplate;
         this.hostBindingTarget = hostBindingTarget;
-        this[_a] = Hydratable;
+        this[_a$1] = Hydratable;
         this.context = this;
         this.source = null;
         this.isBound = false;
@@ -3076,15 +3099,6 @@ class HydrationView extends DefaultExecutionContext {
         this._targets = {};
         this.factories = sourceTemplate.compile().factories;
     }
-    get hydrationStage() {
-        return this._hydrationStage;
-    }
-    get targets() {
-        return this._targets;
-    }
-    get bindingViewBoundaries() {
-        return this._bindingViewBoundaries;
-    }
     /**
      * no-op. Hydrated views are don't need to be moved from a documentFragment
      * to the target node.
@@ -3250,7 +3264,7 @@ class HydrationView extends DefaultExecutionContext {
         unbindables.length = 0;
     }
 }
-_a = Hydratable;
+_a$1 = Hydratable;
 makeSerializationNoop(HydrationView);
 
 function isContentTemplate(value) {
@@ -4302,6 +4316,13 @@ class RepeatBehavior {
  * @public
  */
 class RepeatDirective {
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
+    }
     /**
      * Creates an instance of RepeatDirective.
      * @param dataBinding - The binding that provides the array to render.
@@ -4314,13 +4335,6 @@ class RepeatDirective {
         this.options = options;
         ArrayObserver.enable();
     }
-    /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     */
-    createHTML(add) {
-        return Markup.comment(add(this));
-    }
     /**
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
@@ -4780,6 +4794,7 @@ function attr(configOrTarget, prop) {
     return decorator;
 }
 
+var _a;
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
 const fastElementBaseTypes = new Set();
@@ -4800,6 +4815,12 @@ const TemplateOptions = {
  * @public
  */
 class FASTElementDefinition {
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return this.platformDefined;
+    }
     constructor(type, nameOrConfig = type.definition) {
         var _b;
         this.platformDefined = false;
@@ -4842,14 +4863,8 @@ class FASTElementDefinition {
                 : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
         this.styles = ElementStyles.normalize(nameOrConfig.styles);
         fastElementRegistry.register(this);
-        Observable.defineProperty(FASTElementDefinition.isRegistered, this.name);
-        FASTElementDefinition.isRegistered[this.name] = this.type;
-    }
-    /**
-     * Indicates if this element has been defined in at least one registry.
-     */
-    get isDefined() {
-        return this.platformDefined;
+        Observable.defineProperty(_a.isRegistered, this.name);
+        _a.isRegistered[this.name] = this.type;
     }
     /**
      * Defines a custom element based on this definition.
@@ -4875,10 +4890,10 @@ class FASTElementDefinition {
      */
     static compose(type, nameOrDef) {
         if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
-            return new FASTElementDefinition(class extends type {
+            return new _a(class extends type {
             }, nameOrDef);
         }
-        return new FASTElementDefinition(type, nameOrDef);
+        return new _a(type, nameOrDef);
     }
     /**
      * Registers a FASTElement base type.
@@ -4900,10 +4915,10 @@ class FASTElementDefinition {
     static composeAsync(type, nameOrDef) {
         return new Promise(resolve => {
             if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
-                resolve(new FASTElementDefinition(class extends type {
+                resolve(new _a(class extends type {
                 }, nameOrDef));
             }
-            const definition = new FASTElementDefinition(type, nameOrDef);
+            const definition = new _a(type, nameOrDef);
             Observable.getNotifier(definition).subscribe({
                 handleChange: () => {
                     var _b, _c;
@@ -4914,6 +4929,7 @@ class FASTElementDefinition {
         });
     }
 }
+_a = FASTElementDefinition;
 /**
  * The definition has been registered to the FAST element registry.
  */
@@ -4935,10 +4951,10 @@ FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
  */
 FASTElementDefinition.registerAsync = (name) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise(resolve => {
-        if (FASTElementDefinition.isRegistered[name]) {
-            resolve(FASTElementDefinition.isRegistered[name]);
+        if (_a.isRegistered[name]) {
+            resolve(_a.isRegistered[name]);
         }
-        Observable.getNotifier(FASTElementDefinition.isRegistered).subscribe({ handleChange: () => resolve(FASTElementDefinition.isRegistered[name]) }, name);
+        Observable.getNotifier(_a.isRegistered).subscribe({ handleChange: () => resolve(_a.isRegistered[name]) }, name);
     });
 });
 Observable.defineProperty(FASTElementDefinition.prototype, "template");
@@ -5466,90 +5482,6 @@ let elementControllerStrategy;
  * @public
  */
 class ElementController extends PropertyChangeNotifier {
-    /**
-     * Creates a Controller to control the specified element.
-     * @param element - The element to be controlled by this controller.
-     * @param definition - The element definition metadata that instructs this
-     * controller in how to handle rendering and other platform integrations.
-     * @internal
-     */
-    constructor(element, definition) {
-        super(element);
-        /**
-         * A map of observable properties that were set on the element before upgrade.
-         */
-        this.boundObservables = null;
-        /**
-         * Indicates whether the controller needs to perform initial rendering.
-         */
-        this.needsInitialization = true;
-        /**
-         * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
-         */
-        this.hasExistingShadowRoot = false;
-        /**
-         * The template used to render the component.
-         */
-        this._template = null;
-        /**
-         * The current lifecycle stage of the controller.
-         */
-        this.stage = 3 /* Stages.disconnected */;
-        /**
-         * A guard against connecting behaviors multiple times
-         * during connect in scenarios where a behavior adds
-         * another behavior during it's connectedCallback
-         */
-        this.guardBehaviorConnection = false;
-        /**
-         * The behaviors associated with the component.
-         */
-        this.behaviors = null;
-        /**
-         * Tracks whether behaviors are connected so that
-         * behaviors cant be connected multiple times
-         */
-        this.behaviorsConnected = false;
-        /**
-         * The main set of styles used for the component, independent of any
-         * dynamically added styles.
-         */
-        this._mainStyles = null;
-        /**
-         * This allows Observable.getNotifier(...) to return the Controller
-         * when the notifier for the Controller itself is being requested. The
-         * result is that the Observable system does not need to create a separate
-         * instance of Notifier for observables on the Controller. The component and
-         * the controller will now share the same notifier, removing one-object construct
-         * per web component instance.
-         */
-        this.$fastController = this;
-        /**
-         * The view associated with the custom element.
-         * @remarks
-         * If `null` then the element is managing its own rendering.
-         */
-        this.view = null;
-        this.source = element;
-        this.definition = definition;
-        this.shadowOptions = definition.shadowOptions;
-        // Capture any observable values that were set by the binding engine before
-        // the browser upgraded the element. Then delete the property since it will
-        // shadow the getter/setter that is required to make the observable operate.
-        // Later, in the connect callback, we'll re-apply the values.
-        const accessors = Observable.getAccessors(element);
-        if (accessors.length > 0) {
-            const boundObservables = (this.boundObservables = Object.create(null));
-            for (let i = 0, ii = accessors.length; i < ii; ++i) {
-                const propertyName = accessors[i].name;
-                const value = element[propertyName];
-                if (value !== void 0) {
-                    delete element[propertyName];
-                    boundObservables[propertyName] = value;
-                }
-            }
-        }
-    }
     /**
      * Indicates whether or not the custom element has been
      * connected to the document.
@@ -5663,6 +5595,90 @@ class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Creates a Controller to control the specified element.
+     * @param element - The element to be controlled by this controller.
+     * @param definition - The element definition metadata that instructs this
+     * controller in how to handle rendering and other platform integrations.
+     * @internal
+     */
+    constructor(element, definition) {
+        super(element);
+        /**
+         * A map of observable properties that were set on the element before upgrade.
+         */
+        this.boundObservables = null;
+        /**
+         * Indicates whether the controller needs to perform initial rendering.
+         */
+        this.needsInitialization = true;
+        /**
+         * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
+         */
+        this.hasExistingShadowRoot = false;
+        /**
+         * The template used to render the component.
+         */
+        this._template = null;
+        /**
+         * The current lifecycle stage of the controller.
+         */
+        this.stage = 3 /* Stages.disconnected */;
+        /**
+         * A guard against connecting behaviors multiple times
+         * during connect in scenarios where a behavior adds
+         * another behavior during it's connectedCallback
+         */
+        this.guardBehaviorConnection = false;
+        /**
+         * The behaviors associated with the component.
+         */
+        this.behaviors = null;
+        /**
+         * Tracks whether behaviors are connected so that
+         * behaviors cant be connected multiple times
+         */
+        this.behaviorsConnected = false;
+        /**
+         * The main set of styles used for the component, independent of any
+         * dynamically added styles.
+         */
+        this._mainStyles = null;
+        /**
+         * This allows Observable.getNotifier(...) to return the Controller
+         * when the notifier for the Controller itself is being requested. The
+         * result is that the Observable system does not need to create a separate
+         * instance of Notifier for observables on the Controller. The component and
+         * the controller will now share the same notifier, removing one-object construct
+         * per web component instance.
+         */
+        this.$fastController = this;
+        /**
+         * The view associated with the custom element.
+         * @remarks
+         * If `null` then the element is managing its own rendering.
+         */
+        this.view = null;
+        this.source = element;
+        this.definition = definition;
+        this.shadowOptions = definition.shadowOptions;
+        // Capture any observable values that were set by the binding engine before
+        // the browser upgraded the element. Then delete the property since it will
+        // shadow the getter/setter that is required to make the observable operate.
+        // Later, in the connect callback, we'll re-apply the values.
+        const accessors = Observable.getAccessors(element);
+        if (accessors.length > 0) {
+            const boundObservables = (this.boundObservables = Object.create(null));
+            for (let i = 0, ii = accessors.length; i < ii; ++i) {
+                const propertyName = accessors[i].name;
+                const value = element[propertyName];
+                if (value !== void 0) {
+                    delete element[propertyName];
+                    boundObservables[propertyName] = value;
+                }
+            }
+        }
+    }
     /**
      * Registers an unbind handler with the controller.
      * @param behavior - An object to call when the controller unbinds.