@microsoft/fast-element 2.0.0-beta.8 → 2.0.0

package/dist/esm/templating/template.js

@@ -1,8 +1,56 @@
 import { isFunction, isString } from "../interfaces.js";
-import { bind, HTMLBindingDirective, oneTime } from "./binding.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 { Aspect, 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 = 
+/* eslint-disable-next-line no-control-regex, max-len */
+/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+const noFactories = Object.create(null);
+/**
+ * Inlines a template into another template.
+ * @public
+ */
+export class InlineTemplateDirective {
+    /**
+     * Creates an instance of InlineTemplateDirective.
+     * @param template - The template to inline.
+     */
+    constructor(html, factories = noFactories) {
+        this.html = html;
+        this.factories = factories;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        const factories = this.factories;
+        for (const key in factories) {
+            add(factories[key]);
+        }
+        return this.html;
+    }
+}
+/**
+ * An empty template partial.
+ */
+InlineTemplateDirective.empty = new InlineTemplateDirective("");
+HTMLDirective.define(InlineTemplateDirective);
+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,21 +60,53 @@ 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;
         this.html = html;
         this.factories = factories;
     }
+    /**
+     * @internal
+     */
+    compile() {
+        if (this.result === null) {
+            this.result = Compiler.compile(this.html, this.factories, this.policy);
+        }
+        return this.result;
+    }
     /**
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
     create(hostBindingTarget) {
-        if (this.result === null) {
-            this.result = Compiler.compile(this.html, this.factories);
+        return this.compile().createView(hostBindingTarget);
+    }
+    /**
+     * Returns a directive that can inline the template.
+     */
+    inline() {
+        return new InlineTemplateDirective(isString(this.html) ? this.html : this.html.innerHTML, this.factories);
+    }
+    /**
+     * 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 */);
         }
-        return this.result.createView(hostBindingTarget);
+        this.policy = policy;
+        return this;
     }
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -41,18 +121,49 @@ 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(oneWay(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);
 }
+makeSerializationNoop(ViewTemplate);
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
@@ -62,48 +173,12 @@ function createAspectedHTML(value, prevString, add) {
  * other template instances, and Directive instances.
  * @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);
-            }
-        }
+export const html = ((strings, ...values) => {
+    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 */);
+});
+html.partial = (html) => {
+    return new InlineTemplateDirective(html);
+};

package/dist/esm/templating/view.js

@@ -1,37 +1,24 @@
-import { ExecutionContext, Observable } from "../observation/observable.js";
+var _a;
+import { Hydratable } from "../components/hydration.js";
+import { buildViewBindingTargets, createRangeForNodes, HydrationTargetElementError, targetFactory, } from "../hydration/target-builder.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;
     let next;
     while (current !== lastNode) {
         next = current.nextSibling;
+        if (!next) {
+            throw new Error(`Unmatched first/last child inside "${lastNode.getRootNode().host.nodeName}".`);
+        }
         parent.removeChild(current);
         current = next;
     }
     parent.removeChild(lastNode);
 }
