@microsoft/fast-element 2.0.0-beta.6 → 2.0.0-beta.8

package/dist/esm/observation/observable.js

@@ -1,7 +1,22 @@
 import { isFunction, isString, } from "../interfaces.js";
-import { FAST } from "../platform.js";
+import { createMetadataLocator, FAST } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+export const SourceLifetime = Object.freeze({
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    unknown: void 0,
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    coupled: 1,
+});
 /**
  * Common Observable APIs.
  * @public
@@ -10,7 +25,6 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
     const queueUpdate = Updates.enqueue;
     const volatileRegex = /(:|&&|\|\||if)/;
     const notifierLookup = new WeakMap();
-    const accessorLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
         throw FAST.error(1101 /* Message.needsArrayObservation */);
@@ -25,19 +39,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
         }
         return found;
     }
-    function getAccessors(target) {
-        let accessors = accessorLookup.get(target);
-        if (accessors === void 0) {
-            let currentTarget = Reflect.getPrototypeOf(target);
-            while (accessors === void 0 && currentTarget !== null) {
-                accessors = accessorLookup.get(currentTarget);
-                currentTarget = Reflect.getPrototypeOf(currentTarget);
-            }
-            accessors = accessors === void 0 ? [] : accessors.slice(0);
-            accessorLookup.set(target, accessors);
-        }
-        return accessors;
-    }
+    const getAccessors = createMetadataLocator();
     class DefaultObservableAccessor {
         constructor(name) {
             this.name = name;
@@ -81,6 +83,22 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
         }
+        bind(controller) {
+            this.controller = controller;
+            const value = this.observe(controller.source, controller.context);
+            if (!controller.isBound && this.requiresUnbind(controller)) {
+                controller.onUnbind(this);
+            }
+            return value;
+        }
+        requiresUnbind(controller) {
+            return (controller.sourceLifetime !== SourceLifetime.coupled ||
+                this.first !== this.last ||
+                this.first.propertySource !== controller.source);
+        }
+        unbind(controller) {
+            this.dispose();
+        }
         observe(source, context) {
             if (this.needsRefresh && this.last !== null) {
                 this.dispose();
@@ -90,7 +108,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             this.needsRefresh = this.isVolatileBinding;
             let result;
             try {
-                result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+                result = this.binding(source, context);
             }
             finally {
                 watcher = previousWatcher;
@@ -281,120 +299,35 @@ const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
  * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
-export class ExecutionContext {
-    constructor(parentSource = null, parentContext = null) {
-        /**
-         * The index of the current item within a repeat context.
-         */
-        this.index = 0;
-        /**
-         * The length of the current collection within a repeat context.
-         */
-        this.length = 0;
-        this.parent = parentSource;
-        this.parentContext = parentContext;
-    }
-    /**
-     * The current event within an event handler.
-     */
-    get event() {
-        return contextEvent.get();
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * has an even index.
-     */
-    get isEven() {
-        return this.index % 2 === 0;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * has an odd index.
-     */
-    get isOdd() {
-        return this.index % 2 !== 0;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * is the first item in the collection.
-     */
-    get isFirst() {
-        return this.index === 0;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * is somewhere in the middle of the collection.
-     */
-    get isInMiddle() {
-        return !this.isFirst && !this.isLast;
-    }
-    /**
-     * Indicates whether the current item within a repeat context
-     * is the last item in the collection.
-     */
-    get isLast() {
-        return this.index === this.length - 1;
-    }
+export const ExecutionContext = Object.freeze({
     /**
-     * Returns the typed event detail of a custom event.
+     * A default execution context.
      */
-    eventDetail() {
-        return this.event.detail;
-    }
-    /**
-     * Returns the typed event target of the event.
-     */
-    eventTarget() {
-        return this.event.target;
-    }
-    /**
-     * Updates the position/size on a context associated with a list item.
-     * @param index - The new index of the item.
-     * @param length - The new length of the list.
-     */
-    updatePosition(index, length) {
-        this.index = index;
-        this.length = length;
-    }
-    /**
-     * Creates a new execution context descendent from the current context.
-     * @param source - The source for the context if different than the parent.
-     * @returns A child execution context.
-     */
-    createChildContext(parentSource) {
-        return new ExecutionContext(parentSource, this);
-    }
+    default: {
+        index: 0,
+        length: 0,
+        get event() {
+            return ExecutionContext.getEvent();
+        },
+        eventDetail() {
+            return this.event.detail;
+        },
+        eventTarget() {
+            return this.event.target;
+        },
+    },
     /**
-     * Creates a new execution context descent suitable for use in list rendering.
-     * @param item - The list item to serve as the source.
-     * @param index - The index of the item in the list.
-     * @param length - The length of the list.
+     * Gets the current event.
+     * @returns An event object.
      */
-    createItemContext(index, length) {
-        const childContext = Object.create(this);
-        childContext.index = index;
-        childContext.length = length;
-        return childContext;
-    }
+    getEvent() {
+        return contextEvent.get();
+    },
     /**
-     * Sets the event for the current execution context.
-     * @param event - The event to set.
-     * @internal
+     * Sets the current event.
+     * @param event - An event object.
      */
-    static setEvent(event) {
+    setEvent(event) {
         contextEvent.set(event);
-    }
-    /**
-     * Creates a new root execution context.
-     * @returns A new execution context.
-     */
-    static create() {
-        return new ExecutionContext();
-    }
-}
-/**
- * The default execution context.
- */
-ExecutionContext.default = new ExecutionContext();
-Observable.defineProperty(ExecutionContext.prototype, "index");
-Observable.defineProperty(ExecutionContext.prototype, "length");
+    },
+});

package/dist/esm/pending-task.js

@@ -0,0 +1,16 @@
+/**
+ * A concrete implementation of {@link PendingTask}
+ * @beta
+ */
+export class PendingTaskEvent extends Event {
+    constructor(complete) {
+        super(PendingTaskEvent.type, { bubbles: true, composed: true });
+        this.complete = complete;
+    }
+    static isPendingTask(value) {
+        var _a;
+        return (value.type === PendingTaskEvent.type &&
+            typeof ((_a = value.complete) === null || _a === void 0 ? void 0 : _a.then) === "function");
+    }
+}
+PendingTaskEvent.type = "pending-task";

package/dist/esm/platform.js

@@ -57,7 +57,31 @@ export function createTypeRegistry() {
             return typeToDefinition.get(key);
         },
         getForInstance(object) {
+            if (object === null || object === void 0) {
+                return void 0;
+            }
             return typeToDefinition.get(object.constructor);
         },
     });
 }
+/**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
+ * @internal
+ */
+export function createMetadataLocator() {
+    const metadataLookup = new WeakMap();
+    return function (target) {
+        let metadata = metadataLookup.get(target);
+        if (metadata === void 0) {
+            let currentTarget = Reflect.getPrototypeOf(target);
+            while (metadata === void 0 && currentTarget !== null) {
+                metadata = metadataLookup.get(currentTarget);
+                currentTarget = Reflect.getPrototypeOf(currentTarget);
+            }
+            metadata = metadata === void 0 ? [] : metadata.slice(0);
+            metadataLookup.set(target, metadata);
+        }
+        return metadata;
+    };
+}

package/dist/esm/styles/css.js

@@ -71,11 +71,11 @@ class CSSPartial {
         }
         return this.css;
     }
-    bind(el) {
-        el.$fastController.addStyles(this.styles);
+    addedCallback(controller) {
+        controller.addStyles(this.styles);
     }
-    unbind(el) {
-        el.$fastController.removeStyles(this.styles);
+    removedCallback(controller) {
+        controller.removeStyles(this.styles);
     }
 }
 CSSDirective.define(CSSPartial);

package/dist/esm/templating/binding-signal.js

@@ -31,7 +31,7 @@ export const Signal = Object.freeze({
         const found = subscribers[signal];
         if (found) {
             found instanceof Set
-                ? found.forEach(x => x.handleChange(this, signal))
+                ? found.forEach(x => x.handleChange(found, signal))
                 : found.handleChange(this, signal);
         }
     },
@@ -40,40 +40,44 @@ class SignalObserver {
     constructor(dataBinding, subscriber) {
         this.dataBinding = dataBinding;
         this.subscriber = subscriber;
+        this.isNotBound = true;
     }
-    observe(source, context) {
-        const signal = (this.signal = this.getSignal(source, context));
-        Signal.subscribe(signal, this);
-        return this.dataBinding.evaluate(source, context);
+    bind(controller) {
+        if (this.isNotBound) {
+            Signal.subscribe(this.getSignal(controller), this);
+            controller.onUnbind(this);
+            this.isNotBound = false;
+        }
+        return this.dataBinding.evaluate(controller.source, controller.context);
     }
-    dispose() {
-        Signal.unsubscribe(this.signal, this);
+    unbind(controller) {
+        this.isNotBound = true;
+        Signal.unsubscribe(this.getSignal(controller), this);
     }
     handleChange() {
         this.subscriber.handleChange(this.dataBinding.evaluate, this);
     }
-    getSignal(source, context) {
+    getSignal(controller) {
         const options = this.dataBinding.options;
-        return isString(options) ? options : options(source, context);
+        return isString(options)
+            ? options
+            : options(controller.source, controller.context);
     }
 }
 class SignalBinding extends Binding {
-    constructor(evaluate, options) {
-        super();
-        this.evaluate = evaluate;
-        this.options = options;
-    }
     createObserver(directive, subscriber) {
         return new SignalObserver(this, subscriber);
     }
 }
 /**
  * Creates a signal binding configuration with the supplied options.
- * @param binding - The binding to refresh when signaled.
+ * @param expression - The binding to refresh when signaled.
  * @param options - The signal name or a binding to use to retrieve the signal name.
  * @returns A binding configuration.
  * @public
  */
-export function signal(binding, options) {
-    return new SignalBinding(binding, options);
+export function signal(expression, options) {
+    const binding = new SignalBinding(expression);
+    binding.options = options;
+    return binding;
 }

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

@@ -10,31 +10,43 @@ let twoWaySettings = {
         return "change";
     },
 };
+export const TwoWaySettings = Object.freeze({
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    configure(settings) {
+        twoWaySettings = settings;
+    },
+});
 class TwoWayObserver {
     constructor(directive, subscriber, dataBinding) {
         this.directive = directive;
         this.subscriber = subscriber;
         this.dataBinding = dataBinding;
+        this.isNotBound = true;
         this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
     }
-    observe(source, context) {
+    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.target.addEventListener(this.changeEvent, this);
-        return this.notifier.observe(source, context);
+        if (this.isNotBound) {
+            this.target.addEventListener(this.changeEvent, this);
+            controller.onUnbind(this);
+            this.isNotBound = false;
+        }
+        return this.notifier.bind(controller);
     }
-    dispose() {
-        this.notifier.dispose();
+    unbind(controller) {
+        this.isNotBound = true;
         this.target.removeEventListener(this.changeEvent, this);
     }
-    /** @internal */
     handleChange(subject, args) {
         this.subscriber.handleChange(this.dataBinding.evaluate, this);
     }
-    /** @internal */
     handleEvent(event) {
         const directive = this.directive;
         const target = event.currentTarget;
@@ -63,36 +75,29 @@ class TwoWayObserver {
     }
 }
 class TwoWayBinding extends Binding {
-    constructor(evaluate, isVolatile, options = defaultOptions) {
-        super();
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-        this.options = options;
-        if (!options.fromView) {
-            options.fromView = defaultOptions.fromView;
-        }
-    }
     createObserver(directive, subscriber) {
         return new TwoWayObserver(directive, subscriber, this);
     }
-    /**
-     * Configures two-way binding.
-     * @param settings - The settings to use for the two-way binding system.
-     */
-    static configure(settings) {
-        twoWaySettings = settings;
-    }
 }
 /**
  * Creates a default binding.
- * @param binding - The binding to refresh when changed.
+ * @param expression - The binding to refresh when changed.
+ * @param optionsOrChangeEvent - The binding options or the name of the change event to use.
  * @param isBindingVolatile - Indicates whether the binding is volatile or not.
- * @returns A binding configuration.
+ * @returns A binding.
  * @public
  */
-export function twoWay(binding, optionsOrChangeEvent, isBindingVolatile = Observable.isVolatileBinding(binding)) {
+export function twoWay(expression, optionsOrChangeEvent, isBindingVolatile = Observable.isVolatileBinding(expression)) {
     if (isString(optionsOrChangeEvent)) {
         optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
     }
-    return new TwoWayBinding(binding, isBindingVolatile, optionsOrChangeEvent);
+    if (!optionsOrChangeEvent) {
+        optionsOrChangeEvent = defaultOptions;
+    }
+    else if (!optionsOrChangeEvent.fromView) {
+        optionsOrChangeEvent.fromView = defaultOptions.fromView;
+    }
+    const binding = new TwoWayBinding(expression, isBindingVolatile);
+    binding.options = optionsOrChangeEvent;
+    return binding;
 }