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

package/dist/esm/templating/children.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
 import { NodeObservationDirective } from "./node-observation.js";
 /**
@@ -24,9 +24,13 @@ export class ChildrenDirective extends NodeObservationDirective {
      * @param target - The target to observe.
      */
     observe(target) {
-        var _a;
-        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
-        observer.target = target;
+        let observer = target[this.observerProperty];
+        if (!observer) {
+            observer = new MutationObserver(this.handleEvent);
+            observer.toJSON = noop;
+            observer.target = target;
+            target[this.observerProperty] = observer;
+        }
         observer.observe(target, this.options);
     }
     /**

package/dist/esm/templating/compiler.js

@@ -1,8 +1,9 @@
-import { isString } from "../interfaces.js";
+import { isFunction, isString } from "../interfaces.js";
 import { FAST } from "../platform.js";
-import { Parser } from "./markup.js";
-import { bind, oneTime } from "./binding.js";
-import { Aspect } from "./html-directive.js";
+import { DOM } from "../dom.js";
+import { nextId, Parser } from "./markup.js";
+import { HTMLBindingDirective, oneTime } from "./binding.js";
+import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -11,21 +12,42 @@ const next = {
     index: 0,
     node: null,
 };
+function tryWarn(name) {
+    if (!name.startsWith("fast-")) {
+        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+    }
+}
+const warningHost = new Proxy(document.createElement("div"), {
+    get(target, property) {
+        tryWarn(property);
+        const value = Reflect.get(target, property);
+        return isFunction(value) ? value.bind(target) : value;
+    },
+    set(target, property, value) {
+        tryWarn(property);
+        return Reflect.set(target, property, value);
+    },
+});
 class CompilationContext {
-    constructor(fragment, directives) {
+    constructor(fragment, directives, policy) {
         this.fragment = fragment;
         this.directives = directives;
+        this.policy = policy;
         this.proto = null;
         this.nodeIds = new Set();
         this.descriptors = {};
         this.factories = [];
     }
-    addFactory(factory, parentId, nodeId, targetIndex) {
+    addFactory(factory, parentId, nodeId, targetIndex, tagName) {
+        var _a, _b;
         if (!this.nodeIds.has(nodeId)) {
             this.nodeIds.add(nodeId);
             this.addTargetDescriptor(parentId, nodeId, targetIndex);
         }
-        factory.nodeId = nodeId;
+        factory.id = (_a = factory.id) !== null && _a !== void 0 ? _a : nextId();
+        factory.targetNodeId = nodeId;
+        factory.targetTagName = tagName;
+        factory.policy = (_b = factory.policy) !== null && _b !== void 0 ? _b : this.policy;
         this.factories.push(factory);
     }
     freeze() {
@@ -61,7 +83,7 @@ class CompilationContext {
         const fragment = this.fragment.cloneNode(true);
         const targets = Object.create(this.proto);
         targets.r = fragment;
-        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : fragment;
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : warningHost;
         for (const id of this.nodeIds) {
             targets[id]; // trigger locator
         }
@@ -78,19 +100,19 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = bind(() => attrValue, oneTime);
-                Aspect.assign(result, attr.name);
+                result = new HTMLBindingDirective(oneTime(() => attrValue, context.policy));
+                HTMLDirective.assignAspect(result, attr.name);
             }
         }
         else {
             /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-            result = Compiler.aggregate(parseResult);
+            result = Compiler.aggregate(parseResult, context.policy);
         }
         if (result !== null) {
             node.removeAttributeNode(attr);
             i--;
             ii--;
-            context.addFactory(result, parentId, nodeId, nodeIndex);
+            context.addFactory(result, parentId, nodeId, nodeIndex, node.tagName);
         }
     }
 }
@@ -115,7 +137,8 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
-            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+            HTMLDirective.assignAspect(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex, null);
         }
         lastNode = currentNode;
     }
@@ -147,7 +170,7 @@ function compileNode(context, parentId, node, nodeIndex) {
             if (parts !== null) {
                 context.addFactory(
                 /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-                Compiler.aggregate(parts), parentId, nodeId, nodeIndex);
+                Compiler.aggregate(parts), parentId, nodeId, nodeIndex, null);
             }
             break;
     }
@@ -161,45 +184,28 @@ function isMarker(node, directives) {
         Parser.parse(node.data, directives) !== null);
 }
 const templateTag = "TEMPLATE";
-const policyOptions = { createHTML: html => html };
-let htmlPolicy = globalThis.trustedTypes
-    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
-    : policyOptions;
-const fastHTMLPolicy = htmlPolicy;
 /**
  * Common APIs related to compilation.
  * @public
  */
 export const Compiler = {
-    /**
-     * Sets the HTML trusted types policy used by the compiler.
-     * @param policy - The policy to set for HTML.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setHTMLPolicy(policy) {
-        if (htmlPolicy !== fastHTMLPolicy) {
-            throw FAST.error(1201 /* Message.onlySetHTMLPolicyOnce */);
-        }
-        htmlPolicy = policy;
-    },
     /**
      * Compiles a template and associated directives into a compilation
      * result which can be used to create views.
      * @param html - The html string or template element to compile.
-     * @param directives - The directives referenced by the template.
+     * @param factories - The behavior factories referenced by the template.
+     * @param policy - The security policy to compile the html with.
      * @remarks
      * The template that is provided for compilation is altered in-place
      * and cannot be compiled again. If the original template must be preserved,
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile(html, directives) {
+    compile(html, factories, policy = DOM.policy) {
         let template;
         if (isString(html)) {
             template = document.createElement(templateTag);
-            template.innerHTML = htmlPolicy.createHTML(html);
+            template.innerHTML = policy.createHTML(html);
             const fec = template.content.firstElementChild;
             if (fec !== null && fec.tagName === templateTag) {
                 template = fec;
@@ -210,18 +216,18 @@ export const Compiler = {
         }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
-        const context = new CompilationContext(fragment, directives);
+        const context = new CompilationContext(fragment, factories, policy);
         compileAttributes(context, "", template, /* host */ "h", 0, true);
         if (
         // If the first node in a fragment is a marker, that means it's an unstable first node,
         // because something like a when, repeat, etc. could add nodes before the marker.
         // To mitigate this, we insert a stable first node. However, if we insert a node,
         // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-        isMarker(fragment.firstChild, directives) ||
+        isMarker(fragment.firstChild, factories) ||
             // Or if there is only one node and a directive, it means the template's content
             // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
             // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-            (fragment.childNodes.length === 1 && Object.keys(directives).length > 0)) {
+            (fragment.childNodes.length === 1 && Object.keys(factories).length > 0)) {
             fragment.insertBefore(document.createComment(""), fragment.firstChild);
         }
         compileChildren(context, fragment, /* root */ "r");
