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

package/dist/esm/interfaces.js

@@ -6,3 +6,7 @@ export const isFunction = (object) => typeof object === "function";
  * @internal
  */
 export const isString = (object) => typeof object === "string";
+/**
+ * @internal
+ */
+export const noop = () => void 0;

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

@@ -63,7 +63,7 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
+    class ExpressionNotifierImplementation extends SubscriberSet {
         constructor(binding, initialSubscriber, isVolatileBinding = false) {
             super(binding, initialSubscriber);
             this.binding = binding;
@@ -88,8 +88,13 @@ 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.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+            }
+            finally {
+                watcher = previousWatcher;
+            }
             return result;
         }
         dispose() {
@@ -218,14 +223,14 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
          * @param binding - 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);
+            return new ExpressionNotifierImplementation(binding, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated

package/dist/esm/platform.js

@@ -26,7 +26,7 @@ if (FAST.error === void 0) {
     Object.assign(FAST, {
         warn() { },
         error(code) {
-            return new Error(`Code ${code}`);
+            return new Error(`Error ${code}`);
         },
         addMessages() { },
     });

package/dist/esm/state/exports.js

@@ -0,0 +1,3 @@
+export { reactive } from "./reactive.js";
+export { watch } from "./watch.js";
+export * from "./state.js";

package/dist/esm/state/reactive.js

@@ -0,0 +1,34 @@
+import { noop } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { visitObject } from "./visitor.js";
+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);
+                }
+            },
+        });
+    },
+};
+/**
+ * Converts a plain object to a reactive, observable object.
+ * @param object - The object to make reactive.
+ * @param deep - Indicates whether or not to deeply convert the oject.
+ * @returns The converted object.
+ * @beta
+ */
+export function reactive(object, deep = false) {
+    visitObject(object, deep, makeObserverVisitor, void 0, observed);
+    return object;
+}

package/dist/esm/state/state.js

