@microsoft/fast-element 1.10.0 → 2.0.0-beta.1

package/dist/esm/templating/binding.js

@@ -1,46 +1,113 @@
-import { DOM } from "../dom.js";
+import { isString } 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, 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,381 @@ 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);
-    }
-    /**
-     * Gets/sets the name of the attribute or property that this
-     * binding is targeting.
-     */
-    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;
+    bind(source, context, targets) {
+        const directive = this.directive;
+        this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
+    }
+}
+const signals = Object.create(null);
+/**
+ * A binding behavior for signal bindings.
+ * @public
+ */
+export class SignalBinding extends UpdateBinding {
+    constructor() {
+        super(...arguments);
+        this.handlerProperty = `${this.directive.id}-h`;
+    }
+    /**
+     * 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];
+        const signal = this.getSignal(source, context);
+        const handler = (target[this.handlerProperty] = () => {
+            this.updateTarget(target, directive.targetAspect, directive.binding(source, context), source, context);
+        });
+        handler();
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found)
+                ? found.push(handler)
+                : (signals[signal] = [found, handler]);
+        }
+        else {
+            signals[signal] = handler;
         }
     }
     /**
-     * Makes this binding target the content of an element rather than
-     * a particular attribute or property.
+     * 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.
      */
-    targetAtContent() {
-        this.updateTarget = updateContentTarget;
-        this.unbind = contentUnbind;
+    unbind(source, context, targets) {
+        const signal = this.getSignal(source, context);
+        const found = signals[signal];
+        if (found && Array.isArray(found)) {
+            const directive = this.directive;
+            const target = targets[directive.nodeId];
+            const handler = target[this.handlerProperty];
+            const index = found.indexOf(handler);
+            if (index !== -1) {
+                found.splice(index, 1);
+            }
+        }
+        else {
+            signals[signal] = void 0;
+        }
+    }
+    getSignal(source, context) {
+        const options = this.directive.options;
+        return isString(options) ? options : options(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.
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
      */
-    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);
+    static send(signal) {
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found) ? found.forEach(x => x()) : found();
+        }
     }
 }
 /**
- * A behavior that updates content and attributes based on a configured
- * BindingDirective.
+ * A binding behavior for bindings that change.
  * @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 ChangeBinding extends UpdateBinding {
+    /**
+     * 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.observerProperty = `${directive.id}-o`;
     }
-    /** @internal */
-    handleChange() {
-        this.updateTarget(this.bindingObserver.observe(this.source, this.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] = Observable.binding(this.directive.binding, this, this.isBindingVolatile)));
+    }
+    /**
+     * 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];
+        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);
+    }
+    /**
+     * 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 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 binding behavior for handling events.
+ * @public
+ */
+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`;
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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();
         }
     }
 }
+let twoWaySettings = {
+    determineChangeEvent() {
+        return "change";
+    },
+};
+/**
+ * A binding behavior for bindings that update in two directions.
+ * @public
+ */
+export class TwoWayBinding extends ChangeBinding {
+    /**
+     * 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) {
+        var _a;
+        super.bind(source, context, targets);
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        if (!this.changeEvent) {
+            this.changeEvent =
+                (_a = directive.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(directive, target);
+        }
+        target.addEventListener(this.changeEvent, this);
+    }
+    /**
+     * 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);
+        targets[this.directive.nodeId].removeEventListener(this.changeEvent, this);
+    }
+    /** @internal */
+    handleEvent(event) {
+        const directive = this.directive;
+        const target = event.currentTarget;
+        let value;
+        switch (directive.aspectType) {
+            case 1:
+                value = target.getAttribute(directive.targetAspect);
+                break;
+            case 2:
+                value = target.hasAttribute(directive.targetAspect);
+                break;
+            case 4:
+                value = target.innerText;
+                break;
+            default:
+                value = target[directive.targetAspect];
+                break;
+        }
+        const observer = this.getObserver(target);
+        const last = observer.last; // using internal API!!!
+        last.propertySource[last.propertyName] = directive.options.fromView(value);
+    }
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    static configure(settings) {
+        twoWaySettings = settings;
+    }
+}
+/**
+ * The default onChange binding configuration.
+ * @public
+ */
+export const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
+/**
+ * The default twoWay binding configuration.
+ * @public
+ */
+export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
+    fromView: v => v,
+});
+/**
+ * The default onTime binding configuration.
+ * @public
+ */
+export const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
+    once: true,
+});
+const signalMode = BindingMode.define(SignalBinding);
+/**
+ * Creates a signal binding configuration with the supplied options.
+ * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @returns A binding configuration.
+ * @public
+ */
+export const signal = (options) => {
+    return { mode: signalMode, options };
+};
+/**
+ * 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);
+}