@microsoft/fast-element 2.0.0-beta.9 → 2.0.1

package/dist/esm/templating/render.js

@@ -1,9 +1,14 @@
 import { FASTElementDefinition } from "../components/fast-definitions.js";
+import { isHydratable } from "../components/hydration.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, } from "./template.js";
+import { html, ViewTemplate, } from "./template.js";
+import { HydrationStage } from "./view.js";
 /**
  * A Behavior that enables advanced rendering.
  * @public
@@ -19,20 +24,32 @@ 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.
      * @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);
         controller.onUnbind(this);
-        this.refreshView();
+        if (isHydratable(this.template) &&
+            isHydratable(controller) &&
+            controller.hydrationStage !== HydrationStage.hydrated &&
+            !this.view) {
+            const viewNodes = controller.bindingViewBoundaries[this.directive.targetNodeId];
+            if (viewNodes) {
+                this.view = this.template.hydrate(viewNodes.first, viewNodes.last);
+                this.bindView(this.view);
+            }
+        }
+        else {
+            this.refreshView();
+        }
     }
     /**
      * Unbinds this behavior.
@@ -56,6 +73,20 @@ export class RenderBehavior {
         }
         this.refreshView();
     }
+    bindView(view) {
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(this.data);
+            view.insertBefore(this.location);
+            view.$fastTemplate = this.template;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(this.data);
+        }
+    }
     refreshView() {
         let view = this.view;
         const template = this.template;
@@ -79,18 +110,7 @@ export class RenderBehavior {
                 this.view.context.parentContext = this.controller.context;
             }
         }
-        // It's possible that the value is the same as the previous template
-        // and that there's actually no need to compose it.
-        if (!view.isComposed) {
-            view.isComposed = true;
-            view.bind(this.data);
-            view.insertBefore(this.location);
-            view.$fastTemplate = template;
-        }
-        else if (view.needsBindOnly) {
-            view.needsBindOnly = false;
-            view.bind(this.data);
-        }
+        this.bindView(view);
     }
 }
 /**
@@ -129,7 +149,7 @@ function isElementRenderOptions(object) {
 }
 const typeToInstructionLookup = new Map();
 /* eslint @typescript-eslint/naming-convention: "off"*/
-const defaultAttributes = { ":model": x => x };
+const defaultAttributes = { ":model": (x) => x };
 const brand = Symbol("RenderInstruction");
 const defaultViewName = "default-view";
 const nullTemplate = html `
@@ -141,12 +161,13 @@ function instructionToTemplate(def) {
     }
     return def.template;
 }
-function createElementTemplate(tagName, attributes, content) {
+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 +178,17 @@ function createElementTemplate(tagName, attributes, content) {
             }
             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}>`);
@@ -170,10 +197,10 @@ 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;
+    var _a;
     const name = (_a = options.name) !== null && _a !== void 0 ? _a : defaultViewName;
     let template;
     if (isElementRenderOptions(options)) {
@@ -187,7 +214,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);
+        if (!options.attributes) {
+            options.attributes = defaultAttributes;
+        }
+        template = createElementTemplate(tagName, options);
     }
     else {
         template = options.template;
@@ -239,6 +269,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 +281,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,
     /**
@@ -307,6 +348,9 @@ export class NodeTemplate {
     create() {
         return this;
     }
+    hydrate(first, last) {
+        return this;
+    }
 }
 /**
  * Creates a RenderDirective for use in advanced rendering scenarios.
@@ -346,7 +390,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)) {
@@ -356,7 +400,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-basic-reverse.bench.js

@@ -0,0 +1,43 @@
+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, nullableNumberConverter, repeat } from "../index.js";
+class TestRepeat extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.count = 0;
+        this.items = new Array(this.count).fill("foo");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.items.reverse();
+    }
+}
+__decorate([
+    attr({
+        mode: "fromView",
+        converter: nullableNumberConverter,
+    }),
+    __metadata("design:type", Number)
+], TestRepeat.prototype, "count", void 0);
+TestRepeat.define({
+    name: "test-repeat",
+    template: html `
+        ${repeat(x => x.items, html `
+                <span>${x => x}</span>
+            `)}
+    `,
+});
+const itemRenderer = () => {
+    const testRepeat = document.createElement("test-repeat");
+    testRepeat.setAttribute("count", "100");
+    return testRepeat;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";

package/dist/esm/templating/repeat-basic-shift.bench.js

@@ -0,0 +1,43 @@
+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, nullableNumberConverter, repeat } from "../index.js";
+class TestRepeat extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.count = 0;
+        this.items = new Array(this.count).fill("foo");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.items.shift();
+    }
+}
+__decorate([
+    attr({
+        mode: "fromView",
+        converter: nullableNumberConverter,
+    }),
+    __metadata("design:type", Number)
+], TestRepeat.prototype, "count", void 0);
+TestRepeat.define({
+    name: "test-repeat",
+    template: html `
+        ${repeat(x => x.items, html `
+                <span>${x => x}</span>
+            `)}
+    `,
+});
+const itemRenderer = () => {
+    const testRepeat = document.createElement("test-repeat");
+    testRepeat.setAttribute("count", "100");
+    return testRepeat;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";

package/dist/esm/templating/repeat.js

@@ -1,10 +1,11 @@
+import { HydrationMarkup, isHydratable } from "../components/hydration.js";
+import { ArrayObserver } from "../observation/arrays.js";
 import { Observable } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
-import { ArrayObserver } from "../observation/arrays.js";
-import { Markup, nextId } from "./markup.js";
+import { normalizeBinding } from "../binding/normalize.js";
 import { HTMLDirective, } from "./html-directive.js";
-import { HTMLView } from "./view.js";
-import { normalizeBinding } from "./binding.js";
+import { Markup } from "./markup.js";
+import { HTMLView, HydrationStage } from "./view.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
@@ -21,6 +22,19 @@ function bindWithPositioning(view, items, index, controller) {
     view.context.index = index;
     view.bind(items[index]);
 }
+function isCommentNode(node) {
+    return node.nodeType === Node.COMMENT_NODE;
+}
+export class HydrationRepeatError extends Error {
+    constructor(
+    /**
+     * The error message
+     */
+    message, propertyBag) {
+        super(message);
+        this.propertyBag = propertyBag;
+    }
+}
 /**
  * A behavior that renders a template for each item in an array.
  * @public
@@ -37,12 +51,13 @@ export class RepeatBehavior {
      */
     constructor(directive) {
         this.directive = directive;
-        this.views = [];
         this.items = null;
         this.itemsObserver = null;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
-        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        /** @internal */
+        this.views = [];
+        this.itemsBindingObserver = directive.dataBinding.createObserver(this, directive);
+        this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
         if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
@@ -52,12 +67,19 @@ 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);
         this.observeItems(true);
