@microsoft/fast-element 2.0.0-beta.12 → 2.0.0-beta.14

package/CHANGELOG.json

@@ -1,6 +1,42 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Fri, 14 Oct 2022 18:26:11 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.14",
+      "version": "2.0.0-beta.14",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "19f1ae727e2ff6e629d2b134fc045a81d83caaed",
+            "comment": "fix: tokenList bindings track adds and removes from multiple sources"
+          },
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "0248fa906f986d6b0cbdeb26cf388742e871449e",
+            "comment": "refactor: remove duplication and re-organize binding behavior logic"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 10 Oct 2022 20:28:02 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.13",
+      "version": "2.0.0-beta.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "fed5e806e44da9d10916d9d765fb7f35ed300a3f",
+            "comment": "fix: prevent event callbacks when controller is not bound"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 06 Oct 2022 23:21:20 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.12",

package/CHANGELOG.md

@@ -1,9 +1,26 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Thu, 06 Oct 2022 23:21:20 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Oct 2022 18:26:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.14
+
+Fri, 14 Oct 2022 18:26:11 GMT
+
+### Changes
+
+- fix: tokenList bindings track adds and removes from multiple sources (roeisenb@microsoft.com)
+- refactor: remove duplication and re-organize binding behavior logic (roeisenb@microsoft.com)
+
+## 2.0.0-beta.13
+
+Mon, 10 Oct 2022 20:28:02 GMT
+
+### Changes
+
+- fix: prevent event callbacks when controller is not bound (roeisenb@microsoft.com)
+
 ## 2.0.0-beta.12
 
 Thu, 06 Oct 2022 23:21:20 GMT

package/dist/dts/templating/binding.d.ts

@@ -80,13 +80,7 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
      */
     createBehavior(): ViewBehavior;
     /** @internal */
-    bindDefault(controller: ViewController): void;
-    /** @internal */
-    bind: (controller: ViewController) => void;
-    /** @internal */
-    bindContent(controller: ViewController): void;
-    /** @internal */
-    bindEvent(controller: ViewController): void;
+    bind(controller: ViewController): void;
     /** @internal */
     unbind(controller: ViewController): void;
     /** @internal */
@@ -96,27 +90,27 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
 }
 /**
  * Creates an standard binding.
- * @param binding - The binding to refresh when changed.
+ * @param expression - The binding to refresh when changed.
  * @param isVolatile - Indicates whether the binding is volatile or not.
  * @returns A binding configuration.
  * @public
  */
-export declare function bind<T = any>(binding: Expression<T>, isVolatile?: boolean): Binding<T>;
+export declare function bind<T = any>(expression: Expression<T>, isVolatile?: boolean): Binding<T>;
 /**
  * Creates a one time binding
- * @param binding - The binding to refresh when signaled.
+ * @param expression - The binding to refresh when signaled.
  * @returns A binding configuration.
  * @public
  */
-export declare function oneTime<T = any>(binding: Expression<T>): Binding<T>;
+export declare function oneTime<T = any>(expression: Expression<T>): Binding<T>;
 /**
  * Creates an event listener binding.
- * @param binding - The binding to invoke when the event is raised.
+ * @param expression - The binding to invoke when the event is raised.
  * @param options - Event listener options.
  * @returns A binding configuration.
  * @public
  */
