@microsoft/fast-element 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/esm/templating/binding.js

@@ -1,24 +1,23 @@
-import { isFunction } from "../interfaces.js";
+import { isFunction, noop } from "../interfaces.js";
 import { ExecutionContext, Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
-import { DOM } from "./dom.js";
-import { Aspect, Binding, HTMLDirective, } from "./html-directive.js";
-import { Markup, nextId } from "./markup.js";
-const createInnerHTMLBinding = globalThis.TrustedHTML
-    ? (binding) => (s, c) => {
-        const value = binding(s, c);
-        if (value instanceof TrustedHTML) {
-            return value;
-        }
-        throw FAST.error(1202 /* Message.bindingInnerHTMLRequiresTrustedTypes */);
-    }
-    : (binding) => binding;
+import { DOM, DOMAspect } from "../dom.js";
+import { Binding, 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;
     }
@@ -117,8 +116,14 @@ function updateTokenList(target, aspect, value) {
         }
     }
 }
-const setProperty = (t, a, v) => (t[a] = v);
-const eventTarget = () => void 0;
+const sinkLookup = {
+    [DOMAspect.attribute]: DOM.setAttribute,
+    [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
+    [DOMAspect.property]: (t, a, v) => (t[a] = v),
+    [DOMAspect.content]: updateContent,
+    [DOMAspect.tokenList]: updateTokenList,
+    [DOMAspect.event]: () => void 0,
+};
 /**
  * A directive that applies bindings.
  * @public
@@ -131,15 +136,10 @@ export class HTMLBindingDirective {
     constructor(dataBinding) {
         this.dataBinding = dataBinding;
         this.updateTarget = null;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
         /**
          * The type of aspect to target.
          */
-        this.aspectType = Aspect.content;
-        this.data = `${this.id}-d`;
+        this.aspectType = DOMAspect.content;
     }
     /**
      * Creates HTML to be used within a template.
@@ -152,45 +152,28 @@ export class HTMLBindingDirective {
      * Creates a behavior.
      */
     createBehavior() {
+        var _a;
         if (this.updateTarget === null) {
-            if (this.targetAspect === "innerHTML") {
-                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
-            }
-            switch (this.aspectType) {
-                case 1:
-                    this.updateTarget = DOM.setAttribute;
-                    break;
-                case 2:
-                    this.updateTarget = DOM.setBooleanAttribute;
-                    break;
-                case 3:
-                    this.updateTarget = setProperty;
-                    break;
-                case 4:
-                    this.updateTarget = updateContent;
-                    break;
-                case 5:
-                    this.updateTarget = updateTokenList;
-                    break;
-                case 6:
-                    this.updateTarget = eventTarget;
-                    break;
-                default:
-                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            const sink = sinkLookup[this.aspectType];
+            const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
+            if (!sink) {
+                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
             }
+            this.data = `${this.id}-d`;
+            this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
         }
         return this;
     }
     /** @internal */
     bind(controller) {
         var _a;
-        const target = controller.targets[this.nodeId];
-        switch (this.updateTarget) {
-            case eventTarget:
+        const target = controller.targets[this.targetNodeId];
+        switch (this.aspectType) {
+            case DOMAspect.event:
                 target[this.data] = controller;
                 target.addEventListener(this.targetAspect, this, this.dataBinding.options);
                 break;
-            case updateContent:
+            case DOMAspect.content:
                 controller.onUnbind(this);
             // intentional fall through
             default:
@@ -203,7 +186,7 @@ export class HTMLBindingDirective {
     }
     /** @internal */
     unbind(controller) {
-        const target = controller.targets[this.nodeId];
+        const target = controller.targets[this.targetNodeId];
         const view = target.$fastView;
         if (view !== void 0 && view.isComposed) {
             view.unbind();
@@ -233,21 +216,23 @@ 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, isVolatile = Observable.isVolatileBinding(expression)) {
-    return new OnChangeBinding(expression, isVolatile);
+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) {
-    return new OneTimeBinding(expression);
+export function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
 }
 /**
  * Creates an event listener binding.
@@ -257,7 +242,7 @@ export function oneTime(expression) {
  * @public
  */
 export function listener(expression, options) {
-    const config = new OnChangeBinding(expression, false);
+    const config = new OnChangeBinding(expression);
     config.options = options;
     return config;
 }

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 { isFunction, isString } from "../interfaces.js";
 import { FAST } from "../platform.js";
-import { Parser } from "./markup.js";
+import { DOM } from "../dom.js";
+import { nextId, Parser } from "./markup.js";
 import { HTMLBindingDirective, oneTime } from "./binding.js";
-import { Aspect } from "./html-directive.js";
+import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -28,20 +29,25 @@ const warningHost = new Proxy(document.createElement("div"), {
     },
 });
 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() {
@@ -94,19 +100,19 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = new HTMLBindingDirective(oneTime(() => attrValue));
-                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);
         }
     }
 }
@@ -131,8 +137,8 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
-            Aspect.assign(currentPart);
-            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+            HTMLDirective.assignAspect(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex, null);
         }
         lastNode = currentNode;
     }
@@ -164,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;
     }
