@microsoft/fast-element 1.10.5 → 2.0.0-beta.10

package/dist/esm/templating/binding.js

@@ -1,55 +1,41 @@
-import { DOM } from "../dom.js";
+import { isFunction } from "../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, Binding, HTMLDirective, } from "./html-directive.js";
+import { Markup, nextId } 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;
+class OnChangeBinding extends Binding {
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
 }
-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);
+class OneTimeBinding extends Binding {
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
 }
-function updateContentTarget(value) {
+function updateContent(target, aspect, value, controller) {
     // If there's no actual value, then this equates to the
     // empty string for the purposes of content bindings.
     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) {
-        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 +46,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 +58,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(controller.source, controller.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(controller.source, controller.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 +82,16 @@ 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 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 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 +100,183 @@ 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);
         }
     }
 }
+const setProperty = (t, a, v) => (t[a] = v);
+const eventTarget = () => void 0;
 /**
- * A directive that configures data binding to element content and attributes.
+ * A directive that applies bindings.
  * @public
  */
-export class HTMLBindingDirective extends TargetedHTMLDirective {
+export class HTMLBindingDirective {
     /**
-     * Creates an instance of BindingDirective.
-     * @param binding - A binding that returns the data used to update the DOM.
+     * Creates an instance of HTMLBindingDirective.
+     * @param dataBinding - The binding configuration to apply.
      */
-    constructor(binding) {
-        super();
-        this.binding = binding;
-        this.bind = normalBind;
-        this.unbind = normalUnbind;
-        this.updateTarget = updateAttributeTarget;
-        this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = Aspect.content;
+        /** @internal */
+        this.bind = this.bindDefault;
+        this.data = `${this.id}-d`;
     }
     /**
-     * Gets/sets the name of the attribute or property that this
-     * binding is targeting.
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
      */
-    get targetName() {
-        return this.originalTargetName;
-    }
-    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;
-        }
+    createHTML(add) {
+        return Markup.interpolation(add(this));
     }
     /**
-     * Makes this binding target the content of an element rather than
-     * a particular attribute or property.
+     * Creates a behavior.
      */
-    targetAtContent() {
-        this.updateTarget = updateContentTarget;
-        this.unbind = contentUnbind;
+    createBehavior() {
+        if (this.updateTarget === null) {
+            if (this.targetAspect === "innerHTML") {
+                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
+            }
+            switch (this.aspectType) {
+                case 1:
+                    this.updateTarget = DOM.setAttribute;
+                    break;
+                case 2:
+                    this.updateTarget = DOM.setBooleanAttribute;
+                    break;
+                case 3:
+                    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:
+                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            }
+        }
+        return this;
     }
-    /**
-     * 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.
-     */
-    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);
+    /** @internal */
+    bindDefault(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);
+        }
     }
-}
-/**
- * A behavior that updates content and attributes based on a configured
- * BindingDirective.
- * @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;
+    /** @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 */
-    handleChange() {
-        this.updateTarget(this.bindingObserver.observe(this.source, this.context));
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
     }
     /** @internal */
     handleEvent(event) {
+        const target = event.currentTarget;
         ExecutionContext.setEvent(event);
-        const result = this.binding(this.source, this.context);
+        const controller = target[this.data];
+        const result = this.dataBinding.evaluate(controller.source, controller.context);
         ExecutionContext.setEvent(null);
         if (result !== true) {
             event.preventDefault();
         }
     }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+    }
+}
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });
+/**
+ * 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, 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/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);
 }