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

package/dist/esm/templating/binding.js

@@ -1,46 +1,113 @@
-import { DOM } from "../dom.js";
+import "../interfaces.js";
 import { ExecutionContext, Observable, } from "../observation/observable.js";
-import { TargetedHTMLDirective } from "./html-directive.js";
-function normalBind(source, context) {
-    this.source = source;
-    this.context = context;
-    if (this.bindingObserver === null) {
-        this.bindingObserver = Observable.binding(this.binding, this, this.isBindingVolatile);
-    }
-    this.updateTarget(this.bindingObserver.observe(source, context));
-}
-function triggerBind(source, context) {
-    this.source = source;
-    this.context = context;
-    this.target.addEventListener(this.targetName, this);
-}
-function normalUnbind() {
-    this.bindingObserver.disconnect();
-    this.source = null;
-    this.context = null;
-}
-function contentUnbind() {
-    this.bindingObserver.disconnect();
-    this.source = null;
-    this.context = null;
-    const view = this.target.$fastView;
-    if (view !== void 0 && view.isComposed) {
-        view.unbind();
-        view.needsBindOnly = true;
+import { FAST } from "../platform.js";
+import { DOM } from "./dom.js";
+import { Aspect, HTMLDirective, } from "./html-directive.js";
+import { Markup } from "./markup.js";
+const createInnerHTMLBinding = globalThis.TrustedHTML
+    ? (binding) => (s, c) => {
+        const value = binding(s, c);
+        if (value instanceof TrustedHTML) {
+            return value;
+        }
+        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;
+    }
+    /**
+     * 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;
     }
 }
-function triggerUnbind() {
-    this.target.removeEventListener(this.targetName, this);
-    this.source = null;
-    this.context = null;
-}
-function updateAttributeTarget(value) {
-    DOM.setAttribute(this.target, this.targetName, value);
-}
-function updateBooleanAttributeTarget(value) {
-    DOM.setBooleanAttribute(this.target, this.targetName, value);
+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;
+            }
+        }
+    };
 }
-function updateContentTarget(value) {
+function updateContentTarget(target, aspect, value, source, context) {
     // If there's no actual value, then this equates to the
     // empty string for the purposes of content bindings.
     if (value === null || value === undefined) {
@@ -48,8 +115,8 @@ function updateContentTarget(value) {
     }
     // If the value has a "create" method, then it's a template-like.
     if (value.create) {
-        this.target.textContent = "";
-        let view = this.target.$fastView;
+        target.textContent = "";
+        let view = target.$fastView;
         // If there's no previous view that we might be able to
         // reuse then create a new view from the template.
         if (view === void 0) {
@@ -60,7 +127,7 @@ function updateContentTarget(value) {
             // from the same template as the new value, then we
             // need to remove the old view if it's still in the DOM
             // and create a new view from the template.
-            if (this.target.$fastTemplate !== value) {
+            if (target.$fastTemplate !== value) {
                 if (view.isComposed) {
                     view.remove();
                     view.unbind();
@@ -72,18 +139,18 @@ function updateContentTarget(value) {
         // and that there's actually no need to compose it.
         if (!view.isComposed) {
             view.isComposed = true;
-            view.bind(this.source, this.context);
-            view.insertBefore(this.target);
-            this.target.$fastView = view;
-            this.target.$fastTemplate = value;
+            view.bind(source, context);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(this.source, this.context);
+            view.bind(source, context);
         }
     }
     else {
-        const view = this.target.$fastView;
+        const view = target.$fastView;
         // If there is a view and it's currently composed into
         // the DOM, then we need to remove it.
         if (view !== void 0 && view.isComposed) {
@@ -96,16 +163,17 @@ function updateContentTarget(value) {
                 view.unbind();
             }
         }
-        this.target.textContent = value;
+        target.textContent = value;
     }
 }
-function updatePropertyTarget(value) {
-    this.target[this.targetName] = value;
-}
-function updateClassTarget(value) {
-    const classVersions = this.classVersions || Object.create(null);
-    const target = this.target;
-    let version = this.version || 0;
+function updateTokenListTarget(target, aspect, value) {
+    var _a;
+    const directive = this.directive;
+    const lookup = `${directive.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 tokenList = target[aspect];
     // Add the classes, tracking the version at which they were added.
     if (value !== null && value !== undefined && value.length) {
         const names = value.split(/\s+/);
@@ -114,139 +182,224 @@ function updateClassTarget(value) {
             if (currentName === "") {
                 continue;
             }
-            classVersions[currentName] = version;
-            target.classList.add(currentName);
+            versions[currentName] = currentVersion;
+            tokenList.add(currentName);
         }
     }
-    this.classVersions = classVersions;
-    this.version = version + 1;
+    state.v = currentVersion + 1;
     // If this is the first call to add classes, there's no need to remove old ones.
-    if (version === 0) {
+    if (currentVersion === 0) {
         return;
     }
     // Remove classes from the previous version.
-    version -= 1;
-    for (const name in classVersions) {
-        if (classVersions[name] === version) {
-            target.classList.remove(name);
+    currentVersion -= 1;
+    for (const name in versions) {
+        if (versions[name] === currentVersion) {
+            tokenList.remove(name);
         }
     }
 }
 /**
- * A directive that configures data binding to element content and attributes.
+ * A binding behavior for one-time bindings.
  * @public
  */
-export class HTMLBindingDirective extends TargetedHTMLDirective {
+export class OneTimeBinding extends UpdateBinding {
     /**
-     * Creates an instance of BindingDirective.
-     * @param binding - A binding that returns the data used to update the DOM.
+     * 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.
      */
-    constructor(binding) {
-        super();
-        this.binding = binding;
-        this.bind = normalBind;
-        this.unbind = normalUnbind;
-        this.updateTarget = updateAttributeTarget;
-        this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
+    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 {
     /**
-     * Gets/sets the name of the attribute or property that this
-     * binding is targeting.
+     * 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.
      */
-    get targetName() {
-        return this.originalTargetName;
+    constructor(directive, updateTarget) {
+        super(directive, updateTarget);
+        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
+        this.observerProperty = `${directive.id}-o`;
     }
-    set targetName(value) {
-        this.originalTargetName = value;
-        if (value === void 0) {
-            return;
-        }
-        switch (value[0]) {
-            case ":":
-                this.cleanedTargetName = value.substr(1);
-                this.updateTarget = updatePropertyTarget;
-                if (this.cleanedTargetName === "innerHTML") {
-                    const binding = this.binding;
-                    this.binding = (s, c) => DOM.createHTML(binding(s, c));
-                }
-                break;
-            case "?":
-                this.cleanedTargetName = value.substr(1);
-                this.updateTarget = updateBooleanAttributeTarget;
-                break;
-            case "@":
-                this.cleanedTargetName = value.substr(1);
-                this.bind = triggerBind;
-                this.unbind = triggerUnbind;
-                break;
-            default:
-                this.cleanedTargetName = value;
-                if (value === "class") {
-                    this.updateTarget = updateClassTarget;
-                }
-                break;
-        }
+    /**
+     * 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)));
     }
     /**
-     * Makes this binding target the content of an element rather than
-     * a particular attribute or property.
+     * 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.
      */
-    targetAtContent() {
-        this.updateTarget = updateContentTarget;
-        this.unbind = contentUnbind;
+    bind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        const observer = this.getObserver(target);
+        observer.target = target;
+        observer.source = source;
+        observer.context = context;
+        this.updateTarget(target, directive.targetAspect, observer.observe(source, context), source, context);
     }
     /**
-     * Creates the runtime BindingBehavior instance based on the configuration
-     * information stored in the BindingDirective.
-     * @param target - The target node that the binding behavior should attach to.
+     * 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.
      */
-    createBehavior(target) {
-        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-        return new BindingBehavior(target, this.binding, this.isBindingVolatile, this.bind, this.unbind, this.updateTarget, this.cleanedTargetName);
+    unbind(source, context, targets) {
+        const target = targets[this.directive.nodeId];
+        const observer = this.getObserver(target);
+        observer.dispose();
+        observer.target = null;
+        observer.source = null;
+        observer.context = null;
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const source = observer.source;
+        const context = observer.context;
+        this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
     }
 }
 /**
- * A behavior that updates content and attributes based on a configured
- * BindingDirective.
+ * A binding behavior for handling events.
  * @public
  */
-export class BindingBehavior {
-    /**
-     * Creates an instance of BindingBehavior.
-     * @param target - The target of the data updates.
-     * @param binding - The binding that returns the latest value for an update.
-     * @param isBindingVolatile - Indicates whether the binding has volatile dependencies.
-     * @param bind - The operation to perform during binding.
-     * @param unbind - The operation to perform during unbinding.
-     * @param updateTarget - The operation to perform when updating.
-     * @param targetName - The name of the target attribute or property to update.
-     */
-    constructor(target, binding, isBindingVolatile, bind, unbind, updateTarget, targetName) {
-        /** @internal */
-        this.source = null;
-        /** @internal */
-        this.context = null;
-        /** @internal */
-        this.bindingObserver = null;
-        this.target = target;
-        this.binding = binding;
-        this.isBindingVolatile = isBindingVolatile;
-        this.bind = bind;
-        this.unbind = unbind;
-        this.updateTarget = updateTarget;
-        this.targetName = targetName;
+export class EventBinding {
+    /**
+     * Creates an instance of EventBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     */
+    constructor(directive) {
+        this.directive = directive;
+        this.sourceProperty = `${directive.id}-s`;
+        this.contextProperty = `${directive.id}-c`;
     }
-    /** @internal */
-    handleChange() {
-        this.updateTarget(this.bindingObserver.observe(this.source, this.context));
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        target[this.sourceProperty] = source;
+        target[this.contextProperty] = context;
+        target.addEventListener(directive.targetAspect, this, directive.options);
     }
-    /** @internal */
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        target[this.sourceProperty] = target[this.contextProperty] = null;
+        target.removeEventListener(directive.targetAspect, this, directive.options);
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        return this;
+    }
+    /**
+     * @internal
+     */
     handleEvent(event) {
+        const target = event.currentTarget;
         ExecutionContext.setEvent(event);
-        const result = this.binding(this.source, this.context);
+        const result = this.directive.binding(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
+ */
+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.
+     */
+    constructor(binding, mode, options) {
+        this.binding = binding;
+        this.mode = mode;
+        this.options = options;
+        this.factory = null;
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = Aspect.content;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        return Markup.interpolation(add(this));
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        if (this.factory == null) {
+            if (this.targetAspect === "innerHTML") {
+                this.binding = createInnerHTMLBinding(this.binding);
+            }
+            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.
+ * @public
+ */
+export function bind(binding, config = onChange) {
+    if (!("mode" in config)) {
+        config = onChange(config);
+    }
+    return new HTMLBindingDirective(binding, config.mode, config.options);
+}

package/dist/esm/templating/children.js

@@ -1,45 +1,55 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
-import { NodeObservationBehavior } from "./node-observation.js";
+import { isString } from "../interfaces.js";
+import { HTMLDirective } from "./html-directive.js";
+import { NodeObservationDirective } from "./node-observation.js";
 /**
  * The runtime behavior for child node observation.
  * @public
  */
-export class ChildrenBehavior extends NodeObservationBehavior {
+export class ChildrenDirective extends NodeObservationDirective {
     /**
-     * Creates an instance of ChildrenBehavior.
-     * @param target - The element target to observe children on.
-     * @param options - The options to use when observing the element children.
+     * Creates an instance of ChildrenDirective.
+     * @param options - The options to use in configuring the child observation behavior.
      */
-    constructor(target, options) {
-        super(target, options);
-        this.observer = null;
+    constructor(options) {
+        super(options);
+        this.observerProperty = `${this.id}-o`;
+        this.handleEvent = (mutations, observer) => {
+            const target = observer.target;
+            this.updateTarget(this.getSource(target), this.computeNodes(target));
+        };
         options.childList = true;
     }
     /**
      * Begins observation of the nodes.
+     * @param target - The target to observe.
      */
-    observe() {
-        if (this.observer === null) {
-            this.observer = new MutationObserver(this.handleEvent.bind(this));
-        }
-        this.observer.observe(this.target, this.options);
+    observe(target) {
+        var _a;
+        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
+        observer.target = target;
+        observer.observe(target, this.options);
     }
     /**
      * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
      */
-    disconnect() {
-        this.observer.disconnect();
+    disconnect(target) {
+        const observer = target[this.observerProperty];
+        observer.target = null;
+        observer.disconnect();
     }
     /**
-     * Retrieves the nodes that should be assigned to the target.
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
      */
-    getNodes() {
-        if ("subtree" in this.options) {
-            return Array.from(this.target.querySelectorAll(this.options.selector));
+    getNodes(target) {
+        if ("selector" in this.options) {
+            return Array.from(target.querySelectorAll(this.options.selector));
         }
-        return Array.from(this.target.childNodes);
+        return Array.from(target.childNodes);
     }
 }
+HTMLDirective.define(ChildrenDirective);
 /**
  * A directive that observes the `childNodes` of an element and updates a property
  * whenever they change.
@@ -47,10 +57,10 @@ export class ChildrenBehavior extends NodeObservationBehavior {
  * @public
  */
 export function children(propertyOrOptions) {
-    if (typeof propertyOrOptions === "string") {
+    if (isString(propertyOrOptions)) {
         propertyOrOptions = {
             property: propertyOrOptions,
         };
     }
-    return new AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
+    return new ChildrenDirective(propertyOrOptions);
 }