@microsoft/fast-element 2.0.0-beta.5 → 2.0.0-beta.7

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;
 }

package/dist/esm/templating/binding.js

@@ -14,29 +14,19 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
     }
     : (binding) => binding;
 class OnChangeBinding extends Binding {
-    constructor(evaluate, isVolatile) {
-        super();
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-    }
     createObserver(_, subscriber) {
         return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
 }
 class OneTimeBinding extends Binding {
-    constructor(evaluate) {
-        super();
-        this.evaluate = evaluate;
-    }
     createObserver() {
         return this;
     }
-    observe(source, context) {
-        return this.evaluate(source, context);
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
     }
-    dispose() { }
 }
-function updateContentTarget(target, aspect, value, source, context) {
+function updateContent(target, aspect, value, controller) {
     // If there's no actual value, then this equates to the
     // empty string for the purposes of content bindings.
     if (value === null || value === undefined) {
@@ -68,14 +58,14 @@ function updateContentTarget(target, aspect, value, source, context) {
         // and that there's actually no need to compose it.
         if (!view.isComposed) {
             view.isComposed = true;
-            view.bind(source, context);
+            view.bind(controller.source);
             view.insertBefore(target);
             target.$fastView = view;
             target.$fastTemplate = value;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(source, context);
+            view.bind(controller.source);
         }
     }
     else {
@@ -95,10 +85,9 @@ function updateContentTarget(target, aspect, value, source, context) {
         target.textContent = value;
     }
 }
-function updateTokenListTarget(target, aspect, value) {
+function updateTokenList(target, aspect, value) {
     var _a;
-    const directive = this.directive;
-    const lookup = `${directive.id}-t`;
+    const lookup = `${this.id}-t`;
     const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { c: 0, v: Object.create(null) });
     const versions = state.v;
     let currentVersion = state.c;
@@ -128,154 +117,8 @@ function updateTokenListTarget(target, aspect, value) {
         }
     }
 }
-/**
- * A binding behavior for bindings that change.
- * @public
- */
-export class BindingBehavior {
-    /**
-     * Creates an instance of ChangeBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     * @param updateTarget - The function used to update the target with the latest value.
-     */
-    constructor(directive, updateTarget) {
-        this.directive = directive;
-        this.updateTarget = updateTarget;
-        this.observerProperty = `${directive.id}-o`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        const observer = this.getObserver(target);
-        observer.target = target;
-        observer.source = source;
-        observer.context = context;
-        this.updateTarget(target, directive.targetAspect, observer.observe(source, context), source, context);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const target = targets[this.directive.nodeId];
-        const observer = this.getObserver(target);
-        observer.dispose();
-        observer.target = null;
-        observer.source = null;
-        observer.context = null;
-    }
-    /** @internal */
-    handleChange(binding, observer) {
-        const target = observer.target;
-        const source = observer.source;
-        const context = observer.context;
-        this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
-    }
-    /**
-     * Returns the binding observer used to update the node.
-     * @param target - The target node.
-     * @returns A BindingObserver.
-     */
-    getObserver(target) {
-        var _a;
-        return ((_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = this.directive.dataBinding.createObserver(this.directive, this)));
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
-}
-/**
- * A special binding behavior that can bind node content.
- * @public
- */
-export class ContentBehavior extends BindingBehavior {
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        super.unbind(source, context, targets);
-        const target = targets[this.directive.nodeId];
-        const view = target.$fastView;
-        if (view !== void 0 && view.isComposed) {
-            view.unbind();
-            view.needsBindOnly = true;
-        }
-    }
-}
-/**
- * A binding behavior for handling events.
- * @public
- */
-export class EventBehavior {
-    /**
-     * Creates an instance of EventBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     */
-    constructor(directive) {
-        this.directive = directive;
-        this.sourceProperty = `${directive.id}-s`;
-        this.contextProperty = `${directive.id}-c`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        target[this.sourceProperty] = source;
-        target[this.contextProperty] = context;
-        target.addEventListener(directive.targetAspect, this, directive.dataBinding.options);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        target[this.sourceProperty] = target[this.contextProperty] = null;
-        target.removeEventListener(directive.targetAspect, this, directive.dataBinding.options);
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
-    /**
-     * @internal
-     */
-    handleEvent(event) {
-        const target = event.currentTarget;
-        ExecutionContext.setEvent(event);
-        const result = this.directive.dataBinding.evaluate(target[this.sourceProperty], target[this.contextProperty]);
-        ExecutionContext.setEvent(null);
-        if (result !== true) {
-            event.preventDefault();
-        }
-    }
-}
+const setProperty = (t, a, v) => (t[a] = v);
+const eventTarget = () => void 0;
 /**
  * A directive that applies bindings.
  * @public
@@ -287,7 +130,7 @@ export class HTMLBindingDirective {
      */
     constructor(dataBinding) {
         this.dataBinding = dataBinding;
-        this.factory = null;
+        this.updateTarget = null;
         /**
          * The unique id of the factory.
          */
@@ -296,6 +139,9 @@ export class HTMLBindingDirective {
          * The type of aspect to target.
          */
         this.aspectType = Aspect.content;
+        /** @internal */
+        this.bind = this.bindDefault;
+        this.data = `${this.id}-d`;
     }
     /**
      * Creates HTML to be used within a template.
@@ -306,37 +152,87 @@ export class HTMLBindingDirective {
     }
     /**
      * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets) {
-        if (this.factory == null) {
+    createBehavior() {
+        if (this.updateTarget === null) {
             if (this.targetAspect === "innerHTML") {
                 this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
             }
             switch (this.aspectType) {
                 case 1:
-                    this.factory = new BindingBehavior(this, DOM.setAttribute);
+                    this.updateTarget = DOM.setAttribute;
                     break;
                 case 2:
-                    this.factory = new BindingBehavior(this, DOM.setBooleanAttribute);
+                    this.updateTarget = DOM.setBooleanAttribute;
                     break;
                 case 3:
-                    this.factory = new BindingBehavior(this, (t, a, v) => (t[a] = v));
+                    this.updateTarget = setProperty;
                     break;
                 case 4:
-                    this.factory = new ContentBehavior(this, updateContentTarget);
+                    this.bind = this.bindContent;
+                    this.updateTarget = updateContent;
                     break;
                 case 5:
-                    this.factory = new BindingBehavior(this, updateTokenListTarget);
+                    this.updateTarget = updateTokenList;
                     break;
                 case 6:
-                    this.factory = new EventBehavior(this);
+                    this.bind = this.bindEvent;
+                    this.updateTarget = eventTarget;
                     break;
                 default:
                     throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
             }
         }
-        return this.factory.createBehavior(targets);
+        return this;
+    }
+    /** @internal */
+    bindDefault(controller) {
+        var _a;
+        const target = controller.targets[this.nodeId];
+        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
+        observer.target = target;
+        observer.controller = controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+        if (this.updateTarget === updateContent) {
+            controller.onUnbind(this);
+        }
+    }
+    /** @internal */
+    bindContent(controller) {
+        this.bindDefault(controller);
+        controller.onUnbind(this);
+    }
+    /** @internal */
+    bindEvent(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.data] = controller;
+        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+    }
+    /** @internal */
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        ExecutionContext.setEvent(event);
+        const controller = target[this.data];
+        const result = this.dataBinding.evaluate(controller.source, controller.context);
+        ExecutionContext.setEvent(null);
+        if (result !== true) {
+            event.preventDefault();
+        }
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
     }
 }
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });

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

