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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/fast-element",
   "description": "A library for constructing Web Components",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -26,18 +26,10 @@
       "development": "./dist/esm/index.debug.js",
       "default": "./dist/esm/index.js"
     },
-    "./polyfills": {
-      "types": "./dist/dts/polyfills.d.ts",
-      "default": "./dist/esm/polyfills.js"
-    },
     "./debug": {
       "types": "./dist/dts/debug.d.ts",
       "default": "./dist/esm/debug.js"
     },
-    "./observation/splice-strategies": {
-      "types": "./dist/dts/observation/splice-strategies.d.ts",
-      "default": "./dist/esm/observation/splice-strategies.js"
-    },
     "./binding/two-way": {
       "types": "./dist/dts/templating/binding-two-way.d.ts",
       "default": "./dist/esm/templating/binding-two-way.js"
@@ -46,13 +38,17 @@
       "types": "./dist/dts/templating/binding-signal.d.ts",
       "default": "./dist/esm/templating/binding-signal.js"
     },
+    "./render": {
+      "types": "./dist/dts/templating/render.d.ts",
+      "default": "./dist/esm/templating/render.js"
+    },
     "./utilities": {
       "types": "./dist/dts/utilities.d.ts",
       "default": "./dist/esm/utilities.js"
     },
-    "./hooks": {
-      "types": "./dist/dts/hooks.d.ts",
-      "default": "./dist/esm/hooks.js"
+    "./state": {
+      "types": "./dist/dts/state/exports.d.ts",
+      "default": "./dist/esm/state/exports.js"
     },
     "./context": {
       "types": "./dist/dts/context.d.ts",
@@ -61,12 +57,38 @@
     "./metadata": {
       "types": "./dist/dts/metadata.d.ts",
       "default": "./dist/esm/metadata.js"
-    }
+    },
+    "./testing": {
+      "types": "./dist/dts/testing/exports.d.ts",
+      "default": "./dist/esm/testing/exports.js"
+    },
+    "./di": {
+      "types": "./dist/dts/di/di.d.ts",
+      "default": "./dist/esm/di/di.js"
+    },
+    "./element-hydration": {
+      "types": "./dist/dts/components/hydration.d.ts",
+      "default": "./dist/esm/components/hydration.js"
+    },
+    "./install-element-hydration": {
+      "types": "./dist/dts/components/install-hydration.d.ts",
+      "default": "./dist/esm/components/install-hydration.js"
+    },
+    "./pending-task": {
+      "types": "./dist/dts/pending-task.d.ts",
+      "default": "./dist/esm/pending-task.js"
+    },
+    "./dom-policy": {
+      "types": "./dist/dts/dom-policy.d.ts",
+      "default": "./dist/esm/dom-policy.js"
+    },
+    "./package.json": "./package.json"
   },
   "unpkg": "dist/fast-element.min.js",
   "sideEffects": [
     "./dist/esm/debug.js",
-    "./dist/esm/polyfills.js"
+    "./dist/esm/polyfills.js",
+    "./dist/esm/components/install-hydration.js"
   ],
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
@@ -98,7 +120,7 @@
     "@microsoft/api-extractor": "7.24.2",
     "@types/chai": "^4.2.11",
     "@types/chai-spies": "^1.0.3",
-    "@types/karma": "^5.0.0",
+    "@types/karma": "^6.3.3",
     "@types/mocha": "^7.0.2",
     "@types/webpack-env": "^1.15.2",
     "chai": "^4.2.0",
@@ -109,7 +131,7 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jsdom": "^16.2.2",
     "jsdom-global": "3.0.2",
-    "karma": "^5.0.4",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.2",
     "karma-coverage-istanbul-reporter": "^3.0.0",

package/dist/dts/hooks.d.ts

@@ -1,20 +0,0 @@
-import { BindingObserver } from "./observation/observable.js";
-/**
- * Functions used for getting and setting a stateful value.
- * @beta
- */
-export declare type State<T> = [() => T, (newValue: T) => T];
-/**
- * Creates an observable state value.
- * @param value The initial state value.
- * @param deep Whether or not to convert the state value to an observable.
- * @returns The state accessor functions.
- * @beta
- */
-export declare function useState<T>(value: T, deep?: boolean): State<T>;
-/**
- * Executes an action once, and then whenever any of its dependent state changes.
- * @param action An action that is affected by state changes.
- * @returns A BindingObserver which can be used to dispose of the effect.
- */
-export declare function useEffect(action: () => void): BindingObserver;

package/dist/dts/observation/behavior.d.ts