-        this.refreshAllViews();
+        if (isHydratable(this.template) &&
+            isHydratable(controller) &&
+            controller.hydrationStage !== HydrationStage.hydrated) {
+            this.hydrateViews(this.template);
+        }
+        else {
+            this.refreshAllViews();
+        }
         controller.onUnbind(this);
     }
     /**
@@ -158,10 +180,10 @@ export class RepeatBehavior {
             leftoverViews[i].dispose();
         }
         if (this.directive.options.positioning) {
-            for (let i = 0, ii = views.length; i < ii; ++i) {
+            for (let i = 0, viewsLength = views.length; i < viewsLength; ++i) {
                 const context = views[i].context;
-                context.length = i;
-                context.index = ii;
+                context.length = viewsLength;
+                context.index = i;
             }
         }
     }
@@ -195,6 +217,18 @@ export class RepeatBehavior {
             for (; i < itemsLength; ++i) {
                 if (i < viewsLength) {
                     const view = views[i];
+                    if (!view) {
+                        const serializer = new XMLSerializer();
+                        throw new HydrationRepeatError(`View is null or undefined inside "${this.location.getRootNode().host.nodeName}".`, {
+                            index: i,
+                            hydrationStage: this.controller
+                                .hydrationStage,
+                            itemsLength,
+                            viewsState: views.map(v => (v ? "hydrated" : "empty")),
+                            viewTemplateString: serializer.serializeToString(template.create().fragment),
+                            rootNodeContent: serializer.serializeToString(this.location.getRootNode()),
+                        });
+                    }
                     bindView(view, items, i, controller);
                 }
                 else {
@@ -213,7 +247,76 @@ export class RepeatBehavior {
     unbindAllViews() {
         const views = this.views;
         for (let i = 0, ii = views.length; i < ii; ++i) {
-            views[i].unbind();
+            const view = views[i];
+            if (!view) {
+                const serializer = new XMLSerializer();
+                throw new HydrationRepeatError(`View is null or undefined inside "${this.location.getRootNode().host.nodeName}".`, {
+                    index: i,
+                    hydrationStage: this.controller.hydrationStage,
+                    viewsState: views.map(v => (v ? "hydrated" : "empty")),
+                    rootNodeContent: serializer.serializeToString(this.location.getRootNode()),
+                });
+            }
+            view.unbind();
+        }
+    }
+    hydrateViews(template) {
+        if (!this.items) {
+            return;
+        }
+        this.views = new Array(this.items.length);
+        let current = this.location.previousSibling;
+        while (current !== null) {
+            if (!isCommentNode(current)) {
+                current = current.previousSibling;
+                continue;
+            }
+            const index = HydrationMarkup.parseRepeatEndMarker(current.data);
+            if (index === null) {
+                current = current.previousSibling;
+                continue;
+            }
+            current.data = "";
+            // end of repeat is the previousSibling of end comment
+            const end = current.previousSibling;
+            if (!end) {
+                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": end should never be null.`);
+            }
+            // find start marker
+            let start = end;
+            // How many unmatched end markers we've encountered
+            let unmatchedEndMarkers = 0;
+            while (start !== null) {
+                if (isCommentNode(start)) {
+                    if (HydrationMarkup.isRepeatViewEndMarker(start.data)) {
+                        unmatchedEndMarkers++;
+                    }
+                    else if (HydrationMarkup.isRepeatViewStartMarker(start.data)) {
+                        if (unmatchedEndMarkers) {
+                            unmatchedEndMarkers--;
+                        }
+                        else {
+                            if (HydrationMarkup.parseRepeatStartMarker(start.data) !==
+                                index) {
+                                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host
+                                    .nodeName}": Mismatched start and end markers.`);
+                            }
+                            start.data = "";
+                            current = start.previousSibling;
+                            // start of repeat content is the nextSibling of start comment
+                            start = start.nextSibling;
+                            const view = template.hydrate(start, end);
+                            this.views[index] = view;
+                            this.bindView(view, this.items, index, this.controller);
+                            break;
+                        }
+                    }
+                }
+                start = start.previousSibling;
+            }
+            if (!start) {
+                throw new Error(`Error when hydrating inside "${this.location.getRootNode().host.nodeName}": start should never be null.`);
+            }
         }
     }
 }
@@ -232,10 +335,6 @@ export class RepeatDirective {
         this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
         ArrayObserver.enable();
     }
     /**