@microsoft/fast-element 2.0.0-beta.4 → 2.0.0-beta.5

package/CHANGELOG.json

@@ -1,6 +1,57 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Thu, 18 Aug 2022 20:46:10 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.5",
+      "version": "2.0.0-beta.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "218cfc014f5c76464493725f83bd883e8b07defa",
+            "comment": "Fix ExpressionObserer bug where watcher was not reset if the binding threw"
+          },
+          {
+            "author": "prudepixie@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "fdd4514664691021a5673934c95acf31a8e73416",
+            "comment": "make insertbefore noop in view"
+          },
+          {
+            "author": "prudepixie@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "eb8d5a59f645b85567adadac41a3bfa66001f941",
+            "comment": "make sure default options for recycle gets set in different scenarios"
+          },
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "ac3954c97acd3bd549a27829593855c431a24027",
+            "comment": "refactor: remove dependency of DI on FASTElement"
+          },
+          {
+            "author": "32497422+KingOfTac@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "29308db7920baaaac5b31b206d551669e165bc06",
+            "comment": "add subpath export for package.json to packages"
+          },
+          {
+            "author": "prudepixie@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "775d51602cba544347ec1e57fdb4fea248d1b1b5",
+            "comment": "change default array strategy to merge strategy, update repeat directive"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "aeac1198f427c33f789a2d869f58549ea5bfea57",
+            "comment": "assert FASTElement's type so that instanceof behavior is consistent with other class implementations"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 18 Jul 2022 21:10:01 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.4",

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Mon, 18 Jul 2022 21:10:01 GMT and should not be manually modified.
+This log was last generated on Thu, 18 Aug 2022 20:46:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.5
+
+Thu, 18 Aug 2022 20:46:10 GMT
+
+### Changes
+
+- Fix ExpressionObserer bug where watcher was not reset if the binding threw (nicholasrice@users.noreply.github.com)
+- make insertbefore noop in view (prudepixie@users.noreply.github.com)
+- make sure default options for recycle gets set in different scenarios (prudepixie@users.noreply.github.com)
+- refactor: remove dependency of DI on FASTElement (roeisenb@microsoft.com)
+- add subpath export for package.json to packages (32497422+KingOfTac@users.noreply.github.com)
+- change default array strategy to merge strategy, update repeat directive (prudepixie@users.noreply.github.com)
+- assert FASTElement's type so that instanceof behavior is consistent with other class implementations (nicholasrice@users.noreply.github.com)
+
 ## 2.0.0-beta.4
 
 Mon, 18 Jul 2022 21:10:01 GMT

package/dist/dts/components/fast-element.d.ts

@@ -49,33 +49,17 @@ declare function compose<TType extends Constructable<HTMLElement> = Constructabl
 declare function compose<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): FASTElementDefinition<TType>;
 declare function define<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(this: TType, nameOrDef: string | PartialFASTElementDefinition): TType;
 declare function define<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
+declare function from<TBase extends typeof HTMLElement>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
 /**
  * A minimal base class for FASTElements that also provides
  * static helpers for working with FASTElements.
  * @public
  */
-export declare const FASTElement: (new () => HTMLElement & FASTElement) & {
-    /**
-     * Creates a new FASTElement base class inherited from the
-     * provided base type.
-     * @param BaseType - The base element type to inherit from.
-     */
-    from<TBase extends {
-        new (): HTMLElement;
-        prototype: HTMLElement;
-    }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
-    /**
-     * Defines a platform custom element based on the provided type and definition.
-     * @param type - The custom element type to define.
-     * @param nameOrDef - The name of the element to define or a definition object
-     * that describes the element to define.
-     */
+export declare const FASTElement: {
+    new (): FASTElement;
     define: typeof define;
-    /**
-     * Defines metadata for a FASTElement which can be used to later define the element.
-     * @public
-     */
     compose: typeof compose;
+    from: typeof from;
 };
 /**
  * Decorator: Defines a platform custom element based on `FASTElement`.

package/dist/dts/di/di.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
+ * for the bulk of this code and many of the associated tests.
+ */
 import { ContextDecorator } from "../context.js";
 import { Constructable } from "../interfaces.js";
 /**

package/dist/dts/interfaces.d.ts

@@ -186,7 +186,8 @@ export declare const enum Message {
     invalidResolver = 1510,
     invalidKey = 1511,
     noDefaultResolver = 1512,
-    cyclicDependency = 1513
+    cyclicDependency = 1513,
+    connectUpdateRequiresController = 1514
 }
 /**
  * @internal

package/dist/esm/components/fast-element.js

@@ -35,6 +35,9 @@ function define(type, nameOrDef) {
     }
     return FASTElementDefinition.compose(this, type).define().type;
 }
+function from(BaseType) {
+    return createFASTElement(BaseType);
+}
 /**
  * A minimal base class for FASTElements that also provides
  * static helpers for working with FASTElements.
@@ -46,9 +49,7 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * provided base type.
      * @param BaseType - The base element type to inherit from.
      */
-    from(BaseType) {
-        return createFASTElement(BaseType);
-    },
+    from,
     /**
      * Defines a platform custom element based on the provided type and definition.
      * @param type - The custom element type to define.

package/dist/esm/debug.js

@@ -28,6 +28,7 @@ const debugMessages = {
     [1511 /* invalidKey */]: "Key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?",
     [1512 /* noDefaultResolver */]: "'${key}' not registered. Did you forget to add @singleton()?",
     [1513 /* cyclicDependency */]: "Cyclic dependency found '${name}'.",
