@microsoft/fast-element 1.10.0 → 2.0.0-beta.1

package/dist/esm/observation/arrays.js

@@ -0,0 +1,269 @@
+import { emptyArray } from "../platform.js";
+import { SubscriberSet } from "./notifier.js";
+import { Observable } from "./observable.js";
+import { Updates } from "./update-queue.js";
+/**
+ * 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.
+ * @public
+ */
+export class Splice {
+    /**
+     * Creates a splice.
+     * @param index - The index that the splice occurs at.
+     * @param removed - The items that were removed.
+     * @param addedCount - The  number of items that were added.
+     */
+    constructor(index, removed, addedCount) {
+        this.index = index;
+        this.removed = removed;
+        this.addedCount = addedCount;
+    }
+    /**
+     * Adjusts the splice index based on the provided array.
+     * @param array - The array to adjust to.
+     * @returns The same splice, mutated based on the reference array.
+     */
+    adjustTo(array) {
+        let index = this.index;
+        const arrayLength = array.length;
+        if (index > arrayLength) {
+            index = arrayLength - this.addedCount;
+        }
+        else if (index < 0) {
+            index = arrayLength + this.removed.length + index - this.addedCount;
+        }
+        this.index = index < 0 ? 0 : index;
+        return this;
+    }
+}
+/**
+ * Indicates what level of feature support the splice
+ * strategy provides.
+ * @public
+ */
+export const SpliceStrategySupport = Object.freeze({
+    /**
+     * Only supports resets.
+     */
+    reset: 1,
+    /**
+     * Supports tracking splices and resets.
+     */
+    splice: 2,
+    /**
+     * Supports tracking splices and resets, while applying some form
+     * of optimization, such as merging, to the splices.
+     */
+    optimized: 3,
+});
+const reset = new Splice(0, emptyArray, 0);
+reset.reset = true;
+const resetSplices = [reset];
+let defaultSpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.splice,
+    normalize(previous, current, changes) {
+        return previous === void 0 ? changes !== null && changes !== void 0 ? changes : emptyArray : resetSplices;
+    },
+    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) {
+        const result = reverse.apply(array, args);
+        observer.reset(array);
+        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) {
+        const result = sort.apply(array, args);
+        observer.reset(array);
+        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;
+    },
+});
+/**
+ * Functionality related to tracking changes in arrays.
+ * @public
+ */
+export const SpliceStrategy = Object.freeze({
+    /**
+     * A set of changes that represent a full array reset.
+     */
+    reset: resetSplices,
+    /**
+     * Sets the default strategy to use for array observers.
+     * @param strategy - The splice strategy to use.
+     */
+    setDefaultStrategy(strategy) {
+        defaultSpliceStrategy = strategy;
+    },
+});
+function setNonEnumerable(target, property, value) {
+    Reflect.defineProperty(target, property, {
+        value,
+        enumerable: false,
+    });
+}
+class DefaultArrayObserver extends SubscriberSet {
+    constructor(subject) {
+        super(subject);
+        this.oldCollection = void 0;
+        this.splices = void 0;
+        this.needsQueue = true;
+        this._strategy = null;
+        this._lengthObserver = void 0;
+        this.call = this.flush;
+        setNonEnumerable(subject, "$fastController", this);
+    }
+    get strategy() {
+        return this._strategy;
+    }
+    set strategy(value) {
+        this._strategy = value;
+    }
+    get lengthObserver() {
+        let observer = this._lengthObserver;
+        if (observer === void 0) {
+            const array = this.subject;
+            this._lengthObserver = observer = {
+                length: array.length,
+                handleChange() {
+                    if (this.length !== array.length) {
+                        this.length = array.length;
+                        Observable.notify(observer, "length");
+                    }
+                },
+            };
+            this.subscribe(observer);
+        }
+        return observer;
+    }
+    subscribe(subscriber) {
+        this.flush();
+        super.subscribe(subscriber);
+    }
+    addSplice(splice) {
+        if (this.splices === void 0) {
+            this.splices = [splice];
+        }
+        else {
+            this.splices.push(splice);
+        }
+        this.enqueue();
+    }
+    reset(oldCollection) {
+        this.oldCollection = oldCollection;
+        this.enqueue();
+    }
+    flush() {
+        var _a;
+        const splices = this.splices;
+        const oldCollection = this.oldCollection;
+        if (splices === void 0 && oldCollection === void 0) {
+            return;
+        }
+        this.needsQueue = true;
+        this.splices = void 0;
+        this.oldCollection = void 0;
+        this.notify(((_a = this._strategy) !== null && _a !== void 0 ? _a : defaultSpliceStrategy).normalize(oldCollection, this.subject, splices));
+    }
+    enqueue() {
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            Updates.enqueue(this);
+        }
+    }
+}
+let enabled = false;
+/**
+ * An observer for arrays.
+ * @public
+ */
+export const ArrayObserver = Object.freeze({
+    /**
+     * Enables the array observation mechanism.
+     * @remarks
+     * Array observation is enabled automatically when using the
+     * {@link RepeatDirective}, so calling this API manually is
+     * not typically necessary.
+     */
+    enable() {
+        if (enabled) {
+            return;
+        }
+        enabled = true;
+        Observable.setArrayObserverFactory((collection) => new DefaultArrayObserver(collection));
+        const proto = Array.prototype;
+        if (!proto.$fastPatch) {
+            setNonEnumerable(proto, "$fastPatch", 1);
+            [
+                proto.pop,
+                proto.push,
+                proto.reverse,
+                proto.shift,
+                proto.sort,
+                proto.splice,
+                proto.unshift,
+            ].forEach(method => {
+                proto[method.name] = function (...args) {
+                    var _a;
+                    const o = this.$fastController;
+                    return o === void 0
+                        ? method.apply(this, args)
+                        : ((_a = o.strategy) !== null && _a !== void 0 ? _a : defaultSpliceStrategy)[method.name](this, o, method, args);
+                };
+            });
+        }
+    },
+});
+/**
+ * Enables observing the length of an array.
+ * @param array - The array to observe the length of.
+ * @returns The length of the array.
+ * @public
+ */
+export function length(array) {
+    if (!array) {
+        return 0;
+    }
+    let arrayObserver = array.$fastController;
+    if (arrayObserver === void 0) {
+        ArrayObserver.enable();
+        arrayObserver = Observable.getNotifier(array);
+    }
+    Observable.track(arrayObserver.lengthObserver, "length");
+    return array.length;
+}

