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

package/dist/esm/observation/observable.js

@@ -1,28 +1,27 @@
-import { DOM } from "../dom.js";
+import { isFunction, isString, } from "../interfaces.js";
 import { FAST } from "../platform.js";
+import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 /**
  * Common Observable APIs.
  * @public
  */
-export const Observable = FAST.getById(2 /* observable */, () => {
+export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+    const queueUpdate = Updates.enqueue;
     const volatileRegex = /(:|&&|\|\||if)/;
     const notifierLookup = new WeakMap();
     const accessorLookup = new WeakMap();
-    const queueUpdate = DOM.queueUpdate;
     let watcher = void 0;
     let createArrayObserver = (array) => {
-        throw new Error("Must call enableArrayObservation before observing arrays.");
+        throw FAST.error(1101 /* Message.needsArrayObservation */);
     };
     function getNotifier(source) {
-        let found = source.$fastController || notifierLookup.get(source);
+        var _a;
+        let found = (_a = source.$fastController) !== null && _a !== void 0 ? _a : notifierLookup.get(source);
         if (found === void 0) {
-            if (Array.isArray(source)) {
-                found = createArrayObserver(source);
-            }
-            else {
-                notifierLookup.set(source, (found = new PropertyChangeNotifier(source)));
-            }
+            Array.isArray(source)
+                ? (found = createArrayObserver(source))
+                : notifierLookup.set(source, (found = new PropertyChangeNotifier(source)));
         }
         return found;
     }
@@ -34,12 +33,7 @@ export const Observable = FAST.getById(2 /* observable */, () => {
                 accessors = accessorLookup.get(currentTarget);
                 currentTarget = Reflect.getPrototypeOf(currentTarget);
             }
-            if (accessors === void 0) {
-                accessors = [];
-            }
-            else {
-                accessors = accessors.slice(0);
-            }
+            accessors = accessors === void 0 ? [] : accessors.slice(0);
             accessorLookup.set(target, accessors);
         }
         return accessors;
@@ -62,7 +56,7 @@ export const Observable = FAST.getById(2 /* observable */, () => {
             if (oldValue !== newValue) {
                 source[field] = newValue;
                 const callback = source[this.callback];
-                if (typeof callback === "function") {
+                if (isFunction(callback)) {
                     callback.call(source, oldValue, newValue);
                 }
                 getNotifier(source).notify(this.name);
@@ -76,6 +70,7 @@ export const Observable = FAST.getById(2 /* observable */, () => {
             this.isVolatileBinding = isVolatileBinding;
             this.needsRefresh = true;
             this.needsQueue = true;
+            this.isAsync = true;
             this.first = this;
             this.last = null;
             this.propertySource = void 0;
@@ -83,18 +78,21 @@ export const Observable = FAST.getById(2 /* observable */, () => {
             this.notifier = void 0;
             this.next = void 0;
         }
+        setMode(isAsync) {
+            this.isAsync = this.needsQueue = isAsync;
+        }
         observe(source, context) {
             if (this.needsRefresh && this.last !== null) {
-                this.disconnect();
+                this.dispose();
             }
             const previousWatcher = watcher;
             watcher = this.needsRefresh ? this : void 0;
             this.needsRefresh = this.isVolatileBinding;
-            const result = this.binding(source, context);
+            const result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
             watcher = previousWatcher;
             return result;
         }
-        disconnect() {
+        dispose() {
             if (this.last !== null) {
                 let current = this.first;
                 while (current !== void 0) {
@@ -102,7 +100,7 @@ export const Observable = FAST.getById(2 /* observable */, () => {
                     current = current.next;
                 }
                 this.last = null;
-                this.needsRefresh = this.needsQueue = true;
+                this.needsRefresh = this.needsQueue = this.isAsync;
             }
         }
         watch(propertySource, propertyName) {
@@ -122,7 +120,7 @@ export const Observable = FAST.getById(2 /* observable */, () => {
                     watcher = void 0;
                     /* eslint-disable-next-line */
                     prevValue = prev.propertySource[prev.propertyName];
-                    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+                    /* eslint-disable-next-line */
                     watcher = this;
                     if (propertySource === prevValue) {
                         this.needsRefresh = true;
@@ -137,33 +135,22 @@ export const Observable = FAST.getById(2 /* observable */, () => {
                 this.needsQueue = false;
                 queueUpdate(this);
             }
+            else if (!this.isAsync) {
+                this.call();
+            }
         }
         call() {
             if (this.last !== null) {
-                this.needsQueue = true;
+                this.needsQueue = this.isAsync;
                 this.notify(this);
             }
         }
-        records() {
+        *records() {
             let next = this.first;
-            return {
-                next: () => {
-                    const current = next;
-                    if (current === undefined) {
-                        return { value: void 0, done: true };
-                    }
-                    else {
-                        next = next.next;
-                        return {
-                            value: current,
-                            done: false,
-                        };
-                    }
-                },
-                [Symbol.iterator]: function () {
-                    return this;
-                },
-            };
+            while (next !== void 0) {
+                yield next;
+                next = next.next;
+            }
         }
     }
     return Object.freeze({
@@ -185,18 +172,14 @@ export const Observable = FAST.getById(2 /* observable */, () => {
          * @param propertyName - The property to track as changed.
          */
         track(source, propertyName) {
-            if (watcher !== void 0) {
-                watcher.watch(source, propertyName);
-            }
+            watcher && watcher.watch(source, propertyName);
         },
         /**
          * Notifies watchers that the currently executing property getter or function is volatile
          * with respect to its observable dependencies.
          */
         trackVolatile() {
-            if (watcher !== void 0) {
-                watcher.needsRefresh = true;
-            }
+            watcher && (watcher.needsRefresh = true);
         },
         /**
          * Notifies subscribers of a source object of changes.
@@ -204,6 +187,7 @@ export const Observable = FAST.getById(2 /* observable */, () => {
          * @param args - The change args to pass to subscribers.
          */
         notify(source, args) {
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
             getNotifier(source).notify(args);
         },
         /**
@@ -213,16 +197,16 @@ export const Observable = FAST.getById(2 /* observable */, () => {
          * or a custom accessor that specifies the property name and accessor implementation.
          */
         defineProperty(target, nameOrAccessor) {
-            if (typeof nameOrAccessor === "string") {
+            if (isString(nameOrAccessor)) {
                 nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
             }
             getAccessors(target).push(nameOrAccessor);
             Reflect.defineProperty(target, nameOrAccessor.name, {
                 enumerable: true,
-                get: function () {
+                get() {
                     return nameOrAccessor.getValue(this);
                 },
-                set: function (newValue) {
+                set(newValue) {
                     nameOrAccessor.setValue(this, newValue);
                 },
             });
@@ -271,13 +255,13 @@ export function observable(target, nameOrAccessor) {
  */
 export function volatile(target, name, descriptor) {
     return Object.assign({}, descriptor, {
-        get: function () {
+        get() {
             Observable.trackVolatile();
             return descriptor.get.apply(this);
         },
     });
 }
-const contextEvent = FAST.getById(3 /* contextEvent */, () => {
+const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
     let current = null;
     return {
         get() {
@@ -293,7 +277,7 @@ const contextEvent = FAST.getById(3 /* contextEvent */, () => {
  * @public
  */
 export class ExecutionContext {
-    constructor() {
+    constructor(parentSource = null, parentContext = null) {
         /**
          * The index of the current item within a repeat context.
          */
@@ -302,14 +286,8 @@ export class ExecutionContext {
          * The length of the current collection within a repeat context.
          */
         this.length = 0;
-        /**
-         * The parent data object within a repeat context.
-         */
-        this.parent = null;
-        /**
-         * The parent execution context when in nested context scenarios.
-         */
-        this.parentContext = null;
+        this.parent = parentSource;
+        this.parentContext = parentContext;
     }
     /**
      * The current event within an event handler.
@@ -352,6 +330,47 @@ export class ExecutionContext {
     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);
+    }
+    /**
+     * 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.
+     */
+    createItemContext(index, length) {
+        const childContext = Object.create(this);
+        childContext.index = index;
+        childContext.length = length;
+        return childContext;
+    }
     /**
      * Sets the event for the current execution context.
      * @param event - The event to set.
@@ -360,11 +379,17 @@ export class ExecutionContext {
     static setEvent(event) {
         contextEvent.set(event);
     }
+    /**
+     * Creates a new root execution context.
+     * @returns A new execution context.
+     */
+    static create() {
+        return new ExecutionContext();
+    }
 }
-Observable.defineProperty(ExecutionContext.prototype, "index");
-Observable.defineProperty(ExecutionContext.prototype, "length");
 /**
- * The default execution context used in binding expressions.
- * @public
+ * The default execution context.
  */
-export const defaultExecutionContext = Object.seal(new ExecutionContext());
+ExecutionContext.default = new ExecutionContext();
+Observable.defineProperty(ExecutionContext.prototype, "index");
+Observable.defineProperty(ExecutionContext.prototype, "length");

package/dist/esm/observation/{array-change-records.js → splice-strategies.js}

@@ -1,23 +1,12 @@
 import { emptyArray } from "../platform.js";
-/** @internal */
-export function newSplice(index, removed, addedCount) {
-    return {
-        index: index,
-        removed: removed,
-        addedCount: addedCount,
-    };
-}
-const EDIT_LEAVE = 0;
-const EDIT_UPDATE = 1;
-const EDIT_ADD = 2;
-const EDIT_DELETE = 3;
+import { Splice, SpliceStrategy, SpliceStrategySupport, } from "./arrays.js";
 // 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' -> '123yyyy'
+//   '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
@@ -62,12 +51,12 @@ function spliceOperationsFromEditDistances(distances) {
     const edits = [];
     while (i > 0 || j > 0) {
         if (i === 0) {
-            edits.push(EDIT_ADD);
+            edits.push(2 /* Edit.add */);
             j--;
             continue;
         }
         if (j === 0) {
-            edits.push(EDIT_DELETE);
+            edits.push(3 /* Edit.delete */);
             i--;
             continue;
         }
@@ -83,28 +72,27 @@ function spliceOperationsFromEditDistances(distances) {
         }
         if (min === northWest) {
             if (northWest === current) {
-                edits.push(EDIT_LEAVE);
+                edits.push(0 /* Edit.leave */);
             }
             else {
-                edits.push(EDIT_UPDATE);
+                edits.push(1 /* Edit.update */);
                 current = northWest;
             }
             i--;
             j--;
         }
         else if (min === west) {
-            edits.push(EDIT_DELETE);
+            edits.push(3 /* Edit.delete */);
             i--;
             current = west;
         }
         else {
-            edits.push(EDIT_ADD);
+            edits.push(2 /* Edit.add */);
             j--;
             current = north;
         }
     }
-    edits.reverse();
-    return edits;
+    return edits.reverse();
 }
 function sharedPrefix(current, old, searchLength) {
     for (let i = 0; i < searchLength; ++i) {
@@ -146,20 +134,6 @@ function intersect(start1, end1, start2, end2) {
     return end1 - start1; // Contained
 }
 /**
- * Splice Projection functions:
- *
- * A splice map is a representation of how a previous array of items
- * was transformed into a new array of items. Conceptually it is a list of
- * tuples of
- *
- *   <index, removed, addedCount>
- *
- * which are kept in ascending index order of. The tuple represents that at
- * the |index|, |removed| sequence of items were removed, and counting forward
- * from |index|, |addedCount| items were added.
- */
-/**
- * @internal
  * @remarks
  * Lacking individual splice mutation information, the minimal set of
  * splices can be synthesized given the previous state and final state of an
@@ -170,7 +144,7 @@ function intersect(start1, end1, start2, end2) {
  *   l: The length of the current array
  *   p: The length of the old array
  */
-export function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
     let prefixCount = 0;
     let suffixCount = 0;
     const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
@@ -188,14 +162,14 @@ export function calcSplices(current, currentStart, currentEnd, old, oldStart, ol
         return emptyArray;
     }
     if (currentStart === currentEnd) {
-        const splice = newSplice(currentStart, [], 0);
+        const splice = new Splice(currentStart, [], 0);
         while (oldStart < oldEnd) {
             splice.removed.push(old[oldStart++]);
         }
         return [splice];
     }
     else if (oldStart === oldEnd) {
-        return [newSplice(currentStart, [], currentEnd - currentStart)];
+        return [new Splice(currentStart, [], currentEnd - currentStart)];
     }
     const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
     const splices = [];
@@ -204,7 +178,7 @@ export function calcSplices(current, currentStart, currentEnd, old, oldStart, ol
     let oldIndex = oldStart;
     for (let i = 0; i < ops.length; ++i) {
         switch (ops[i]) {
-            case EDIT_LEAVE:
+            case 0 /* Edit.leave */:
                 if (splice !== void 0) {
                     splices.push(splice);
                     splice = void 0;
@@ -212,25 +186,25 @@ export function calcSplices(current, currentStart, currentEnd, old, oldStart, ol
                 index++;
                 oldIndex++;
                 break;
-            case EDIT_UPDATE:
+            case 1 /* Edit.update */:
                 if (splice === void 0) {
-                    splice = newSplice(index, [], 0);
+                    splice = new Splice(index, [], 0);
                 }
                 splice.addedCount++;
                 index++;
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
                 break;
-            case EDIT_ADD:
+            case 2 /* Edit.add */:
                 if (splice === void 0) {
-                    splice = newSplice(index, [], 0);
+                    splice = new Splice(index, [], 0);
                 }
                 splice.addedCount++;
                 index++;
                 break;
-            case EDIT_DELETE:
+            case 3 /* Edit.delete */:
                 if (splice === void 0) {
-                    splice = newSplice(index, [], 0);
+                    splice = new Splice(index, [], 0);
                 }
                 splice.removed.push(old[oldIndex]);
                 oldIndex++;
@@ -243,9 +217,7 @@ export function calcSplices(current, currentStart, currentEnd, old, oldStart, ol
     }
     return splices;
 }
-const $push = Array.prototype.push;
-function mergeSplice(splices, index, removed, addedCount) {
-    const splice = newSplice(index, removed, addedCount);
+function merge(splice, splices) {
     let inserted = false;
     let insertionOffset = 0;
     for (let i = 0; i < splices.length; i++) {
@@ -271,14 +243,14 @@ function mergeSplice(splices, index, removed, addedCount) {
                 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);
-                    $push.apply(prepend, currentRemoved);
+                    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);
-                    $push.apply(currentRemoved, append);
+                    currentRemoved.push(...append);
                 }
                 splice.removed = currentRemoved;
                 if (current.index < splice.index) {
@@ -300,18 +272,12 @@ function mergeSplice(splices, index, removed, addedCount) {
         splices.push(splice);
     }
 }
-function createInitialSplices(changeRecords) {
-    const splices = [];
-    for (let i = 0, ii = changeRecords.length; i < ii; i++) {
-        const record = changeRecords[i];
-        mergeSplice(splices, record.index, record.removed, record.addedCount);
-    }
-    return splices;
-}
-/** @internal */
-export function projectArraySplices(array, changeRecords) {
+function project(array, changes) {
     let splices = [];
-    const initialSplices = createInitialSplices(changeRecords);
+    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) {
@@ -320,7 +286,115 @@ export function projectArraySplices(array, changeRecords) {
             }
             continue;
         }
-        splices = splices.concat(calcSplices(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+        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
+ */
+export const mergeSpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.optimized,
+    normalize(previous, current, changes) {
+        if (previous === void 0) {
+            if (changes === void 0) {
+                return emptyArray;
+            }
+            return changes.length > 1 ? project(current, changes) : changes;
+        }
+        return calc(current, 0, current.length, previous, 0, previous.length);
+    },
+    pop(array, observer, pop, args) {
+        const notEmpty = array.length > 0;
+        const result = pop.apply(array, args);
+        if (notEmpty) {
+            observer.addSplice(new Splice(array.length, [result], 0));
+        }
+        return result;
+    },
+    push(array, observer, push, args) {
+        const result = push.apply(array, args);
+        observer.addSplice(new Splice(array.length - args.length, [], args.length).adjustTo(array));
+        return result;
+    },
+    reverse(array, observer, reverse, args) {
+        observer.flush();
+        const oldArray = array.slice();
+        const result = reverse.apply(array, args);
+        observer.reset(oldArray);
+        return result;
+    },
+    shift(array, observer, shift, args) {
+        const notEmpty = array.length > 0;
+        const result = shift.apply(array, args);
+        if (notEmpty) {
+            observer.addSplice(new Splice(0, [result], 0));
+        }
+        return result;
+    },
+    sort(array, observer, sort, args) {
+        observer.flush();
+        const oldArray = array.slice();
+        const result = sort.apply(array, args);
+        observer.reset(oldArray);
+        return result;
+    },
+    splice(array, observer, splice, args) {
+        const result = splice.apply(array, args);
+        observer.addSplice(new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0).adjustTo(array));
+        return result;
+    },
+    unshift(array, observer, unshift, args) {
+        const result = unshift.apply(array, args);
+        observer.addSplice(new Splice(0, [], args.length).adjustTo(array));
+        return result;
+    },
+});
+/**
+ * A splice strategy that doesn't create splices, but instead
+ * tracks every change as a full array reset.
+ * @public
+ */
+export const resetSpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.reset,
+    normalize(previous, current, changes) {
+        return SpliceStrategy.reset;
+    },
+    pop(array, observer, pop, args) {
+        const result = pop.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    push(array, observer, push, args) {
+        const result = push.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    reverse(array, observer, reverse, args) {
+        const result = reverse.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    shift(array, observer, shift, args) {
+        const result = shift.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    sort(array, observer, sort, args) {
+        const result = sort.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    splice(array, observer, splice, args) {
+        const result = splice.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    unshift(array, observer, unshift, args) {
+        const result = unshift.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+});