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

package/dist/esm/styles/css.js

@@ -1,6 +1,12 @@
-import { isString } from "../interfaces.js";
+import { isFunction, isString } from "../interfaces.js";
+import { Binding } from "../binding/binding.js";
+import { oneWay } from "../binding/one-way.js";
 import { CSSDirective } from "./css-directive.js";
 import { ElementStyles } from "./element-styles.js";
+import { CSSBindingDirective } from "./css-binding-directive.js";
+const marker = `${Math.random().toString(36).substring(2, 8)}`;
+let varId = 0;
+const nextCSSVariable = () => `--v${marker}${++varId}`;
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";
@@ -11,7 +17,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) {

package/dist/esm/templating/compiler.js

@@ -1,8 +1,9 @@
 import { isFunction, isString } from "../interfaces.js";
 import { FAST } from "../platform.js";
 import { DOM } from "../dom.js";
+import { oneTime } from "../binding/one-time.js";
 import { nextId, Parser } from "./markup.js";
-import { HTMLBindingDirective, oneTime } from "./binding.js";
+import { HTMLBindingDirective } from "./html-binding-directive.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;

package/dist/esm/templating/{binding.js → html-binding-directive.js}

@@ -1,30 +1,9 @@
-import { isFunction, noop } from "../interfaces.js";
-import { ExecutionContext, Observable, } from "../observation/observable.js";
+import "../interfaces.js";
+import { ExecutionContext, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { DOM, DOMAspect } from "../dom.js";
-import { Binding, HTMLDirective, } from "./html-directive.js";
+import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
-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.
@@ -213,49 +192,3 @@ export 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
- */
-export 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
- */
-export 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
- */
-export 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
- */
-export function normalizeBinding(value) {
-    return isFunction(value)
-        ? bind(value)
-        : value instanceof Binding
-            ? value
-            : oneTime(() => value);
-}

package/dist/esm/templating/html-directive.js

@@ -1,6 +1,5 @@
 import { DOMAspect } from "../dom.js";
-import { noop } from "../interfaces.js";
-import { createTypeRegistry } from "../platform.js";
+import { createTypeRegistry, makeSerializationNoop } from "../platform.js";
 import { Markup } from "./markup.js";
 const registry = createTypeRegistry();
 /**
@@ -76,24 +75,6 @@ export function htmlDirective(options) {
         HTMLDirective.define(type, options);
     };
 }
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-export 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
@@ -105,11 +86,6 @@ export 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.
@@ -128,3 +104,4 @@ export class StatelessAttachedAttributeDirective {
         return this;
     }
 }
+makeSerializationNoop(StatelessAttachedAttributeDirective);

package/dist/esm/templating/render.js

@@ -1,7 +1,10 @@
 import { FASTElementDefinition } from "../components/fast-definitions.js";
 import { isFunction, isString } from "../interfaces.js";
-import { bind, normalizeBinding, oneTime, } from "./binding.js";
-import { Binding, HTMLDirective, } from "./html-directive.js";
+import { Binding } from "../binding/binding.js";
+import { oneTime } from "../binding/one-time.js";
+import { oneWay } from "../binding/one-way.js";
+import { normalizeBinding } from "../binding/normalize.js";
+import { HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
 import { html, ViewTemplate, } from "./template.js";
 /**
@@ -19,8 +22,8 @@ export class RenderBehavior {
         this.controller = null;
         this.view = null;
         this.data = null;
-        this.dataBindingObserver = directive.dataBinding.createObserver(directive, this);
-        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        this.dataBindingObserver = directive.dataBinding.createObserver(this, directive);
+        this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
     }
     /**
      * Bind this behavior.
@@ -141,12 +144,13 @@ function instructionToTemplate(def) {
     }
     return def.template;
 }
-function createElementTemplate(tagName, attributes, content, policy) {
+function createElementTemplate(tagName, options) {
     const markup = [];
     const values = [];
+    const { attributes, directives, content, policy } = options !== null && options !== void 0 ? options : {};
+    markup.push(`<${tagName}`);
     if (attributes) {
         const attrNames = Object.getOwnPropertyNames(attributes);
-        markup.push(`<${tagName}`);
         for (let i = 0, ii = attrNames.length; i < ii; ++i) {
             const name = attrNames[i];
             if (i === 0) {
@@ -157,11 +161,17 @@ function createElementTemplate(tagName, attributes, content, policy) {
             }
             values.push(attributes[name]);
         }
-        markup.push(`">`);
+        markup.push(`"`);
     }
-    else {
-        markup.push(`<${tagName}>`);
+    if (directives) {
+        markup[markup.length - 1] += " ";
+        for (let i = 0, ii = directives.length; i < ii; ++i) {
+            const directive = directives[i];
+            markup.push(i > 0 ? "" : " ");
+            values.push(directive);
+        }
     }
+    markup[markup.length - 1] += ">";
     if (content && isFunction(content.create)) {
         values.push(content);
         markup.push(`</${tagName}>`);
@@ -173,7 +183,7 @@ function createElementTemplate(tagName, attributes, content, policy) {
     return ViewTemplate.create(markup, values, policy);
 }
 function create(options) {
-    var _a, _b;
+    var _a;
     const name = (_a = options.name) !== null && _a !== void 0 ? _a : defaultViewName;
     let template;
     if (isElementRenderOptions(options)) {
@@ -187,7 +197,10 @@ function create(options) {
                 throw new Error("Invalid element for model rendering.");
             }
         }
-        template = createElementTemplate(tagName, (_b = options.attributes) !== null && _b !== void 0 ? _b : defaultAttributes, options.content, options.policy);
+        if (!options.attributes) {
+            options.attributes = defaultAttributes;
+        }
+        template = createElementTemplate(tagName, options);
     }
     else {
         template = options.template;
@@ -357,7 +370,7 @@ export function render(value, template) {
         });
     }
     else if (isFunction(template)) {
-        templateBinding = bind((s, c) => {
+        templateBinding = oneWay((s, c) => {
             var _a;
             let result = template(s, c);
             if (isString(result)) {

package/dist/esm/templating/repeat.js

@@ -1,10 +1,10 @@
 import { Observable } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { ArrayObserver } from "../observation/arrays.js";
+import { normalizeBinding } from "../binding/normalize.js";
 import { Markup } from "./markup.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
-import { normalizeBinding } from "./binding.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -42,8 +42,8 @@ export 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;
         }

package/dist/esm/templating/template.js

@@ -1,8 +1,11 @@
-import { isFunction, isString, noop } from "../interfaces.js";
-import { FAST } from "../platform.js";
-import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
+import { isFunction, isString } from "../interfaces.js";
+import { Binding } from "../binding/binding.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
+import { oneWay } from "../binding/one-way.js";
+import { oneTime } from "../binding/one-time.js";
+import { HTMLBindingDirective } from "./html-binding-directive.js";
 import { Compiler } from "./compiler.js";
-import { Binding, HTMLDirective, } from "./html-directive.js";
+import { HTMLDirective, } from "./html-directive.js";
 import { nextId } from "./markup.js";
 // Much thanks to LitHTML for working this out!
 const lastAttributeNameRegex = 
@@ -62,11 +65,6 @@ export 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;
     }
@@ -145,7 +143,7 @@ export 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);
@@ -159,6 +157,7 @@ export 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.

package/dist/esm/templating/view.js

@@ -1,5 +1,5 @@
-import { noop } from "../interfaces.js";
 import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
+import { makeSerializationNoop } from "../platform.js";
 function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
     let current = firstNode;
@@ -51,11 +51,6 @@ export 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;
     }
@@ -236,5 +231,6 @@ export class HTMLView {
         }
     }
 }
+makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");

package/dist/esm/testing/fakes.js

@@ -1,5 +1,5 @@
-import { ExecutionContext, } from "../index.js";
 import { noop } from "../interfaces.js";
+import { ExecutionContext } from "../observation/observable.js";
 export const Fake = Object.freeze({
     executionContext(parent, parentContext) {
         return {