@microsoft/fast-element 2.9.1 → 2.10.0

package/dist/esm/observation/arrays.js

@@ -80,6 +80,13 @@ export const SpliceStrategySupport = Object.freeze({
 const reset = new Splice(0, emptyArray, 0);
 reset.reset = true;
 const resetSplices = [reset];
+var Edit;
+(function (Edit) {
+    Edit[Edit["leave"] = 0] = "leave";
+    Edit[Edit["update"] = 1] = "update";
+    Edit[Edit["add"] = 2] = "add";
+    Edit[Edit["delete"] = 3] = "delete";
+})(Edit || (Edit = {}));
 // Note: This function is *based* on the computation of the Levenshtein
 // "edit" distance. The one change is that "updates" are treated as two
 // edits - not one. With Array splices, an update is really a delete
@@ -131,12 +138,12 @@ function spliceOperationsFromEditDistances(distances) {
     const edits = [];
     while (i > 0 || j > 0) {
         if (i === 0) {
-            edits.push(2 /* Edit.add */);
+            edits.push(Edit.add);
             j--;
             continue;
         }
         if (j === 0) {
-            edits.push(3 /* Edit.delete */);
+            edits.push(Edit.delete);
             i--;
             continue;
         }
@@ -152,22 +159,22 @@ function spliceOperationsFromEditDistances(distances) {
         }
         if (min === northWest) {
             if (northWest === current) {
-                edits.push(0 /* Edit.leave */);
+                edits.push(Edit.leave);
             }
             else {
-                edits.push(1 /* Edit.update */);
+                edits.push(Edit.update);
                 current = northWest;
             }
             i--;
             j--;
         }
         else if (min === west) {
-            edits.push(3 /* Edit.delete */);
+            edits.push(Edit.delete);
             i--;
             current = west;
         }
         else {
-            edits.push(2 /* Edit.add */);
+            edits.push(Edit.add);
             j--;
             current = north;
         }
@@ -258,7 +265,7 @@ function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
     let oldIndex = oldStart;
     for (let i = 0; i < ops.length; ++i) {
         switch (ops[i]) {
-            case 0 /* Edit.leave */:
+            case Edit.leave:
                 if (splice !== void 0) {
                     splices.push(splice);
                     splice = void 0;
@@ -266,7 +273,7 @@ function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
                 index++;
                 oldIndex++;
                 break;
-            case 1 /* Edit.update */:
+            case Edit.update:
                 if (splice === void 0) {
                     splice = new Splice(index, [], 0);
                 }
@@ -275,14 +282,14 @@ function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
                 break;
-            case 2 /* Edit.add */:
+            case Edit.add:
                 if (splice === void 0) {
                     splice = new Splice(index, [], 0);
                 }
                 splice.addedCount++;
                 index++;
                 break;
-            case 3 /* Edit.delete */:
+            case Edit.delete:
                 if (splice === void 0) {
                     splice = new Splice(index, [], 0);
                 }
@@ -470,18 +477,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;
     }
@@ -522,6 +517,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);

package/dist/esm/observation/observable.js

@@ -1,7 +1,7 @@
-import { isFunction, isString, KernelServiceId, } from "../interfaces.js";
+import { isFunction, isString, KernelServiceId, Message, } from "../interfaces.js";
 import { createMetadataLocator, FAST, makeSerializationNoop } from "../platform.js";
-import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+import { Updates } from "./update-queue.js";
 /**
  * Describes how the source's lifetime relates to its controller's lifetime.
  * @public
@@ -27,7 +27,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const notifierLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
-        throw FAST.error(1101 /* Message.needsArrayObservation */);
+        throw FAST.error(Message.needsArrayObservation);
     };
     function getNotifier(source) {
         var _a;

package/dist/esm/styles/css.js

@@ -1,9 +1,9 @@
-import { isFunction, isString } from "../interfaces.js";
 import { Binding } from "../binding/binding.js";
 import { oneWay } from "../binding/one-way.js";
+import { isFunction, isString } from "../interfaces.js";
+import { CSSBindingDirective } from "./css-binding-directive.js";
 import { CSSDirective } from "./css-directive.js";
 import { ElementStyles } from "./element-styles.js";
-import { CSSBindingDirective } from "./css-binding-directive.js";
 const marker = `${Math.random().toString(36).substring(2, 8)}`;
 let varId = 0;
 const nextCSSVariable = () => `--v${marker}${++varId}`;

package/dist/esm/styles/element-styles.js

@@ -9,6 +9,15 @@ function reduceStyles(styles) {
  * @public
  */
 export 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.
@@ -21,15 +30,6 @@ export 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);

package/dist/esm/templating/children.js

@@ -1,6 +1,6 @@
 import { isString, noop } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
-import { NodeObservationDirective } from "./node-observation.js";
+import { NodeObservationDirective, } from "./node-observation.js";
 /**
  * The runtime behavior for child node observation.
  * @public

package/dist/esm/templating/compiler.js

@@ -1,11 +1,11 @@
-import { isFunction, isString } from "../interfaces.js";
-import { FAST } from "../platform.js";
-import { DOM } from "../dom.js";
 import { oneTime } from "../binding/one-time.js";
 import { oneWay } from "../binding/one-way.js";
-import { nextId, Parser } from "./markup.js";
+import { DOM } from "../dom.js";
+import { isFunction, isString, Message } from "../interfaces.js";
+import { FAST } from "../platform.js";
 import { HTMLBindingDirective } from "./html-binding-directive.js";
 import { HTMLDirective, } from "./html-directive.js";
+import { nextId, Parser } from "./markup.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -16,7 +16,7 @@ const next = {
 };
 function tryWarn(name) {
     if (!name.startsWith("fast-")) {
-        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+        FAST.warn(Message.hostBindingWithoutHost, { name });
     }
 }
 const warningHost = new Proxy(document.createElement("div"), {

package/dist/esm/templating/html-binding-directive.js

@@ -1,6 +1,6 @@
 import { isHydratable } from "../components/hydration.js";
 import { DOM, DOMAspect } from "../dom.js";
-import "../interfaces.js";
+import { Message } from "../interfaces.js";
 import { ExecutionContext, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { HTMLDirective, } from "./html-directive.js";
@@ -150,7 +150,7 @@ export class HTMLBindingDirective {
             const sink = sinkLookup[this.aspectType];
             const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
             if (!sink) {
-                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+                throw FAST.error(Message.unsupportedBindingBehavior);
             }
             this.data = `${this.id}-d`;
             this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);

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

@@ -1,5 +1,5 @@
 import { emptyArray } from "../platform.js";
-import { StatelessAttachedAttributeDirective } from "./html-directive.js";
+import { StatelessAttachedAttributeDirective, } from "./html-directive.js";
 const selectElements = (value) => value.nodeType === 1;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/dist/esm/templating/render.js

@@ -1,10 +1,10 @@
-import { FASTElementDefinition } from "../components/fast-definitions.js";
-import { isHydratable } from "../components/hydration.js";
-import { isFunction, isString } from "../interfaces.js";
 import { Binding } from "../binding/binding.js";
+import { normalizeBinding } from "../binding/normalize.js";
 import { oneTime } from "../binding/one-time.js";
 import { oneWay } from "../binding/one-way.js";
-import { normalizeBinding } from "../binding/normalize.js";
+import { FASTElementDefinition } from "../components/fast-definitions.js";
+import { isHydratable } from "../components/hydration.js";
+import { isFunction, isString } from "../interfaces.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
 import { html, ViewTemplate, } from "./template.js";

package/dist/esm/templating/repeat.js

@@ -1,11 +1,11 @@
+import { normalizeBinding } from "../binding/normalize.js";
 import { HydrationMarkup, isHydratable } from "../components/hydration.js";
-import { ArrayObserver } from "../observation/arrays.js";
-import { Observable } from "../observation/observable.js";
+import { ArrayObserver, Sort, Splice } from "../observation/arrays.js";
+import { Observable, } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
-import { normalizeBinding } from "../binding/normalize.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
-import { HTMLView, HydrationStage } from "./view.js";
+import { HTMLView, HydrationStage, HydrationView } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -348,6 +348,13 @@ export class RepeatBehavior {
  * @public
  */
 export 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.
@@ -360,13 +367,6 @@ export 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.

package/dist/esm/templating/slotted.js

@@ -1,6 +1,6 @@
 import { isString } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
-import { NodeObservationDirective } from "./node-observation.js";
+import { NodeObservationDirective, } from "./node-observation.js";
 const slotEvent = "slotchange";
 /**
  * The runtime behavior for slotted node observation.

package/dist/esm/templating/template.js

@@ -1,10 +1,10 @@
-import { isFunction, isString } from "../interfaces.js";
 import { Binding } from "../binding/binding.js";
-import { FAST, makeSerializationNoop } from "../platform.js";
-import { oneWay } from "../binding/one-way.js";
 import { oneTime } from "../binding/one-time.js";
-import { HTMLBindingDirective } from "./html-binding-directive.js";
+import { oneWay } from "../binding/one-way.js";
+import { isFunction, isString, Message } from "../interfaces.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
 import { Compiler } from "./compiler.js";
+import { HTMLBindingDirective } from "./html-binding-directive.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { nextId } from "./markup.js";
 // Much thanks to LitHTML for working this out!
@@ -100,10 +100,10 @@ export class ViewTemplate {
      */
     withPolicy(policy) {
         if (this.result) {
-            throw FAST.error(1208 /* Message.cannotSetTemplatePolicyAfterCompilation */);
+            throw FAST.error(Message.cannotSetTemplatePolicyAfterCompilation);
         }
         if (this.policy) {
-            throw FAST.error(1207 /* Message.onlySetTemplatePolicyOnce */);
+            throw FAST.error(Message.onlySetTemplatePolicyOnce);
         }
         this.policy = policy;
         return this;
@@ -177,7 +177,7 @@ export const html = ((strings, ...values) => {
     if (Array.isArray(strings) && Array.isArray(strings.raw)) {
         return ViewTemplate.create(strings, values);
     }
-    throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
+    throw FAST.error(Message.directCallToHTMLTagNotAllowed);
 });
 html.partial = (html) => {
     return new InlineTemplateDirective(html);

package/dist/esm/templating/view.js

@@ -278,6 +278,15 @@ export class HydrationBindingError extends Error {
     }
 }
 export 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;
@@ -297,15 +306,6 @@ export 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.