@@ -240,30 +246,40 @@ export const Compiler = {
      * Aggregates an array of strings and directives into a single directive.
      * @param parts - A heterogeneous array of static strings interspersed with
      * directives.
+     * @param policy - The security policy to use with the aggregated bindings.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts) {
+    aggregate(parts, policy = DOM.policy) {
         if (parts.length === 1) {
             return parts[0];
         }
         let sourceAspect;
+        let binding;
+        let isVolatile = false;
+        let bindingPolicy = void 0;
         const partCount = parts.length;
         const finalParts = parts.map((x) => {
             if (isString(x)) {
                 return () => x;
             }
             sourceAspect = x.sourceAspect || sourceAspect;
-            return x.binding;
+            binding = x.dataBinding || binding;
+            isVolatile = isVolatile || x.dataBinding.isVolatile;
+            bindingPolicy = bindingPolicy || x.dataBinding.policy;
+            return x.dataBinding.evaluate;
         });
-        const binding = (scope, context) => {
+        const expression = (scope, context) => {
             let output = "";
             for (let i = 0; i < partCount; ++i) {
                 output += finalParts[i](scope, context);
             }
             return output;
         };
-        const directive = bind(binding);
-        Aspect.assign(directive, sourceAspect);
+        binding.evaluate = expression;
+        binding.isVolatile = isVolatile;
+        binding.policy = bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy;
+        const directive = new HTMLBindingDirective(binding);
+        HTMLDirective.assignAspect(directive, sourceAspect);
         return directive;
     },
 };

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

@@ -1,3 +1,5 @@
+import { DOMAspect } from "../dom.js";
+import { noop } from "../interfaces.js";
 import { createTypeRegistry } from "../platform.js";
 import { Markup } from "./markup.js";
 const registry = createTypeRegistry();
@@ -27,97 +29,71 @@ export const HTMLDirective = Object.freeze({
         registry.register(options);
         return type;
     },
-});
-/**
- * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directive's application.
- * @public
- */
-export function htmlDirective(options) {
-    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-    return function (type) {
-        HTMLDirective.define(type, options);
-    };
-}
-/**
- * The type of HTML aspect to target.
- * @public
- */
-export const Aspect = Object.freeze({
-    /**
-     * Not aspected.
-     */
-    none: 0,
-    /**
-     * An attribute.
-     */
-    attribute: 1,
-    /**
-     * A boolean attribute.
-     */
-    booleanAttribute: 2,
-    /**
-     * A property.
-     */
-    property: 3,
-    /**
-     * Content
-     */
-    content: 4,
-    /**
-     * A token list.
-     */
-    tokenList: 5,
-    /**
-     * An event.
-     */
-    event: 6,
     /**
      *
      * @param directive - The directive to assign the aspect to.
      * @param value - The value to base the aspect determination on.
+     * @remarks
+     * If a falsy value is provided, then the content aspect will be assigned.
      */
-    assign(directive, value) {
-        directive.sourceAspect = value;
+    assignAspect(directive, value) {
         if (!value) {
+            directive.aspectType = DOMAspect.content;
             return;
         }
+        directive.sourceAspect = value;
         switch (value[0]) {
             case ":":
                 directive.targetAspect = value.substring(1);
-                switch (directive.targetAspect) {
-                    case "innerHTML":
-                        directive.aspectType = Aspect.property;
-                        break;
-                    case "classList":
-                        directive.aspectType = Aspect.tokenList;
-                        break;
-                    default:
-                        directive.aspectType = Aspect.property;
-                        break;
-                }
+                directive.aspectType =
+                    directive.targetAspect === "classList"
+                        ? DOMAspect.tokenList
+                        : DOMAspect.property;
                 break;
             case "?":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.booleanAttribute;
+                directive.aspectType = DOMAspect.booleanAttribute;
                 break;
             case "@":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.event;
+                directive.aspectType = DOMAspect.event;
                 break;
             default:
-                if (value === "class") {
-                    directive.targetAspect = "className";
-                    directive.aspectType = Aspect.property;
-                }
-                else {
-                    directive.targetAspect = value;
-                    directive.aspectType = Aspect.attribute;
-                }
+                directive.targetAspect = value;
+                directive.aspectType = DOMAspect.attribute;
                 break;
         }
     },
 });
+/**
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
+ * @public
+ */
+export function htmlDirective(options) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        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
@@ -129,13 +105,11 @@ export class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -146,4 +120,11 @@ export class StatelessAttachedAttributeDirective {
     createHTML(add) {
         return Markup.attribute(add(this));
     }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return this;
+    }
 }

