@microsoft/fast-element 2.0.0-beta.3 → 2.0.0-beta.6

package/dist/esm/templating/repeat.js

@@ -1,10 +1,10 @@
-import { isFunction } from "../interfaces.js";
 import { Observable, } from "../observation/observable.js";
 import { emptyArray } from "../platform.js";
 import { ArrayObserver } from "../observation/arrays.js";
-import { Markup } from "./markup.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,
@@ -23,17 +23,15 @@ 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) {
+    constructor(directive, location) {
+        this.directive = directive;
         this.location = location;
-        this.itemsBinding = itemsBinding;
-        this.templateBinding = templateBinding;
-        this.options = options;
         this.source = null;
         this.views = [];
         this.items = null;
@@ -41,9 +39,9 @@ export class RepeatBehavior {
         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) {
+        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
+        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
     }
@@ -81,15 +79,18 @@ export class RepeatBehavior {
      * @param args - The details about what was changed.
      */
     handleChange(source, args) {
-        if (source === this.itemsBinding) {
+        if (args === this.itemsBindingObserver) {
             this.items = this.itemsBindingObserver.observe(this.source, this.context);
             this.observeItems();
             this.refreshAllViews();
         }
-        else if (source === this.templateBinding) {
+        else if (args === this.templateBindingObserver) {
             this.template = this.templateBindingObserver.observe(this.source, this.context);
             this.refreshAllViews(true);
         }
+        else if (!args[0]) {
+            return;
+        }
         else if (args[0].reset) {
             this.refreshAllViews();
         }
@@ -115,36 +116,51 @@ 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 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);
+            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 <= availableViews && 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);
                 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) {
+        if (this.directive.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
                 views[i].context.updatePosition(i, ii);
             }
@@ -159,7 +175,7 @@ export class RepeatBehavior {
         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;
@@ -209,17 +225,19 @@ 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;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
         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.
@@ -233,21 +251,20 @@ export class RepeatDirective {
      * @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);
+        return new RepeatBehavior(this, targets[this.nodeId]);
     }
 }
 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,8 +1,8 @@
 import { isFunction, isString } from "../interfaces.js";
 import { ExecutionContext } from "../observation/observable.js";
-import { bind, oneTime } from "./binding.js";
+import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
-import { Aspect, HTMLDirective, } from "./html-directive.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.
@@ -78,12 +78,12 @@ export function html(strings, ...values) {
         let definition;
         html += currentString;
         if (isFunction(currentValue)) {
-            html += createAspectedHTML(bind(currentValue), currentString, add);
+            html += createAspectedHTML(new HTMLBindingDirective(bind(currentValue)), currentString, add);
         }
         else if (isString(currentValue)) {
             const match = lastAttributeNameRegex.exec(currentString);
             if (match !== null) {
-                const directive = bind(() => currentValue, oneTime);
+                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
                 Aspect.assign(directive, match[2]);
                 html += directive.createHTML(add);
             }
@@ -91,8 +91,11 @@ export function html(strings, ...values) {
                 html += currentValue;
             }
         }
+        else if (currentValue instanceof Binding) {
+            html += createAspectedHTML(new HTMLBindingDirective(currentValue), currentString, add);
+        }
         else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(bind(() => currentValue, oneTime), currentString, add);
+            html += createAspectedHTML(new HTMLBindingDirective(oneTime(() => currentValue)), currentString, add);
         }
         else {
             if (definition.aspected) {

package/dist/esm/templating/view.js

@@ -51,8 +51,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) {

package/dist/esm/templating/when.js

@@ -1,14 +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 = isFunction(templateOrTemplateBinding)
+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,2 @@
+export { timeout } from "./timeout.js";
+export * from "./fixture.js";

package/dist/esm/testing/fixture.js

@@ -0,0 +1,88 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { FASTElementDefinition } from "../components/fast-definitions.js";
+import { ExecutionContext } from "../observation/observable.js";
+import { ViewTemplate } from "../templating/template.js";
+function findElement(view) {
+    let current = view.firstChild;
+    while (current !== null && current.nodeType !== 1) {
+        current = current.nextSibling;
+    }
+    return current;
+}
+/**
+ * Creates a random, unique name suitable for use as a Custom Element name.
+ * @public
+ */
+export function uniqueElementName(prefix = "fast-unique") {
+    return `${prefix}-${Math.random().toString(36).substring(7)}`;
+}
+/**
+ * Creates a test fixture suitable for testing custom elements, templates, and bindings.
+ * @param templateNameOrType An HTML template or single element name to create the fixture for.
+ * @param options Enables customizing fixture creation behavior.
+ * @remarks
+ * Yields control to the caller one Microtask later, in order to
+ * ensure that the DOM has settled.
+ * @public
+ */
+export function fixture(templateNameOrType, options = {}) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const document = options.document || globalThis.document;
+        const parent = options.parent || document.createElement("div");
+        const source = options.source || {};
+        const context = options.context || ExecutionContext.default;
+        if (typeof templateNameOrType === "function") {
+            const def = FASTElementDefinition.getByType(templateNameOrType);
+            if (!def) {
+                throw new Error("Missing FASTElement definition.");
+            }
+            templateNameOrType = def.name;
+        }
+        if (typeof templateNameOrType === "string") {
+            const html = `<${templateNameOrType}></${templateNameOrType}>`;
+            templateNameOrType = new ViewTemplate(html, {});
+        }
+        const view = templateNameOrType.create();
+        const element = findElement(view);
+        let isConnected = false;
+        view.bind(source, context);
+        view.appendTo(parent);
+        customElements.upgrade(parent);
+        // Hook into the Microtask Queue to ensure the DOM is settled
+        // before yielding control to the caller.
+        yield Promise.resolve();
+        const connect = () => __awaiter(this, void 0, void 0, function* () {
+            if (isConnected) {
+                return;
+            }
+            isConnected = true;
+            document.body.appendChild(parent);
+            yield Promise.resolve();
+        });
+        const disconnect = () => __awaiter(this, void 0, void 0, function* () {
+            if (!isConnected) {
+                return;
+            }
+            isConnected = false;
+            document.body.removeChild(parent);
+            yield Promise.resolve();
+        });
+        return {
+            document,
+            template: templateNameOrType,
+            view,
+            parent,
+            element,
+            connect,
+            disconnect,
+        };
+    });
+}

package/dist/esm/testing/timeout.js

@@ -0,0 +1,24 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * A timeout helper for use in tests.
+ * @param timeout The length of the timeout.
+ * @returns A promise that resolves once the configured time has elapsed.
+ * @public
+ */
+export function timeout(timeout = 0) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            window.setTimeout(() => {
+                resolve(void 0);
+            }, timeout);
+        });
+    });
+}