@@ -1,5 +1,67 @@
+import { ExecutionContext, } from "../observation/observable.js";
 import { createTypeRegistry } from "../platform.js";
 import { Markup, nextId } from "./markup.js";
+/**
+ * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+ * control ViewBehaviors.
+ * @public
+ */
+export const ViewBehaviorOrchestrator = Object.freeze({
+    /**
+     * Creates a ViewBehaviorOrchestrator.
+     * @param source - The source to to associate behaviors with.
+     * @returns A ViewBehaviorOrchestrator.
+     */
+    create(source) {
+        const behaviors = [];
+        const targets = {};
+        let unbindables = null;
+        let isConnected = false;
+        return {
+            source,
+            context: ExecutionContext.default,
+            targets,
+            get isBound() {
+                return isConnected;
+            },
+            addBehaviorFactory(factory, target) {
+                const nodeId = factory.nodeId || (factory.nodeId = nextId());
+                factory.id || (factory.id = nextId());
+                this.addTarget(nodeId, target);
+                this.addBehavior(factory.createBehavior());
+            },
+            addTarget(nodeId, target) {
+                targets[nodeId] = target;
+            },
+            addBehavior(behavior) {
+                behaviors.push(behavior);
+                if (isConnected) {
+                    behavior.bind(this);
+                }
+            },
+            onUnbind(unbindable) {
+                if (unbindables === null) {
+                    unbindables = [];
+                }
+                unbindables.push(unbindable);
+            },
+            connectedCallback(controller) {
+                if (!isConnected) {
+                    isConnected = true;
+                    behaviors.forEach(x => x.bind(this));
+                }
+            },
+            disconnectedCallback(controller) {
+                if (isConnected) {
+                    isConnected = false;
+                    if (unbindables !== null) {
+                        unbindables.forEach(x => x.unbind(this));
+                    }
+                }
+            },
+        };
+    },
+});
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -45,6 +107,15 @@ export function htmlDirective(options) {
  * @public
  */
 export class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
+    }
 }
 /**
  * The type of HTML aspect to target.
@@ -144,13 +215,6 @@ export class StatelessAttachedAttributeDirective {
          */
         this.id = nextId();
     }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
     /**
      * Creates a placeholder string based on the directive's index within the template.
      * @param index - The index of the directive within the template.
@@ -160,4 +224,11 @@ export class StatelessAttachedAttributeDirective {
     createHTML(add) {
         return Markup.attribute(add(this));
     }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return this;
+    }
 }

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.
@@ -26,11 +26,12 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    bind(source, context, targets) {
-        const target = targets[this.nodeId];
-        target[this.sourceProperty] = source;
-        this.updateTarget(source, this.computeNodes(target));
+    bind(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.sourceProperty] = controller.source;
+        this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
+        controller.onUnbind(this);
     }
     /**
      * Unbinds this behavior from the source.
@@ -38,9 +39,9 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    unbind(source, context, targets) {
-        const target = targets[this.nodeId];
-        this.updateTarget(source, emptyArray);
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
         target[this.sourceProperty] = null;
     }

package/dist/esm/templating/ref.js

@@ -5,20 +5,12 @@ import { HTMLDirective, StatelessAttachedAttributeDirective, } from "./html-dire
  */
 export class RefDirective extends StatelessAttachedAttributeDirective {
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context, targets) {
-        source[this.options] = targets[this.nodeId];
+    bind(controller) {
+        controller.source[this.options] = controller.targets[this.nodeId];
     }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
 }
 HTMLDirective.define(RefDirective);
 /**