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

package/dist/esm/observation/observable.js

@@ -63,7 +63,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
+    class ExpressionNotifierImplementation extends SubscriberSet {
         constructor(binding, initialSubscriber, isVolatileBinding = false) {
             super(binding, initialSubscriber);
             this.binding = binding;
@@ -218,14 +218,14 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
          * @param binding - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
         binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+            return new ExpressionNotifierImplementation(binding, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated

package/dist/esm/platform.js

@@ -26,7 +26,7 @@ if (FAST.error === void 0) {
     Object.assign(FAST, {
         warn() { },
         error(code) {
-            return new Error(`Code ${code}`);
+            return new Error(`Error ${code}`);
         },
         addMessages() { },
     });

package/dist/esm/styles/element-styles.js

@@ -71,6 +71,20 @@ export class ElementStyles {
     static setDefaultStrategy(Strategy) {
         DefaultStyleStrategy = Strategy;
     }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
 }
 /**
  * Indicates whether the DOM supports the adoptedStyleSheets feature.

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

@@ -1,84 +1,79 @@
 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];
+import { Binding } from "./html-directive.js";
+const subscribers = Object.create(null);
+export const Signal = Object.freeze({
+    subscribe(signal, subscriber) {
+        const found = subscribers[signal];
         if (found) {
-            Array.isArray(found)
-                ? found.push(handler)
-                : (signals[signal] = [found, handler]);
+            found instanceof Set
+                ? found.add(subscriber)
+                : (subscribers[signal] = new Set([found, subscriber]));
         }
         else {
-            signals[signal] = handler;
+            subscribers[signal] = subscriber;
         }
-    }
-    /**
-     * 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);
-            }
+    },
+    unsubscribe(signal, subscriber) {
+        const found = subscribers[signal];
+        if (found && found instanceof Set) {
+            found.delete(subscriber);
         }
         else {
-            signals[signal] = void 0;
+            subscribers[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];
+    send(signal) {
+        const found = subscribers[signal];
         if (found) {
-            Array.isArray(found) ? found.forEach(x => x()) : found();
+            found instanceof Set
+                ? found.forEach(x => x.handleChange(this, signal))
+                : found.handleChange(this, signal);
         }
+    },
+});
+class SignalObserver {
+    constructor(dataBinding, subscriber) {
+        this.dataBinding = dataBinding;
+        this.subscriber = subscriber;
+    }
+    observe(source, context) {
+        const signal = (this.signal = this.getSignal(source, context));
+        Signal.subscribe(signal, this);
+        return this.dataBinding.evaluate(source, context);
+    }
+    dispose() {
+        Signal.unsubscribe(this.signal, this);
+    }
+    handleChange() {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
+    }
+    getSignal(source, context) {
+        const options = this.dataBinding.options;
+        return isString(options) ? options : options(source, context);
+    }
+}
+class SignalBinding extends Binding {
+    constructor(evaluate, options) {
+        super();
+        this.evaluate = evaluate;
+        this.options = options;
+    }
+    createObserver(directive, subscriber) {
+        return new SignalObserver(this, subscriber);
     }
 }
-const signalMode = BindingMode.define(SignalBinding);
 /**
  * Creates a signal binding configuration with the supplied options.
+ * @param binding - The binding to refresh when signaled.
  * @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 };
-};
+export function signal(binding, options) {
+    return new SignalBinding(binding, options);
+}

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

@@ -1,49 +1,45 @@
-import "../interfaces.js";
+import { isString } from "../interfaces.js";
+import { Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
-import { BindingConfig, BindingMode, ChangeBinding, } from "./binding.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 {
-    /**
-     * 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) {
+class TwoWayObserver {
+    constructor(directive, subscriber, dataBinding) {
+        this.directive = directive;
+        this.subscriber = subscriber;
+        this.dataBinding = dataBinding;
+        this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
+    }
+    observe(source, context) {
         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);
+        this.target.addEventListener(this.changeEvent, this);
+        return this.notifier.observe(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) {
-        super.unbind(source, context, targets);
-        targets[this.directive.nodeId].removeEventListener(this.changeEvent, this);
+    dispose() {
+        this.notifier.dispose();
+        this.target.removeEventListener(this.changeEvent, this);
+    }
+    /** @internal */
+    handleChange(subject, args) {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
     }
     /** @internal */
     handleEvent(event) {
         const directive = this.directive;
         const target = event.currentTarget;
-        const observer = this.getObserver(target);
-        const last = observer.last; // using internal API!!!
+        const notifier = this.notifier;
+        const last = notifier.last; // using internal API!!!
         if (!last) {
             FAST.warn(1203 /* Message.twoWayBindingRequiresObservables */);
             return;
@@ -63,7 +59,21 @@ export class TwoWayBinding extends ChangeBinding {
                 value = target[directive.targetAspect];
                 break;
         }
-        last.propertySource[last.propertyName] = directive.options.fromView(value);
+        last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
+    }
+}
+class TwoWayBinding extends Binding {
+    constructor(evaluate, isVolatile, options = defaultOptions) {
+        super();
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
+        this.options = options;
+        if (!options.fromView) {
+            options.fromView = defaultOptions.fromView;
+        }
+    }
+    createObserver(directive, subscriber) {
+        return new TwoWayObserver(directive, subscriber, this);
     }
     /**
      * Configures two-way binding.
@@ -74,9 +84,15 @@ export class TwoWayBinding extends ChangeBinding {
     }
 }
 /**
- * The default twoWay binding configuration.
+ * Creates a default binding.
+ * @param binding - The binding to refresh when changed.
+ * @param isBindingVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
  * @public
  */
-export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
-    fromView: v => v,
-});
+export function twoWay(binding, optionsOrChangeEvent, isBindingVolatile = Observable.isVolatileBinding(binding)) {
+    if (isString(optionsOrChangeEvent)) {
+        optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
+    }
+    return new TwoWayBinding(binding, isBindingVolatile, optionsOrChangeEvent);
+}