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

package/dist/esm/templating/repeat.js

@@ -1,19 +1,25 @@
-import { isFunction } from "../interfaces.js";
-import { Observable, } from "../observation/observable.js";
+import { Observable } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { ArrayObserver } from "../observation/arrays.js";
 import { Markup } from "./markup.js";
 import { HTMLDirective, } from "./html-directive.js";
 import { HTMLView } from "./view.js";
+import { normalizeBinding } from "./binding.js";
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
 });
-function bindWithoutPositioning(view, items, index, context) {
-    view.bind(items[index], context);
+function bindWithoutPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.bind(items[index]);
 }
-function bindWithPositioning(view, items, index, context) {
-    view.bind(items[index], context.createItemContext(index, items.length));
+function bindWithPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.context.length = items.length;
+    view.context.index = index;
+    view.bind(items[index]);
 }
 /**
  * A behavior that renders a template for each item in an array.
@@ -23,57 +29,46 @@ export class RepeatBehavior {
     /**
      * Creates an instance of RepeatBehavior.
      * @param location - The location in the DOM to render the repeat.
-     * @param itemsBinding - The array to render.
+     * @param dataBinding - The array to render.
      * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
      * @param templateBinding - The template to render for each item.
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
-        this.location = location;
-        this.itemsBinding = itemsBinding;
-        this.templateBinding = templateBinding;
-        this.options = options;
-        this.source = null;
-        this.views = [];
+    constructor(directive) {
+        this.directive = directive;
         this.items = null;
         this.itemsObserver = null;
-        this.context = void 0;
-        this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
-        this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
-        if (options.positioning) {
+        /** @internal */
+        this.views = [];
+        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
+        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
     }
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context) {
-        this.source = source;
-        this.context = context;
-        this.childContext = context.createChildContext(source);
-        this.items = this.itemsBindingObserver.observe(source, this.context);
-        this.template = this.templateBindingObserver.observe(source, this.context);
+    bind(controller) {
+        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();
+        controller.onUnbind(this);
     }
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
      */
     unbind() {
-        this.source = null;
-        this.items = null;
         if (this.itemsObserver !== null) {
             this.itemsObserver.unsubscribe(this);
         }
         this.unbindAllViews();
-        this.itemsBindingObserver.dispose();
-        this.templateBindingObserver.dispose();
     }
     /**
      * Handles changes in the array, its items, and the repeat template.
@@ -81,15 +76,18 @@ export class RepeatBehavior {
      * @param args - The details about what was changed.
      */
     handleChange(source, args) {
-        if (source === this.itemsBinding) {
-            this.items = this.itemsBindingObserver.observe(this.source, this.context);
+        if (args === this.itemsBindingObserver) {
+            this.items = this.itemsBindingObserver.bind(this.controller);
             this.observeItems();
             this.refreshAllViews();
         }
-        else if (source === this.templateBinding) {
-            this.template = this.templateBindingObserver.observe(this.source, this.context);
+        else if (args === this.templateBindingObserver) {
+            this.template = this.templateBindingObserver.bind(this.controller);
             this.refreshAllViews(true);
         }
+        else if (!args[0]) {
+            return;
+        }
         else if (args[0].reset) {
             this.refreshAllViews();
         }
@@ -114,39 +112,57 @@ export class RepeatBehavior {
     }
     updateViews(splices) {
         const views = this.views;
-        const childContext = this.childContext;
-        const totalRemoved = [];
         const bindView = this.bindView;
-        let removeDelta = 0;
-        for (let i = 0, ii = splices.length; i < ii; ++i) {
-            const splice = splices[i];
-            const removed = splice.removed;
-            totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
-            removeDelta -= splice.addedCount;
-        }
         const items = this.items;
         const template = this.template;
+        const controller = this.controller;
+        const recycle = this.directive.options.recycle;
+        const leftoverViews = [];
+        let leftoverIndex = 0;
+        let availableViews = 0;
         for (let i = 0, ii = splices.length; i < ii; ++i) {
             const splice = splices[i];
+            const removed = splice.removed;
+            let removeIndex = 0;
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
+            const removedViews = views.splice(splice.index, removed.length);
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
-                const view = this.options.recycle && totalRemoved.length > 0
-                    ? totalRemoved.shift()
-                    : template.create();
+                let view;
+                if (recycle && availableViews > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                        view = removedViews[removeIndex];
+                        removeIndex++;
+                    }
+                    else {
+                        view = leftoverViews[leftoverIndex];
+                        leftoverIndex++;
+                    }
+                    availableViews--;
+                }
+                else {
+                    view = template.create();
+                }
                 views.splice(addIndex, 0, view);
-                bindView(view, items, addIndex, childContext);
+                bindView(view, items, addIndex, controller);
                 view.insertBefore(location);
             }
+            if (removedViews[removeIndex]) {
+                leftoverViews.push(...removedViews.slice(removeIndex));
+            }
         }
-        for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
-            totalRemoved[i].dispose();
+        for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+            leftoverViews[i].dispose();
         }
-        if (this.options.positioning) {
-            for (let i = 0, ii = views.length; i < ii; ++i) {
-                views[i].context.updatePosition(i, ii);
+        if (this.directive.options.positioning) {
+            for (let i = 0, viewsLength = views.length; i < viewsLength; ++i) {
+                const context = views[i].context;
+                context.length = viewsLength;
+                context.index = i;
             }
         }
     }
@@ -155,11 +171,11 @@ export class RepeatBehavior {
         const template = this.template;
         const location = this.location;
         const bindView = this.bindView;
-        const childContext = this.childContext;
+        const controller = this.controller;
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
-        if (itemsLength === 0 || templateChanged || !this.options.recycle) {
+        if (itemsLength === 0 || templateChanged || !this.directive.options.recycle) {
             // all views need to be removed
             HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
@@ -169,7 +185,7 @@ export class RepeatBehavior {
             this.views = views = new Array(itemsLength);
             for (let i = 0; i < itemsLength; ++i) {
                 const view = template.create();
-                bindView(view, items, i, childContext);
+                bindView(view, items, i, controller);
                 views[i] = view;
                 view.insertBefore(location);
             }
@@ -180,11 +196,11 @@ export class RepeatBehavior {
             for (; i < itemsLength; ++i) {
                 if (i < viewsLength) {
                     const view = views[i];
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                 }
                 else {
                     const view = template.create();
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                     views.push(view);
                     view.insertBefore(location);
                 }
@@ -209,17 +225,15 @@ export class RepeatBehavior {
 export class RepeatDirective {
     /**
      * Creates an instance of RepeatDirective.
-     * @param itemsBinding - The binding that provides the array to render.
+     * @param dataBinding - The binding that provides the array to render.
      * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(itemsBinding, templateBinding, options) {
-        this.itemsBinding = itemsBinding;
+    constructor(dataBinding, templateBinding, options) {
+        this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
         ArrayObserver.enable();
-        this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -232,22 +246,21 @@ export class RepeatDirective {
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    createBehavior(targets) {
-        return new RepeatBehavior(targets[this.nodeId], this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+    createBehavior() {
+        return new RepeatBehavior(this);
     }
 }
 HTMLDirective.define(RepeatDirective);
 /**
  * A directive that enables list rendering.
- * @param itemsBinding - The array to render.
- * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * @param items - The array to render.
+ * @param template - The template or a template binding used obtain a template
  * to render for each item in the array.
  * @param options - Options used to turn on special repeat features.
  * @public
  */
-export function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return new RepeatDirective(itemsBinding, templateBinding, options);
+export function repeat(items, template, options = defaultRepeatOptions) {
+    const dataBinding = normalizeBinding(items);
+    const templateBinding = normalizeBinding(template);
+    return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }

package/dist/esm/templating/template.js

@@ -1,9 +1,53 @@
-import { isFunction, isString } from "../interfaces.js";
-import { ExecutionContext } from "../observation/observable.js";
-import { bind, oneTime } from "./binding.js";
+import { isFunction, isString, noop } from "../interfaces.js";
+import { FAST } from "../platform.js";
+import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
-import { Aspect, 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"'`<>=]*|"[^"]*|'[^']*))$/;
+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
@@ -13,9 +57,16 @@ 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.
+         * @internal
+         */
+        this.toJSON = noop;
         this.html = html;
         this.factories = factories;
     }
@@ -25,10 +76,34 @@ 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);
     }
+    /**
+     * 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 */);
+        }
+        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.
@@ -36,23 +111,53 @@ export class ViewTemplate {
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source, host, hostBindingTarget, context) {
-        const view = this.create(hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : host);
-        view.bind(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+    render(source, host, hostBindingTarget) {
+        const view = this.create(hostBindingTarget);
+        view.bind(source);
         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.
@@ -63,45 +168,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(bind(currentValue), currentString, add);
-        }
-        else if (isString(currentValue)) {
-            const match = lastAttributeNameRegex.exec(currentString);
-            if (match !== null) {
-                const directive = bind(() => currentValue, oneTime);
-                Aspect.assign(directive, match[2]);
-                html += directive.createHTML(add);
-            }
-            else {
-                html += currentValue;
-            }
-        }
-        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(bind(() => currentValue, oneTime), 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);
+};