@@ -1,19 +0,0 @@
-import type { ExecutionContext } from "./observable.js";
-/**
- * Represents an object that can contribute behavior to a view or
- * element's bind/unbind operations.
- * @public
- */
-export interface Behavior<TSource = any, TParent = any> {
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    bind(source: TSource, context: ExecutionContext<TParent>): void;
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    unbind(source: TSource, context: ExecutionContext<TParent>): void;
-}

package/dist/dts/observation/splice-strategies.d.ts

@@ -1,13 +0,0 @@
-import { SpliceStrategy } from "./arrays.js";
-/**
- * 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 declare const mergeSpliceStrategy: SpliceStrategy;
-/**
- * A splice strategy that doesn't create splices, but instead
- * tracks every change as a full array reset.
- * @public
- */
-export declare const resetSpliceStrategy: SpliceStrategy;

package/dist/dts/templating/dom.d.ts

@@ -1,41 +0,0 @@
-import type { Callable } from "../interfaces.js";
-/**
- * Common DOM APIs.
- * @public
- */
-export declare const DOM: Readonly<{
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: (callable: Callable) => void;
-    /**
-     * @deprecated
-     * Use Updates.next()
-     */
-    nextUpdate: () => Promise<void>;
-    /**
-     * @deprecated
-     * Use Updates.process()
-     */
-    processUpdates: () => void;
-    /**
-     * Sets an attribute value on an element.
-     * @param element - The element to set the attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is `null` or `undefined`, the attribute is removed, otherwise
-     * it is set to the provided value using the standard `setAttribute` API.
-     */
-    setAttribute(element: HTMLElement, attributeName: string, value: any): void;
-    /**
-     * Sets a boolean attribute value.
-     * @param element - The element to set the boolean attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is true, the attribute is added; otherwise it is removed.
-     */
-    setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
-}>;

package/dist/esm/hooks.js

@@ -1,32 +0,0 @@
-import { Observable } from "./observation/observable.js";
-import { makeObservable } from "./utilities.js";
-/**
- * Creates an observable state value.
- * @param value The initial state value.
- * @param deep Whether or not to convert the state value to an observable.
- * @returns The state accessor functions.
- * @beta
- */
-export function useState(value, deep = false) {
-    const host = makeObservable({ value }, deep);
-    return [() => host.value, newValue => (host.value = newValue)];
-}
-const effectModel = Object.freeze({});
-/**
- * Executes an action once, and then whenever any of its dependent state changes.
- * @param action An action that is affected by state changes.
- * @returns A BindingObserver which can be used to dispose of the effect.
- */
-export function useEffect(action) {
-    /* eslint prefer-const: 0 */
-    let observer;
-    const subscriber = {
-        handleChange() {
-            observer.observe(effectModel);
-        },
-    };
-    observer = Observable.binding(action, subscriber);
-    observer.setMode(false);
-    subscriber.handleChange();
-    return observer;
-}

package/dist/esm/observation/splice-strategies.js

@@ -1,400 +0,0 @@
-import { emptyArray } from "../platform.js";
-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' 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
- */
-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;
-    },
-});

package/dist/esm/templating/dom.js

@@ -1,49 +0,0 @@
-import { Updates } from "../observation/update-queue.js";
-/**
- * Common DOM APIs.
- * @public
- */
-export const DOM = Object.freeze({
-    /**
-     * @deprecated
-     * Use Updates.enqueue().
-     */
-    queueUpdate: Updates.enqueue,
-    /**
-     * @deprecated
-     * Use Updates.next()
-     */
-    nextUpdate: Updates.next,
-    /**
-     * @deprecated
-     * Use Updates.process()
-     */
-    processUpdates: Updates.process,
-    /**
-     * Sets an attribute value on an element.
-     * @param element - The element to set the attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is `null` or `undefined`, the attribute is removed, otherwise
-     * it is set to the provided value using the standard `setAttribute` API.
-     */
-    setAttribute(element, attributeName, value) {
-        value === null || value === undefined
-            ? element.removeAttribute(attributeName)
-            : element.setAttribute(attributeName, value);
-    },
-    /**
-     * Sets a boolean attribute value.
-     * @param element - The element to set the boolean attribute value on.
-     * @param attributeName - The attribute name to set.
-     * @param value - The value of the attribute to set.
-     * @remarks
-     * If the value is true, the attribute is added; otherwise it is removed.
-     */
-    setBooleanAttribute(element, attributeName, value) {
-        value
-            ? element.setAttribute(attributeName, "")
-            : element.removeAttribute(attributeName);
-    },
-});