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

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

package/dist/esm/templating/repeat.js

@@ -1,4 +1,4 @@
-import { Observable, } from "../observation/observable.js";
+import { Observable } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { ArrayObserver } from "../observation/arrays.js";
 import { Markup, nextId } from "./markup.js";
@@ -9,11 +9,17 @@ const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
 });
-function bindWithoutPositioning(view, items, index, context) {
-    view.bind(items[index], context);
+function bindWithoutPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.bind(items[index]);
 }
-function bindWithPositioning(view, items, index, context) {
-    view.bind(items[index], context.createItemContext(index, items.length));
+function bindWithPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.context.length = items.length;
+    view.context.index = index;
+    view.bind(items[index]);
 }
 /**
  * A behavior that renders a template for each item in an array.
@@ -29,15 +35,11 @@ export class RepeatBehavior {
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(directive, location) {
+    constructor(directive) {
         this.directive = directive;
-        this.location = location;
-        this.source = null;
         this.views = [];
         this.items = null;
         this.itemsObserver = null;
-        this.context = void 0;
-        this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
         this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
         this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
@@ -46,32 +48,26 @@ export class RepeatBehavior {
         }
     }
     /**
-     * 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.context = context;
-        this.childContext = context.createChildContext(source);
-        this.items = this.itemsBindingObserver.observe(source, this.context);
-        this.template = this.templateBindingObserver.observe(source, this.context);
+    bind(controller) {
+        this.location = controller.targets[this.directive.nodeId];
+        this.controller = controller;
+        this.items = this.itemsBindingObserver.bind(controller);
+        this.template = this.templateBindingObserver.bind(controller);
         this.observeItems(true);
         this.refreshAllViews();
+        controller.onUnbind(this);
     }
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
      */
     unbind() {
-        this.source = null;
-        this.items = null;
         if (this.itemsObserver !== null) {
             this.itemsObserver.unsubscribe(this);
         }
         this.unbindAllViews();
-        this.itemsBindingObserver.dispose();
-        this.templateBindingObserver.dispose();
     }
     /**
      * Handles changes in the array, its items, and the repeat template.
@@ -80,12 +76,12 @@ export class RepeatBehavior {
      */
     handleChange(source, args) {
         if (args === this.itemsBindingObserver) {
-            this.items = this.itemsBindingObserver.observe(this.source, this.context);
+            this.items = this.itemsBindingObserver.bind(this.controller);
             this.observeItems();
             this.refreshAllViews();
         }
         else if (args === this.templateBindingObserver) {
-            this.template = this.templateBindingObserver.observe(this.source, this.context);
+            this.template = this.templateBindingObserver.bind(this.controller);
             this.refreshAllViews(true);
         }
         else if (!args[0]) {
@@ -115,10 +111,10 @@ export class RepeatBehavior {
     }
     updateViews(splices) {
         const views = this.views;
-        const childContext = this.childContext;
         const bindView = this.bindView;
         const items = this.items;
         const template = this.template;
+        const controller = this.controller;
         const recycle = this.directive.options.recycle;
         const leftoverViews = [];
         let leftoverIndex = 0;
@@ -130,13 +126,14 @@ export class RepeatBehavior {
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
             const removedViews = views.splice(splice.index, removed.length);
-            availableViews = leftoverViews.length + removedViews.length;
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
                 let view;
                 if (recycle && availableViews > 0) {
-                    if (removeIndex <= availableViews && removedViews.length > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
                         view = removedViews[removeIndex];
                         removeIndex++;
                     }
@@ -150,7 +147,7 @@ export class RepeatBehavior {
                     view = template.create();
                 }
                 views.splice(addIndex, 0, view);
-                bindView(view, items, addIndex, childContext);
+                bindView(view, items, addIndex, controller);
                 view.insertBefore(location);
             }
             if (removedViews[removeIndex]) {
@@ -162,7 +159,9 @@ export class RepeatBehavior {
         }
         if (this.directive.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
-                views[i].context.updatePosition(i, ii);
+                const context = views[i].context;
+                context.length = i;
+                context.index = ii;
             }
         }
     }
@@ -171,7 +170,7 @@ export class RepeatBehavior {
         const template = this.template;
         const location = this.location;
         const bindView = this.bindView;
-        const childContext = this.childContext;
+        const controller = this.controller;
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
@@ -185,7 +184,7 @@ export class RepeatBehavior {
             this.views = views = new Array(itemsLength);
             for (let i = 0; i < itemsLength; ++i) {
                 const view = template.create();
-                bindView(view, items, i, childContext);
+                bindView(view, items, i, controller);
                 views[i] = view;
                 view.insertBefore(location);
             }
@@ -196,11 +195,11 @@ export class RepeatBehavior {
             for (; i < itemsLength; ++i) {
                 if (i < viewsLength) {
                     const view = views[i];
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                 }
                 else {
                     const view = template.create();
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                     views.push(view);
                     view.insertBefore(location);
                 }
@@ -250,8 +249,8 @@ export class RepeatDirective {
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    createBehavior(targets) {
-        return new RepeatBehavior(this, targets[this.nodeId]);
+    createBehavior() {
+        return new RepeatBehavior(this);
     }
 }
 HTMLDirective.define(RepeatDirective);

package/dist/esm/templating/template.js

@@ -1,5 +1,4 @@
 import { isFunction, isString } from "../interfaces.js";
-import { ExecutionContext } from "../observation/observable.js";
 import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
 import { Aspect, Binding, HTMLDirective, } from "./html-directive.js";
@@ -36,9 +35,9 @@ export class ViewTemplate {
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source, host, hostBindingTarget, context) {
-        const view = this.create(hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : host);
-        view.bind(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+    render(source, host, hostBindingTarget) {
+        const view = this.create(hostBindingTarget);
+        view.bind(source);
         view.appendTo(host);
         return view;
     }

package/dist/esm/templating/view.js

@@ -1,3 +1,4 @@
+import { ExecutionContext, Observable } from "../observation/observable.js";
 function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
     let current = firstNode;
@@ -24,17 +25,83 @@ export class HTMLView {
         this.factories = factories;
         this.targets = targets;
         this.behaviors = null;
+        this.unbindables = [];
         /**
          * The data that the view is bound to.
          */
         this.source = null;
+        this.isBound = false;
+        this.selfContained = false;
         /**
-         * The execution context the view is running within.
+         * The index of the current item within a repeat context.
          */
-        this.context = null;
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
+    /**
+     * The execution context the view is running within.
+     */
+    get context() {
+        return this;
+    }
+    /**
+     * The current event within an event handler.
+     */
+    get event() {
+        return ExecutionContext.getEvent();
+    }
+    /**
+     * 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;
+    }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
+    eventDetail() {
+        return this.event.detail;
+    }
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget() {
+        return this.event.target;
+    }
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -89,58 +156,61 @@ export class HTMLView {
         removeNodeSequence(this.firstChild, this.lastChild);
         this.unbind();
     }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    bind(source, context) {
-        let behaviors = this.behaviors;
+    bind(source) {
         const oldSource = this.source;
         if (oldSource === source) {
             return;
         }
+        let behaviors = this.behaviors;
         this.source = source;
-        this.context = context;
-        const targets = this.targets;
-        if (oldSource !== null) {
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                const current = behaviors[i];
-                current.unbind(oldSource, context, targets);
-                current.bind(source, context, targets);
-            }
-        }
-        else if (behaviors === null) {
+        if (behaviors === null) {
             this.behaviors = behaviors = new Array(this.factories.length);
             const factories = this.factories;
             for (let i = 0, ii = factories.length; i < ii; ++i) {
-                const behavior = factories[i].createBehavior(targets);
-                behavior.bind(source, context, targets);
+                const behavior = factories[i].createBehavior();
+                behavior.bind(this);
                 behaviors[i] = behavior;
             }
         }
         else {
+            if (oldSource !== null) {
+                this.evaluateUnbindables();
+            }
             for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(source, context, targets);
+                behaviors[i].bind(this);
             }
         }
+        this.isBound = true;
     }
     /**
      * Unbinds a view's behaviors from its binding source.
      */
     unbind() {
+        if (!this.isBound) {
+            return;
+        }
         const oldSource = this.source;
         if (oldSource === null) {
             return;
         }
-        const targets = this.targets;
-        const context = this.context;
-        const behaviors = this.behaviors;
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource, context, targets);
-        }
+        this.evaluateUnbindables();
         this.source = null;
-        this.context = null;
+        this.isBound = false;
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
     }
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.
@@ -156,3 +226,5 @@ export class HTMLView {
         }
     }
 }
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");

package/dist/esm/testing/exports.js

@@ -1,2 +1,3 @@
 export { timeout } from "./timeout.js";
 export * from "./fixture.js";
+export * from "./fakes.js";

package/dist/esm/testing/fakes.js

@@ -0,0 +1,76 @@
+import { ExecutionContext } from "../index.js";
+export const Fake = Object.freeze({
+    executionContext(parent, parentContext) {
+        return {
+            /**
+             * The index of the current item within a repeat context.
+             */
+            index: 0,
+            /**
+             * The length of the current collection within a repeat context.
+             */
+            length: 0,
+            /**
+             * The parent data source within a nested context.
+             */
+            parent: parent,
+            /**
+             * The parent execution context when in nested context scenarios.
+             */
+            parentContext: parentContext,
+            /**
+             * The current event within an event handler.
+             */
+            get event() {
+                return ExecutionContext.getEvent();
+            },
+            /**
+             * 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;
+            },
+            /**
+             * Returns the typed event detail of a custom event.
+             */
+            eventDetail() {
+                return this.event.detail;
+            },
+            /**
+             * Returns the typed event target of the event.
+             */
+            eventTarget() {
+                return this.event.target;
+            },
+        };
+    },
+});

package/dist/esm/testing/fixture.js

@@ -8,7 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { FASTElementDefinition } from "../components/fast-definitions.js";
-import { ExecutionContext } from "../observation/observable.js";
 import { ViewTemplate } from "../templating/template.js";
 function findElement(view) {
     let current = view.firstChild;
@@ -38,7 +37,6 @@ export function fixture(templateNameOrType, options = {}) {
         const document = options.document || globalThis.document;
         const parent = options.parent || document.createElement("div");
         const source = options.source || {};
-        const context = options.context || ExecutionContext.default;
         if (typeof templateNameOrType === "function") {
             const def = FASTElementDefinition.getByType(templateNameOrType);
             if (!def) {
@@ -53,7 +51,7 @@ export function fixture(templateNameOrType, options = {}) {
         const view = templateNameOrType.create();
         const element = findElement(view);
         let isConnected = false;
-        view.bind(source, context);
+        view.bind(source);
         view.appendTo(parent);
         customElements.upgrade(parent);
         // Hook into the Microtask Queue to ensure the DOM is settled