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

package/dist/esm/context.js

@@ -1,17 +1,32 @@
 import "./interfaces.js";
 import { Metadata } from "./metadata.js";
 import { FAST } from "./platform.js";
+const contextsByName = new Map();
 const contextEventType = "context-request";
 let requestStrategy;
 /**
  * Enables using the {@link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md | W3C Community Context protocol.}
- * @beta
+ * @public
  */
 export const Context = Object.freeze({
     /**
      * The event type used for W3C Context Protocol requests.
      */
     eventType: contextEventType,
+    /**
+     * Returns a FASTContext object from the global context registry matching the given name if found.
+     * Otherwise, returns a new FASTContext with this name.
+     * @param name - The name of the FASTContext to get or create.
+     * @returns A FASTContext object.
+     */
+    for(name) {
+        let c = contextsByName.get(name);
+        if (c === void 0) {
+            c = Context.create(name);
+            contextsByName.set(name, c);
+        }
+        return c;
+    },
     /**
      * Creates a W3C Community Protocol-based Context object to use in requesting/providing
      * context through the DOM.
@@ -94,8 +109,14 @@ export const Context = Object.freeze({
     dispatch(target, context, callback, multiple = false) {
         target.dispatchEvent(new ContextEvent(context, callback, multiple));
     },
+    /**
+     * Enables an event target to provide a context value.
+     * @param target The target to provide the context value for.
+     * @param context The context to provide the value for.
+     * @param value The value to provide for the context.
+     */
     provide(target, context, value) {
-        this.handle(target, (event) => {
+        Context.handle(target, (event) => {
             event.stopImmediatePropagation();
             event.callback(value);
         }, context);
@@ -132,7 +153,7 @@ export const Context = Object.freeze({
      * initialValue if the context isn't handled.
      */
     defineProperty(target, propertyName, context) {
-        const field = `$di_${propertyName}`;
+        const field = Symbol.for(`fast:di:${propertyName}`);
         Reflect.defineProperty(target, propertyName, {
             get: function () {
                 var _a;

package/dist/esm/debug.js

@@ -17,6 +17,7 @@ const debugMessages = {
     [1206 /* directCallToHTMLTagNotAllowed */]: "Calling html`` as a normal function invalidates the security guarantees provided by FAST.",
     [1207 /* onlySetTemplatePolicyOnce */]: "The DOM Policy for an HTML template can only be set once.",
     [1208 /* cannotSetTemplatePolicyAfterCompilation */]: "The DOM Policy cannot be set after a template is compiled.",
+    [1209 /* blockedByDOMPolicy */]: "'${aspectName}' on '${tagName}' is blocked by the current DOMPolicy.",
     [1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
     [1501 /* noRegistrationForContext */]: "No registration for Context/Interface '${name}'.",
     [1502 /* noFactoryForResolver */]: "Dependency injection resolver for '${key}' returned a null factory.",

package/dist/esm/di/di.js

@@ -371,16 +371,16 @@ export const DI = Object.freeze({
      * The respectConnection option is only applicable to elements that descend from FASTElement.
      */
     defineProperty(target, propertyName, key, respectConnection = false) {
-        const diPropertyKey = `$di_${propertyName}`;
+        const field = Symbol.for(`fast:di:${propertyName}`);
         Reflect.defineProperty(target, propertyName, {
             get: function () {
-                let value = this[diPropertyKey];
+                let value = this[field];
                 if (value === void 0) {
                     const container = this instanceof Node
                         ? DI.findResponsibleContainer(this)
                         : DI.getOrCreateDOMContainer();
                     value = container.get(key);
-                    this[diPropertyKey] = value;
+                    this[field] = value;
                     if (respectConnection) {
                         const notifier = this.$fastController;
                         if (!notifier) {
@@ -389,9 +389,9 @@ export const DI = Object.freeze({
                         const handleChange = () => {
                             const newContainer = DI.findResponsibleContainer(this);
                             const newValue = newContainer.get(key);
-                            const oldValue = this[diPropertyKey];
+                            const oldValue = this[field];
                             if (newValue !== oldValue) {
-                                this[diPropertyKey] = value;
+                                this[field] = value;
                                 notifier.notify(propertyName);
                             }
                         };

package/dist/esm/dom-policy.js

@@ -1,5 +1,6 @@
 import { DOMAspect } from "./dom.js";
 import { isString } from "./interfaces.js";
+import { FAST } from "./platform.js";
 function safeURL(tagName, aspect, aspectName, sink) {
     return (target, name, value, ...rest) => {
         if (isString(value)) {
@@ -9,7 +10,10 @@ function safeURL(tagName, aspect, aspectName, sink) {
     };
 }
 function block(tagName, aspect, aspectName, sink) {
-    throw new Error(`${aspectName} on ${tagName !== null && tagName !== void 0 ? tagName : "text"} is blocked by the current DOMPolicy.`);
+    throw FAST.error(1209 /* Message.blockedByDOMPolicy */, {
+        aspectName,
+        tagName: tagName !== null && tagName !== void 0 ? tagName : "text",
+    });
 }
 const defaultDOMElementGuards = {
     a: {
@@ -303,6 +307,10 @@ function tryGuard(aspectGuards, tagName, aspect, aspectName, sink) {
         }
     }
 }
+/**
+ * A helper for creating DOM policies.
+ * @public
+ */
 const DOMPolicy = Object.freeze({
     /**
      * Creates a new DOM Policy object.

package/dist/esm/index.js

@@ -1,21 +1,27 @@
-export * from "./platform.js";
+export { FAST, emptyArray } from "./platform.js";
+// DOM
 export * from "./dom.js";
 // Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
 export * from "./observation/arrays.js";
 export * from "./observation/update-queue.js";
+// Binding
+export * from "./binding/binding.js";
+export * from "./binding/one-way.js";
+export * from "./binding/one-time.js";
 // Styles
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
 export * from "./styles/host.js";
 export * from "./styles/style-strategy.js";
+export * from "./styles/css-binding-directive.js";
 // Templating
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
-export * from "./templating/binding.js";
+export * from "./templating/html-binding-directive.js";
 export * from "./templating/html-directive.js";
 export * from "./templating/ref.js";
 export * from "./templating/when.js";

package/dist/esm/interfaces.js

@@ -45,16 +45,16 @@ switch (kernelMode) {
 export { KernelServiceId };
 /**
  * Determines whether or not an object is a function.
- * @internal
+ * @public
  */
 export const isFunction = (object) => typeof object === "function";
 /**
  * Determines whether or not an object is a string.
- * @internal
+ * @public
  */
 export const isString = (object) => typeof object === "string";
 /**
  * A function which does nothing.
- * @internal
+ * @public
  */
 export const noop = () => void 0;

package/dist/esm/metadata.js

@@ -22,8 +22,11 @@ if (!("metadata" in Reflect)) {
         return void 0;
     };
 }
+const annotationParamTypesKey = "annotation:paramtypes";
+const designParamTypesKey = "design:paramtypes";
 /**
  * Provides basic metadata capabilities used by Context and Dependency Injection.
+ * @public
  */
 export const Metadata = Object.freeze({
     /**
@@ -31,29 +34,29 @@ export const Metadata = Object.freeze({
      * @param Type - The type to get the metadata for.
      * @returns The metadata array or a frozen empty array if no metadata is found.
      */
-    getDesignParamTypes: Type => {
+    getDesignParamTypes: (Type) => {
         var _a;
-        return (_a = Reflect.getOwnMetadata("design:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+        return ((_a = Reflect.getOwnMetadata(designParamTypesKey, Type)) !== null && _a !== void 0 ? _a : emptyArray);
     },
     /**
      * Gets the "annotation:paramtypes" metadata for the specified type.
      * @param Type - The type to get the metadata for.
      * @returns The metadata array or a frozen empty array if no metadata is found.
      */
-    getAnnotationParamTypes: Type => {
+    getAnnotationParamTypes: (Type) => {
         var _a;
-        return (_a = Reflect.getOwnMetadata("annotation:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+        return ((_a = Reflect.getOwnMetadata(annotationParamTypesKey, Type)) !== null && _a !== void 0 ? _a : emptyArray);
     },
     /**
-     *
-     * @param Type - Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
+     * Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
      * an empty, mutable metadata array is created and added.
-     * @returns The metadata array.
+     * @param Type - The type to get or create the metadata for.
+     * @returns A mutable metadata array.
      */
     getOrCreateAnnotationParamTypes(Type) {
         let types = this.getAnnotationParamTypes(Type);
         if (types === emptyArray) {
-            Reflect.defineMetadata("annotation:paramtypes", (types = []), Type);
+            Reflect.defineMetadata(annotationParamTypesKey, (types = []), Type);
         }
         return types;
     },

package/dist/esm/observation/observable.js

@@ -1,5 +1,5 @@
-import { isFunction, isString, KernelServiceId, noop, } from "../interfaces.js";
-import { createMetadataLocator, FAST } from "../platform.js";
+import { isFunction, isString, KernelServiceId, } from "../interfaces.js";
+import { createMetadataLocator, FAST, makeSerializationNoop } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 /**
@@ -79,10 +79,6 @@ export 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;
@@ -184,6 +180,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             }
         }
     }
+    makeSerializationNoop(ExpressionNotifierImplementation);
     return Object.freeze({
         /**
          * @internal

package/dist/esm/pending-task.js

@@ -1,16 +1,28 @@
 /**
  * A concrete implementation of {@link PendingTask}
- * @beta
+ * @public
  */
 export class PendingTaskEvent extends Event {
+    /**
+     * Creates an instance of PendingTaskEvent.
+     * @param complete - A promise that resolves when the pending task is complete.
+     */
     constructor(complete) {
         super(PendingTaskEvent.type, { bubbles: true, composed: true });
         this.complete = complete;
     }
+    /**
+     * Determines whether a value is a PendingTaskEvent.
+     * @param value - The value to check.
+     * @returns True if the value is a PendingTaskEvent; false otherwise.
+     */
     static isPendingTask(value) {
         var _a;
         return (value.type === PendingTaskEvent.type &&
             typeof ((_a = value.complete) === null || _a === void 0 ? void 0 : _a.then) === "function");
     }
 }
+/**
+ * The type of the pending task event.
+ */
 PendingTaskEvent.type = "pending-task";

package/dist/esm/platform.js

@@ -1,3 +1,4 @@
+import { noop } from "./interfaces.js";
 import "./polyfills.js";
 // ensure FAST global - duplicated debug.ts
 const propConfig = {
@@ -10,7 +11,7 @@ if (globalThis.FAST === void 0) {
 }
 /**
  * The FAST global.
- * @internal
+ * @public
  */
 export const FAST = globalThis.FAST;
 if (FAST.getById === void 0) {
@@ -86,3 +87,11 @@ export function createMetadataLocator() {
         return metadata;
     };
 }
+/**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
+ * @internal
+ */
+export function makeSerializationNoop(type) {
+    type.prototype.toJSON = noop;
+}

package/dist/esm/styles/css-binding-directive.js

@@ -0,0 +1,76 @@
+import { CSSDirective } from "./css-directive.js";
+function handleChange(directive, controller, observer) {
+    controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
+}
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+export 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);

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)) {