@microsoft/fast-element 1.7.1 → 1.9.0

package/dist/esm/observation/observable.js

@@ -1,55 +1,20 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-const volatileRegex = /(:|&&|\|\||if)/;
-const notifierLookup = new WeakMap();
-const accessorLookup = new WeakMap();
-let watcher = void 0;
-let createArrayObserver = (array) => {
-    throw new Error("Must call enableArrayObservation before observing arrays.");
-};
-class DefaultObservableAccessor {
-    constructor(name) {
-        this.name = name;
-        this.field = `_${name}`;
-        this.callback = `${name}Changed`;
-    }
-    getValue(source) {
-        if (watcher !== void 0) {
-            watcher.watch(source, this.name);
-        }
-        return source[this.field];
-    }
-    setValue(source, newValue) {
-        const field = this.field;
-        const oldValue = source[field];
-        if (oldValue !== newValue) {
-            source[field] = newValue;
-            const callback = source[this.callback];
-            if (typeof callback === "function") {
-                callback.call(source, oldValue, newValue);
-            }
-            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            getNotifier(source).notify(this.name);
-        }
-    }
-}
+import { DOM } from "../dom.js";
+import { FAST } from "../platform.js";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 /**
  * Common Observable APIs.
  * @public
  */
-export const Observable = Object.freeze({
-    /**
-     * @internal
-     * @param factory - The factory used to create array observers.
-     */
-    setArrayObserverFactory(factory) {
-        createArrayObserver = factory;
-    },
-    /**
-     * Gets a notifier for an object or Array.
-     * @param source - The object or Array to get the notifier for.
-     */
-    getNotifier(source) {
+export const Observable = FAST.getById(2 /* observable */, () => {
+    const volatileRegex = /(:|&&|\|\||if)/;
+    const notifierLookup = new WeakMap();
+    const accessorLookup = new WeakMap();
+    const queueUpdate = DOM.queueUpdate;
+    let watcher = void 0;
+    let createArrayObserver = (array) => {
+        throw new Error("Must call enableArrayObservation before observing arrays.");
+    };
+    function getNotifier(source) {
         let found = source.$fastController || notifierLookup.get(source);
         if (found === void 0) {
             if (Array.isArray(source)) {
@@ -60,62 +25,8 @@ export const Observable = Object.freeze({
             }
         }
         return found;
-    },
-    /**
-     * Records a property change for a source object.
-     * @param source - The object to record the change against.
-     * @param propertyName - The property to track as changed.
-     */
-    track(source, propertyName) {
-        if (watcher !== void 0) {
-            watcher.watch(source, propertyName);
-        }
-    },
-    /**
-     * Notifies watchers that the currently executing property getter or function is volatile
-     * with respect to its observable dependencies.
-     */
-    trackVolatile() {
-        if (watcher !== void 0) {
-            watcher.needsRefresh = true;
-        }
-    },
-    /**
-     * Notifies subscribers of a source object of changes.
-     * @param source - the object to notify of changes.
-     * @param args - The change args to pass to subscribers.
-     */
-    notify(source, args) {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-        getNotifier(source).notify(args);
-    },
-    /**
-     * Defines an observable property on an object or prototype.
-     * @param target - The target object to define the observable on.
-     * @param nameOrAccessor - The name of the property to define as observable;
-     * or a custom accessor that specifies the property name and accessor implementation.
-     */
-    defineProperty(target, nameOrAccessor) {
-        if (typeof nameOrAccessor === "string") {
-            nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
-        }
-        this.getAccessors(target).push(nameOrAccessor);
-        Reflect.defineProperty(target, nameOrAccessor.name, {
-            enumerable: true,
-            get: function () {
-                return nameOrAccessor.getValue(this);
-            },
-            set: function (newValue) {
-                nameOrAccessor.setValue(this, newValue);
-            },
-        });
-    },
-    /**
-     * Finds all the observable accessors defined on the target,
-     * including its prototype chain.
-     * @param target - The target object to search for accessor on.
-     */
-    getAccessors(target) {
+    }
+    function getAccessors(target) {
         let accessors = accessorLookup.get(target);
         if (accessors === void 0) {
             let currentTarget = Reflect.getPrototypeOf(target);
@@ -132,30 +43,215 @@ export const Observable = Object.freeze({
             accessorLookup.set(target, accessors);
         }
         return accessors;
-    },
-    /**
-     * Creates a {@link BindingObserver} that can watch the
-     * provided {@link Binding} for changes.
-     * @param binding - The binding to observe.
-     * @param initialSubscriber - An initial subscriber to changes in the binding value.
-     * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
-     */
-    binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-        return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
-    },
-    /**
-     * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
-     * on every evaluation of the value.
-     * @param binding - The binding to inspect.
-     */
-    isVolatileBinding(binding) {
-        return volatileRegex.test(binding.toString());
-    },
+    }
+    class DefaultObservableAccessor {
+        constructor(name) {
+            this.name = name;
+            this.field = `_${name}`;
+            this.callback = `${name}Changed`;
+        }
+        getValue(source) {
+            if (watcher !== void 0) {
+                watcher.watch(source, this.name);
+            }
+            return source[this.field];
+        }
+        setValue(source, newValue) {
+            const field = this.field;
+            const oldValue = source[field];
+            if (oldValue !== newValue) {
+                source[field] = newValue;
+                const callback = source[this.callback];
+                if (typeof callback === "function") {
+                    callback.call(source, oldValue, newValue);
+                }
+                getNotifier(source).notify(this.name);
+            }
+        }
+    }
+    class BindingObserverImplementation extends SubscriberSet {
+        constructor(binding, initialSubscriber, isVolatileBinding = false) {
+            super(binding, initialSubscriber);
+            this.binding = binding;
+            this.isVolatileBinding = isVolatileBinding;
+            this.needsRefresh = true;
+            this.needsQueue = true;
+            this.first = this;
+            this.last = null;
+            this.propertySource = void 0;
+            this.propertyName = void 0;
+            this.notifier = void 0;
+            this.next = void 0;
+        }
+        observe(source, context) {
+            if (this.needsRefresh && this.last !== null) {
+                this.disconnect();
+            }
+            const previousWatcher = watcher;
+            watcher = this.needsRefresh ? this : void 0;
+            this.needsRefresh = this.isVolatileBinding;
+            const result = this.binding(source, context);
+            watcher = previousWatcher;
+            return result;
+        }
+        disconnect() {
+            if (this.last !== null) {
+                let current = this.first;
+                while (current !== void 0) {
+                    current.notifier.unsubscribe(this, current.propertyName);
+                    current = current.next;
+                }
+                this.last = null;
+                this.needsRefresh = this.needsQueue = true;
+            }
+        }
+        watch(propertySource, propertyName) {
+            const prev = this.last;
+            const notifier = getNotifier(propertySource);
+            const current = prev === null ? this.first : {};
+            current.propertySource = propertySource;
+            current.propertyName = propertyName;
+            current.notifier = notifier;
+            notifier.subscribe(this, propertyName);
+            if (prev !== null) {
+                if (!this.needsRefresh) {
+                    // Declaring the variable prior to assignment below circumvents
+                    // a bug in Angular's optimization process causing infinite recursion
+                    // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
+                    let prevValue;
+                    watcher = void 0;
+                    /* eslint-disable-next-line */
+                    prevValue = prev.propertySource[prev.propertyName];
+                    watcher = this;
+                    if (propertySource === prevValue) {
+                        this.needsRefresh = true;
+                    }
+                }
+                prev.next = current;
+            }
+            this.last = current;
+        }
+        handleChange() {
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                queueUpdate(this);
+            }
+        }
+        call() {
+            if (this.last !== null) {
+                this.needsQueue = true;
+                this.notify(this);
+            }
+        }
+        records() {
+            let next = this.first;
+            return {
+                next: () => {
+                    const current = next;
+                    if (current === undefined) {
+                        return { value: void 0, done: true };
+                    }
+                    else {
+                        next = next.next;
+                        return {
+                            value: current,
+                            done: false,
+                        };
+                    }
+                },
+                [Symbol.iterator]: function () {
+                    return this;
+                },
+            };
+        }
+    }
+    return Object.freeze({
+        /**
+         * @internal
+         * @param factory - The factory used to create array observers.
+         */
+        setArrayObserverFactory(factory) {
+            createArrayObserver = factory;
+        },
+        /**
+         * Gets a notifier for an object or Array.
+         * @param source - The object or Array to get the notifier for.
+         */
+        getNotifier,
+        /**
+         * Records a property change for a source object.
+         * @param source - The object to record the change against.
+         * @param propertyName - The property to track as changed.
+         */
+        track(source, propertyName) {
+            if (watcher !== void 0) {
+                watcher.watch(source, propertyName);
+            }
+        },
+        /**
+         * Notifies watchers that the currently executing property getter or function is volatile
+         * with respect to its observable dependencies.
+         */
+        trackVolatile() {
+            if (watcher !== void 0) {
+                watcher.needsRefresh = true;
+            }
+        },
+        /**
+         * Notifies subscribers of a source object of changes.
+         * @param source - the object to notify of changes.
+         * @param args - The change args to pass to subscribers.
+         */
+        notify(source, args) {
+            getNotifier(source).notify(args);
+        },
+        /**
+         * Defines an observable property on an object or prototype.
+         * @param target - The target object to define the observable on.
+         * @param nameOrAccessor - The name of the property to define as observable;
+         * or a custom accessor that specifies the property name and accessor implementation.
+         */
+        defineProperty(target, nameOrAccessor) {
+            if (typeof nameOrAccessor === "string") {
+                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+            }
+            getAccessors(target).push(nameOrAccessor);
+            Reflect.defineProperty(target, nameOrAccessor.name, {
+                enumerable: true,
+                get: function () {
+                    return nameOrAccessor.getValue(this);
+                },
+                set: function (newValue) {
+                    nameOrAccessor.setValue(this, newValue);
+                },
+            });
+        },
+        /**
+         * Finds all the observable accessors defined on the target,
+         * including its prototype chain.
+         * @param target - The target object to search for accessor on.
+         */
+        getAccessors,
+        /**
+         * Creates a {@link BindingObserver} that can watch the
+         * provided {@link Binding} for changes.
+         * @param binding - The binding to observe.
+         * @param initialSubscriber - An initial subscriber to changes in the binding value.
+         * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+         */
+        binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
+            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+        },
+        /**
+         * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
+         * on every evaluation of the value.
+         * @param binding - The binding to inspect.
+         */
+        isVolatileBinding(binding) {
+            return volatileRegex.test(binding.toString());
+        },
+    });
 });
-const getNotifier = Observable.getNotifier;
-const trackVolatile = Observable.trackVolatile;
-const queueUpdate = DOM.queueUpdate;
 /**
  * Decorator: Defines an observable property on the target.
  * @param target - The target to define the observable on.
@@ -175,19 +271,22 @@ export function observable(target, nameOrAccessor) {
 export function volatile(target, name, descriptor) {
     return Object.assign({}, descriptor, {
         get: function () {
-            trackVolatile();
+            Observable.trackVolatile();
             return descriptor.get.apply(this);
         },
     });
 }
-let currentEvent = null;
-/**
- * @param event - The event to set as current for the context.
- * @internal
- */
-export function setCurrentEvent(event) {
-    currentEvent = event;
-}
+const contextEvent = FAST.getById(3 /* contextEvent */, () => {
+    let current = null;
+    return {
+        get() {
+            return current;
+        },
+        set(event) {
+            current = event;
+        },
+    };
+});
 /**
  * Provides additional contextual information available to behaviors and expressions.
  * @public
@@ -215,7 +314,7 @@ export class ExecutionContext {
      * The current event within an event handler.
      */
     get event() {
-        return currentEvent;
+        return contextEvent.get();
     }
     /**
      * Indicates whether the current item within a repeat context
@@ -252,6 +351,14 @@ export class ExecutionContext {
     get isLast() {
         return this.index === this.length - 1;
     }
+    /**
+     * Sets the event for the current execution context.
+     * @param event - The event to set.
+     * @internal
+     */
+    static setEvent(event) {
+        contextEvent.set(event);
+    }
 }
 Observable.defineProperty(ExecutionContext.prototype, "index");
 Observable.defineProperty(ExecutionContext.prototype, "length");
@@ -260,102 +367,3 @@ Observable.defineProperty(ExecutionContext.prototype, "length");
  * @public
  */
 export const defaultExecutionContext = Object.seal(new ExecutionContext());
-class BindingObserverImplementation extends SubscriberSet {
-    constructor(binding, initialSubscriber, isVolatileBinding = false) {
-        super(binding, initialSubscriber);
-        this.binding = binding;
-        this.isVolatileBinding = isVolatileBinding;
-        this.needsRefresh = true;
-        this.needsQueue = true;
-        this.first = this;
-        this.last = null;
-        this.propertySource = void 0;
-        this.propertyName = void 0;
-        this.notifier = void 0;
-        this.next = void 0;
-    }
-    observe(source, context) {
-        if (this.needsRefresh && this.last !== null) {
-            this.disconnect();
-        }
-        const previousWatcher = watcher;
-        watcher = this.needsRefresh ? this : void 0;
-        this.needsRefresh = this.isVolatileBinding;
-        const result = this.binding(source, context);
-        watcher = previousWatcher;
-        return result;
-    }
-    disconnect() {
-        if (this.last !== null) {
-            let current = this.first;
-            while (current !== void 0) {
-                current.notifier.unsubscribe(this, current.propertyName);
-                current = current.next;
-            }
-            this.last = null;
-            this.needsRefresh = this.needsQueue = true;
-        }
-    }
-    /** @internal */
-    watch(propertySource, propertyName) {
-        const prev = this.last;
-        const notifier = getNotifier(propertySource);
-        const current = prev === null ? this.first : {};
-        current.propertySource = propertySource;
-        current.propertyName = propertyName;
-        current.notifier = notifier;
-        notifier.subscribe(this, propertyName);
-        if (prev !== null) {
-            if (!this.needsRefresh) {
-                // Declaring the variable prior to assignment below circumvents
-                // a bug in Angular's optimization process causing infinite recursion
-                // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
-                let prevValue;
-                watcher = void 0;
-                /* eslint-disable-next-line */
-                prevValue = prev.propertySource[prev.propertyName];
-                watcher = this;
-                if (propertySource === prevValue) {
-                    this.needsRefresh = true;
-                }
-            }
-            prev.next = current;
-        }
-        this.last = current;
-    }
-    /** @internal */
-    handleChange() {
-        if (this.needsQueue) {
-            this.needsQueue = false;
-            queueUpdate(this);
-        }
-    }
-    /** @internal */
-    call() {
-        if (this.last !== null) {
-            this.needsQueue = true;
-            this.notify(this);
-        }
-    }
-    records() {
-        let next = this.first;
-        return {
-            next: () => {
-                const current = next;
-                if (current === undefined) {
-                    return { value: void 0, done: true };
-                }
-                else {
-                    next = next.next;
-                    return {
-                        value: current,
-                        done: false,
-                    };
-                }
-            },
-            [Symbol.iterator]: function () {
-                return this;
-            },
-        };
-    }
-}

package/dist/esm/platform.js

@@ -36,6 +36,29 @@ export const $global = (function () {
 if ($global.trustedTypes === void 0) {
     $global.trustedTypes = { createPolicy: (n, r) => r };
 }
+const propConfig = {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+};
+if ($global.FAST === void 0) {
+    Reflect.defineProperty($global, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+}
+/**
+ * The FAST global.
+ * @internal
+ */
+export const FAST = $global.FAST;
+if (FAST.getById === void 0) {
+    const storage = Object.create(null);
+    Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
+            let found = storage[id];
+            if (found === void 0) {
+                found = initialize ? (storage[id] = initialize()) : null;
+            }
+            return found;
+        } }, propConfig));
+}
 /**
  * A readonly, empty array.
  * @remarks

package/dist/esm/styles/css.js

@@ -1,5 +1,5 @@
-import { CSSDirective } from "./css-directive";
-import { ElementStyles } from "./element-styles";
+import { CSSDirective } from "./css-directive.js";
+import { ElementStyles } from "./element-styles.js";
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";

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

@@ -1,4 +1,4 @@
-import { DOM } from "../dom";
+import { DOM } from "../dom.js";
 /**
  * Represents styles that can be applied to a custom element.
  * @public

package/dist/esm/templating/binding.js

@@ -1,6 +1,6 @@
-import { DOM } from "../dom";
-import { Observable, setCurrentEvent, } from "../observation/observable";
-import { TargetedHTMLDirective } from "./html-directive";
+import { DOM } from "../dom.js";
+import { ExecutionContext, Observable, } from "../observation/observable.js";
+import { TargetedHTMLDirective } from "./html-directive.js";
 function normalBind(source, context) {
     this.source = source;
     this.context = context;
@@ -242,9 +242,9 @@ export class BindingBehavior {
     }
     /** @internal */
     handleEvent(event) {
-        setCurrentEvent(event);
+        ExecutionContext.setEvent(event);
         const result = this.binding(this.source, this.context);
-        setCurrentEvent(null);
+        ExecutionContext.setEvent(null);
         if (result !== true) {
             event.preventDefault();
         }

package/dist/esm/templating/children.js

@@ -1,5 +1,5 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import { NodeObservationBehavior } from "./node-observation";
+import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
+import { NodeObservationBehavior } from "./node-observation.js";
 /**
  * The runtime behavior for child node observation.
  * @public

package/dist/esm/templating/compiler.js

@@ -1,5 +1,5 @@
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
-import { HTMLBindingDirective } from "./binding";
+import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
+import { HTMLBindingDirective } from "./binding.js";
 let sharedContext = null;
 class CompilationContext {
     addFactory(factory) {

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

@@ -1,4 +1,4 @@
-import { DOM } from "../dom";
+import { DOM } from "../dom.js";
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public

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

@@ -1,5 +1,5 @@
-import { Observable } from "../observation/observable";
-import { emptyArray } from "../platform";
+import { Observable } from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
  * @param selector - An optional selector to restrict the filter to.

package/dist/esm/templating/ref.js

@@ -1,4 +1,4 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
+import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
 /**
  * The runtime behavior for template references.
  * @public

package/dist/esm/templating/repeat.js

@@ -1,9 +1,9 @@
-import { DOM } from "../dom";
-import { Observable, } from "../observation/observable";
-import { enableArrayObservation } from "../observation/array-observer";
-import { emptyArray } from "../platform";
-import { HTMLDirective } from "./html-directive";
-import { HTMLView } from "./view";
+import { DOM } from "../dom.js";
+import { Observable, } from "../observation/observable.js";
+import { enableArrayObservation } from "../observation/array-observer.js";
+import { emptyArray } from "../platform.js";
+import { HTMLDirective } from "./html-directive.js";
+import { HTMLView } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,

package/dist/esm/templating/slotted.js

@@ -1,5 +1,5 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import { NodeObservationBehavior } from "./node-observation";
+import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
+import { NodeObservationBehavior } from "./node-observation.js";
 /**
  * The runtime behavior for slotted node observation.
  * @public

package/dist/esm/templating/template.js

@@ -1,9 +1,9 @@
-import { DOM } from "../dom";
-import { defaultExecutionContext } from "../observation/observable";
-import { compileTemplate } from "./compiler";
-import { HTMLView } from "./view";
-import { HTMLDirective, TargetedHTMLDirective, } from "./html-directive";
-import { HTMLBindingDirective } from "./binding";
+import { DOM } from "../dom.js";
+import { defaultExecutionContext } from "../observation/observable.js";
+import { compileTemplate } from "./compiler.js";
+import { HTMLView } from "./view.js";
+import { HTMLDirective, TargetedHTMLDirective, } from "./html-directive.js";
+import { HTMLBindingDirective } from "./binding.js";
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public