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

package/dist/fast-element.js

@@ -44,17 +44,17 @@ switch (kernelMode) {
 }
 /**
  * Determines whether or not an object is a function.
- * @internal
+ * @public
  */
 const isFunction = (object) => typeof object === "function";
 /**
  * Determines whether or not an object is a string.
- * @internal
+ * @public
  */
 const isString = (object) => typeof object === "string";
 /**
  * A function which does nothing.
- * @internal
+ * @public
  */
 const noop = () => void 0;
 
@@ -173,6 +173,14 @@ function createMetadataLocator() {
         return metadata;
     };
 }
+/**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
+ * @internal
+ */
+function makeSerializationNoop(type) {
+    type.prototype.toJSON = noop;
+}
 
 /**
  * The type of HTML aspect to target.
@@ -924,10 +932,6 @@ const Observable = FAST.getById(KernelServiceId.observable, () => {
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
-            /**
-             * Opts out of JSON stringification.
-             */
-            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
@@ -1029,6 +1033,7 @@ const Observable = FAST.getById(KernelServiceId.observable, () => {
             }
         }
     }
+    makeSerializationNoop(ExpressionNotifierImplementation);
     return Object.freeze({
         /**
          * @internal
@@ -1752,6 +1757,74 @@ function lengthOf(array) {
     return array.length;
 }
 
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param policy - The security policy to associate with this binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, policy, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.policy = policy;
+        this.isVolatile = isVolatile;
+    }
+}
+
+class OneWayBinding extends Binding {
+    createObserver(subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+    }
+}
+/**
+ * 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
+ */
+function oneWay(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OneWayBinding(expression, policy, isVolatile);
+}
+/**
+ * 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
+ */
+function listener(expression, options) {
+    const config = new OneWayBinding(expression);
+    config.options = options;
+    return config;
+}
+
+class OneTimeBinding extends Binding {
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
+}
+makeSerializationNoop(OneTimeBinding);
+/**
+ * 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
+ */
+function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
+}
+
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
     return styles
@@ -1880,6 +1953,85 @@ function cssDirective() {
     };
 }
 
+function handleChange(directive, controller, observer) {
+    controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
+}
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+class CSSBindingDirective {
+    /**
+     * Creates an instance of CSSBindingDirective.
+     * @param dataBinding - The binding to use in CSS.
+     * @param targetAspect - The CSS property to target.
+     */
+    constructor(dataBinding, targetAspect) {
+        this.dataBinding = dataBinding;
+        this.targetAspect = targetAspect;
+    }
+    /**
+     * Creates a CSS fragment to interpolate into the CSS document.
+     * @returns - the string to interpolate into CSS
+     */
+    createCSS(add) {
+        add(this);
+        return `var(${this.targetAspect})`;
+    }
+    /**
+     * Executed when this behavior is attached to a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    addedCallback(controller) {
+        var _a;
+        const element = controller.source;
+        if (!element.$cssBindings) {
+            element.$cssBindings = new Map();
+            const setAttribute = element.setAttribute;
+            element.setAttribute = (attr, value) => {
+                setAttribute.call(element, attr, value);
+                if (attr === "style") {
+                    element.$cssBindings.forEach((v, k) => handleChange(k, v.controller, v.observer));
+                }
+            };
+        }
+        const observer = (_a = controller[this.targetAspect]) !== null && _a !== void 0 ? _a : (controller[this.targetAspect] = this.dataBinding.createObserver(this, this));
+        observer.controller = controller;
+        controller.source.$cssBindings.set(this, { controller, observer });
+    }
+    /**
+     * Executed when this behavior's host is connected.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    connectedCallback(controller) {
+        handleChange(this, controller, controller[this.targetAspect]);
+    }
+    /**
+     * Executed when this behavior is detached from a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    removedCallback(controller) {
+        if (controller.source.$cssBindings) {
+            controller.source.$cssBindings.delete(this);
+        }
+    }
+    /**
+     * Called when a subject this instance has subscribed to changes.
+     * @param subject - The subject of the change.
+     * @param args - The event args detailing the change that occurred.
+     *
+     * @internal
+     */
+    handleChange(_, observer) {
+        handleChange(this, observer.controller, observer);
+    }
+}
+CSSDirective.define(CSSBindingDirective);
+
+const marker$1 = `${Math.random().toString(36).substring(2, 8)}`;
+let varId = 0;
+const nextCSSVariable = () => `--v${marker$1}${++varId}`;
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";
@@ -1890,7 +2042,13 @@ function collectStyles(strings, values) {
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
         let value = values[i];
-        if (CSSDirective.getForInstance(value) !== void 0) {
+        if (isFunction(value)) {
+            value = new CSSBindingDirective(oneWay(value), nextCSSVariable()).createCSS(add);
+        }
+        else if (value instanceof Binding) {
+            value = new CSSBindingDirective(value, nextCSSVariable()).createCSS(add);
+        }
+        else if (CSSDirective.getForInstance(value) !== void 0) {
             value = value.createCSS(add);
         }
         if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
@@ -2113,24 +2271,6 @@ function htmlDirective(options) {
         HTMLDirective.define(type, options);
     };
 }
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-class Binding {
-    /**
-     * Creates a binding.
-     * @param evaluate - Evaluates the binding.
-     * @param policy - The security policy to associate with this binding.
-     * @param isVolatile - Indicates whether the binding is volatile.
-     */
-    constructor(evaluate, policy, isVolatile = false) {
-        this.evaluate = evaluate;
-        this.policy = policy;
-        this.isVolatile = isVolatile;
-    }
-}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -2142,11 +2282,6 @@ class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -2165,28 +2300,8 @@ class StatelessAttachedAttributeDirective {
         return this;
     }
 }