-export declare function listener<T = any>(binding: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
+export declare function listener<T = any>(expression: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
 /**
  * Normalizes the input value into a binding.
  * @param value - The value to create the default binding for.

package/dist/dts/testing/fakes.d.ts

@@ -1,4 +1,13 @@
-import { ExecutionContext } from "../index.js";
+import { ExecutionContext, ViewBehavior, ViewBehaviorTargets } from "../index.js";
 export declare const Fake: Readonly<{
     executionContext<TParent = any>(parent?: TParent | undefined, parentContext?: ExecutionContext<TParent> | undefined): ExecutionContext<TParent>;
+    viewController<TSource = any, TParent_1 = any>(targets?: ViewBehaviorTargets, ...behaviors: ViewBehavior<TSource, TParent_1>[]): {
+        isBound: boolean;
+        context: ExecutionContext<TParent_1>;
+        onUnbind(object: any): void;
+        source: TSource;
+        targets: ViewBehaviorTargets;
+        bind(source: TSource, context?: ExecutionContext<TParent_1>): void;
+        unbind(): void;
+    };
 }>;

package/dist/esm/templating/binding.js

@@ -88,9 +88,9 @@ function updateContent(target, aspect, value, controller) {
 function updateTokenList(target, aspect, value) {
     var _a;
     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;
+    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { v: 0, cv: Object.create(null) });
+    const classVersions = state.cv;
+    let version = state.v;
     const tokenList = target[aspect];
     // Add the classes, tracking the version at which they were added.
     if (value !== null && value !== undefined && value.length) {
@@ -100,19 +100,19 @@ function updateTokenList(target, aspect, value) {
             if (currentName === "") {
                 continue;
             }
-            versions[currentName] = currentVersion;
+            classVersions[currentName] = version;
             tokenList.add(currentName);
         }
     }
-    state.v = currentVersion + 1;
+    state.v = version + 1;
     // If this is the first call to add classes, there's no need to remove old ones.
-    if (currentVersion === 0) {
+    if (version === 0) {
         return;
     }
     // Remove classes from the previous version.
-    currentVersion -= 1;
-    for (const name in versions) {
-        if (versions[name] === currentVersion) {
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
             tokenList.remove(name);
         }
     }
@@ -139,8 +139,6 @@ export class HTMLBindingDirective {
          * The type of aspect to target.
          */
         this.aspectType = Aspect.content;
-        /** @internal */
-        this.bind = this.bindDefault;
         this.data = `${this.id}-d`;
     }
     /**
@@ -169,14 +167,12 @@ export class HTMLBindingDirective {
                     this.updateTarget = setProperty;
                     break;
                 case 4:
-                    this.bind = this.bindContent;
                     this.updateTarget = updateContent;
                     break;
                 case 5:
                     this.updateTarget = updateTokenList;
                     break;
                 case 6:
-                    this.bind = this.bindEvent;
                     this.updateTarget = eventTarget;
                     break;
                 default:
@@ -186,29 +182,26 @@ export class HTMLBindingDirective {
         return this;
     }
     /** @internal */
-    bindDefault(controller) {
+    bind(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);
+        switch (this.updateTarget) {
+            case eventTarget:
+                target[this.data] = controller;
+                target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+                break;
+            case updateContent:
+                controller.onUnbind(this);
+            // intentional fall through
+            default:
+                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);
+                break;
         }
     }
     /** @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;
@@ -219,13 +212,14 @@ export class HTMLBindingDirective {
     }
     /** @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();
+        const controller = event.currentTarget[this.data];
+        if (controller.isBound) {
+            ExecutionContext.setEvent(event);
+            const result = this.dataBinding.evaluate(controller.source, controller.context);
+            ExecutionContext.setEvent(null);
+            if (result !== true) {
+                event.preventDefault();
+            }
         }
     }
     /** @internal */