package/dist/esm/templating/node-observation.js

@@ -1,5 +1,5 @@
 import { emptyArray } from "../platform.js";
-import { StatelessAttachedAttributeDirective, } from "./html-directive.js";
+import { StatelessAttachedAttributeDirective } from "./html-directive.js";
 const selectElements = (value) => value.nodeType === 1;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -16,9 +16,15 @@ export const elements = (selector) => selector
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export class NodeObservationDirective extends StatelessAttachedAttributeDirective {
-    constructor() {
-        super(...arguments);
-        this.sourceProperty = `${this.id}-s`;
+    /**
+     * The unique id of the factory.
+     */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+        this._controllerProperty = `${value}-c`;
     }
     /**
      * Bind this behavior to the source.
@@ -26,11 +32,12 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @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 target = targets[this.nodeId];
-        target[this.sourceProperty] = source;
-        this.updateTarget(source, this.computeNodes(target));
+    bind(controller) {
+        const target = controller.targets[this.targetNodeId];
+        target[this._controllerProperty] = controller;
+        this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
+        controller.onUnbind(this);
     }
     /**
      * Unbinds this behavior from the source.
@@ -38,11 +45,11 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @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 target = targets[this.nodeId];
-        this.updateTarget(source, emptyArray);
+    unbind(controller) {
+        const target = controller.targets[this.targetNodeId];
+        this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
-        target[this.sourceProperty] = null;
+        target[this._controllerProperty] = null;
     }
     /**
      * Gets the data source for the target.
@@ -50,7 +57,7 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @returns The source.
      */
     getSource(target) {
-        return target[this.sourceProperty];
+        return target[this._controllerProperty].source;
     }
     /**
      * Updates the source property with the computed nodes.

package/dist/esm/templating/ref.js

@@ -5,20 +5,12 @@ import { HTMLDirective, StatelessAttachedAttributeDirective, } from "./html-dire
  */
 export class RefDirective extends StatelessAttachedAttributeDirective {
     /**
-     * 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 this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context, targets) {
-        source[this.options] = targets[this.nodeId];
+    bind(controller) {
+        controller.source[this.options] = controller.targets[this.targetNodeId];
     }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
 }
 HTMLDirective.define(RefDirective);
 /**