package/dist/esm/observation/notifier.js

@@ -1,31 +1,7 @@
-function spilloverSubscribe(subscriber) {
-    const spillover = this.spillover;
-    const index = spillover.indexOf(subscriber);
-    if (index === -1) {
-        spillover.push(subscriber);
-    }
-}
-function spilloverUnsubscribe(subscriber) {
-    const spillover = this.spillover;
-    const index = spillover.indexOf(subscriber);
-    if (index !== -1) {
-        spillover.splice(index, 1);
-    }
-}
-function spilloverNotifySubscribers(args) {
-    const spillover = this.spillover;
-    const source = this.source;
-    for (let i = 0, ii = spillover.length; i < ii; ++i) {
-        spillover[i].handleChange(source, args);
-    }
-}
-function spilloverHas(subscriber) {
-    return this.spillover.indexOf(subscriber) !== -1;
-}
 /**
  * An implementation of {@link Notifier} that efficiently keeps track of
  * subscribers interested in a specific change notification on an
- * observable source.
+ * observable subject.
  *
  * @remarks
  * This set is optimized for the most common scenario of 1 or 2 subscribers.
@@ -35,15 +11,15 @@ function spilloverHas(subscriber) {
  */
 export class SubscriberSet {
     /**
-     * Creates an instance of SubscriberSet for the specified source.
-     * @param source - The object source that subscribers will receive notifications from.
+     * Creates an instance of SubscriberSet for the specified subject.
+     * @param subject - The subject that subscribers will receive notifications from.
      * @param initialSubscriber - An initial subscriber to changes.
      */
-    constructor(source, initialSubscriber) {
+    constructor(subject, initialSubscriber) {
         this.sub1 = void 0;
         this.sub2 = void 0;
         this.spillover = void 0;
-        this.source = source;
+        this.subject = subject;
         this.sub1 = initialSubscriber;
     }
     /**
@@ -51,42 +27,58 @@ export class SubscriberSet {
      * @param subscriber - The subscriber to test for inclusion in this set.
      */
     has(subscriber) {
-        return this.sub1 === subscriber || this.sub2 === subscriber;
+        return this.spillover === void 0
+            ? this.sub1 === subscriber || this.sub2 === subscriber
+            : this.spillover.indexOf(subscriber) !== -1;
     }
     /**
      * Subscribes to notification of changes in an object's state.
      * @param subscriber - The object that is subscribing for change notification.
      */
     subscribe(subscriber) {
-        if (this.has(subscriber)) {
-            return;
-        }
-        if (this.sub1 === void 0) {
-            this.sub1 = subscriber;
-            return;
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.has(subscriber)) {
+                return;
+            }
+            if (this.sub1 === void 0) {
+                this.sub1 = subscriber;
+                return;
+            }
+            if (this.sub2 === void 0) {
+                this.sub2 = subscriber;
+                return;
+            }
+            this.spillover = [this.sub1, this.sub2, subscriber];
+            this.sub1 = void 0;
+            this.sub2 = void 0;
         }
-        if (this.sub2 === void 0) {
-            this.sub2 = subscriber;
-            return;
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index === -1) {
+                spillover.push(subscriber);
+            }
         }
-        this.spillover = [this.sub1, this.sub2, subscriber];
-        this.subscribe = spilloverSubscribe;
-        this.unsubscribe = spilloverUnsubscribe;
-        this.notify = spilloverNotifySubscribers;
-        this.has = spilloverHas;
-        this.sub1 = void 0;
-        this.sub2 = void 0;
     }
     /**
      * Unsubscribes from notification of changes in an object's state.
      * @param subscriber - The object that is unsubscribing from change notification.
      */
     unsubscribe(subscriber) {
-        if (this.sub1 === subscriber) {
-            this.sub1 = void 0;
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.sub1 === subscriber) {
+                this.sub1 = void 0;
+            }
+            else if (this.sub2 === subscriber) {
+                this.sub2 = void 0;
+            }
         }
