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

package/dist/esm/templating/binding.js

@@ -1,9 +1,9 @@
-import "../interfaces.js";
+import { isFunction } from "../interfaces.js";
 import { ExecutionContext, Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { DOM } from "./dom.js";
-import { Aspect, HTMLDirective, } from "./html-directive.js";
-import { Markup } from "./markup.js";
+import { Aspect, Binding, HTMLDirective, } from "./html-directive.js";
+import { Markup, nextId } from "./markup.js";
 const createInnerHTMLBinding = globalThis.TrustedHTML
     ? (binding) => (s, c) => {
         const value = binding(s, c);
@@ -13,99 +13,28 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
         throw FAST.error(1202 /* Message.bindingInnerHTMLRequiresTrustedTypes */);
     }
     : (binding) => binding;
-/**
- * Describes how aspects of an HTML element will be affected by bindings.
- * @public
- */
-export const BindingMode = Object.freeze({
-    /**
-     * Creates a binding mode based on the supplied behavior types.
-     * @param UpdateType - The base behavior type used to update aspects.
-     * @param EventType - The base behavior type used to respond to events.
-     * @returns A new binding mode.
-     */
-    define(UpdateType, EventType = EventBinding) {
-        return Object.freeze({
-            [1]: d => new UpdateType(d, DOM.setAttribute),
-            [2]: d => new UpdateType(d, DOM.setBooleanAttribute),
-            [3]: d => new UpdateType(d, (t, a, v) => (t[a] = v)),
-            [4]: d => new (createContentBinding(UpdateType))(d, updateContentTarget),
-            [5]: d => new UpdateType(d, updateTokenListTarget),
-            [6]: d => new EventType(d),
-        });
-    },
-});
-/**
- * Describes the configuration for a binding expression.
- * @public
- */
-export const BindingConfig = Object.freeze({
-    /**
-     * Creates a binding configuration based on the provided mode and options.
-     * @param mode - The mode to use for the configuration.
-     * @param defaultOptions - The default options to use for the configuration.
-     * @returns A new binding configuration.
-     */
-    define(mode, defaultOptions) {
-        const config = (options) => {
-            return {
-                mode: config.mode,
-                options: Object.assign({}, defaultOptions, options),
-            };
-        };
-        config.options = defaultOptions;
-        config.mode = mode;
-        return config;
-    },
-});
-/**
- * A base binding behavior for DOM updates.
- * @public
- */
-export class UpdateBinding {
-    /**
-     * Creates an instance of UpdateBinding.
-     * @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;
+class OnChangeBinding extends Binding {
+    constructor(evaluate, isVolatile) {
+        super();
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
     }
-    /**
-     * 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) { }
-    /**
-     * 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) { }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
 }
-function createContentBinding(Type) {
-    return class extends Type {
-        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;
-            }
-        }
-    };
+class OneTimeBinding extends Binding {
+    constructor(evaluate) {
+        super();
+        this.evaluate = evaluate;
+    }
+    createObserver() {
+        return this;
+    }
+    observe(source, context) {
+        return this.evaluate(source, context);
+    }
+    dispose() { }
 }
 function updateContentTarget(target, aspect, value, source, context) {
     // If there's no actual value, then this equates to the
@@ -113,7 +42,7 @@ function updateContentTarget(target, aspect, value, source, context) {
     if (value === null || value === undefined) {
         value = "";
     }
-    // If the value has a "create" method, then it's a template-like.
+    // If the value has a "create" method, then it's a ContentTemplate.
     if (value.create) {
         target.textContent = "";
         let view = target.$fastView;
@@ -199,46 +128,21 @@ function updateTokenListTarget(target, aspect, value) {
         }
     }
 }
-/**
- * A binding behavior for one-time bindings.
- * @public
- */
-export class OneTimeBinding extends UpdateBinding {
-    /**
-     * 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;
-        this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
-    }
-}
 /**
  * A binding behavior for bindings that change.
  * @public
  */
-export class ChangeBinding extends UpdateBinding {
+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) {
-        super(directive, updateTarget);
-        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
+        this.directive = directive;
+        this.updateTarget = updateTarget;
         this.observerProperty = `${directive.id}-o`;
     }
-    /**
-     * 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] = Observable.binding(this.directive.binding, this, this.isBindingVolatile)));
-    }
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -275,12 +179,49 @@ export class ChangeBinding extends UpdateBinding {
         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 EventBinding {
+export class EventBehavior {
     /**
      * Creates an instance of EventBinding.
      * @param directive - The directive that has the configuration for this behavior.
@@ -301,7 +242,7 @@ export class EventBinding {
         const target = targets[directive.nodeId];
         target[this.sourceProperty] = source;
         target[this.contextProperty] = context;
-        target.addEventListener(directive.targetAspect, this, directive.options);
+        target.addEventListener(directive.targetAspect, this, directive.dataBinding.options);
     }
     /**
      * Unbinds this behavior from the source.
@@ -313,7 +254,7 @@ export class EventBinding {
         const directive = this.directive;
         const target = targets[directive.nodeId];
         target[this.sourceProperty] = target[this.contextProperty] = null;
-        target.removeEventListener(directive.targetAspect, this, directive.options);
+        target.removeEventListener(directive.targetAspect, this, directive.dataBinding.options);
     }
     /**
      * Creates a behavior.
@@ -328,25 +269,13 @@ export class EventBinding {
     handleEvent(event) {
         const target = event.currentTarget;
         ExecutionContext.setEvent(event);
-        const result = this.directive.binding(target[this.sourceProperty], target[this.contextProperty]);
+        const result = this.directive.dataBinding.evaluate(target[this.sourceProperty], target[this.contextProperty]);
         ExecutionContext.setEvent(null);
         if (result !== true) {
             event.preventDefault();
         }
     }
 }
-/**
- * The default onChange binding configuration.
- * @public
- */
-export const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
-/**
- * The default onTime binding configuration.
- * @public
- */
-export const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
-    once: true,
-});
 /**
  * A directive that applies bindings.
  * @public
@@ -354,15 +283,15 @@ export const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding),
 export class HTMLBindingDirective {
     /**
      * Creates an instance of HTMLBindingDirective.
-     * @param binding - The binding to apply.
-     * @param mode - The binding mode to use when applying the binding.
-     * @param options - The options to configure the binding with.
+     * @param dataBinding - The binding configuration to apply.
      */
-    constructor(binding, mode, options) {
-        this.binding = binding;
-        this.mode = mode;
-        this.options = options;
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
         this.factory = null;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
         /**
          * The type of aspect to target.
          */
@@ -382,24 +311,76 @@ export class HTMLBindingDirective {
     createBehavior(targets) {
         if (this.factory == null) {
             if (this.targetAspect === "innerHTML") {
-                this.binding = createInnerHTMLBinding(this.binding);
+                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
+            }
+            switch (this.aspectType) {
+                case 1:
+                    this.factory = new BindingBehavior(this, DOM.setAttribute);
+                    break;
+                case 2:
+                    this.factory = new BindingBehavior(this, DOM.setBooleanAttribute);
+                    break;
+                case 3:
+                    this.factory = new BindingBehavior(this, (t, a, v) => (t[a] = v));
+                    break;
+                case 4:
+                    this.factory = new ContentBehavior(this, updateContentTarget);
+                    break;
+                case 5:
+                    this.factory = new BindingBehavior(this, updateTokenListTarget);
+                    break;
+                case 6:
+                    this.factory = new EventBehavior(this);
+                    break;
+                default:
+                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
             }
-            this.factory = this.mode[this.aspectType](this);
         }
         return this.factory.createBehavior(targets);
     }
 }
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
- * Creates a binding directive with the specified configuration.
- * @param binding - The binding expression.
- * @param config - The binding configuration.
- * @returns A binding directive.
+ * Creates an standard binding.
+ * @param binding - 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, config = onChange) {
-    if (!("mode" in config)) {
-        config = onChange(config);
-    }
-    return new HTMLBindingDirective(binding, config.mode, config.options);
+export function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
+    return new OnChangeBinding(binding, isVolatile);
+}
+/**
+ * Creates a one time binding
+ * @param binding - The binding to refresh when signaled.
+ * @returns A binding configuration.
+ * @public
+ */
+export function oneTime(binding) {
+    return new OneTimeBinding(binding);
+}
+/**
+ * Creates an event listener binding.
+ * @param binding - 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);
+    config.options = options;
+    return config;
+}
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+export function normalizeBinding(value) {
+    return isFunction(value)
+        ? bind(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
 }

package/dist/esm/templating/compiler.js

@@ -1,7 +1,7 @@
-import { isString } from "../interfaces.js";
+import { isFunction, isString } from "../interfaces.js";
 import { FAST } from "../platform.js";
 import { Parser } from "./markup.js";
-import { bind, oneTime } from "./binding.js";
+import { HTMLBindingDirective, oneTime } from "./binding.js";
 import { Aspect } from "./html-directive.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
@@ -11,6 +11,22 @@ const next = {
     index: 0,
     node: null,
 };
+function tryWarn(name) {
+    if (!name.startsWith("fast-")) {
+        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+    }
+}
+const warningHost = new Proxy(document.createElement("div"), {
+    get(target, property) {
+        tryWarn(property);
+        const value = Reflect.get(target, property);
+        return isFunction(value) ? value.bind(target) : value;
+    },
+    set(target, property, value) {
+        tryWarn(property);
+        return Reflect.set(target, property, value);
+    },
+});
 class CompilationContext {
     constructor(fragment, directives) {
         this.fragment = fragment;
@@ -61,7 +77,7 @@ class CompilationContext {
         const fragment = this.fragment.cloneNode(true);
         const targets = Object.create(this.proto);
         targets.r = fragment;
-        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : fragment;
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : warningHost;
         for (const id of this.nodeIds) {
             targets[id]; // trigger locator
         }
@@ -78,7 +94,7 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = bind(() => attrValue, oneTime);
+                result = new HTMLBindingDirective(oneTime(() => attrValue));
                 Aspect.assign(result, attr.name);
             }
         }
@@ -115,6 +131,7 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
+            Aspect.assign(currentPart);
             context.addFactory(currentPart, parentId, nodeId, nodeIndex);
         }
         lastNode = currentNode;
@@ -247,22 +264,28 @@ export const Compiler = {
             return parts[0];
         }
         let sourceAspect;
+        let binding;
+        let isVolatile = false;
         const partCount = parts.length;
         const finalParts = parts.map((x) => {
             if (isString(x)) {
                 return () => x;
             }
             sourceAspect = x.sourceAspect || sourceAspect;
-            return x.binding;
+            binding = x.dataBinding || binding;
+            isVolatile = isVolatile || x.dataBinding.isVolatile;
+            return x.dataBinding.evaluate;
         });
-        const binding = (scope, context) => {
+        const expression = (scope, context) => {
             let output = "";
             for (let i = 0; i < partCount; ++i) {
                 output += finalParts[i](scope, context);
             }
             return output;
         };
-        const directive = bind(binding);
+        binding.evaluate = expression;
+        binding.isVolatile = isVolatile;
+        const directive = new HTMLBindingDirective(binding);
         Aspect.assign(directive, sourceAspect);
         return directive;
     },

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

@@ -1,5 +1,5 @@
 import { createTypeRegistry } from "../platform.js";
-import { Markup } from "./markup.js";
+import { Markup, nextId } from "./markup.js";
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -39,6 +39,13 @@ export function htmlDirective(options) {
         HTMLDirective.define(type, options);
     };
 }
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+export class Binding {
+}
 /**
  * The type of HTML aspect to target.
  * @public
@@ -76,12 +83,15 @@ export const Aspect = Object.freeze({
      *
      * @param directive - The directive to assign the aspect to.
      * @param value - The value to base the aspect determination on.
+     * @remarks
+     * If a falsy value is provided, then the content aspect will be assigned.
      */
     assign(directive, value) {
-        directive.sourceAspect = value;
         if (!value) {
+            directive.aspectType = Aspect.content;
             return;
         }
+        directive.sourceAspect = value;
         switch (value[0]) {
             case ":":
                 directive.targetAspect = value.substring(1);
@@ -129,6 +139,10 @@ export class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
     }
     /**
      * Creates a behavior.