@@ -0,0 +1,148 @@
+// Inspired by https://www.starbeamjs.com/
+import { isFunction, isString } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { reactive } from "./reactive.js";
+const defaultStateOptions = {
+    deep: false,
+};
+/**
+ * Creates a reactive state value.
+ * @param value - The initial state value.
+ * @param options - Options to customize the state or a friendly name.
+ * @returns A State instance.
+ * @beta
+ */
+export function state(value, options = defaultStateOptions) {
+    var _a;
+    if (isString(options)) {
+        options = { deep: false, name: options };
+    }
+    const host = reactive({ value }, options.deep);
+    const state = (() => host.value);
+    Object.defineProperty(state, "current", {
+        get: () => host.value,
+        set: (value) => (host.value = value),
+    });
+    Object.defineProperty(state, "name", {
+        value: (_a = options.name) !== null && _a !== void 0 ? _a : "SharedState",
+    });
+    state.set = (value) => (host.value = value);
+    state.asReadonly = () => {
+        const readonlyState = (() => host.value);
+        Object.defineProperty(readonlyState, "current", {
+            get: () => host.value,
+        });
+        Object.defineProperty(readonlyState, "name", {
+            value: `${state.name} (Readonly)`,
+        });
+        return Object.freeze(readonlyState);
+    };
+    return state;
+}
+/**
+ * Creates a reactive state that has its value associated with a specific owner.
+ * @param value - The initial value or a factory that provides an initial value for each owner.
+ * @param options - Options to customize the state or a friendly name.
+ * @returns An OwnedState instance.
+ * @beta
+ */
+export function ownedState(value, options = defaultStateOptions) {
+    var _a;
+    if (isString(options)) {
+        options = { deep: false, name: options };
+    }
+    if (!isFunction(value)) {
+        const v = value;
+        value = () => v;
+    }
+    const storage = new WeakMap();
+    const getHost = (owner) => {
+        let host = storage.get(owner);
+        if (host === void 0) {
+            host = reactive({ value: value() }, options.deep);
+            storage.set(owner, host);
+        }
+        return host;
+    };
+    const state = ((owner) => getHost(owner).value);
+    Object.defineProperty(state, "name", {
+        value: (_a = options.name) !== null && _a !== void 0 ? _a : "OwnedState",
+    });
+    state.set = (owner, value) => (getHost(owner).value = value);
+    state.asReadonly = () => {
+        const readonlyState = ((owner) => getHost(owner).value);
+        Object.defineProperty(readonlyState, "name", {
+            value: `${state.name} (Readonly)`,
+        });
+        return Object.freeze(readonlyState);
+    };
+    return state;
+}
+/**
+ * Creates a ComputedState.
+ * @param initialize - The initialization callback.
+ * @param name - A friendly name for this computation.
+ * @returns A ComputedState
+ * @beta
+ */
+export function computedState(initialize, name = "ComputedState") {
+    let setupCallback = null;
+    const builder = {
+        on: {
+            setup(callback) {
+                setupCallback = callback;
+            },
+        },
+    };
+    const computer = initialize(builder);
+    const host = reactive({ value: null }, false);
+    const output = (() => host.value);
+    Object.defineProperty(output, "current", {
+        get: () => host.value,
+    });
+    Object.defineProperty(output, "name", {
+        value: name,
+    });
+    // eslint-disable-next-line prefer-const
+    let computedNotifier;
+    const computedSubscriber = {
+        handleChange() {
+            host.value = computedNotifier.observe(null);
+        },
+    };
+    computedNotifier = Observable.binding(computer, computedSubscriber);
+    computedNotifier.setMode(false);
+    let cleanup;
+    let setupNotifier;
+    if (setupCallback) {
+        const setupSubscriber = {
+            handleChange() {
+                if (cleanup) {
+                    cleanup();
+                }
+                cleanup = setupNotifier.observe(null);
+                host.value = computer();
+            },
+        };
+        setupNotifier = Observable.binding(setupCallback, setupSubscriber);
+        setupNotifier.setMode(false);
+        cleanup = setupNotifier.observe(null);
+    }
+    host.value = computedNotifier.observe(null);
+    output.dispose = () => {
+        if (cleanup) {
+            cleanup();
+        }
+        if (setupNotifier) {
+            setupNotifier.dispose();
+        }
+        computedNotifier.dispose();
+    };
+    output.subscribe = (subscriber) => {
+        computedNotifier.subscribe(subscriber);
+    };
+    output.unsubscribe = (subscriber) => {
+        computedNotifier.unsubscribe(subscriber);
+    };
+    return output;
+}

package/dist/esm/state/visitor.js

@@ -0,0 +1,28 @@
+function shouldTraverse(value, traversed) {
+    return (value !== null &&
+        value !== void 0 &&
+        typeof value === "object" &&
+        !traversed.has(value));
+}
+export function visitObject(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) {
+            visitObject(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) {
+                visitObject(value, deep, visitor, data, traversed);
+            }
+        }
+    }
+}

package/dist/esm/state/watch.js

@@ -0,0 +1,36 @@
+import { isFunction, noop } from "../interfaces.js";
+import { ArrayObserver } from "../observation/arrays.js";
+import { Observable } from "../observation/observable.js";
+import { visitObject } from "./visitor.js";
+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,
+};
+/**
+ * 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();
+    visitObject(object, true, watchVisitor, data, new Set());
+    return {
+        dispose() {
+            for (const n of data.notifiers) {
+                n.unsubscribe(data.subscriber);
+            }
+        },
+    };
+}

package/dist/esm/styles/element-styles.js

@@ -71,6 +71,20 @@ export class ElementStyles {
     static setDefaultStrategy(Strategy) {
         DefaultStyleStrategy = Strategy;
     }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
 }
 /**
  * Indicates whether the DOM supports the adoptedStyleSheets feature.