-        else if (this.sub2 === subscriber) {
-            this.sub2 = void 0;
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index !== -1) {
+                spillover.splice(index, 1);
+            }
         }
     }
     /**
@@ -94,14 +86,22 @@ export class SubscriberSet {
      * @param args - Data passed along to subscribers during notification.
      */
     notify(args) {
-        const sub1 = this.sub1;
-        const sub2 = this.sub2;
-        const source = this.source;
-        if (sub1 !== void 0) {
-            sub1.handleChange(source, args);
+        const spillover = this.spillover;
+        const subject = this.subject;
+        if (spillover === void 0) {
+            const sub1 = this.sub1;
+            const sub2 = this.sub2;
+            if (sub1 !== void 0) {
+                sub1.handleChange(subject, args);
+            }
+            if (sub2 !== void 0) {
+                sub2.handleChange(subject, args);
+            }
         }
-        if (sub2 !== void 0) {
-            sub2.handleChange(source, args);
+        else {
+            for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                spillover[i].handleChange(subject, args);
+            }
         }
     }
 }
@@ -112,25 +112,22 @@ export class SubscriberSet {
  */
 export class PropertyChangeNotifier {
     /**
-     * Creates an instance of PropertyChangeNotifier for the specified source.
-     * @param source - The object source that subscribers will receive notifications from.
+     * Creates an instance of PropertyChangeNotifier for the specified subject.
+     * @param subject - The object that subscribers will receive notifications for.
      */
-    constructor(source) {
+    constructor(subject) {
         this.subscribers = {};
-        this.sourceSubscribers = null;
-        this.source = source;
+        this.subjectSubscribers = null;
+        this.subject = subject;
     }
     /**
      * Notifies all subscribers, based on the specified property.
      * @param propertyName - The property name, passed along to subscribers during notification.
      */
     notify(propertyName) {
-        var _a;
-        const subscribers = this.subscribers[propertyName];
-        if (subscribers !== void 0) {
-            subscribers.notify(propertyName);
-        }
-        (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+        var _a, _b;
+        (_a = this.subscribers[propertyName]) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+        (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.notify(propertyName);
     }
     /**
      * Subscribes to notification of changes in an object's state.
@@ -138,19 +135,17 @@ export class PropertyChangeNotifier {
      * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
      */
     subscribe(subscriber, propertyToWatch) {
-        var _a;
+        var _a, _b;
+        let subscribers;
         if (propertyToWatch) {
-            let subscribers = this.subscribers[propertyToWatch];
-            if (subscribers === void 0) {
-                this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
-            }
-            subscribers.subscribe(subscriber);
+            subscribers =
+                (_a = this.subscribers[propertyToWatch]) !== null && _a !== void 0 ? _a : (this.subscribers[propertyToWatch] = new SubscriberSet(this.subject));
         }
         else {
-            this.sourceSubscribers =
-                (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
-            this.sourceSubscribers.subscribe(subscriber);
+            subscribers =
+                (_b = this.subjectSubscribers) !== null && _b !== void 0 ? _b : (this.subjectSubscribers = new SubscriberSet(this.subject));
         }
+        subscribers.subscribe(subscriber);
     }
     /**
      * Unsubscribes from notification of changes in an object's state.
@@ -158,15 +153,12 @@ export class PropertyChangeNotifier {
      * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
      */
     unsubscribe(subscriber, propertyToUnwatch) {
-        var _a;
+        var _a, _b;
         if (propertyToUnwatch) {
-            const subscribers = this.subscribers[propertyToUnwatch];
-            if (subscribers !== void 0) {
-                subscribers.unsubscribe(subscriber);
-            }
+            (_a = this.subscribers[propertyToUnwatch]) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
         }
         else {
-            (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+            (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.unsubscribe(subscriber);
         }
     }
 }