@microsoft/fast-element 1.10.2 → 2.0.0-beta.3

package/dist/esm/templating/binding-signal.js

@@ -0,0 +1,84 @@
+import { isString } from "../interfaces.js";
+import { BindingMode, UpdateBinding } from "./binding.js";
+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;
+        }
+    }
+    /**
+     * 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 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);
+    }
+    /**
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
+     */
+    static send(signal) {
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found) ? found.forEach(x => x()) : found();
+        }
+    }
+}
+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 };
+};

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

@@ -0,0 +1,82 @@
+import "../interfaces.js";
+import { FAST } from "../platform.js";
+import { BindingConfig, BindingMode, ChangeBinding, } from "./binding.js";
+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;
+        const observer = this.getObserver(target);
+        const last = observer.last; // using internal API!!!
+        if (!last) {
+            FAST.warn(1203 /* Message.twoWayBindingRequiresObservables */);
+            return;
+        }
+        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;
+        }
+        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 twoWay binding configuration.
+ * @public
+ */
+export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
+    fromView: v => v,
+});