@@ -238,32 +232,32 @@ export class HTMLBindingDirective {
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
  * Creates an standard binding.
- * @param binding - The binding to refresh when changed.
+ * @param expression - The binding to refresh when changed.
  * @param isVolatile - Indicates whether the binding is volatile or not.
  * @returns A binding configuration.
  * @public
  */
-export function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
-    return new OnChangeBinding(binding, isVolatile);
+export function bind(expression, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OnChangeBinding(expression, isVolatile);
 }
 /**
  * Creates a one time binding
- * @param binding - The binding to refresh when signaled.
+ * @param expression - The binding to refresh when signaled.
  * @returns A binding configuration.
  * @public
  */
-export function oneTime(binding) {
-    return new OneTimeBinding(binding);
+export function oneTime(expression) {
+    return new OneTimeBinding(expression);
 }
 /**
  * Creates an event listener binding.
- * @param binding - The binding to invoke when the event is raised.
+ * @param expression - The binding to invoke when the event is raised.
  * @param options - Event listener options.
  * @returns A binding configuration.
  * @public
  */
-export function listener(binding, options) {
-    const config = new OnChangeBinding(binding, false);
+export function listener(expression, options) {
+    const config = new OnChangeBinding(expression, false);
     config.options = options;
     return config;
 }

package/dist/esm/testing/fakes.js

@@ -1,4 +1,4 @@
-import { ExecutionContext } from "../index.js";
+import { ExecutionContext, } from "../index.js";
 export const Fake = Object.freeze({
     executionContext(parent, parentContext) {
         return {
@@ -73,4 +73,33 @@ export const Fake = Object.freeze({
             },
         };
     },
+    viewController(targets = {}, ...behaviors) {
+        const unbindables = new Set();
+        return {
+            isBound: false,
+            context: null,
+            onUnbind(object) {
+                unbindables.add(object);
+            },
+            source: null,
+            targets,
+            bind(source, context = Fake.executionContext()) {
+                if (this.isBound) {
+                    return;
+                }
+                this.source = source;
+                this.context = context;
+                behaviors.forEach(x => x.bind(this));
+                this.isBound = true;
+            },
+            unbind() {
+                if (this.isBound) {
+                    unbindables.forEach(x => x.unbind(this));
+                    this.source = null;
+                    this.context = null;
+                    this.isBound = false;
+                }
+            },
+        };
+    },
 });

package/dist/fast-element.api.json

@@ -1442,7 +1442,7 @@
         {
           "kind": "Function",
           "canonicalReference": "@microsoft/fast-element!bind:function(1)",
-          "docComment": "/**\n * Creates an standard binding.\n *\n * @param binding - The binding to refresh when changed.\n *\n * @param isVolatile - Indicates whether the binding is volatile or not.\n *\n * @returns A binding configuration.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Creates an standard binding.\n *\n * @param expression - The binding to refresh when changed.\n *\n * @param isVolatile - Indicates whether the binding is volatile or not.\n *\n * @returns A binding configuration.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -1454,7 +1454,7 @@
             },
             {
               "kind": "Content",
-              "text": ">(binding: "
+              "text": ">(expression: "
             },
             {
               "kind": "Reference",
@@ -1499,7 +1499,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "binding",
+              "parameterName": "expression",
               "parameterTypeTokenRange": {
                 "startIndex": 3,
                 "endIndex": 5
@@ -10141,7 +10141,7 @@
         {
           "kind": "Function",
           "canonicalReference": "@microsoft/fast-element!listener:function(1)",
-          "docComment": "/**\n * Creates an event listener binding.\n *\n * @param binding - The binding to invoke when the event is raised.\n *\n * @param options - Event listener options.\n *\n * @returns A binding configuration.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Creates an event listener binding.\n *\n * @param expression - The binding to invoke when the event is raised.\n *\n * @param options - Event listener options.\n *\n * @returns A binding configuration.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -10153,7 +10153,7 @@
             },
             {
               "kind": "Content",
-              "text": ">(binding: "
+              "text": ">(expression: "
             },
             {
               "kind": "Reference",
@@ -10199,7 +10199,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "binding",
+              "parameterName": "expression",
               "parameterTypeTokenRange": {
                 "startIndex": 3,
                 "endIndex": 5
@@ -11397,7 +11397,7 @@
         {
           "kind": "Function",
           "canonicalReference": "@microsoft/fast-element!oneTime:function(1)",
-          "docComment": "/**\n * Creates a one time binding\n *\n * @param binding - The binding to refresh when signaled.\n *\n * @returns A binding configuration.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Creates a one time binding\n *\n * @param expression - The binding to refresh when signaled.\n *\n * @returns A binding configuration.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -11409,7 +11409,7 @@
             },
             {
               "kind": "Content",
-              "text": ">(binding: "
+              "text": ">(expression: "
             },
             {
               "kind": "Reference",
@@ -11446,7 +11446,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "binding",
+              "parameterName": "expression",
               "parameterTypeTokenRange": {
                 "startIndex": 3,
                 "endIndex": 5

package/dist/fast-element.d.ts

@@ -258,12 +258,12 @@ export declare type AttributeMode = typeof reflectMode | typeof booleanMode | "f
 
 /**
  * Creates an standard binding.
- * @param binding - The binding to refresh when changed.
+ * @param expression - The binding to refresh when changed.
  * @param isVolatile - Indicates whether the binding is volatile or not.
  * @returns A binding configuration.
  * @public
  */
-export declare function bind<T = any>(binding: Expression<T>, isVolatile?: boolean): Binding<T>;
+export declare function bind<T = any>(expression: Expression<T>, isVolatile?: boolean): Binding<T>;
 
 /**
  * Captures a binding expression along with related information and capabilities.
@@ -1295,10 +1295,7 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
      * Creates a behavior.
      */
     createBehavior(): ViewBehavior;
-    /* Excluded from this release type: bindDefault */
     /* Excluded from this release type: bind */
-    /* Excluded from this release type: bindContent */
-    /* Excluded from this release type: bindEvent */
     /* Excluded from this release type: unbind */
     /* Excluded from this release type: handleEvent */
     /* Excluded from this release type: handleChange */
@@ -1524,12 +1521,12 @@ export declare function lengthOf<T>(array: readonly T[]): number;
 
 /**
  * Creates an event listener binding.
- * @param binding - The binding to invoke when the event is raised.
+ * @param expression - The binding to invoke when the event is raised.
  * @param options - Event listener options.
  * @returns A binding configuration.
  * @public
  */
-export declare function listener<T = any>(binding: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
+export declare function listener<T = any>(expression: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
 
 /**
  * Common APIs related to markup generation.
@@ -1776,11 +1773,11 @@ export declare interface ObservationRecord {
 
 /**
  * Creates a one time binding
- * @param binding - The binding to refresh when signaled.
+ * @param expression - The binding to refresh when signaled.
  * @returns A binding configuration.
  * @public
  */
-export declare function oneTime<T = any>(binding: Expression<T>): Binding<T>;
+export declare function oneTime<T = any>(expression: Expression<T>): Binding<T>;
 
 /**
  * Common APIs related to content parsing.

package/dist/fast-element.debug.js

@@ -1963,9 +1963,9 @@ function updateContent(target, aspect, value, controller) {
 function updateTokenList(target, aspect, value) {
     var _a;
     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;
+    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { v: 0, cv: Object.create(null) });
+    const classVersions = state.cv;
+    let version = state.v;
     const tokenList = target[aspect];
     // Add the classes, tracking the version at which they were added.
     if (value !== null && value !== undefined && value.length) {
@@ -1975,19 +1975,19 @@ function updateTokenList(target, aspect, value) {
             if (currentName === "") {
                 continue;
             }
-            versions[currentName] = currentVersion;
+            classVersions[currentName] = version;
             tokenList.add(currentName);
         }
     }
-    state.v = currentVersion + 1;
+    state.v = version + 1;
     // If this is the first call to add classes, there's no need to remove old ones.
-    if (currentVersion === 0) {
+    if (version === 0) {
         return;
     }
     // Remove classes from the previous version.
-    currentVersion -= 1;
-    for (const name in versions) {
-        if (versions[name] === currentVersion) {
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
             tokenList.remove(name);
         }
     }
@@ -2014,8 +2014,6 @@ class HTMLBindingDirective {
          * The type of aspect to target.
          */
         this.aspectType = Aspect.content;
-        /** @internal */
-        this.bind = this.bindDefault;
         this.data = `${this.id}-d`;
     }
     /**
@@ -2044,14 +2042,12 @@ class HTMLBindingDirective {
                     this.updateTarget = setProperty;
                     break;
                 case 4:
-                    this.bind = this.bindContent;
                     this.updateTarget = updateContent;
                     break;
                 case 5:
                     this.updateTarget = updateTokenList;
                     break;
                 case 6:
-                    this.bind = this.bindEvent;
                     this.updateTarget = eventTarget;
                     break;
                 default:
@@ -2061,29 +2057,26 @@ class HTMLBindingDirective {
         return this;
     }
     /** @internal */
-    bindDefault(controller) {
+    bind(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);
+        switch (this.updateTarget) {
+            case eventTarget:
+                target[this.data] = controller;
+                target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+                break;
+            case updateContent:
+                controller.onUnbind(this);
+            // intentional fall through
+            default:
+                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);
+                break;
         }
     }
     /** @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;
@@ -2094,13 +2087,14 @@ class HTMLBindingDirective {
     }
     /** @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();
+        const controller = event.currentTarget[this.data];
+        if (controller.isBound) {
+            ExecutionContext.setEvent(event);
+            const result = this.dataBinding.evaluate(controller.source, controller.context);
+            ExecutionContext.setEvent(null);
+            if (result !== true) {
+                event.preventDefault();
+            }
         }
     }
     /** @internal */
@@ -2113,32 +2107,32 @@ class HTMLBindingDirective {
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
  * Creates an standard binding.
- * @param binding - The binding to refresh when changed.
+ * @param expression - The binding to refresh when changed.
  * @param isVolatile - Indicates whether the binding is volatile or not.
  * @returns A binding configuration.
  * @public
  */
-function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
-    return new OnChangeBinding(binding, isVolatile);
+function bind(expression, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OnChangeBinding(expression, isVolatile);
 }
 /**
  * Creates a one time binding
- * @param binding - The binding to refresh when signaled.
+ * @param expression - The binding to refresh when signaled.
  * @returns A binding configuration.
  * @public
  */
-function oneTime(binding) {
-    return new OneTimeBinding(binding);
+function oneTime(expression) {
+    return new OneTimeBinding(expression);
 }
 /**
  * Creates an event listener binding.
- * @param binding - The binding to invoke when the event is raised.
+ * @param expression - The binding to invoke when the event is raised.
  * @param options - Event listener options.
  * @returns A binding configuration.
  * @public
  */
-function listener(binding, options) {
-    const config = new OnChangeBinding(binding, false);
+function listener(expression, options) {
+    const config = new OnChangeBinding(expression, false);
     config.options = options;
     return config;
 }