@microsoft/fast-element 1.10.5 → 2.0.0-beta.10

package/dist/esm/templating/render.js

@@ -0,0 +1,391 @@
+import { FASTElementDefinition } from "../components/fast-definitions.js";
+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";
+/**
+ * A Behavior that enables advanced rendering.
+ * @public
+ */
+export class RenderBehavior {
+    /**
+     * Creates an instance of RenderBehavior.
+     * @param directive - The render directive that created this behavior.
+     */
+    constructor(directive) {
+        this.directive = directive;
+        this.location = null;
+        this.controller = null;
+        this.view = null;
+        this.data = null;
+        this.dataBindingObserver = directive.dataBinding.createObserver(directive, this);
+        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+    }
+    /**
+     * 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.controller = controller;
+        this.data = this.dataBindingObserver.bind(controller);
+        this.template = this.templateBindingObserver.bind(controller);
+        controller.onUnbind(this);
+        this.refreshView();
+    }
+    /**
+     * Unbinds this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
+     */
+    unbind(controller) {
+        const view = this.view;
+        if (view !== null && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleChange(source, observer) {
+        if (observer === this.dataBindingObserver) {
+            this.data = this.dataBindingObserver.bind(this.controller);
+        }
+        if (this.directive.templateBindingDependsOnData ||
+            observer === this.templateBindingObserver) {
+            this.template = this.templateBindingObserver.bind(this.controller);
+        }
+        this.refreshView();
+    }
+    refreshView() {
+        let view = this.view;
+        const template = this.template;
+        if (view === null) {
+            this.view = view = template.create();
+            this.view.context.parent = this.controller.source;
+            this.view.context.parentContext = this.controller.context;
+        }
+        else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (view.$fastTemplate !== template) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
+                this.view = view = template.create();
+                this.view.context.parent = this.controller.source;
+                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);
+        }
+    }
+}
+/**
+ * A Directive that enables use of the RenderBehavior.
+ * @public
+ */
+export class RenderDirective {
+    /**
+     * Creates an instance of RenderDirective.
+     * @param dataBinding - A binding expression that returns the data to render.
+     * @param templateBinding - A binding expression that returns the template to use to render the data.
+     */
+    constructor(dataBinding, templateBinding, templateBindingDependsOnData) {
+        this.dataBinding = dataBinding;
+        this.templateBinding = templateBinding;
+        this.templateBindingDependsOnData = templateBindingDependsOnData;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return new RenderBehavior(this);
+    }
+}
+HTMLDirective.define(RenderDirective);
+function isElementRenderOptions(object) {
+    return !!object.element || !!object.tagName;
+}
+const typeToInstructionLookup = new Map();
+/* eslint @typescript-eslint/naming-convention: "off"*/
+const defaultAttributes = { ":model": x => x };
+const brand = Symbol("RenderInstruction");
+const defaultViewName = "default-view";
+const nullTemplate = html `
+     
+`;
+function instructionToTemplate(def) {
+    if (def === void 0) {
+        return nullTemplate;
+    }
+    return def.template;
+}
+function createElementTemplate(tagName, attributes, content) {
+    const markup = [];
+    const values = [];
+    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) {
+                markup[0] = `${markup[0]} ${name}="`;
+            }
+            else {
+                markup.push(`" ${name}="`);
+            }
+            values.push(attributes[name]);
+        }
+        markup.push(`">`);
+    }
+    else {
+        markup.push(`<${tagName}>`);
+    }
+    if (content && isFunction(content.create)) {
+        values.push(content);
+        markup.push(`</${tagName}>`);
+    }
+    else {
+        const lastIndex = markup.length - 1;
+        markup[lastIndex] = `${markup[lastIndex]}${content !== null && content !== void 0 ? content : ""}</${tagName}>`;
+    }
+    return html(markup, ...values);
+}
+function create(options) {
+    var _a, _b;
+    const name = (_a = options.name) !== null && _a !== void 0 ? _a : defaultViewName;
+    let template;
+    if (isElementRenderOptions(options)) {
+        let tagName = options.tagName;
+        if (!tagName) {
+            const def = FASTElementDefinition.getByType(options.element);
+            if (def) {
+                tagName = def.name;
+            }
+            else {
+                throw new Error("Invalid element for model rendering.");
+            }
+        }
+        template = createElementTemplate(tagName, (_b = options.attributes) !== null && _b !== void 0 ? _b : defaultAttributes, options.content);
+    }
+    else {
+        template = options.template;
+    }
+    return {
+        brand,
+        type: options.type,
+        name,
+        template,
+    };
+}
+function instanceOf(object) {
+    return object && object.brand === brand;
+}
+function register(optionsOrInstruction) {
+    let lookup = typeToInstructionLookup.get(optionsOrInstruction.type);
+    if (lookup === void 0) {
+        typeToInstructionLookup.set(optionsOrInstruction.type, (lookup = Object.create(null)));
+    }
+    const instruction = instanceOf(optionsOrInstruction)
+        ? optionsOrInstruction
+        : create(optionsOrInstruction);
+    return (lookup[instruction.name] = instruction);
+}
+function getByType(type, name) {
+    const entries = typeToInstructionLookup.get(type);
+    if (entries === void 0) {
+        return void 0;
+    }
+    return entries[name !== null && name !== void 0 ? name : defaultViewName];
+}
+function getForInstance(object, name) {
+    if (object) {
+        return getByType(object.constructor, name);
+    }
+    return void 0;
+}
+/**
+ * Provides APIs for creating and interacting with render instructions.
+ * @public
+ */
+export const RenderInstruction = Object.freeze({
+    /**
+     * Checks whether the provided object is a RenderInstruction.
+     * @param object - The object to check.
+     * @returns true if the object is a RenderInstruction; false otherwise
+     */
+    instanceOf,
+    /**
+     * Creates a RenderInstruction for a set of options.
+     * @param options - The options to use when creating the RenderInstruction.
+     */
+    create,
+    /**
+     * Creates a template based on a tag name.
+     * @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.
+     * @returns A template based on the provided specifications.
+     */
+    createElementTemplate,
+    /**
+     * Creates and registers an instruction.
+     * @param options The options to use when creating the RenderInstruction.
+     * @remarks
+     * A previously created RenderInstruction can also be registered.
+     */
+    register,
+    /**
+     * Finds a previously registered RenderInstruction by type and optionally by name.
+     * @param type - The type to retrieve the RenderInstruction for.
+     * @param name - An optional name used in differentiating between multiple registered instructions.
+     * @returns The located RenderInstruction that matches the criteria or undefined if none is found.
+     */
+    getByType,
+    /**
+     * Finds a previously registered RenderInstruction for the instance's type and optionally by name.
+     * @param object - The instance to retrieve the RenderInstruction for.
+     * @param name - An optional name used in differentiating between multiple registered instructions.
+     * @returns The located RenderInstruction that matches the criteria or undefined if none is found.
+     */
+    getForInstance,
+});
+export function renderWith(value, name) {
+    return function (type) {
+        if (isFunction(value)) {
+            register({ type, element: value, name });
+        }
+        else if (isFunction(value.create)) {
+            register({ type, template: value, name });
+        }
+        else {
+            register(Object.assign({ type }, value));
+        }
+    };
+}
+/**
+ * @internal
+ */
+export class NodeTemplate {
+    constructor(node) {
+        this.node = node;
+        node.$fastTemplate = this;
+    }
+    get context() {
+        // HACK
+        return this;
+    }
+    bind(source) { }
+    unbind() { }
+    insertBefore(refNode) {
+        refNode.parentNode.insertBefore(this.node, refNode);
+    }
+    remove() {
+        this.node.parentNode.removeChild(this.node);
+    }
+    create() {
+        return this;
+    }
+}
+/**
+ * Creates a RenderDirective for use in advanced rendering scenarios.
+ * @param value - The binding expression that returns the data to be rendered. The expression
+ * can also return a Node to render directly.
+ * @param template - A template to render the data with
+ * or a string to indicate which RenderInstruction to use when looking up a RenderInstruction.
+ * Expressions can also be provided to dynamically determine either the template or the name.
+ * @returns A RenderDirective suitable for use in a template.
+ * @remarks
+ * If no binding is provided, then a default binding that returns the source is created.
+ * If no template is provided, then a binding is created that will use registered
+ * RenderInstructions to determine the view.
+ * If the template binding returns a string, then it will be used to look up a
+ * RenderInstruction to determine the view.
+ * @public
+ */
+export function render(value, template) {
+    let dataBinding;
+    if (value === void 0) {
+        dataBinding = oneTime((source) => source);
+    }
+    else {
+        dataBinding = normalizeBinding(value);
+    }
+    let templateBinding;
+    let templateBindingDependsOnData = false;
+    if (template === void 0) {
+        templateBindingDependsOnData = true;
+        templateBinding = oneTime((s, c) => {
+            var _a;
+            const data = dataBinding.evaluate(s, c);
+            if (data instanceof Node) {
+                return (_a = data.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(data);
+            }
+            return instructionToTemplate(getForInstance(data));
+        });
+    }
+    else if (isFunction(template)) {
+        templateBinding = bind((s, c) => {
+            var _a;
+            let result = template(s, c);
+            if (isString(result)) {
+                result = instructionToTemplate(getForInstance(dataBinding.evaluate(s, c), result));
+            }
+            else if (result instanceof Node) {
+                result = (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
+            }
+            return result;
+        }, true);
+    }
+    else if (isString(template)) {
+        templateBindingDependsOnData = true;
+        templateBinding = oneTime((s, c) => {
+            var _a;
+            const data = dataBinding.evaluate(s, c);
+            if (data instanceof Node) {
+                return (_a = data.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(data);
+            }
+            return instructionToTemplate(getForInstance(data, template));
+        });
+    }
+    else if (template instanceof Binding) {
+        const evaluateTemplate = template.evaluate;
+        template.evaluate = (s, c) => {
+            var _a;
+            let result = evaluateTemplate(s, c);
+            if (isString(result)) {
+                result = instructionToTemplate(getForInstance(dataBinding.evaluate(s, c), result));
+            }
+            else if (result instanceof Node) {
+                result = (_a = result.$fastTemplate) !== null && _a !== void 0 ? _a : new NodeTemplate(result);
+            }
+            return result;
+        };
+        templateBinding = template;
+    }
+    else {
+        templateBinding = oneTime((s, c) => template);
+    }
+    return new RenderDirective(dataBinding, templateBinding, templateBindingDependsOnData);
+}

package/dist/esm/templating/repeat.js

@@ -1,21 +1,25 @@
-import { DOM } from "../dom.js";
-import { Observable, } from "../observation/observable.js";
-import { enableArrayObservation } from "../observation/array-observer.js";
+import { Observable } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
-import { HTMLDirective } from "./html-directive.js";
+import { ArrayObserver } from "../observation/arrays.js";
+import { Markup, nextId } 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) {
-    const childContext = Object.create(context);
-    childContext.index = index;
-    childContext.length = items.length;
-    view.bind(items[index], childContext);
+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.
@@ -25,71 +29,67 @@ 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;
+    constructor(directive) {
+        this.directive = directive;
         this.views = [];
         this.items = null;
         this.itemsObserver = null;
-        this.originalContext = 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) {
+        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.originalContext = context;
-        this.childContext = Object.create(context);
-        this.childContext.parent = source;
-        this.childContext.parentContext = this.originalContext;
-        this.items = this.itemsBindingObserver.observe(source, this.originalContext);
-        this.template = this.templateBindingObserver.observe(source, this.originalContext);
+    bind(controller) {
+        this.location = controller.targets[this.directive.nodeId];
+        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.disconnect();
-        this.templateBindingObserver.disconnect();
     }
-    /** @internal */
+    /**
+     * Handles changes in the array, its items, and the repeat template.
+     * @param source - The source of the change.
+     * @param args - The details about what was changed.
+     */
     handleChange(source, args) {
-        if (source === this.itemsBinding) {
-            this.items = this.itemsBindingObserver.observe(this.source, this.originalContext);
+        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.originalContext);
+        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();
+        }
         else {
             this.updateViews(args);
         }
@@ -110,12 +110,12 @@ export class RepeatBehavior {
         }
     }
     updateViews(splices) {
-        const childContext = this.childContext;
         const views = this.views;
         const bindView = this.bindView;
         const items = this.items;
         const template = this.template;
-        const recycle = this.options.recycle;
+        const controller = this.controller;
+        const recycle = this.directive.options.recycle;
         const leftoverViews = [];
         let leftoverIndex = 0;
         let availableViews = 0;
@@ -126,13 +126,14 @@ export class RepeatBehavior {
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
             const removedViews = views.splice(splice.index, removed.length);
-            availableViews = leftoverViews.length + removedViews.length;
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
                 let view;
                 if (recycle && availableViews > 0) {
-                    if (removeIndex <= availableViews && removedViews.length > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
                         view = removedViews[removeIndex];
                         removeIndex++;
                     }
@@ -146,7 +147,7 @@ export class RepeatBehavior {
                     view = template.create();
                 }
                 views.splice(addIndex, 0, view);
-                bindView(view, items, addIndex, childContext);
+                bindView(view, items, addIndex, controller);
                 view.insertBefore(location);
             }
             if (removedViews[removeIndex]) {
@@ -156,24 +157,24 @@ export class RepeatBehavior {
         for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
             leftoverViews[i].dispose();
         }
-        if (this.options.positioning) {
+        if (this.directive.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
-                const currentContext = views[i].context;
-                currentContext.length = ii;
-                currentContext.index = i;
+                const context = views[i].context;
+                context.length = i;
+                context.index = ii;
             }
         }
     }
     refreshAllViews(templateChanged = false) {
         const items = this.items;
-        const childContext = this.childContext;
         const template = this.template;
         const location = this.location;
         const bindView = this.bindView;
+        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;
@@ -183,7 +184,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);
             }
@@ -194,11 +195,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);
                 }
@@ -220,46 +221,49 @@ export class RepeatBehavior {
  * A directive that configures list rendering.
  * @public
  */
-export class RepeatDirective extends HTMLDirective {
+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) {
-        super();
-        this.itemsBinding = itemsBinding;
+    constructor(dataBinding, templateBinding, options) {
+        this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
         /**
-         * Creates a placeholder string based on the directive's index within the template.
-         * @param index - The index of the directive within the template.
+         * The unique id of the factory.
          */
-        this.createPlaceholder = DOM.createBlockPlaceholder;
-        enableArrayObservation();
-        this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+        this.id = nextId();
+        ArrayObserver.enable();
+    }
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
     }
     /**
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    createBehavior(target) {
-        return new RepeatBehavior(target, 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 = typeof templateOrTemplateBinding === "function"
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), 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));
 }