+makeSerializationNoop(StatelessAttachedAttributeDirective);
 
-class OnChangeBinding extends Binding {
-    createObserver(_, subscriber) {
-        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
-    }
-}
-class OneTimeBinding extends Binding {
-    constructor() {
-        super(...arguments);
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
-    }
-    createObserver() {
-        return this;
-    }
-    bind(controller) {
-        return this.evaluate(controller.source, controller.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.
@@ -2375,52 +2490,6 @@ class HTMLBindingDirective {
     }
 }
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
-/**
- * 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
- */
-function bind(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
-    return new OnChangeBinding(expression, policy, isVolatile);
-}
-/**
- * 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
- */
-function oneTime(expression, policy) {
-    return new OneTimeBinding(expression, policy);
-}
-/**
- * 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
- */
-function listener(expression, options) {
-    const config = new OnChangeBinding(expression);
-    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
- */
-function normalizeBinding(value) {
-    return isFunction(value)
-        ? bind(value)
-        : value instanceof Binding
-            ? value
-            : oneTime(() => value);
-}
 
 function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
@@ -2473,11 +2542,6 @@ class HTMLView {
          * The length of the current collection within a repeat context.
          */
         this.length = 0;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
@@ -2658,6 +2722,7 @@ class HTMLView {
         }
     }
 }
+makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");
 
@@ -2998,11 +3063,6 @@ class ViewTemplate {
     constructor(html, factories = {}, policy) {
         this.policy = policy;
         this.result = null;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.html = html;
         this.factories = factories;
     }
@@ -3081,7 +3141,7 @@ class ViewTemplate {
             let definition;
             html += currentString;
             if (isFunction(currentValue)) {
-                currentValue = new HTMLBindingDirective(bind(currentValue));
+                currentValue = new HTMLBindingDirective(oneWay(currentValue));
             }
             else if (currentValue instanceof Binding) {
                 currentValue = new HTMLBindingDirective(currentValue);
@@ -3095,6 +3155,7 @@ class ViewTemplate {
         return new ViewTemplate(html + strings[strings.length - 1], factories, policy);
     }
 }
+makeSerializationNoop(ViewTemplate);
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
@@ -3150,6 +3211,20 @@ function when(condition, templateOrTemplateBinding) {
     return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
 }
 
+/**
+ * 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
+ */
+function normalizeBinding(value) {
+    return isFunction(value)
+        ? oneWay(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
+}
+
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -3187,8 +3262,8 @@ class RepeatBehavior {
         this.bindView = bindWithoutPositioning;
         /** @internal */
         this.views = [];
-        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
-        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        this.itemsBindingObserver = directive.dataBinding.createObserver(this, directive);
+        this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
         if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
@@ -3975,11 +4050,6 @@ class ElementController extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
@@ -4020,6 +4090,27 @@ class ElementController extends PropertyChangeNotifier {
         Observable.track(this, isConnectedPropertyName);
         return this.stage === 1 /* Stages.connected */;
     }
+    /**
+     * The context the expression is evaluated against.
+     */
+    get context() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
+    }
+    /**
+     * Indicates whether the controller is bound.
+     */
+    get isBound() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    get sourceLifetime() {
+        var _a;
+        return (_a = this.view) === null || _a === void 0 ? void 0 : _a.sourceLifetime;
+    }
     /**
      * Gets/sets the template used to render the component.
      * @remarks
@@ -4082,6 +4173,14 @@ class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior) {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.onUnbind(behavior);
+    }
     /**
      * Adds the behavior to the component.
      * @param behavior - The behavior to add.
@@ -4314,6 +4413,7 @@ class ElementController extends PropertyChangeNotifier {
         elementControllerStrategy = strategy;
     }
 }
+makeSerializationNoop(ElementController);
 // Set default strategy for ElementController
 ElementController.setStrategy(ElementController);
 /**
@@ -4483,4 +4583,4 @@ function customElement(nameOrDef) {
 
 DOM.setPolicy(DOMPolicy.create());
 
-export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, repeat, slotted, volatile, when };