+    [1514 /* connectUpdateRequiresController */]: "Injected properties that are updated on changes to DOM connectivity require the target object to be an instance of FASTElement.",
 };
 const allPlaceholders = /(\$\{\w+?})/g;
 const placeholder = /\$\{(\w+?)}/g;

package/dist/esm/di/di.js

@@ -2,7 +2,6 @@
  * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
  * for the bulk of this code and many of the associated tests.
  */
-import { FASTElement } from "../components/fast-element.js";
 import { Context } from "../context.js";
 import "../interfaces.js";
 import { Metadata } from "../metadata.js";
@@ -372,8 +371,11 @@ export const DI = Object.freeze({
                         : DI.getOrCreateDOMContainer();
                     value = container.get(key);
                     this[diPropertyKey] = value;
-                    if (respectConnection && this instanceof FASTElement) {
+                    if (respectConnection) {
                         const notifier = this.$fastController;
+                        if (!notifier) {
+                            throw FAST.error(1514 /* Message.connectUpdateRequiresController */);
+                        }
                         const handleChange = () => {
                             const newContainer = DI.findResponsibleContainer(this);
                             const newValue = newContainer.get(key);

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

@@ -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() {

package/dist/esm/templating/repeat.js

@@ -88,6 +88,9 @@ export class RepeatBehavior {
             this.template = this.templateBindingObserver.observe(this.source, this.context);
             this.refreshAllViews(true);
         }
+        else if (!args[0]) {
+            return;
+        }
         else if (args[0].reset) {
             this.refreshAllViews();
         }
@@ -263,5 +266,5 @@ HTMLDirective.define(RepeatDirective);
 export function repeat(items, template, options = defaultRepeatOptions) {
     const dataBinding = normalizeBinding(items);
     const templateBinding = normalizeBinding(template);
-    return new RepeatDirective(dataBinding, templateBinding, options);
+    return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }

package/dist/esm/templating/view.js

@@ -51,8 +51,10 @@ export class HTMLView {
             node.parentNode.insertBefore(this.fragment, node);
         }
         else {
-            const parentNode = node.parentNode;
             const end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
             let current = this.firstChild;
             let next;
             while (current !== end) {

package/dist/fast-element.api.json

@@ -7424,52 +7424,7 @@
             },
             {
               "kind": "Content",
-              "text": "(new () => "
-            },
-            {
-              "kind": "Reference",
-              "text": "HTMLElement",
-              "canonicalReference": "!HTMLElement:interface"
-            },
-            {
-              "kind": "Content",
-              "text": " & "
-            },
-            {
-              "kind": "Reference",
-              "text": "FASTElement",
-              "canonicalReference": "@microsoft/fast-element!FASTElement:interface"
-            },
-            {
-              "kind": "Content",
-              "text": ") & {\n    from<TBase extends {\n        new (): "
-            },
-            {
-              "kind": "Reference",
-              "text": "HTMLElement",
-              "canonicalReference": "!HTMLElement:interface"
-            },
-            {
-              "kind": "Content",
-              "text": ";\n        prototype: "
-            },
-            {
-              "kind": "Reference",
-              "text": "HTMLElement",
-              "canonicalReference": "!HTMLElement:interface"
-            },
-            {
-              "kind": "Content",
-              "text": ";\n    }>(BaseType: TBase): new () => "
-            },
-            {
-              "kind": "Reference",
-              "text": "InstanceType",
-              "canonicalReference": "!InstanceType:type"
-            },
-            {
-              "kind": "Content",
-              "text": "<TBase> & "
+              "text": "{\n    new (): "
             },
             {
               "kind": "Reference",
@@ -7494,6 +7449,15 @@
               "text": "compose",
               "canonicalReference": "@microsoft/fast-element!~compose:function"
             },
+            {
+              "kind": "Content",
+              "text": ";\n    from: typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "from",
+              "canonicalReference": "@microsoft/fast-element!~from:function"
+            },
             {
               "kind": "Content",
               "text": ";\n}"
@@ -7503,7 +7467,7 @@
           "name": "FASTElement",
           "variableTypeTokenRange": {
             "startIndex": 1,
-            "endIndex": 18
+            "endIndex": 10
           }
         },
         {

package/dist/fast-element.d.ts

@@ -1157,28 +1157,11 @@ export declare interface FASTElement extends HTMLElement {
  * static helpers for working with FASTElements.
  * @public
  */
-export declare const FASTElement: (new () => HTMLElement & FASTElement) & {
-    /**
-     * Creates a new FASTElement base class inherited from the
-     * provided base type.
-     * @param BaseType - The base element type to inherit from.
-     */
-    from<TBase extends {
-        new (): HTMLElement;
-        prototype: HTMLElement;
-    }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
-    /**
-     * Defines a platform custom element based on the provided type and definition.
-     * @param type - The custom element type to define.
-     * @param nameOrDef - The name of the element to define or a definition object
-     * that describes the element to define.
-     */
+export declare const FASTElement: {
+    new (): FASTElement;
     define: typeof define;
-    /**
-     * Defines metadata for a FASTElement which can be used to later define the element.
-     * @public
-     */
     compose: typeof compose;
+    from: typeof from;
 };
 
 /**
@@ -1256,6 +1239,8 @@ export declare class FASTElementDefinition<TType extends Constructable<HTMLEleme
 
 /* Excluded from this release type: FASTGlobal */
 
+declare function from<TBase extends typeof HTMLElement>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
+
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.