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

package/dist/esm/templating/binding-two-way.js

@@ -1,45 +1,66 @@
-import { BindingConfig, BindingMode, ChangeBinding, } from "./binding.js";
+import { isString, noop } from "../interfaces.js";
+import { Observable, } from "../observation/observable.js";
+import { FAST } from "../platform.js";
+import { Binding } from "./html-directive.js";
+const defaultOptions = {
+    fromView: v => v,
+};
 let twoWaySettings = {
     determineChangeEvent() {
         return "change";
     },
 };
-/**
- * A binding behavior for bindings that update in two directions.
- * @public
- */
-export class TwoWayBinding extends ChangeBinding {
+export const TwoWaySettings = Object.freeze({
     /**
-     * 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.
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
      */
-    bind(source, context, targets) {
+    configure(settings) {
+        twoWaySettings = settings;
+    },
+});
+class TwoWayObserver {
+    constructor(directive, subscriber, dataBinding) {
+        this.directive = directive;
+        this.subscriber = subscriber;
+        this.dataBinding = dataBinding;
+        this.isNotBound = true;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
+        this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
+    }
+    bind(controller) {
         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);
+                (_a = this.dataBinding.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(this.directive, this.target);
         }
-        target.addEventListener(this.changeEvent, this);
+        if (this.isNotBound) {
+            this.target.addEventListener(this.changeEvent, this);
+            controller.onUnbind(this);
+            this.isNotBound = false;
+        }
+        return this.notifier.bind(controller);
     }
-    /**
-     * 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);
+    unbind(controller) {
+        this.isNotBound = true;
+        this.target.removeEventListener(this.changeEvent, this);
+    }
+    handleChange(subject, args) {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
     }
-    /** @internal */
     handleEvent(event) {
         const directive = this.directive;
         const target = event.currentTarget;
+        const notifier = this.notifier;
+        const last = notifier.last; // using internal API!!!
+        if (!last) {
+            FAST.warn(1203 /* Message.twoWayBindingRequiresObservables */);
+            return;
+        }
         let value;
         switch (directive.aspectType) {
             case 1:
@@ -55,22 +76,34 @@ export class TwoWayBinding extends ChangeBinding {
                 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);
+        last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
     }
-    /**
-     * Configures two-way binding.
-     * @param settings - The settings to use for the two-way binding system.
-     */
-    static configure(settings) {
-        twoWaySettings = settings;
+}
+class TwoWayBinding extends Binding {
+    createObserver(directive, subscriber) {
+        return new TwoWayObserver(directive, subscriber, this);
     }
 }
 /**
- * The default twoWay binding configuration.
+ * Creates a default binding.
+ * @param expression - The binding to refresh when changed.
+ * @param optionsOrChangeEvent - The binding options or the name of the change event to use.
+ * @param policy - The security policy to associate with the binding.
+ * @param isBindingVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding.
  * @public
  */
-export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
-    fromView: v => v,
-});
+export function twoWay(expression, optionsOrChangeEvent, policy, isBindingVolatile = Observable.isVolatileBinding(expression)) {
+    if (isString(optionsOrChangeEvent)) {
+        optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
+    }
+    if (!optionsOrChangeEvent) {
+        optionsOrChangeEvent = defaultOptions;
+    }
+    else if (!optionsOrChangeEvent.fromView) {
+        optionsOrChangeEvent.fromView = defaultOptions.fromView;
+    }
+    const binding = new TwoWayBinding(expression, policy, isBindingVolatile);
+    binding.options = optionsOrChangeEvent;
+    return binding;
+}

package/dist/esm/templating/binding.js

@@ -1,119 +1,37 @@
-import "../interfaces.js";
+import { isFunction, noop } 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 { DOM, DOMAspect } from "../dom.js";
+import { Binding, 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 */);
+class OnChangeBinding extends Binding {
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
-    : (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 OneTimeBinding extends Binding {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
     }
-    /**
-     * 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) {
+    createObserver() {
         return this;
     }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
 }
-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(target, aspect, value, source, context) {
+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) {
         target.textContent = "";
         let view = target.$fastView;
@@ -139,14 +57,14 @@ function updateContentTarget(target, aspect, value, source, context) {
         // and that there's actually no need to compose it.
         if (!view.isComposed) {
             view.isComposed = true;
-            view.bind(source, context);
+            view.bind(controller.source, controller.context);
             view.insertBefore(target);
             target.$fastView = view;
             target.$fastTemplate = value;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(source, context);
+            view.bind(controller.source, controller.context);
         }
     }
     else {
@@ -166,13 +84,12 @@ function updateContentTarget(target, aspect, value, source, context) {
         target.textContent = value;
     }
 }
-function updateTokenListTarget(target, aspect, value) {
+function updateTokenList(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 lookup = `${this.id}-t`;
+    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { v: 0, cv: Object.create(null) });
+    const classVersions = state.cv;
+    let version = state.v;
     const tokenList = target[aspect];
     // Add the classes, tracking the version at which they were added.
     if (value !== null && value !== undefined && value.length) {
@@ -182,224 +99,163 @@ function updateTokenListTarget(target, aspect, value) {
             if (currentName === "") {
                 continue;
             }
-            versions[currentName] = currentVersion;
+            classVersions[currentName] = version;
             tokenList.add(currentName);
         }
     }
-    state.v = currentVersion + 1;
+    state.v = version + 1;
     // If this is the first call to add classes, there's no need to remove old ones.
-    if (currentVersion === 0) {
+    if (version === 0) {
         return;
     }
     // Remove classes from the previous version.
-    currentVersion -= 1;
-    for (const name in versions) {
-        if (versions[name] === currentVersion) {
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
             tokenList.remove(name);
         }
     }
 }
+const sinkLookup = {
+    [DOMAspect.attribute]: DOM.setAttribute,
+    [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
+    [DOMAspect.property]: (t, a, v) => (t[a] = v),
+    [DOMAspect.content]: updateContent,
+    [DOMAspect.tokenList]: updateTokenList,
+    [DOMAspect.event]: () => void 0,
+};
 /**
- * A binding behavior for one-time bindings.
+ * A directive that applies bindings.
  * @public
  */
-export class OneTimeBinding extends UpdateBinding {
+export class HTMLBindingDirective {
     /**
-     * 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.
+     * Creates an instance of HTMLBindingDirective.
+     * @param dataBinding - The binding configuration to apply.
      */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = DOMAspect.content;
     }
-}
-/**
- * A binding behavior for bindings that change.
- * @public
- */
-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.
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
      */
-    constructor(directive, updateTarget) {
-        super(directive, updateTarget);
-        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
-        this.observerProperty = `${directive.id}-o`;
+    createHTML(add) {
+        return Markup.interpolation(add(this));
     }
     /**
-     * Returns the binding observer used to update the node.
-     * @param target - The target node.
-     * @returns A BindingObserver.
+     * Creates a behavior.
      */
-    getObserver(target) {
+    createBehavior() {
         var _a;
-        return ((_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = Observable.binding(this.directive.binding, this, this.isBindingVolatile)));
+        if (this.updateTarget === null) {
+            const sink = sinkLookup[this.aspectType];
+            const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
+            if (!sink) {
+                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            }
+            this.data = `${this.id}-d`;
+            this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
+        }
+        return this;
     }
-    /**
-     * 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);
+    /** @internal */
+    bind(controller) {
+        var _a;
+        const target = controller.targets[this.targetNodeId];
+        switch (this.aspectType) {
+            case DOMAspect.event:
+                target[this.data] = controller;
+                target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+                break;
+            case DOMAspect.content:
+                controller.onUnbind(this);
+            // intentional fall through
+            default:
+                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);
+                break;
+        }
     }
-    /**
-     * 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 */
+    unbind(controller) {
+        const target = controller.targets[this.targetNodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleEvent(event) {
+        const controller = event.currentTarget[this.data];
+        if (controller.isBound) {
+            ExecutionContext.setEvent(event);
+            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 source = observer.source;
-        const context = observer.context;
-        this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
     }
 }
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
- * A binding behavior for handling events.
+ * Creates an standard binding.
+ * @param expression - The binding to refresh when changed.
+ * @param policy - The security policy to associate with th binding.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
  * @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.directive.binding(target[this.sourceProperty], target[this.contextProperty]);
-        ExecutionContext.setEvent(null);
-        if (result !== true) {
-            event.preventDefault();
-        }
-    }
+export function bind(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OnChangeBinding(expression, policy, isVolatile);
 }
 /**
- * The default onChange binding configuration.
+ * Creates a one time binding
+ * @param expression - The binding to refresh when signaled.
+ * @param policy - The security policy to associate with th binding.
+ * @returns A binding configuration.
  * @public
  */
-export const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
+export function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
+}
 /**
- * The default onTime binding configuration.
+ * Creates an event listener binding.
+ * @param expression - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A 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);
-    }
+export function listener(expression, options) {
+    const config = new OnChangeBinding(expression);
+    config.options = options;
+    return config;
 }
-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.
+ * 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 bind(binding, config = onChange) {
-    if (!("mode" in config)) {
-        config = onChange(config);
-    }
-    return new HTMLBindingDirective(binding, config.mode, config.options);
+export function normalizeBinding(value) {
+    return isFunction(value)
+        ? bind(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
 }