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

package/dist/esm/templating/slotted.js

@@ -1,37 +1,40 @@
-import { AttachedBehaviorHTMLDirective } from "./html-directive.js";
-import { NodeObservationBehavior } from "./node-observation.js";
+import { isString } from "../interfaces.js";
+import { HTMLDirective } from "./html-directive.js";
+import { NodeObservationDirective } from "./node-observation.js";
+const slotEvent = "slotchange";
 /**
  * The runtime behavior for slotted node observation.
  * @public
  */
-export class SlottedBehavior extends NodeObservationBehavior {
-    /**
-     * Creates an instance of SlottedBehavior.
-     * @param target - The slot element target to observe.
-     * @param options - The options to use when observing the slot.
-     */
-    constructor(target, options) {
-        super(target, options);
-    }
+export class SlottedDirective extends NodeObservationDirective {
     /**
      * Begins observation of the nodes.
+     * @param target - The target to observe.
      */
-    observe() {
-        this.target.addEventListener("slotchange", this);
+    observe(target) {
+        target.addEventListener(slotEvent, this);
     }
     /**
      * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
      */
-    disconnect() {
-        this.target.removeEventListener("slotchange", this);
+    disconnect(target) {
+        target.removeEventListener(slotEvent, this);
     }
     /**
-     * Retrieves the nodes that should be assigned to the target.
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
      */
-    getNodes() {
-        return this.target.assignedNodes(this.options);
+    getNodes(target) {
+        return target.assignedNodes(this.options);
+    }
+    /** @internal */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        this.updateTarget(this.getSource(target), this.computeNodes(target));
     }
 }
+HTMLDirective.define(SlottedDirective);
 /**
  * A directive that observes the `assignedNodes()` of a slot and updates a property
  * whenever they change.
@@ -39,8 +42,8 @@ export class SlottedBehavior extends NodeObservationBehavior {
  * @public
  */
 export function slotted(propertyOrOptions) {
-    if (typeof propertyOrOptions === "string") {
+    if (isString(propertyOrOptions)) {
         propertyOrOptions = { property: propertyOrOptions };
     }
-    return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+    return new SlottedDirective(propertyOrOptions);
 }

package/dist/esm/templating/template.js

@@ -1,86 +1,32 @@
-import { DOM } from "../dom.js";
-import { defaultExecutionContext } from "../observation/observable.js";
-import { compileTemplate } from "./compiler.js";
-import { HTMLView } from "./view.js";
-import { HTMLDirective, TargetedHTMLDirective, } from "./html-directive.js";
-import { HTMLBindingDirective } from "./binding.js";
+import { isFunction, isString } from "../interfaces.js";
+import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
+import { Compiler } from "./compiler.js";
+import { Aspect, Binding, HTMLDirective, } from "./html-directive.js";
+import { nextId } from "./markup.js";
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export class ViewTemplate {
     /**
      * Creates an instance of ViewTemplate.
      * @param html - The html representing what this template will instantiate, including placeholders for directives.
-     * @param directives - The directives that will be connected to placeholders in the html.
+     * @param factories - The directives that will be connected to placeholders in the html.
      */
-    constructor(html, directives) {
-        this.behaviorCount = 0;
-        this.hasHostBehaviors = false;
-        this.fragment = null;
-        this.targetOffset = 0;
-        this.viewBehaviorFactories = null;
-        this.hostBehaviorFactories = null;
+    constructor(html, factories) {
+        this.result = null;
         this.html = html;
-        this.directives = directives;
+        this.factories = factories;
     }
     /**
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
     create(hostBindingTarget) {
-        if (this.fragment === null) {
-            let template;
-            const html = this.html;
-            if (typeof html === "string") {
-                template = document.createElement("template");
-                template.innerHTML = DOM.createHTML(html);
-                const fec = template.content.firstElementChild;
-                if (fec !== null && fec.tagName === "TEMPLATE") {
-                    template = fec;
-                }
-            }
-            else {
-                template = html;
-            }
-            const result = compileTemplate(template, this.directives);
-            this.fragment = result.fragment;
-            this.viewBehaviorFactories = result.viewBehaviorFactories;
-            this.hostBehaviorFactories = result.hostBehaviorFactories;
-            this.targetOffset = result.targetOffset;
-            this.behaviorCount =
-                this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
-            this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;
-        }
-        const fragment = this.fragment.cloneNode(true);
-        const viewFactories = this.viewBehaviorFactories;
-        const behaviors = new Array(this.behaviorCount);
-        const walker = DOM.createTemplateWalker(fragment);
-        let behaviorIndex = 0;
-        let targetIndex = this.targetOffset;
-        let node = walker.nextNode();
-        for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {
-            const factory = viewFactories[behaviorIndex];
-            const factoryIndex = factory.targetIndex;
-            while (node !== null) {
-                if (targetIndex === factoryIndex) {
-                    behaviors[behaviorIndex] = factory.createBehavior(node);
-                    break;
-                }
-                else {
-                    node = walker.nextNode();
-                    targetIndex++;
-                }
-            }
+        if (this.result === null) {
+            this.result = Compiler.compile(this.html, this.factories);
         }
-        if (this.hasHostBehaviors) {
-            const hostFactories = this.hostBehaviorFactories;
-            for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
-                behaviors[behaviorIndex] = hostFactories[i].createBehavior(hostBindingTarget);
-            }
-        }
-        return new HTMLView(fragment, behaviors);
+        return this.result.createView(hostBindingTarget);
     }
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -90,14 +36,8 @@ export class ViewTemplate {
      * host that the template is being attached to.
      */
     render(source, host, hostBindingTarget) {
-        if (typeof host === "string") {
-            host = document.getElementById(host);
-        }
-        if (hostBindingTarget === void 0) {
-            hostBindingTarget = host;
-        }
         const view = this.create(hostBindingTarget);
-        view.bind(source, defaultExecutionContext);
+        view.bind(source);
         view.appendTo(host);
         return view;
     }
@@ -106,8 +46,15 @@ export class ViewTemplate {
 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]);
+    }
+    return value.createHTML(add);
+}
 /**
- * Transforms a template literal string into a renderable ViewTemplate.
+ * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
  * @param values - The values that are interpolated with the string fragments.
  * @remarks
@@ -116,36 +63,47 @@ const lastAttributeNameRegex =
  * @public
  */
 export function html(strings, ...values) {
-    const directives = [];
     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 value = values[i];
+        const currentValue = values[i];
+        let definition;
         html += currentString;
-        if (value instanceof ViewTemplate) {
-            const template = value;
-            value = () => template;
-        }
-        if (typeof value === "function") {
-            value = new HTMLBindingDirective(value);
+        if (isFunction(currentValue)) {
+            html += createAspectedHTML(new HTMLBindingDirective(bind(currentValue)), currentString, add);
         }
-        if (value instanceof TargetedHTMLDirective) {
+        else if (isString(currentValue)) {
             const match = lastAttributeNameRegex.exec(currentString);
             if (match !== null) {
-                value.targetName = match[2];
+                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
+                Aspect.assign(directive, match[2]);
+                html += directive.createHTML(add);
+            }
+            else {
+                html += currentValue;
             }
         }
-        if (value instanceof HTMLDirective) {
-            // Since not all values are directives, we can't use i
-            // as the index for the placeholder. Instead, we need to
-            // use directives.length to get the next index.
-            html += value.createPlaceholder(directives.length);
-            directives.push(value);
+        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 {
-            html += value;
+            if (definition.aspected) {
+                html += createAspectedHTML(currentValue, currentString, add);
+            }
+            else {
+                html += currentValue.createHTML(add);
+            }
         }
     }
-    html += strings[strings.length - 1];
-    return new ViewTemplate(html, directives);
+    return new ViewTemplate(html + strings[strings.length - 1], factories);
 }

package/dist/esm/templating/view.js

@@ -1,6 +1,15 @@
-// A singleton Range instance used to efficiently remove ranges of DOM nodes.
-// See the implementation of HTMLView below for further details.
-const range = document.createRange();
+import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
+function removeNodeSequence(firstNode, lastNode) {
+    const parent = firstNode.parentNode;
+    let current = firstNode;
+    let next;
+    while (current !== lastNode) {
+        next = current.nextSibling;
+        parent.removeChild(current);
+        current = next;
+    }
+    parent.removeChild(lastNode);
+}
 /**
  * The standard View implementation, which also implements ElementView and SyntheticView.
  * @public
@@ -11,20 +20,92 @@ export class 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, behaviors) {
+    constructor(fragment, factories, targets) {
         this.fragment = fragment;
-        this.behaviors = behaviors;
+        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 = null;
+        this.context = this;
+        /**
+         * The index of the current item within a repeat context.
+         */
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
+    /**
+     * The current event within an event handler.
+     */
+    get event() {
+        return ExecutionContext.getEvent();
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
+    get isEven() {
+        return this.index % 2 === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
+    get isOdd() {
+        return this.index % 2 !== 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
+    get isFirst() {
+        return this.index === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
+    get isInMiddle() {
+        return !this.isFirst && !this.isLast;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
+    get isLast() {
+        return this.index === this.length - 1;
+    }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
+    eventDetail() {
+        return this.event.detail;
+    }
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget() {
+        return this.event.target;
+    }
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -41,8 +122,10 @@ export class HTMLView {
             node.parentNode.insertBefore(this.fragment, node);
         }
         else {
-            const parentNode = node.parentNode;
             const end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
             let current = this.firstChild;
             let next;
             while (current !== end) {
@@ -74,63 +157,64 @@ export class HTMLView {
      * Once a view has been disposed, it cannot be inserted or bound again.
      */
     dispose() {
-        const parent = this.firstChild.parentNode;
-        const end = this.lastChild;
-        let current = this.firstChild;
-        let next;
-        while (current !== end) {
-            next = current.nextSibling;
-            parent.removeChild(current);
-            current = next;
-        }
-        parent.removeChild(end);
-        const behaviors = this.behaviors;
-        const oldSource = this.source;
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource);
-        }
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
+    }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
     }
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    bind(source, context) {
-        const behaviors = this.behaviors;
+    bind(source, context = this) {
         if (this.source === source) {
             return;
         }
-        else if (this.source !== null) {
-            const oldSource = this.source;
+        let behaviors = this.behaviors;
+        if (behaviors === null) {
             this.source = source;
             this.context = context;
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                const current = behaviors[i];
-                current.unbind(oldSource);
-                current.bind(source, context);
+            this.behaviors = behaviors = new Array(this.factories.length);
+            const factories = this.factories;
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const behavior = factories[i].createBehavior();
+                behavior.bind(this);
+                behaviors[i] = behavior;
             }
         }
         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(source, context);
+                behaviors[i].bind(this);
             }
         }
+        this.isBound = true;
     }
     /**
      * Unbinds a view's behaviors from its binding source.
      */
     unbind() {
-        if (this.source === null) {
+        if (!this.isBound || this.source === null) {
             return;
         }
-        const behaviors = this.behaviors;
-        const oldSource = this.source;
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource);
-        }
+        this.evaluateUnbindables();
         this.source = null;
+        this.context = this;
+        this.isBound = false;
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
     }
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.
@@ -140,16 +224,11 @@ export class HTMLView {
         if (views.length === 0) {
             return;
         }
-        range.setStartBefore(views[0].firstChild);
-        range.setEndAfter(views[views.length - 1].lastChild);
-        range.deleteContents();
+        removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
         for (let i = 0, ii = views.length; i < ii; ++i) {
-            const view = views[i];
-            const behaviors = view.behaviors;
-            const oldSource = view.source;
-            for (let j = 0, jj = behaviors.length; j < jj; ++j) {
-                behaviors[j].unbind(oldSource);
-            }
+            views[i].unbind();
         }
     }
 }
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");

package/dist/esm/templating/when.js

@@ -1,13 +1,15 @@
+import { isFunction } from "../interfaces.js";
 /**
  * A directive that enables basic conditional rendering in a template.
- * @param binding - The condition to test for rendering.
+ * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
  * @public
  */
-export function when(binding, templateOrTemplateBinding) {
-    const getTemplate = typeof templateOrTemplateBinding === "function"
+export function when(condition, templateOrTemplateBinding) {
+    const dataBinding = isFunction(condition) ? condition : () => condition;
+    const templateBinding = isFunction(templateOrTemplateBinding)
         ? templateOrTemplateBinding
         : () => templateOrTemplateBinding;
-    return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
+    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
 }

package/dist/esm/testing/exports.js

@@ -0,0 +1,3 @@
+export { timeout } from "./timeout.js";
+export * from "./fixture.js";
+export * from "./fakes.js";

package/dist/esm/testing/fakes.js

@@ -0,0 +1,76 @@
+import { ExecutionContext } from "../index.js";
+export const Fake = Object.freeze({
+    executionContext(parent, parentContext) {
+        return {
+            /**
+             * The index of the current item within a repeat context.
+             */
+            index: 0,
+            /**
+             * The length of the current collection within a repeat context.
+             */
+            length: 0,
+            /**
+             * The parent data source within a nested context.
+             */
+            parent: parent,
+            /**
+             * The parent execution context when in nested context scenarios.
+             */
+            parentContext: parentContext,
+            /**
+             * The current event within an event handler.
+             */
+            get event() {
+                return ExecutionContext.getEvent();
+            },
+            /**
+             * Indicates whether the current item within a repeat context
+             * has an even index.
+             */
+            get isEven() {
+                return this.index % 2 === 0;
+            },
+            /**
+             * Indicates whether the current item within a repeat context
+             * has an odd index.
+             */
+            get isOdd() {
+                return this.index % 2 !== 0;
+            },
+            /**
+             * Indicates whether the current item within a repeat context
+             * is the first item in the collection.
+             */
+            get isFirst() {
+                return this.index === 0;
+            },
+            /**
+             * Indicates whether the current item within a repeat context
+             * is somewhere in the middle of the collection.
+             */
+            get isInMiddle() {
+                return !this.isFirst && !this.isLast;
+            },
+            /**
+             * Indicates whether the current item within a repeat context
+             * is the last item in the collection.
+             */
+            get isLast() {
+                return this.index === this.length - 1;
+            },
+            /**
+             * Returns the typed event detail of a custom event.
+             */
+            eventDetail() {
+                return this.event.detail;
+            },
+            /**
+             * Returns the typed event target of the event.
+             */
+            eventTarget() {
+                return this.event.target;
+            },
+        };
+    },
+});