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

package/dist/esm/templating/render.js

@@ -3,7 +3,7 @@ import { isFunction, isString } from "../interfaces.js";
 import { bind, normalizeBinding, oneTime, } from "./binding.js";
 import { Binding, HTMLDirective, } from "./html-directive.js";
 import { Markup } from "./markup.js";
-import { html, } from "./template.js";
+import { html, ViewTemplate, } from "./template.js";
 /**
  * A Behavior that enables advanced rendering.
  * @public
@@ -27,7 +27,7 @@ export class RenderBehavior {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        this.location = controller.targets[this.directive.nodeId];
+        this.location = controller.targets[this.directive.targetNodeId];
         this.controller = controller;
         this.data = this.dataBindingObserver.bind(controller);
         this.template = this.templateBindingObserver.bind(controller);
@@ -141,7 +141,7 @@ function instructionToTemplate(def) {
     }
     return def.template;
 }
-function createElementTemplate(tagName, attributes, content) {
+function createElementTemplate(tagName, attributes, content, policy) {
     const markup = [];
     const values = [];
     if (attributes) {
@@ -170,7 +170,7 @@ function createElementTemplate(tagName, attributes, content) {
         const lastIndex = markup.length - 1;
         markup[lastIndex] = `${markup[lastIndex]}${content !== null && content !== void 0 ? content : ""}</${tagName}>`;
     }
-    return html(markup, ...values);
+    return ViewTemplate.create(markup, values, policy);
 }
 function create(options) {
     var _a, _b;
@@ -187,7 +187,7 @@ 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);
+        template = createElementTemplate(tagName, (_b = options.attributes) !== null && _b !== void 0 ? _b : defaultAttributes, options.content, options.policy);
     }
     else {
         template = options.template;
@@ -239,6 +239,11 @@ export const RenderInstruction = Object.freeze({
     /**
      * Creates a RenderInstruction for a set of options.
      * @param options - The options to use when creating the RenderInstruction.
+     * @remarks
+     * This API should be used with caution. When providing attributes or content,
+     * if not done properly, you can open up the application to XSS attacks. When using this API,
+     * provide a strong DOMPolicy that can properly sanitize and also be sure to manually sanitize
+     * content and attribute values particularly if they can come from user input.
      */
     create,
     /**
@@ -246,7 +251,13 @@ export const RenderInstruction = Object.freeze({
      * @param tagName - The tag name to use when creating the template.
      * @param attributes - The attributes to apply to the element.
      * @param content - The content to insert into the element.
+     * @param policy - The DOMPolicy to create the template with.
      * @returns A template based on the provided specifications.
+     * @remarks
+     * This API should be used with caution. When providing attributes or content,
+     * if not done properly, you can open up the application to XSS attacks. When using this API,
+     * provide a strong DOMPolicy that can properly sanitize and also be sure to manually sanitize
+     * content and attribute values particularly if they can come from user input.
      */
     createElementTemplate,
     /**
@@ -356,7 +367,7 @@ export function render(value, template) {
                 result = (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
             }
             return result;
-        }, true);
+        }, void 0, true);
     }
     else if (isString(template)) {
         templateBindingDependsOnData = true;

package/dist/esm/templating/repeat.js

@@ -1,7 +1,7 @@
 import { Observable } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { ArrayObserver } from "../observation/arrays.js";
-import { Markup, nextId } from "./markup.js";
+import { Markup } from "./markup.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
 import { normalizeBinding } from "./binding.js";
@@ -53,7 +53,7 @@ export class RepeatBehavior {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        this.location = controller.targets[this.directive.nodeId];
+        this.location = controller.targets[this.directive.targetNodeId];
         this.controller = controller;
         this.items = this.itemsBindingObserver.bind(controller);
         this.template = this.templateBindingObserver.bind(controller);
@@ -233,10 +233,6 @@ export class RepeatDirective {
         this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
         ArrayObserver.enable();
     }
     /**

package/dist/esm/templating/template.js

@@ -1,8 +1,22 @@
-import { isFunction, isString, noop } from "../interfaces.js";
+import { isFunction, noop } from "../interfaces.js";
+import { FAST } from "../platform.js";
 import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
-import { Aspect, Binding, HTMLDirective, } from "./html-directive.js";
+import { Binding, HTMLDirective, } from "./html-directive.js";
 import { nextId } from "./markup.js";
+// Much thanks to LitHTML for working this out!
+const lastAttributeNameRegex = 
+/* eslint-disable-next-line no-control-regex */
+/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+function createHTML(value, prevString, add, definition = HTMLDirective.getForInstance(value)) {
+    if (definition.aspected) {
+        const match = lastAttributeNameRegex.exec(prevString);
+        if (match !== null) {
+            HTMLDirective.assignAspect(value, match[2]);
+        }
+    }
+    return value.createHTML(add);
+}
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
@@ -12,8 +26,10 @@ export class ViewTemplate {
      * Creates an instance of ViewTemplate.
      * @param html - The html representing what this template will instantiate, including placeholders for directives.
      * @param factories - The directives that will be connected to placeholders in the html.
+     * @param policy - The security policy to use when compiling this template.
      */
-    constructor(html, factories) {
+    constructor(html, factories = {}, policy) {
+        this.policy = policy;
         this.result = null;
         /**
          * Opts out of JSON stringification.
@@ -29,10 +45,28 @@ export class ViewTemplate {
      */
     create(hostBindingTarget) {
         if (this.result === null) {
-            this.result = Compiler.compile(this.html, this.factories);
+            this.result = Compiler.compile(this.html, this.factories, this.policy);
         }
         return this.result.createView(hostBindingTarget);
     }
+    /**
+     * Sets the DOMPolicy for this template.
+     * @param policy - The policy to associated with this template.
+     * @returns The modified template instance.
+     * @remarks
+     * The DOMPolicy can only be set once for a template and cannot be
+     * set after the template is compiled.
+     */
+    withPolicy(policy) {
+        if (this.result) {
+            throw FAST.error(1208 /* Message.cannotSetTemplatePolicyAfterCompilation */);
+        }
+        if (this.policy) {
+            throw FAST.error(1207 /* Message.onlySetTemplatePolicyOnce */);
+        }
+        this.policy = policy;
+        return this;
+    }
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
      * @param source - The data source to bind the template to.
@@ -46,17 +80,47 @@ export class ViewTemplate {
         view.appendTo(host);
         return view;
     }
-}
-// Much thanks to LitHTML for working this out!
-const lastAttributeNameRegex = 
-/* eslint-disable-next-line no-control-regex */
-/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
-function createAspectedHTML(value, prevString, add) {
-    const match = lastAttributeNameRegex.exec(prevString);
-    if (match !== null) {
-        Aspect.assign(value, match[2]);
+    /**
+     * Creates a template based on a set of static strings and dynamic values.
+     * @param strings - The static strings to create the template with.
+     * @param values - The dynamic values to create the template with.
+     * @param policy - The DOMPolicy to associated with the template.
+     * @returns A ViewTemplate.
+     * @remarks
+     * This API should not be used directly under normal circumstances because constructing
+     * a template in this way, if not done properly, can open up the application to XSS
+     * attacks. When using this API, provide a strong DOMPolicy that can properly sanitize
+     * and also be sure to manually sanitize all static strings particularly if they can
+     * come from user input.
+     */
+    static create(strings, values, policy) {
+        let html = "";
+        const factories = Object.create(null);
+        const add = (factory) => {
+            var _a;
+            const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
+            factories[id] = factory;
+            return id;
+        };
+        for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
+            const currentString = strings[i];
+            let currentValue = values[i];
+            let definition;
+            html += currentString;
+            if (isFunction(currentValue)) {
+                currentValue = new HTMLBindingDirective(bind(currentValue));
+            }
+            else if (currentValue instanceof Binding) {
+                currentValue = new HTMLBindingDirective(currentValue);
+            }
+            else if (!(definition = HTMLDirective.getForInstance(currentValue))) {
+                const staticValue = currentValue;
+                currentValue = new HTMLBindingDirective(oneTime(() => staticValue));
+            }
+            html += createHTML(currentValue, currentString, add, definition);
+        }
+        return new ViewTemplate(html + strings[strings.length - 1], factories, policy);
     }
-    return value.createHTML(add);
 }
 /**
  * Transforms a template literal string into a ViewTemplate.
@@ -68,47 +132,8 @@ function createAspectedHTML(value, prevString, add) {
  * @public
  */
 export function html(strings, ...values) {
-    let html = "";
-    const factories = Object.create(null);
-    const add = (factory) => {
-        var _a;
-        const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
-        factories[id] = factory;
-        return id;
-    };
-    for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
-        const currentString = strings[i];
-        const currentValue = values[i];
-        let definition;
-        html += currentString;
-        if (isFunction(currentValue)) {
-            html += createAspectedHTML(new HTMLBindingDirective(bind(currentValue)), currentString, add);
-        }
-        else if (isString(currentValue)) {
-            const match = lastAttributeNameRegex.exec(currentString);
-            if (match !== null) {
-                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
-                Aspect.assign(directive, match[2]);
-                html += directive.createHTML(add);
-            }
-            else {
-                html += currentValue;
-            }
-        }
-        else if (currentValue instanceof Binding) {
-            html += createAspectedHTML(new HTMLBindingDirective(currentValue), currentString, add);
-        }
-        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(new HTMLBindingDirective(oneTime(() => currentValue)), currentString, add);
-        }
-        else {
-            if (definition.aspected) {
-                html += createAspectedHTML(currentValue, currentString, add);
-            }
-            else {
-                html += currentValue.createHTML(add);
-            }
-        }
+    if (Array.isArray(strings) && Array.isArray(strings.raw)) {
+        return ViewTemplate.create(strings, values);
     }
-    return new ViewTemplate(html + strings[strings.length - 1], factories);
+    throw FAST.error(1206 /* Message.directCallToHTMLTagNotAllowed */);
 }

package/dist/esm/testing/fixture.js

@@ -46,7 +46,7 @@ export function fixture(templateNameOrType, options = {}) {
         }
         if (typeof templateNameOrType === "string") {
             const html = `<${templateNameOrType}></${templateNameOrType}>`;
-            templateNameOrType = new ViewTemplate(html, {});
+            templateNameOrType = new ViewTemplate(html);
         }
         const view = templateNameOrType.create();
         const element = findElement(view);

package/dist/esm/utilities.js

@@ -1,3 +1,6 @@
+import { DOM } from "./dom.js";
+import { ExecutionContext } from "./observation/observable.js";
+import { nextId } from "./templating/markup.js";
 /**
  * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
  * When the parent of a node is a shadow-root, it will return the host
@@ -69,3 +72,68 @@ export class UnobservableMutationObserver extends MutationObserver {
         }
     }
 }
+/**
+ * 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) {
+                var _a, _b, _c, _d;
+                const compiled = factory;
+                compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
+                compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
+                compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
+                compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
+                this.addTarget(compiled.targetNodeId, target);
+                this.addBehavior(compiled.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));
+                    }
+                }
+            },
+        };
+    },
+});