@@ -178,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;
@@ -227,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");
@@ -257,15 +246,17 @@ 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)) {
@@ -274,6 +265,7 @@ export const Compiler = {
             sourceAspect = x.sourceAspect || sourceAspect;
             binding = x.dataBinding || binding;
             isVolatile = isVolatile || x.dataBinding.isVolatile;
+            bindingPolicy = bindingPolicy || x.dataBinding.policy;
             return x.dataBinding.evaluate;
         });
         const expression = (scope, context) => {
@@ -285,8 +277,9 @@ export const Compiler = {
         };
         binding.evaluate = expression;
         binding.isVolatile = isVolatile;
+        binding.policy = bindingPolicy !== null && bindingPolicy !== void 0 ? bindingPolicy : policy;
         const directive = new HTMLBindingDirective(binding);
-        Aspect.assign(directive, sourceAspect);
+        HTMLDirective.assignAspect(directive, sourceAspect);
         return directive;
     },
 };

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

@@ -0,0 +1,23 @@
+import { HTMLDirective } from "./html-directive.js";
+/**
+ * A directive capable of injecting static HTML platform runtime protection.
+ * @public
+ */
+export class DangerousHTMLDirective {
+    constructor(html) {
+        this.html = html;
+    }
+    createHTML() {
+        return this.html;
+    }
+}
+HTMLDirective.define(DangerousHTMLDirective);
+/**
+ * Injects static HTML without platform protection.
+ * @param html - The html to injection.
+ * @returns A DangerousHTMLDirective.
+ * @public
+ */
+export function dangerousHTML(html) {
+    return new DangerousHTMLDirective(html);
+}

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

@@ -1,67 +1,7 @@
-import { ExecutionContext, } from "../observation/observable.js";
+import { DOMAspect } from "../dom.js";
+import { noop } from "../interfaces.js";
 import { createTypeRegistry } from "../platform.js";
-import { Markup, nextId } from "./markup.js";
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-export const ViewBehaviorOrchestrator = Object.freeze({
-    /**
-     * Creates a ViewBehaviorOrchestrator.
-     * @param source - The source to to associate behaviors with.
-     * @returns A ViewBehaviorOrchestrator.
-     */
-    create(source) {
-        const behaviors = [];
-        const targets = {};
-        let unbindables = null;
-        let isConnected = false;
-        return {
-            source,
-            context: ExecutionContext.default,
-            targets,
-            get isBound() {
-                return isConnected;
-            },
-            addBehaviorFactory(factory, target) {
-                const nodeId = factory.nodeId || (factory.nodeId = nextId());
-                factory.id || (factory.id = nextId());
-                this.addTarget(nodeId, target);
-                this.addBehavior(factory.createBehavior());
-            },
-            addTarget(nodeId, target) {
-                targets[nodeId] = target;
-            },
-            addBehavior(behavior) {
-                behaviors.push(behavior);
-                if (isConnected) {
-                    behavior.bind(this);
-                }
-            },
-            onUnbind(unbindable) {
-                if (unbindables === null) {
-                    unbindables = [];
-                }
-                unbindables.push(unbindable);
-            },
-            connectedCallback(controller) {
-                if (!isConnected) {
-                    isConnected = true;
-                    behaviors.forEach(x => x.bind(this));
-                }
-            },
-            disconnectedCallback(controller) {
-                if (isConnected) {
-                    isConnected = false;
-                    if (unbindables !== null) {
-                        unbindables.forEach(x => x.unbind(this));
-                    }
-                }
-            },
-        };
-    },
-});
+import { Markup } from "./markup.js";
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -89,67 +29,6 @@ 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);
-    };
-}
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-export class Binding {
-    /**
-     * Creates a binding.
-     * @param evaluate - Evaluates the binding.
-     * @param isVolatile - Indicates whether the binding is volatile.
-     */
-    constructor(evaluate, isVolatile = false) {
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-    }
-}
-/**
- * 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.
@@ -157,9 +36,9 @@ export const Aspect = Object.freeze({
      * @remarks
      * If a falsy value is provided, then the content aspect will be assigned.
      */
-    assign(directive, value) {
+    assignAspect(directive, value) {
         if (!value) {
-            directive.aspectType = Aspect.content;
+            directive.aspectType = DOMAspect.content;
             return;
         }
         directive.sourceAspect = value;
@@ -168,24 +47,53 @@ export const Aspect = Object.freeze({
                 directive.targetAspect = value.substring(1);
                 directive.aspectType =
                     directive.targetAspect === "classList"
-                        ? Aspect.tokenList
-                        : Aspect.property;
+                        ? 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:
                 directive.targetAspect = value;
-                directive.aspectType = Aspect.attribute;
+                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
@@ -198,9 +106,10 @@ export class StatelessAttachedAttributeDirective {
     constructor(options) {
         this.options = options;
         /**
-         * The unique id of the factory.
+         * Opts out of JSON stringification.
+         * @internal
          */
-        this.id = nextId();
+        this.toJSON = noop;
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.

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

@@ -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.
@@ -27,8 +33,8 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @param targets - The targets that behaviors in a view can attach to.
      */
     bind(controller) {
-        const target = controller.targets[this.nodeId];
-        target[this.sourceProperty] = controller.source;
+        const target = controller.targets[this.targetNodeId];
+        target[this._controllerProperty] = controller;
         this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
         controller.onUnbind(this);
@@ -40,10 +46,10 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @param targets - The targets that behaviors in a view can attach to.
      */
     unbind(controller) {
-        const target = controller.targets[this.nodeId];
+        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.
@@ -51,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.