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

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);
 /**

package/dist/esm/templating/render.js

@@ -11,57 +11,48 @@ import { html, } from "./template.js";
 export class RenderBehavior {
     /**
      * Creates an instance of RenderBehavior.
-     * @param location - A Node representing the location where this behavior will render.
-     * @param dataBinding - A binding expression that returns the data to render.
-     * @param templateBinding - A binding expression that returns the template to use with the data.
+     * @param directive - The render directive that created this behavior.
      */
-    constructor(directive, location) {
+    constructor(directive) {
         this.directive = directive;
-        this.location = location;
-        this.source = null;
+        this.location = null;
+        this.controller = null;
         this.view = null;
         this.data = null;
-        this.originalContext = void 0;
-        this.childContext = void 0;
         this.dataBindingObserver = directive.dataBinding.createObserver(directive, this);
         this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
     }
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context) {
-        this.source = source;
-        this.originalContext = context;
-        this.childContext = context.createChildContext(source);
-        this.data = this.dataBindingObserver.observe(source, this.originalContext);
-        this.template = this.templateBindingObserver.observe(source, this.originalContext);
+    bind(controller) {
+        this.location = controller.targets[this.directive.nodeId];
+        this.controller = controller;
+        this.data = this.dataBindingObserver.bind(controller);
+        this.template = this.templateBindingObserver.bind(controller);
+        controller.onUnbind(this);
         this.refreshView();
     }
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    unbind(source, context) {
-        this.source = null;
-        this.data = null;
+    unbind(controller) {
         const view = this.view;
         if (view !== null && view.isComposed) {
             view.unbind();
             view.needsBindOnly = true;
         }
-        this.dataBindingObserver.dispose();
-        this.templateBindingObserver.dispose();
     }
     /** @internal */
     handleChange(source, observer) {
         if (observer === this.dataBindingObserver) {
-            this.data = this.dataBindingObserver.observe(this.source, this.originalContext);
+            this.data = this.dataBindingObserver.bind(this.controller);
         }
         if (this.directive.templateBindingDependsOnData ||
             observer === this.templateBindingObserver) {
-            this.template = this.templateBindingObserver.observe(this.source, this.originalContext);
+            this.template = this.templateBindingObserver.bind(this.controller);
         }
         this.refreshView();
     }
@@ -70,6 +61,8 @@ export class RenderBehavior {
         const template = this.template;
         if (view === null) {
             this.view = view = template.create();
+            this.view.context.parent = this.controller.source;
+            this.view.context.parentContext = this.controller.context;
         }
         else {
             // If there is a previous view, but it wasn't created
@@ -82,19 +75,21 @@ export class RenderBehavior {
                     view.unbind();
                 }
                 this.view = view = template.create();
+                this.view.context.parent = this.controller.source;
+                this.view.context.parentContext = this.controller.context;
             }
         }
         // It's possible that the value is the same as the previous template
         // and that there's actually no need to compose it.
         if (!view.isComposed) {
             view.isComposed = true;
-            view.bind(this.data, this.childContext);
+            view.bind(this.data);
             view.insertBefore(this.location);
             view.$fastTemplate = template;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(this.data, this.childContext);
+            view.bind(this.data);
         }
     }
 }
@@ -124,8 +119,8 @@ export class RenderDirective {
      * Creates a behavior.
      * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets) {
-        return new RenderBehavior(this, targets[this.nodeId]);
+    createBehavior() {
+        return new RenderBehavior(this);
     }
 }
 HTMLDirective.define(RenderDirective);
@@ -297,7 +292,11 @@ export class NodeTemplate {
         this.node = node;
         node.$fastTemplate = this;
     }
-    bind(source, context) { }
+    get context() {
+        // HACK
+        return this;
+    }
+    bind(source) { }
     unbind() { }
     insertBefore(refNode) {
         refNode.parentNode.insertBefore(this.node, refNode);