package/dist/esm/utilities.js

@@ -1,98 +1,3 @@
-import { ArrayObserver } from "./index.debug.js";
-import { isFunction } from "./interfaces.js";
-import { Observable } from "./observation/observable.js";
-function shouldTraverse(value, traversed) {
-    return (value !== null &&
-        value !== void 0 &&
-        typeof value === "object" &&
-        !traversed.has(value));
-}
-function traverseObject(object, deep, visitor, data, traversed) {
-    if (!shouldTraverse(object, traversed)) {
-        return;
-    }
-    traversed.add(object);
-    if (Array.isArray(object)) {
-        visitor.visitArray(object, data);
-        for (const item of object) {
-            traverseObject(item, deep, visitor, data, traversed);
-        }
-    }
-    else {
-        visitor.visitObject(object, data);
-        for (const key in object) {
-            const value = object[key];
-            visitor.visitProperty(object, key, value, data);
-            if (deep) {
-                traverseObject(value, deep, visitor, data, traversed);
-            }
-        }
-    }
-}
-const noop = () => void 0;
-const observed = new WeakSet();
-const makeObserverVisitor = {
-    visitObject: noop,
-    visitArray: noop,
-    visitProperty(object, propertyName, value) {
-        Reflect.defineProperty(object, propertyName, {
-            enumerable: true,
-            get() {
-                Observable.track(object, propertyName);
-                return value;
-            },
-            set(newValue) {
-                if (value !== newValue) {
-                    value = newValue;
-                    Observable.notify(object, propertyName);
-                }
-            },
-        });
-    },
-};
-function watchObject(object, data) {
-    const notifier = Observable.getNotifier(object);
-    notifier.subscribe(data.subscriber);
-    data.notifiers.push(notifier);
-}
-const watchVisitor = {
-    visitProperty: noop,
-    visitObject: watchObject,
-    visitArray: watchObject,
-};
-/**
- * Converts a plain object to an observable object.
- * @param object - The object to make observable.
- * @param deep - Indicates whether or not to deeply convert the oject.
- * @returns The converted object.
- * @beta
- */
-export function makeObservable(object, deep = false) {
-    traverseObject(object, deep, makeObserverVisitor, void 0, observed);
-    return object;
-}
-/**
- * Deeply subscribes to changes in existing observable objects.
- * @param object - The observable object to watch.
- * @param subscriber - The handler to call when changes are made to the object.
- * @returns A disposable that can be used to unsubscribe from change updates.
- * @beta
- */
-export function watch(object, subscriber) {
-    const data = {
-        notifiers: [],
-        subscriber: isFunction(subscriber) ? { handleChange: subscriber } : subscriber,
-    };
-    ArrayObserver.enable();
-    traverseObject(object, true, watchVisitor, data, new Set());
-    return {
-        dispose() {
-            for (const n of data.notifiers) {
-                n.unsubscribe(data.subscriber);
-            }
-        },
-    };
-}
 /**
  * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
  * When the parent of a node is a shadow-root, it will return the host