-/**
- * The standard View implementation, which also implements ElementView and SyntheticView.
- * @public
- */
-export class HTMLView {
-    /**
-     * Constructs an instance of HTMLView.
-     * @param fragment - The html fragment that contains the nodes for this view.
-     * @param behaviors - The behaviors to be applied to this view.
-     */
-    constructor(fragment, factories, targets) {
-        this.fragment = fragment;
-        this.factories = factories;
-        this.targets = targets;
-        this.behaviors = null;
-        this.unbindables = [];
-        /**
-         * The data that the view is bound to.
-         */
-        this.source = null;
-        this.isBound = false;
-        this.selfContained = false;
+class DefaultExecutionContext {
+    constructor() {
         /**
          * The index of the current item within a repeat context.
          */
@@ -40,14 +27,6 @@ export class HTMLView {
          * The length of the current collection within a repeat context.
          */
         this.length = 0;
-        this.firstChild = fragment.firstChild;
-        this.lastChild = fragment.lastChild;
-    }
-    /**
-     * The execution context the view is running within.
-     */
-    get context() {
-        return this;
     }
     /**
      * The current event within an event handler.
@@ -102,6 +81,43 @@ export class HTMLView {
     eventTarget() {
         return this.event.target;
     }
+}
+/**
+ * The standard View implementation, which also implements ElementView and SyntheticView.
+ * @public
+ */
+export class HTMLView extends DefaultExecutionContext {
+    /**
+     * Constructs an instance of HTMLView.
+     * @param fragment - The html fragment that contains the nodes for this view.
+     * @param behaviors - The behaviors to be applied to this view.
+     */
+    constructor(fragment, factories, targets) {
+        super();
+        this.fragment = fragment;
+        this.factories = factories;
+        this.targets = targets;
+        this.behaviors = null;
+        this.unbindables = [];
+        /**
+         * The data that the view is bound to.
+         */
+        this.source = null;
+        /**
+         * Indicates whether the controller is bound.
+         */
+        this.isBound = false;
+        /**
+         * Indicates how the source's lifetime relates to the controller's lifetime.
+         */
+        this.sourceLifetime = SourceLifetime.unknown;
+        /**
+         * The execution context the view is running within.
+         */
+        this.context = this;
+        this.firstChild = fragment.firstChild;
+        this.lastChild = fragment.lastChild;
+    }
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -164,13 +180,14 @@ export class HTMLView {
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    bind(source) {
+    bind(source, context = this) {
         if (this.source === source) {
             return;
         }
         let behaviors = this.behaviors;
         if (behaviors === null) {
             this.source = source;
+            this.context = context;
             this.behaviors = behaviors = new Array(this.factories.length);
             const factories = this.factories;
             for (let i = 0, ii = factories.length; i < ii; ++i) {
@@ -185,6 +202,7 @@ export class HTMLView {
             }
             this.isBound = false;
             this.source = source;
+            this.context = context;
             for (let i = 0, ii = behaviors.length; i < ii; ++i) {
                 behaviors[i].bind(this);
             }
@@ -200,6 +218,7 @@ export class HTMLView {
         }
         this.evaluateUnbindables();
         this.source = null;
+        this.context = this;
         this.isBound = false;
     }
     evaluateUnbindables() {
@@ -223,5 +242,213 @@ export class HTMLView {
         }
     }
 }
+makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");
+export const HydrationStage = {
+    unhydrated: "unhydrated",
+    hydrating: "hydrating",
+    hydrated: "hydrated",
+};
+/** @public */
+export class HydrationBindingError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, 
+    /**
+     * The factory that was unable to be bound
+     */
+    factory, 
+    /**
+     * A DocumentFragment containing a clone of the
+     * view's Nodes.
+     */
+    fragment, 
+    /**
+     * String representation of the HTML in the template that
+     * threw the binding error.
+     */
+    templateString) {
+        super(message);
+        this.factory = factory;
+        this.fragment = fragment;
+        this.templateString = templateString;
+    }
+}
+export class HydrationView extends DefaultExecutionContext {
+    constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
+        super();
+        this.firstChild = firstChild;
+        this.lastChild = lastChild;
+        this.sourceTemplate = sourceTemplate;
+        this.hostBindingTarget = hostBindingTarget;
+        this[_a] = Hydratable;
+        this.context = this;
+        this.source = null;
+        this.isBound = false;
+        this.sourceLifetime = SourceLifetime.unknown;
+        this.unbindables = [];
+        this.fragment = null;
+        this.behaviors = null;
+        this._hydrationStage = HydrationStage.unhydrated;
+        this._bindingViewBoundaries = {};
+        this._targets = {};
+        this.factories = sourceTemplate.compile().factories;
+    }
+    get hydrationStage() {
+        return this._hydrationStage;
+    }
+    get targets() {
+        return this._targets;
+    }
+    get bindingViewBoundaries() {
+        return this._bindingViewBoundaries;
+    }
+    /**
+     * no-op. Hydrated views are don't need to be moved from a documentFragment
+     * to the target node.
+     */
+    insertBefore(node) {
+        // No-op in cases where this is called before the view is removed,
+        // because the nodes will already be in the document and just need hydrating.
+        if (this.fragment === null) {
+            return;
+        }
+        if (this.fragment.hasChildNodes()) {
+            node.parentNode.insertBefore(this.fragment, node);
+        }
+        else {
+            const end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
+            let current = this.firstChild;
+            let next;
+            while (current !== end) {
+                next = current.nextSibling;
+                parentNode.insertBefore(current, node);
+                current = next;
+            }
+            parentNode.insertBefore(end, node);
+        }
+    }
+    /**
+     * Appends the view to a node. In cases where this is called before the
+     * view has been removed, the method will no-op.
+     * @param node - the node to append the view to.
+     */
+    appendTo(node) {
+        if (this.fragment !== null) {
+            node.appendChild(this.fragment);
+        }
+    }
+    remove() {
+        const fragment = this.fragment || (this.fragment = document.createDocumentFragment());
+        const end = this.lastChild;
+        let current = this.firstChild;
+        let next;
+        while (current !== end) {
+            next = current.nextSibling;
+            if (!next) {
+                throw new Error(`Unmatched first/last child inside "${end.getRootNode().host.nodeName}".`);
+            }
+            fragment.appendChild(current);
+            current = next;
+        }
+        fragment.appendChild(end);
+    }
+    bind(source, context = this) {
+        var _b, _c;
+        if (this.hydrationStage !== HydrationStage.hydrated) {
+            this._hydrationStage = HydrationStage.hydrating;
+        }
+        if (this.source === source) {
+            return;
+        }
+        let behaviors = this.behaviors;
+        if (behaviors === null) {
+            this.source = source;
+            this.context = context;
+            try {
+                const { targets, boundaries } = buildViewBindingTargets(this.firstChild, this.lastChild, this.factories);
+                this._targets = targets;
+                this._bindingViewBoundaries = boundaries;
+            }
+            catch (error) {
+                if (error instanceof HydrationTargetElementError) {
+                    let templateString = this.sourceTemplate.html;
+                    if (typeof templateString !== "string") {
+                        templateString = templateString.innerHTML;
+                    }
+                    error.templateString = templateString;
+                }
+                throw error;
+            }
+            this.behaviors = behaviors = new Array(this.factories.length);
+            const factories = this.factories;
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const factory = factories[i];
+                if (factory.targetNodeId === "h" && this.hostBindingTarget) {
+                    targetFactory(factory, this.hostBindingTarget, this._targets);
+                }
+                // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
+                if (factory.targetNodeId in this.targets) {
+                    const behavior = factory.createBehavior();
+                    behavior.bind(this);
+                    behaviors[i] = behavior;
+                }
+                else {
+                    let templateString = this.sourceTemplate.html;
+                    if (typeof templateString !== "string") {
+                        templateString = templateString.innerHTML;
+                    }
+                    throw new HydrationBindingError(`HydrationView was unable to successfully target bindings inside "${(_c = ((_b = this.firstChild) === null || _b === void 0 ? void 0 : _b.getRootNode()).host) === null || _c === void 0 ? void 0 : _c.nodeName}".`, factory, createRangeForNodes(this.firstChild, this.lastChild).cloneContents(), templateString);
+                }
+            }
+        }
+        else {
+            if (this.source !== null) {
+                this.evaluateUnbindables();
+            }
+            this.isBound = false;
+            this.source = source;
+            this.context = context;
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(this);
+            }
+        }
+        this.isBound = true;
+        this._hydrationStage = HydrationStage.hydrated;
+    }
+    unbind() {
+        if (!this.isBound || this.source === null) {
+            return;
+        }
+        this.evaluateUnbindables();
+        this.source = null;
+        this.context = this;
+        this.isBound = false;
+    }
+    /**
+     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+     * Once a view has been disposed, it cannot be inserted or bound again.
+     */
+    dispose() {
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
+    }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
+    }
+}
+_a = Hydratable;
+makeSerializationNoop(HydrationView);

package/dist/esm/templating/when-basic.bench.js

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { attr, FASTElement, html, when } from "../index.js";
+class TestWhen extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.try = false;
+    }
+}
+__decorate([
+    attr({
+        mode: "boolean",
+    }),
+    __metadata("design:type", Boolean)
+], TestWhen.prototype, "try", void 0);
+TestWhen.define({
+    name: "test-when",
+    template: html `
+        ${when(x => x.try, html `
+                <span>Yes</span>
+            `)}
+    `,
+});
+const itemRenderer = () => {
+    const testWhen = document.createElement("test-when");
+    return testWhen;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";

package/dist/esm/templating/when-conditional.bench.js

@@ -0,0 +1,39 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { attr, FASTElement, html, when } from "../index.js";
+class TestWhen extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.try = false;
+    }
+}
+__decorate([
+    attr({
+        mode: "boolean",
+    }),
+    __metadata("design:type", Boolean)
+], TestWhen.prototype, "try", void 0);
+TestWhen.define({
+    name: "test-when",
+    template: html `
+        ${when(x => x.try, html `
+                <span>Yes</span>
+            `)}
+        ${when(x => !x.try, html `
+                <span>No</span>
+            `)}
+    `,
+});
+const itemRenderer = () => {
+    const testWhen = document.createElement("test-when");
+    return testWhen;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";