@microsoft/fast-element 1.8.0 → 1.9.0

package/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
+    "rules": {
+        "max-classes-per-file": "off",
+        "no-case-declarations": "off",
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                "types": {
+                    "{}": false,
+                    "Function": false,
+                    "Object": false
+                },
+                "extendDefaults": true
+            }
+        ],
+        "@typescript-eslint/no-use-before-define": ["error", { "typedefs": false }],
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/explicit-function-return-type": [
+            "error",
+            {
+                "allowExpressions": true
+            }
+        ],
+        "import/extensions": [
+            "error",
+            "always"
+        ]
+    }
+}

package/CHANGELOG.json

@@ -2,7 +2,49 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Tue, 08 Mar 2022 07:10:44 GMT",
+      "date": "Wed, 06 Apr 2022 07:10:25 GMT",
+      "tag": "@microsoft/fast-element_v1.9.0",
+      "version": "1.9.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "convert fast-element to type:module",
+            "author": "nicholasrice@users.noreply.github.com",
+            "commit": "ead7f7340654236f2503359e2fc6f0b41639b507",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sun, 03 Apr 2022 07:12:01 GMT",
+      "tag": "@microsoft/fast-element_v1.8.0",
+      "version": "1.8.0",
+      "comments": {
+        "none": [
+          {
+            "comment": "Fixed a typo in a doc example",
+            "author": "47367562+bheston@users.noreply.github.com",
+            "commit": "35913ce3a2dcba83bebb63cce2b8edf4e9da7df9",
+            "package": "@microsoft/fast-element"
+          },
+          {
+            "comment": "add comment-style tags for syntax highlighting (#5561)",
+            "author": "chhol@microsoft.com",
+            "commit": "7495a63e6e89b6e92e2d7f289eea063a8a354108",
+            "package": "@microsoft/fast-element"
+          },
+          {
+            "comment": "Update binding documentation to have an accurate example. Changes \"Bindings\" to \"Volatile Properties\".",
+            "author": "tgoze@ntst.com",
+            "commit": "1ffb431816f418864d2385b29ba494efcb3fa844",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 08 Mar 2022 07:12:45 GMT",
       "tag": "@microsoft/fast-element_v1.8.0",
       "version": "1.8.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Tue, 08 Mar 2022 07:10:44 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Apr 2022 07:10:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.9.0
+
+Wed, 06 Apr 2022 07:10:25 GMT
+
+### Minor changes
+
+- convert fast-element to type:module (nicholasrice@users.noreply.github.com)
+
 ## 1.8.0
 
-Tue, 08 Mar 2022 07:10:44 GMT
+Tue, 08 Mar 2022 07:12:45 GMT
 
 ### Minor changes
 

package/dist/dts/components/attributes.d.ts

@@ -1,4 +1,4 @@
-import { Accessor } from "../observation/observable";
+import { Accessor } from "../observation/observable.js";
 /**
  * Represents objects that can convert values to and from
  * view or model representations.

package/dist/dts/components/controller.d.ts

@@ -1,9 +1,9 @@
-import type { Behavior } from "../observation/behavior";
-import { PropertyChangeNotifier } from "../observation/notifier";
-import type { ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import type { ElementView } from "../templating/view";
-import { FASTElementDefinition } from "./fast-definitions";
+import type { Behavior } from "../observation/behavior.js";
+import { PropertyChangeNotifier } from "../observation/notifier.js";
+import type { ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import type { ElementView } from "../templating/view.js";
+import { FASTElementDefinition } from "./fast-definitions.js";
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public

package/dist/dts/components/fast-definitions.d.ts

@@ -1,6 +1,6 @@
-import { ComposableStyles, ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes";
+import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
 /**
  * Represents metadata configuration for a custom element.
  * @public

package/dist/dts/components/fast-element.d.ts

@@ -1,5 +1,5 @@
-import { Controller } from "./controller";
-import { PartialFASTElementDefinition } from "./fast-definitions";
+import { Controller } from "./controller.js";
+import { PartialFASTElementDefinition } from "./fast-definitions.js";
 /**
  * Represents a custom element based on the FASTElement infrastructure.
  * @public

package/dist/dts/dom.d.ts

@@ -1,5 +1,5 @@
-import type { Callable } from "./interfaces";
-import { TrustedTypesPolicy } from "./platform";
+import type { Callable } from "./interfaces.js";
+import { TrustedTypesPolicy } from "./platform.js";
 /** @internal */
 export declare const _interpolationStart: string;
 /** @internal */

package/dist/dts/index.d.ts

@@ -1,26 +1,26 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
-export { FASTElementDefinition, PartialFASTElementDefinition, } from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export type { Callable, Constructable, Mutable } from "./interfaces";
-export * from "./templating/compiler";
-export { ElementStyles, ElementStyleFactory, ComposableStyles, StyleTarget, } from "./styles/element-styles";
-export { css, cssPartial } from "./styles/css";
-export { CSSDirective } from "./styles/css-directive";
-export * from "./templating/view";
-export * from "./observation/observable";
-export * from "./observation/notifier";
-export { Splice } from "./observation/array-change-records";
-export { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-export type { Behavior } from "./observation/behavior";
-export * from "./templating/binding";
-export * from "./templating/html-directive";
-export * from "./templating/ref";
-export * from "./templating/when";
-export * from "./templating/repeat";
-export * from "./templating/slotted";
-export * from "./templating/children";
-export { elements, ElementsFilter, NodeBehaviorOptions, } from "./templating/node-observation";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
+export { FASTElementDefinition, PartialFASTElementDefinition, } from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export type { Callable, Constructable, Mutable } from "./interfaces.js";
+export * from "./templating/compiler.js";
+export { ElementStyles, ElementStyleFactory, ComposableStyles, StyleTarget, } from "./styles/element-styles.js";
+export { css, cssPartial } from "./styles/css.js";
+export { CSSDirective } from "./styles/css-directive.js";
+export * from "./templating/view.js";
+export * from "./observation/observable.js";
+export * from "./observation/notifier.js";
+export { Splice } from "./observation/array-change-records.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.js";
+export type { Behavior } from "./observation/behavior.js";
+export * from "./templating/binding.js";
+export * from "./templating/html-directive.js";
+export * from "./templating/ref.js";
+export * from "./templating/when.js";
+export * from "./templating/repeat.js";
+export * from "./templating/slotted.js";
+export * from "./templating/children.js";
+export { elements, ElementsFilter, NodeBehaviorOptions, } from "./templating/node-observation.js";

package/dist/dts/observation/behavior.d.ts

@@ -1,4 +1,4 @@
-import type { ExecutionContext } from "./observable";
+import type { ExecutionContext } from "./observable.js";
 /**
  * Represents and object that can contribute behavior to a view or
  * element's bind/unbind operations.

package/dist/dts/observation/observable.d.ts

@@ -1,4 +1,4 @@
-import type { Notifier, Subscriber } from "./notifier";
+import type { Notifier, Subscriber } from "./notifier.js";
 /**
  * Represents a getter/setter property accessor on an object.
  * @public

package/dist/dts/styles/css-directive.d.ts

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { ComposableStyles } from "./element-styles";
+import type { Behavior } from "../observation/behavior.js";
+import type { ComposableStyles } from "./element-styles.js";
 /**
  * Directive for use in {@link css}.
  *

package/dist/dts/styles/css.d.ts

@@ -1,5 +1,5 @@
-import { CSSDirective } from "./css-directive";
-import { ComposableStyles, ElementStyles } from "./element-styles";
+import { CSSDirective } from "./css-directive.js";
+import { ComposableStyles, ElementStyles } from "./element-styles.js";
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.

package/dist/dts/styles/element-styles.d.ts

@@ -1,4 +1,4 @@
-import type { Behavior } from "../observation/behavior";
+import type { Behavior } from "../observation/behavior.js";
 /**
  * A node that can be targeted by styles.
  * @public

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

@@ -1,6 +1,6 @@
-import type { Behavior } from "../observation/behavior";
-import { Binding, BindingObserver, ExecutionContext } from "../observation/observable";
-import { TargetedHTMLDirective } from "./html-directive";
+import type { Behavior } from "../observation/behavior.js";
+import { Binding, BindingObserver, ExecutionContext } from "../observation/observable.js";
+import { TargetedHTMLDirective } from "./html-directive.js";
 declare function normalBind(this: BindingBehavior, source: unknown, context: ExecutionContext): void;
 declare function normalUnbind(this: BindingBehavior): void;
 declare function updatePropertyTarget(this: BindingBehavior, value: unknown): void;

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

@@ -1,5 +1,5 @@
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
-import type { CaptureType } from "./template";
+import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 /**
  * The options used to configure child list observation.
  * @public

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

@@ -1,4 +1,4 @@
-import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive";
+import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive.js";
 /**
  * The result of compiling a template and its directives.
  * @beta

package/dist/dts/templating/html-directive.d.ts

@@ -1,4 +1,4 @@
-import type { Behavior } from "../observation/behavior";
+import type { Behavior } from "../observation/behavior.js";
 /**
  * A factory that can create a {@link Behavior} associated with a particular
  * location within a DOM fragment.

package/dist/dts/templating/node-observation.d.ts

@@ -1,4 +1,4 @@
-import type { Behavior } from "../observation/behavior";
+import type { Behavior } from "../observation/behavior.js";
 /**
  * Options for configuring node observation behavior.
  * @public

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

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { CaptureType } from "./template";
+import type { Behavior } from "../observation/behavior.js";
+import type { CaptureType } from "./template.js";
 /**
  * The runtime behavior for template references.
  * @public

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

@@ -1,9 +1,9 @@
-import { Binding, ExecutionContext } from "../observation/observable";
-import type { Subscriber } from "../observation/notifier";
-import type { Splice } from "../observation/array-change-records";
-import type { Behavior } from "../observation/behavior";
-import { HTMLDirective } from "./html-directive";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
+import { Binding, ExecutionContext } from "../observation/observable.js";
+import type { Subscriber } from "../observation/notifier.js";
+import type { Splice } from "../observation/array-change-records.js";
+import type { Behavior } from "../observation/behavior.js";
+import { HTMLDirective } from "./html-directive.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 /**
  * Options for configuring repeat behavior.
  * @public

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

@@ -1,5 +1,5 @@
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
-import type { CaptureType } from "./template";
+import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 /**
  * The options used to configure slotted node observation.
  * @public

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

@@ -1,6 +1,6 @@
-import { Binding } from "../observation/observable";
-import { ElementView, HTMLView, SyntheticView } from "./view";
-import { HTMLDirective } from "./html-directive";
+import { Binding } from "../observation/observable.js";
+import { ElementView, HTMLView, SyntheticView } from "./view.js";
+import { HTMLDirective } from "./html-directive.js";
 /**
  * A template capable of creating views specifically for rendering custom elements.
  * @public

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

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { ExecutionContext } from "../observation/observable";
+import type { Behavior } from "../observation/behavior.js";
+import type { ExecutionContext } from "../observation/observable.js";
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public

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

@@ -1,5 +1,5 @@
-import type { Binding } from "../observation/observable";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
+import type { Binding } from "../observation/observable.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param binding - The condition to test for rendering.

package/dist/esm/components/attributes.js

@@ -1,5 +1,5 @@
-import { Observable } from "../observation/observable";
-import { DOM } from "../dom";
+import { Observable } from "../observation/observable.js";
+import { DOM } from "../dom.js";
 /**
  * A {@link ValueConverter} that converts to and from `boolean` values.
  * @remarks

package/dist/esm/components/controller.js

@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier } from "../observation/notifier";
-import { defaultExecutionContext, Observable } from "../observation/observable";
-import { FASTElementDefinition } from "./fast-definitions";
+import { DOM } from "../dom.js";
+import { PropertyChangeNotifier } from "../observation/notifier.js";
+import { defaultExecutionContext, Observable } from "../observation/observable.js";
+import { FASTElementDefinition } from "./fast-definitions.js";
 const shadowRoots = new WeakMap();
 const defaultEventOptions = {
     bubbles: true,

package/dist/esm/components/fast-definitions.js

@@ -1,7 +1,7 @@
-import { FAST } from "../platform";
-import { Observable } from "../observation/observable";
-import { ElementStyles } from "../styles/element-styles";
-import { AttributeDefinition } from "./attributes";
+import { FAST } from "../platform.js";
+import { Observable } from "../observation/observable.js";
+import { ElementStyles } from "../styles/element-styles.js";
+import { AttributeDefinition } from "./attributes.js";
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
 const fastRegistry = FAST.getById(4 /* elementRegistry */, () => {

package/dist/esm/components/fast-element.js

@@ -1,5 +1,5 @@
-import { Controller } from "./controller";
-import { FASTElementDefinition } from "./fast-definitions";
+import { Controller } from "./controller.js";
+import { FASTElementDefinition, } from "./fast-definitions.js";
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
     return class extends BaseType {

package/dist/esm/dom.js

@@ -1,4 +1,4 @@
-import { $global } from "./platform";
+import { $global } from "./platform.js";
 const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
     const tasks = [];
     const pendingErrors = [];

package/dist/esm/index.js

@@ -1,23 +1,23 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
-export { FASTElementDefinition, } from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export * from "./templating/compiler";
-export { ElementStyles, } from "./styles/element-styles";
-export { css, cssPartial } from "./styles/css";
-export { CSSDirective } from "./styles/css-directive";
-export * from "./templating/view";
-export * from "./observation/observable";
-export * from "./observation/notifier";
-export { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-export * from "./templating/binding";
-export * from "./templating/html-directive";
-export * from "./templating/ref";
-export * from "./templating/when";
-export * from "./templating/repeat";
-export * from "./templating/slotted";
-export * from "./templating/children";
-export { elements, } from "./templating/node-observation";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
+export { FASTElementDefinition, } from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export * from "./templating/compiler.js";
+export { ElementStyles, } from "./styles/element-styles.js";
+export { css, cssPartial } from "./styles/css.js";
+export { CSSDirective } from "./styles/css-directive.js";
+export * from "./templating/view.js";
+export * from "./observation/observable.js";
+export * from "./observation/notifier.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.js";
+export * from "./templating/binding.js";
+export * from "./templating/html-directive.js";
+export * from "./templating/ref.js";
+export * from "./templating/when.js";
+export * from "./templating/repeat.js";
+export * from "./templating/slotted.js";
+export * from "./templating/children.js";
+export { elements, } from "./templating/node-observation.js";

package/dist/esm/observation/array-change-records.js

@@ -1,4 +1,4 @@
-import { emptyArray } from "../platform";
+import { emptyArray } from "../platform.js";
 /** @internal */
 export function newSplice(index, removed, addedCount) {
     return {

package/dist/esm/observation/array-observer.js

@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { calcSplices, newSplice, projectArraySplices } from "./array-change-records";
-import { SubscriberSet } from "./notifier";
-import { Observable } from "./observable";
+import { DOM } from "../dom.js";
+import { calcSplices, newSplice, projectArraySplices } from "./array-change-records.js";
+import { SubscriberSet } from "./notifier.js";
+import { Observable } from "./observable.js";
 let arrayObservationEnabled = false;
 function adjustIndex(changeRecord, array) {
     let index = changeRecord.index;

package/dist/esm/observation/observable.js

@@ -1,6 +1,6 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-import { FAST } from "../platform";
+import { DOM } from "../dom.js";
+import { FAST } from "../platform.js";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 /**
  * Common Observable APIs.
  * @public

package/dist/esm/styles/css.js

@@ -1,5 +1,5 @@
-import { CSSDirective } from "./css-directive";
-import { ElementStyles } from "./element-styles";
+import { CSSDirective } from "./css-directive.js";
+import { ElementStyles } from "./element-styles.js";
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";

package/dist/esm/styles/element-styles.js

@@ -1,4 +1,4 @@
-import { DOM } from "../dom";
+import { DOM } from "../dom.js";
 /**
  * Represents styles that can be applied to a custom element.
  * @public

package/dist/esm/templating/binding.js

@@ -1,6 +1,6 @@
-import { DOM } from "../dom";
-import { ExecutionContext, Observable, } from "../observation/observable";
-import { TargetedHTMLDirective } from "./html-directive";
+import { DOM } from "../dom.js";
+import { ExecutionContext, Observable, } from "../observation/observable.js";
+import { TargetedHTMLDirective } from "./html-directive.js";
 function normalBind(source, context) {
     this.source = source;
     this.context = context;

package/dist/esm/templating/children.js

@@ -1,5 +1,5 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import { NodeObservationBehavior } from "./node-observation";
+import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
+import { NodeObservationBehavior } from "./node-observation.js";
 /**
  * The runtime behavior for child node observation.
  * @public

package/dist/esm/templating/compiler.js

@@ -1,5 +1,5 @@
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
-import { HTMLBindingDirective } from "./binding";
+import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
+import { HTMLBindingDirective } from "./binding.js";
 let sharedContext = null;
 class CompilationContext {
     addFactory(factory) {

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

@@ -1,4 +1,4 @@
-import { DOM } from "../dom";
+import { DOM } from "../dom.js";
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public

package/dist/esm/templating/node-observation.js

@@ -1,5 +1,5 @@
-import { Observable } from "../observation/observable";
-import { emptyArray } from "../platform";
+import { Observable } from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
  * @param selector - An optional selector to restrict the filter to.

package/dist/esm/templating/ref.js

@@ -1,4 +1,4 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
+import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
 /**
  * The runtime behavior for template references.
  * @public

package/dist/esm/templating/repeat.js

@@ -1,9 +1,9 @@
-import { DOM } from "../dom";
-import { Observable, } from "../observation/observable";
-import { enableArrayObservation } from "../observation/array-observer";
-import { emptyArray } from "../platform";
-import { HTMLDirective } from "./html-directive";
-import { HTMLView } from "./view";
+import { DOM } from "../dom.js";
+import { Observable, } from "../observation/observable.js";
+import { enableArrayObservation } from "../observation/array-observer.js";
+import { emptyArray } from "../platform.js";
+import { HTMLDirective } from "./html-directive.js";
+import { HTMLView } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,

package/dist/esm/templating/slotted.js

@@ -1,5 +1,5 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive";
-import { NodeObservationBehavior } from "./node-observation";
+import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
+import { NodeObservationBehavior } from "./node-observation.js";
 /**
  * The runtime behavior for slotted node observation.
  * @public

package/dist/esm/templating/template.js

@@ -1,9 +1,9 @@
-import { DOM } from "../dom";
-import { defaultExecutionContext } from "../observation/observable";
-import { compileTemplate } from "./compiler";
-import { HTMLView } from "./view";
-import { HTMLDirective, TargetedHTMLDirective, } from "./html-directive";
-import { HTMLBindingDirective } from "./binding";
+import { DOM } from "../dom.js";
+import { defaultExecutionContext } from "../observation/observable.js";
+import { compileTemplate } from "./compiler.js";
+import { HTMLView } from "./view.js";
+import { HTMLDirective, TargetedHTMLDirective, } from "./html-directive.js";
+import { HTMLBindingDirective } from "./binding.js";
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public

package/docs/guide/observables-and-state.md

@@ -172,25 +172,27 @@ There are a couple of important details to note with array observation:
 * If the array is a property of an object, you will often want to observe both the property and the array. Observing the property will allow you to detect when the array instance is completely replaced on the object, while observing the array will allow you to detect changes in the array instance itself. When the property changes, be sure to unsubscribe to the old array and set up a subscription to the new array instance.
 * Observing an array only notifies on changes to the array itself. It does not notify on changes to properties on objects held within the array. Separate observers would need to be set up for those individual properties. These could be set up and torn down in response to changes in the array though.
 
-## Bindings
+## Observing Volatile Properties
 
-In addition to watching properties and arrays, you can also watch arbitrary bindings.
+In addition to watching properties and arrays, you can also watch volatile properties.
 
-**Example: Subscribing to a Binding**
+**Example: Subscribing to a Volatile Property**
 
 ```ts
-import { Observable } from '@microsoft/fast-element';
+import { Observable, defaultExecutionContext } from '@microsoft/fast-element';
 
-const binding = (x: MyClass) => x.someBoolean ? x.valueA : x.valueB;
-const bindingObserver = Observable.binding(binding);
+const myObject = new MyClass();
 const handler = {
   handleChange(source: any) {
     // respond to the change here
-    // the source is the bindingObserver itself
+    // the source is the volatile binding itself
   }
 };
+const bindingObserver = Observable.binding(myObject.computedValue, handler);
+bindingObserver.observe(myObject, defaultExecutionContext);
 
-bindingObserver.subscribe(handler);
+// Call this to dismantle the observer
+bindingObserver.disconnect();
 ```
 
 ### Records 

package/docs/guide/using-directives.md

@@ -330,7 +330,7 @@ const template = html<MyElement>`
   <ul>
     ${repeat(x => x.items, html`
       <li>
-        ${(x, c) = c.parent.selectTemplate(x)}
+        ${(x, c) => c.parent.selectTemplate(x)}
       </li>
     `)}
   </ul>

package/karma.conf.cjs

@@ -0,0 +1,152 @@
+const path = require("path");
+
+const basePath = path.resolve(__dirname);
+
+const commonChromeFlags = [
+    "--no-default-browser-check",
+    "--no-first-run",
+    "--no-sandbox",
+    "--no-managed-user-acknowledgment-check",
+    "--disable-background-timer-throttling",
+    "--disable-backing-store-limit",
+    "--disable-boot-animation",
+    "--disable-cloud-import",
+    "--disable-contextual-search",
+    "--disable-default-apps",
+    "--disable-extensions",
+    "--disable-infobars",
+    "--disable-translate",
+];
+
+module.exports = function (config) {
+    let browsers;
+    if (process.env.BROWSERS) {
+        browsers = [process.env.BROWSERS];
+    } else if (config.browsers) {
+        browsers = config.browsers;
+    } else {
+        browsers = ["Chrome"];
+    }
+
+    const setup = "setup-browser" + (config.package ? "-" + config.package : "");
+    const options = {
+        basePath,
+        browserDisconnectTimeout: 10000,
+        processKillTimeout: 10000,
+        frameworks: ["source-map-support", "mocha"],
+        plugins: [
+            require("karma-mocha"),
+            require("karma-mocha-reporter"),
+            require("karma-webpack"),
+            require("karma-source-map-support"),
+            require("karma-sourcemap-loader"),
+            require("karma-coverage-istanbul-reporter"),
+            require("karma-chrome-launcher"),
+            require("karma-firefox-launcher"),
+        ],
+        files: [`dist/esm/__test__/${setup}.js`],
+        preprocessors: {
+            [`dist/esm/__test__/${setup}.js`]: ["webpack", "sourcemap"],
+        },
+        webpackMiddleware: {
+            // webpack-dev-middleware configuration
+            // i. e.
+            stats: "errors-only",
+        },
+        webpack: {
+            mode: "none",
+            resolve: {
+                extensions: [".js"],
+                modules: ["dist", "node_modules"],
+                mainFields: ["module", "main"],
+            },
+            devtool: "inline-source-map",
+            performance: {
+                hints: false,
+            },
+            optimization: {
+                namedModules: false,
+                namedChunks: false,
+                nodeEnv: false,
+                usedExports: true,
+                flagIncludedChunks: false,
+                occurrenceOrder: false,
+                sideEffects: true,
+                concatenateModules: true,
+                splitChunks: {
+                    name: false,
+                },
+                runtimeChunk: false,
+                noEmitOnErrors: false,
+                checkWasmTypes: false,
+                minimize: false,
+            },
+            module: {
+                rules: [
+                    {
+                        test: /\.js\.map$/,
+                        use: ["ignore-loader"],
+                    },
+                    {
+                        test: /\.js$/,
+                        use: [
+                            {
+                                loader: "source-map-loader",
+                                options: {
+                                    enforce: "pre",
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+        mime: {
+            "text/x-typescript": ["ts"],
+        },
+        reporters: [config.reporter || (process.env.CI ? "min" : "progress")],
+        browsers: browsers,
+        customLaunchers: {
+            ChromeDebugging: {
+                base: "Chrome",
+                flags: [...commonChromeFlags, "--remote-debugging-port=9333"],
+                debug: true,
+            },
+            ChromeHeadlessOpt: {
+                base: "ChromeHeadless",
+                flags: [...commonChromeFlags],
+            },
+        },
+        client: {
+            captureConsole: true,
+            mocha: {
+                bail: config["bail"],
+                ui: "bdd",
+                timeout: 5000,
+            },
+        },
+        logLevel: config.LOG_ERROR, // to disable the WARN 404 for image requests
+    };
+
+    if (config.coverage) {
+        options.webpack.module.rules.push({
+            enforce: "post",
+            exclude: /(__tests__|testing|node_modules|\.spec\.[tj]s$)/,
+            loader: "istanbul-instrumenter-loader",
+            options: { esModules: true },
+            test: /\.[tj]s$/,
+        });
+        options.reporters = ["coverage-istanbul", ...options.reporters];
+        options.coverageIstanbulReporter = {
+            reports: ["html", "text-summary", "json", "lcovonly", "cobertura"],
+            dir: "coverage",
+        };
+        options.junitReporter = {
+            outputDir: "coverage",
+            outputFile: "test-results.xml",
+            useBrowserName: false,
+        };
+    }
+
+    config.set(options);
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
   "sideEffects": false,
-  "version": "1.8.0",
+  "version": "1.9.0",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -17,6 +17,7 @@
   },
   "main": "dist/esm/index.js",
   "types": "dist/fast-element.d.ts",
+  "type": "module",
   "unpkg": "dist/fast-element.min.js",
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
@@ -32,17 +33,17 @@
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "eslint . --ext .ts --fix",
-    "test": "yarn test-chrome:verbose && yarn doc:ci",
+    "test": "yarn eslint && yarn test-chrome:verbose && yarn doc:ci",
     "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage",
-    "test-chrome:verbose": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
-    "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging",
-    "test-chrome:verbose:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
-    "test-chrome:verbose:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --reporter=mocha",
-    "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+    "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
+    "test-chrome:verbose": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
+    "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
+    "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
+    "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
+    "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
+    "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
+    "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.8.1",