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

package/dist/esm/observation/arrays.js

@@ -67,10 +67,311 @@ export const SpliceStrategySupport = Object.freeze({
 const reset = new Splice(0, emptyArray, 0);
 reset.reset = true;
 const resetSplices = [reset];
+// Note: This function is *based* on the computation of the Levenshtein
+// "edit" distance. The one change is that "updates" are treated as two
+// edits - not one. With Array splices, an update is really a delete
+// followed by an add. By retaining this, we optimize for "keeping" the
+// maximum array items in the original array. For example:
+//
+//   'xxxx123' to '123yyyy'
+//
+// With 1-edit updates, the shortest path would be just to update all seven
+// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+// leaves the substring '123' intact.
+function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    // "Deletion" columns
+    const rowCount = oldEnd - oldStart + 1;
+    const columnCount = currentEnd - currentStart + 1;
+    const distances = new Array(rowCount);
+    let north;
+    let west;
+    // "Addition" rows. Initialize null column.
+    for (let i = 0; i < rowCount; ++i) {
+        distances[i] = new Array(columnCount);
+        distances[i][0] = i;
+    }
+    // Initialize null row
+    for (let j = 0; j < columnCount; ++j) {
+        distances[0][j] = j;
+    }
+    for (let i = 1; i < rowCount; ++i) {
+        for (let j = 1; j < columnCount; ++j) {
+            if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                distances[i][j] = distances[i - 1][j - 1];
+            }
+            else {
+                north = distances[i - 1][j] + 1;
+                west = distances[i][j - 1] + 1;
+                distances[i][j] = north < west ? north : west;
+            }
+        }
+    }
+    return distances;
+}
+// This starts at the final weight, and walks "backward" by finding
+// the minimum previous weight recursively until the origin of the weight
+// matrix.
+function spliceOperationsFromEditDistances(distances) {
+    let i = distances.length - 1;
+    let j = distances[0].length - 1;
+    let current = distances[i][j];
+    const edits = [];
+    while (i > 0 || j > 0) {
+        if (i === 0) {
+            edits.push(2 /* Edit.add */);
+            j--;
+            continue;
+        }
+        if (j === 0) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            continue;
+        }
+        const northWest = distances[i - 1][j - 1];
+        const west = distances[i - 1][j];
+        const north = distances[i][j - 1];
+        let min;
+        if (west < north) {
+            min = west < northWest ? west : northWest;
+        }
+        else {
+            min = north < northWest ? north : northWest;
+        }
+        if (min === northWest) {
+            if (northWest === current) {
+                edits.push(0 /* Edit.leave */);
+            }
+            else {
+                edits.push(1 /* Edit.update */);
+                current = northWest;
+            }
+            i--;
+            j--;
+        }
+        else if (min === west) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            current = west;
+        }
+        else {
+            edits.push(2 /* Edit.add */);
+            j--;
+            current = north;
+        }
+    }
+    return edits.reverse();
+}
+function sharedPrefix(current, old, searchLength) {
+    for (let i = 0; i < searchLength; ++i) {
+        if (current[i] !== old[i]) {
+            return i;
+        }
+    }
+    return searchLength;
+}
+function sharedSuffix(current, old, searchLength) {
+    let index1 = current.length;
+    let index2 = old.length;
+    let count = 0;
+    while (count < searchLength && current[--index1] === old[--index2]) {
+        count++;
+    }
+    return count;
+}
+function intersect(start1, end1, start2, end2) {
+    // Disjoint
+    if (end1 < start2 || end2 < start1) {
+        return -1;
+    }
+    // Adjacent
+    if (end1 === start2 || end2 === start1) {
+        return 0;
+    }
+    // Non-zero intersect, span1 first
+    if (start1 < start2) {
+        if (end1 < end2) {
+            return end1 - start2; // Overlap
+        }
+        return end2 - start2; // Contained
+    }
+    // Non-zero intersect, span2 first
+    if (end2 < end1) {
+        return end2 - start1; // Overlap
+    }
+    return end1 - start1; // Contained
+}
+/**
+ * @remarks
+ * Lacking individual splice mutation information, the minimal set of
+ * splices can be synthesized given the previous state and final state of an
+ * array. The basic approach is to calculate the edit distance matrix and
+ * choose the shortest path through it.
+ *
+ * Complexity: O(l * p)
+ *   l: The length of the current array
+ *   p: The length of the old array
+ */
+function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    let prefixCount = 0;
+    let suffixCount = 0;
+    const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+    if (currentStart === 0 && oldStart === 0) {
+        prefixCount = sharedPrefix(current, old, minLength);
+    }
+    if (currentEnd === current.length && oldEnd === old.length) {
+        suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+    }
+    currentStart += prefixCount;
+    oldStart += prefixCount;
+    currentEnd -= suffixCount;
+    oldEnd -= suffixCount;
+    if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+        return emptyArray;
+    }
+    if (currentStart === currentEnd) {
+        const splice = new Splice(currentStart, [], 0);
+        while (oldStart < oldEnd) {
+            splice.removed.push(old[oldStart++]);
+        }
+        return [splice];
+    }
+    else if (oldStart === oldEnd) {
+        return [new Splice(currentStart, [], currentEnd - currentStart)];
+    }
+    const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+    const splices = [];
+    let splice = void 0;
+    let index = currentStart;
+    let oldIndex = oldStart;
+    for (let i = 0; i < ops.length; ++i) {
+        switch (ops[i]) {
+            case 0 /* Edit.leave */:
+                if (splice !== void 0) {
+                    splices.push(splice);
+                    splice = void 0;
+                }
+                index++;
+                oldIndex++;
+                break;
+            case 1 /* Edit.update */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            case 2 /* Edit.add */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                break;
+            case 3 /* Edit.delete */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            // no default
+        }
+    }
+    if (splice !== void 0) {
+        splices.push(splice);
+    }
+    return splices;
+}
+function merge(splice, splices) {
+    let inserted = false;
+    let insertionOffset = 0;
+    for (let i = 0; i < splices.length; i++) {
+        const current = splices[i];
+        current.index += insertionOffset;
+        if (inserted) {
+            continue;
+        }
+        const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+        if (intersectCount >= 0) {
+            // Merge the two splices
+            splices.splice(i, 1);
+            i--;
+            insertionOffset -= current.addedCount - current.removed.length;
+            splice.addedCount += current.addedCount - intersectCount;
+            const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+            if (!splice.addedCount && !deleteCount) {
+                // merged splice is a noop. discard.
+                inserted = true;
+            }
+            else {
+                let currentRemoved = current.removed;
+                if (splice.index < current.index) {
+                    // some prefix of splice.removed is prepended to current.removed.
+                    const prepend = splice.removed.slice(0, current.index - splice.index);
+                    prepend.push(...currentRemoved);
+                    currentRemoved = prepend;
+                }
+                if (splice.index + splice.removed.length >
+                    current.index + current.addedCount) {
+                    // some suffix of splice.removed is appended to current.removed.
+                    const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                    currentRemoved.push(...append);
+                }
+                splice.removed = currentRemoved;
+                if (current.index < splice.index) {
+                    splice.index = current.index;
+                }
+            }
+        }
+        else if (splice.index < current.index) {
+            // Insert splice here.
+            inserted = true;
+            splices.splice(i, 0, splice);
+            i++;
+            const offset = splice.addedCount - splice.removed.length;
+            current.index += offset;
+            insertionOffset += offset;
+        }
+    }
+    if (!inserted) {
+        splices.push(splice);
+    }
+}
+function project(array, changes) {
+    let splices = [];
+    const initialSplices = [];
+    for (let i = 0, ii = changes.length; i < ii; i++) {
+        merge(changes[i], initialSplices);
+    }
+    for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+        const splice = initialSplices[i];
+        if (splice.addedCount === 1 && splice.removed.length === 1) {
+            if (splice.removed[0] !== array[splice.index]) {
+                splices.push(splice);
+            }
+            continue;
+        }
+        splices = splices.concat(calc(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+    }
+    return splices;
+}
+/**
+ * A SpliceStrategy that attempts to merge all splices into the minimal set of
+ * splices needed to represent the change from the old array to the new array.
+ * @public
+ */
 let defaultSpliceStrategy = Object.freeze({
-    support: SpliceStrategySupport.splice,
+    support: SpliceStrategySupport.optimized,
     normalize(previous, current, changes) {
-        return previous === void 0 ? changes !== null && changes !== void 0 ? changes : emptyArray : resetSplices;
+        if (previous === void 0) {
+            if (changes === void 0) {
+                return emptyArray;
+            }
+            return changes.length > 1 ? project(current, changes) : changes;
+        }
+        return resetSplices;
     },
     pop(array, observer, pop, args) {
         const notEmpty = array.length > 0;

package/dist/esm/observation/observable.js

@@ -1,16 +1,30 @@
-import { isFunction, isString, } from "../interfaces.js";
-import { FAST } from "../platform.js";
+import { isFunction, isString, KernelServiceId, noop, } from "../interfaces.js";
+import { createMetadataLocator, FAST } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+export const SourceLifetime = Object.freeze({
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    unknown: void 0,
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    coupled: 1,
+});
 /**
  * Common Observable APIs.
  * @public
  */
-export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const queueUpdate = Updates.enqueue;
     const volatileRegex = /(:|&&|\|\||if)/;
     const notifierLookup = new WeakMap();
-    const accessorLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
         throw FAST.error(1101 /* Message.needsArrayObservation */);
@@ -25,19 +39,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
         }
         return found;
     }
-    function getAccessors(target) {
-        let accessors = accessorLookup.get(target);
-        if (accessors === void 0) {
-            let currentTarget = Reflect.getPrototypeOf(target);
-            while (accessors === void 0 && currentTarget !== null) {
-                accessors = accessorLookup.get(currentTarget);
-                currentTarget = Reflect.getPrototypeOf(currentTarget);
-            }
-            accessors = accessors === void 0 ? [] : accessors.slice(0);
-            accessorLookup.set(target, accessors);
-        }
-        return accessors;
-    }
+    const getAccessors = createMetadataLocator();
     class DefaultObservableAccessor {
         constructor(name) {
             this.name = name;
@@ -63,10 +65,10 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
-        constructor(binding, initialSubscriber, isVolatileBinding = false) {
-            super(binding, initialSubscriber);
-            this.binding = binding;
+    class ExpressionNotifierImplementation extends SubscriberSet {
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
             this.isVolatileBinding = isVolatileBinding;
             this.needsRefresh = true;
             this.needsQueue = true;
@@ -77,10 +79,30 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
+            /**
+             * Opts out of JSON stringification.
+             */
+            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
         }
+        bind(controller) {
+            this.controller = controller;
+            const value = this.observe(controller.source, controller.context);
+            if (!controller.isBound && this.requiresUnbind(controller)) {
+                controller.onUnbind(this);
+            }
+            return value;
+        }
+        requiresUnbind(controller) {
+            return (controller.sourceLifetime !== SourceLifetime.coupled ||
+                this.first !== this.last ||
+                this.first.propertySource !== controller.source);
+        }
+        unbind(controller) {
+            this.dispose();
+        }
         observe(source, context) {
             if (this.needsRefresh && this.last !== null) {
                 this.dispose();
@@ -88,10 +110,19 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             const previousWatcher = watcher;
             watcher = this.needsRefresh ? this : void 0;
             this.needsRefresh = this.isVolatileBinding;
-            const result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
-            watcher = previousWatcher;
+            let result;
+            try {
+                result = this.expression(source, context);
+            }
+            finally {
+                watcher = previousWatcher;
+            }
             return result;
         }
+        // backwards compat with v1 kernel
+        disconnect() {
+            this.dispose();
+        }
         dispose() {
             if (this.last !== null) {
                 let current = this.first;
@@ -218,22 +249,22 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
-         * @param binding - The binding to observe.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
+         * @param expression - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
-        binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+            return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
          * on every evaluation of the value.
-         * @param binding - The binding to inspect.
+         * @param expression - The binding to inspect.
          */
-        isVolatileBinding(binding) {
-            return volatileRegex.test(binding.toString());
+        isVolatileBinding(expression) {
+            return volatileRegex.test(expression.toString());
         },
     });
 });
@@ -261,7 +292,7 @@ export function volatile(target, name, descriptor) {
         },
     });
 }
-const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
+const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
     let current = null;
     return {
         get() {
@@ -276,120 +307,35 @@ const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
  * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
-export class ExecutionContext {
-    constructor(parentSource = null, parentContext = null) {
-        /**
-         * 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.parent = parentSource;
-        this.parentContext = parentContext;
-    }
-    /**
-     * The current event within an event handler.
-     */
-    get event() {
-        return contextEvent.get();
-    }
-    /**
-     * 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;
-    }
+export const ExecutionContext = Object.freeze({
     /**
-     * Indicates whether the current item within a repeat context
-     * is the first item in the collection.
+     * A default execution context.
      */
-    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;
-    }
-    /**
-     * Updates the position/size on a context associated with a list item.
-     * @param index - The new index of the item.
-     * @param length - The new length of the list.
-     */
-    updatePosition(index, length) {
-        this.index = index;
-        this.length = length;
-    }
-    /**
-     * Creates a new execution context descendent from the current context.
-     * @param source - The source for the context if different than the parent.
-     * @returns A child execution context.
-     */
-    createChildContext(parentSource) {
-        return new ExecutionContext(parentSource, this);
-    }
+    default: {
+        index: 0,
+        length: 0,
+        get event() {
+            return ExecutionContext.getEvent();
+        },
+        eventDetail() {
+            return this.event.detail;
+        },
+        eventTarget() {
+            return this.event.target;
+        },
+    },
     /**
-     * Creates a new execution context descent suitable for use in list rendering.
-     * @param item - The list item to serve as the source.
-     * @param index - The index of the item in the list.
-     * @param length - The length of the list.
+     * Gets the current event.
+     * @returns An event object.
      */
-    createItemContext(index, length) {
-        const childContext = Object.create(this);
-        childContext.index = index;
-        childContext.length = length;
-        return childContext;
-    }
+    getEvent() {
+        return contextEvent.get();
+    },
     /**
-     * Sets the event for the current execution context.
-     * @param event - The event to set.
-     * @internal
+     * Sets the current event.
+     * @param event - An event object.
      */
-    static setEvent(event) {
+    setEvent(event) {
         contextEvent.set(event);
-    }
-    /**
-     * Creates a new root execution context.
-     * @returns A new execution context.
-     */
-    static create() {
-        return new ExecutionContext();
-    }
-}
-/**
- * The default execution context.
- */
-ExecutionContext.default = new ExecutionContext();
-Observable.defineProperty(ExecutionContext.prototype, "index");
-Observable.defineProperty(ExecutionContext.prototype, "length");
+    },
+});

package/dist/esm/observation/update-queue.js

@@ -1,10 +1,10 @@
-import "../interfaces.js";
+import { KernelServiceId } from "../interfaces.js";
 import { FAST } from "../platform.js";
 /**
  * The default UpdateQueue.
  * @public
  */
-export const Updates = FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
+export const Updates = FAST.getById(KernelServiceId.updateQueue, () => {
     const tasks = [];
     const pendingErrors = [];
     const rAF = globalThis.requestAnimationFrame;

package/dist/esm/pending-task.js

@@ -0,0 +1,16 @@
+/**
+ * A concrete implementation of {@link PendingTask}
+ * @beta
+ */
+export class PendingTaskEvent extends Event {
+    constructor(complete) {
+        super(PendingTaskEvent.type, { bubbles: true, composed: true });
+        this.complete = complete;
+    }
+    static isPendingTask(value) {
+        var _a;
+        return (value.type === PendingTaskEvent.type &&
+            typeof ((_a = value.complete) === null || _a === void 0 ? void 0 : _a.then) === "function");
+    }
+}
+PendingTaskEvent.type = "pending-task";