@microsoft/fast-element 2.0.0-beta.10 → 2.0.0-beta.12

package/CHANGELOG.json

@@ -1,6 +1,44 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Thu, 06 Oct 2022 23:21:20 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.12",
+      "version": "2.0.0-beta.12",
+      "comments": {
+        "none": [
+          {
+            "author": "863023+radium-v@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "c06e32d72d518bf5c3152efe4e666f233190b445",
+            "comment": "upgrade karma to ^6.4.1"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "a69c2e3c0700918fef5ba934909781cc8ab71384",
+            "comment": "fix: repeat update view context positioning"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 05 Oct 2022 23:26:01 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.11",
+      "version": "2.0.0-beta.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "21d1de94be2b9399ddc43a2b93c6483fa7304591",
+            "comment": "fix: removed a shadowRoot leak from ElementController"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 03 Oct 2022 23:44:38 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.10",

package/CHANGELOG.md

@@ -1,9 +1,25 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Mon, 03 Oct 2022 23:44:38 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Oct 2022 23:21:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.12
+
+Thu, 06 Oct 2022 23:21:20 GMT
+
+### Changes
+
+- fix: repeat update view context positioning (roeisenb@microsoft.com)
+
+## 2.0.0-beta.11
+
+Wed, 05 Oct 2022 23:26:01 GMT
+
+### Changes
+
+- fix: removed a shadowRoot leak from ElementController (nicholasrice@users.noreply.github.com)
+
 ## 2.0.0-beta.10
 
 Mon, 03 Oct 2022 23:44:38 GMT

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

@@ -1,8 +1,9 @@
+import { StyleStrategy, StyleTarget } from "../interfaces.js";
 import type { HostBehavior, HostController } from "../styles/host.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import type { ElementViewTemplate } from "../templating/template.js";
 import type { ElementView } from "../templating/view.js";
-import type { ElementStyles } from "../styles/element-styles.js";
+import { ElementStyles } from "../styles/element-styles.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
@@ -124,3 +125,27 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      */
     static forCustomElement(element: HTMLElement): ElementController;
 }
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+export declare class AdoptedStyleSheetsStrategy implements StyleStrategy {
+    private static styleSheetCache;
+    /** @internal */
+    readonly sheets: CSSStyleSheet[];
+    constructor(styles: (string | CSSStyleSheet)[]);
+    addStylesTo(target: StyleTarget): void;
+    removeStylesFrom(target: StyleTarget): void;
+}
+/**
+ * @internal
+ */
+export declare class StyleElementStrategy implements StyleStrategy {
+    private readonly styles;
+    private readonly styleClass;
+    constructor(styles: string[]);
+    addStylesTo(target: StyleTarget): void;
+    removeStylesFrom(target: StyleTarget): void;
+}

package/dist/dts/index.d.ts

@@ -24,4 +24,4 @@ export * from "./templating/node-observation.js";
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";
 export * from "./components/attributes.js";
-export * from "./components/element-controller.js";
+export { ElementController } from "./components/element-controller.js";

package/dist/dts/interfaces.d.ts

@@ -112,14 +112,13 @@ export declare const enum KernelServiceId {
     updateQueue = 1,
     observable = 2,
     contextEvent = 3,
-    elementRegistry = 4,
-    styleSheetStrategy = 5
+    elementRegistry = 4
 }
 /**
  * A node that can be targeted by styles.
  * @public
  */
-export interface StyleTarget {
+export interface StyleTarget extends Pick<Node, "getRootNode"> {
     /**
      * Stylesheets to be adopted by the node.
      */

package/dist/dts/platform.d.ts

@@ -1,4 +1,5 @@
 import type { FASTGlobal } from "./interfaces.js";
+import "./polyfills.js";
 /**
  * The FAST global.
  * @internal

package/dist/dts/polyfills.d.ts

@@ -1,8 +1 @@
-import type { StyleStrategy, StyleTarget } from "./interfaces.js";
-export declare class StyleElementStrategy implements StyleStrategy {
-    private readonly styles;
-    private readonly styleClass;
-    constructor(styles: string[]);
-    addStylesTo(target: StyleTarget): void;
-    removeStylesFrom(target: StyleTarget): void;
-}
+export {};

package/dist/dts/styles/element-styles.d.ts

@@ -1,4 +1,4 @@
-import { StyleStrategy, StyleTarget } from "../interfaces.js";
+import type { StyleStrategy, StyleTarget } from "../interfaces.js";
 import type { HostBehavior } from "./host.js";
 /**
  * Represents styles that can be composed into the ShadowDOM of a custom element.
@@ -69,16 +69,3 @@ export declare class ElementStyles {
      */
     static readonly supportsAdoptedStyleSheets: boolean;
 }
-/**
- * https://wicg.github.io/construct-stylesheets/
- * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
- *
- * @internal
- */
-export declare class AdoptedStyleSheetsStrategy implements StyleStrategy {
-    /** @internal */
-    readonly sheets: CSSStyleSheet[];
-    constructor(styles: (string | CSSStyleSheet)[]);
-    addStylesTo(target: StyleTarget): void;
-    removeStylesFrom(target: StyleTarget): void;
-}

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

@@ -3,6 +3,7 @@ import { Expression, ExpressionObserver } from "../observation/observable.js";
 import { Splice } from "../observation/arrays.js";
 import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import type { CaptureType, SyntheticViewTemplate, ViewTemplate } from "./template.js";
+import { SyntheticView } from "./view.js";
 /**
  * Options for configuring repeat behavior.
  * @public
@@ -25,13 +26,14 @@ export declare class RepeatBehavior<TSource = any> implements ViewBehavior, Subs
     private directive;
     private location;
     private controller;
-    private views;
     private template;
     private templateBindingObserver;
     private items;
     private itemsObserver;
     private itemsBindingObserver;
     private bindView;
+    /** @internal */
+    views: SyntheticView[];
     /**
      * Creates an instance of RepeatBehavior.
      * @param location - The location in the DOM to render the repeat.

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

@@ -2,6 +2,7 @@ import "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import { Observable, SourceLifetime } from "../observation/observable.js";
 import { FAST } from "../platform.js";
+import { ElementStyles } from "../styles/element-styles.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
 const defaultEventOptions = {
     bubbles: true,
@@ -210,13 +211,13 @@ export class ElementController extends PropertyChangeNotifier {
             return;
         }
         const source = this.source;
-        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : this.source;
             target.append(styles);
         }
-        else if (!styles.isAttachedTo(target)) {
+        else if (!styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.addStylesTo(target);
+            styles.addStylesTo(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
                     this.addBehavior(sourceBehaviors[i]);
@@ -234,13 +235,13 @@ export class ElementController extends PropertyChangeNotifier {
             return;
         }
         const source = this.source;
-        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source;
             target.removeChild(styles);
         }
-        else if (styles.isAttachedTo(target)) {
+        else if (styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.removeStylesFrom(target);
+            styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
                     this.addBehavior(sourceBehaviors[i]);
@@ -375,3 +376,91 @@ export class ElementController extends PropertyChangeNotifier {
         return (element.$fastController = new ElementController(element, definition));
     }
 }
+/**
+ * Converts a styleTarget into the operative target. When the provided target is an Element
+ * that is a FASTElement, the function will return the ShadowRoot for that element. Otherwise,
+ * it will return the root node for the element.
+ * @param target
+ * @returns
+ */
+function normalizeStyleTarget(target) {
+    var _a;
+    if ("adoptedStyleSheets" in target) {
+        return target;
+    }
+    else {
+        return ((_a = getShadowRoot(target)) !== null && _a !== void 0 ? _a : target.getRootNode());
+    }
+}
+// Default StyleStrategy implementations are defined in this module because they
+// require access to element shadowRoots, and we don't want to leak shadowRoot
+// objects out of this module.
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+export class AdoptedStyleSheetsStrategy {
+    constructor(styles) {
+        const styleSheetCache = AdoptedStyleSheetsStrategy.styleSheetCache;
+        this.sheets = styles.map((x) => {
+            if (x instanceof CSSStyleSheet) {
+                return x;
+            }
+            let sheet = styleSheetCache.get(x);
+            if (sheet === void 0) {
+                sheet = new CSSStyleSheet();
+                sheet.replaceSync(x);
+                styleSheetCache.set(x, sheet);
+            }
+            return sheet;
+        });
+    }
+    addStylesTo(target) {
+        const t = normalizeStyleTarget(target);
+        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+    }
+    removeStylesFrom(target) {
+        const t = normalizeStyleTarget(target);
+        const sheets = this.sheets;
+        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+    }
+}
+AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
+let id = 0;
+const nextStyleId = () => `fast-${++id}`;
+function usableStyleTarget(target) {
+    return target === document ? document.body : target;
+}
+/**
+ * @internal
+ */
+export class StyleElementStrategy {
+    constructor(styles) {
+        this.styles = styles;
+        this.styleClass = nextStyleId();
+    }
+    addStylesTo(target) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = this.styles;
+        const styleClass = this.styleClass;
+        for (let i = 0; i < styles.length; i++) {
+            const element = document.createElement("style");
+            element.innerHTML = styles[i];
+            element.className = styleClass;
+            target.append(element);
+        }
+    }
+    removeStylesFrom(target) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = target.querySelectorAll(`.${this.styleClass}`);
+        styles[0].parentNode;
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
+    }
+}
+ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
+    ? AdoptedStyleSheetsStrategy
+    : StyleElementStrategy);

package/dist/esm/index.js

@@ -27,4 +27,4 @@ export * from "./templating/node-observation.js";
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";
 export * from "./components/attributes.js";
-export * from "./components/element-controller.js";
+export { ElementController } from "./components/element-controller.js";

package/dist/esm/platform.js

@@ -1,3 +1,4 @@
+import "./polyfills.js";
 // ensure FAST global - duplicated in polyfills.ts and debug.ts
 const propConfig = {
     configurable: false,

package/dist/esm/polyfills.js

@@ -28,58 +28,4 @@ if (!globalThis.trustedTypes) {
         createPolicy: (n, r) => r,
     };
 }
-// ensure FAST global - duplicated in platform.ts
-const propConfig = {
-    configurable: false,
-    enumerable: false,
-    writable: false,
-};
-if (globalThis.FAST === void 0) {
-    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
-}
-const FAST = globalThis.FAST;
-if (FAST.getById === void 0) {
-    const storage = Object.create(null);
-    Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
-            let found = storage[id];
-            if (found === void 0) {
-                found = initialize ? (storage[id] = initialize()) : null;
-            }
-            return found;
-        } }, propConfig));
-}
-// duplicated from DOM
-const supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
-    "replace" in CSSStyleSheet.prototype;
-function usableStyleTarget(target) {
-    return target === document ? document.body : target;
-}
-let id = 0;
-const nextStyleId = () => `fast-${++id}`;
-export class StyleElementStrategy {
-    constructor(styles) {
-        this.styles = styles;
-        this.styleClass = nextStyleId();
-    }
-    addStylesTo(target) {
-        target = usableStyleTarget(target);
-        const styles = this.styles;
-        const styleClass = this.styleClass;
-        for (let i = 0; i < styles.length; i++) {
-            const element = document.createElement("style");
-            element.innerHTML = styles[i];
-            element.className = styleClass;
-            target.append(element);
-        }
-    }
-    removeStylesFrom(target) {
-        const styles = target.querySelectorAll(`.${this.styleClass}`);
-        target = usableStyleTarget(target);
-        for (let i = 0, ii = styles.length; i < ii; ++i) {
-            target.removeChild(styles[i]);
-        }
-    }
-}
-if (!supportsAdoptedStyleSheets) {
-    FAST.getById(/* KernelServiceId.styleSheetStrategy */ 5, () => StyleElementStrategy);
-}
+export {};

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

@@ -1,6 +1,3 @@
-import { FAST } from "../platform.js";
-import "../interfaces.js";
-const styleSheetCache = new Map();
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
     return styles
@@ -91,33 +88,3 @@ export class ElementStyles {
  */
 ElementStyles.supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
     "replace" in CSSStyleSheet.prototype;
-/**
- * https://wicg.github.io/construct-stylesheets/
- * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
- *
- * @internal
- */
-export class AdoptedStyleSheetsStrategy {
-    constructor(styles) {
-        this.sheets = styles.map((x) => {
-            if (x instanceof CSSStyleSheet) {
-                return x;
-            }
-            let sheet = styleSheetCache.get(x);
-            if (sheet === void 0) {
-                sheet = new CSSStyleSheet();
-                sheet.replaceSync(x);
-                styleSheetCache.set(x, sheet);
-            }
-            return sheet;
-        });
-    }
-    addStylesTo(target) {
-        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.sheets];
-    }
-    removeStylesFrom(target) {
-        const sheets = this.sheets;
-        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
-    }
-}
-ElementStyles.setDefaultStrategy(FAST.getById(5 /* KernelServiceId.styleSheetStrategy */, () => AdoptedStyleSheetsStrategy));

package/dist/esm/templating/repeat.js

@@ -37,10 +37,11 @@ export class RepeatBehavior {
      */
     constructor(directive) {
         this.directive = directive;
-        this.views = [];
         this.items = null;
         this.itemsObserver = null;
         this.bindView = bindWithoutPositioning;
+        /** @internal */
+        this.views = [];
         this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
         this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
         if (directive.options.positioning) {
@@ -158,10 +159,10 @@ export class RepeatBehavior {
             leftoverViews[i].dispose();
         }
         if (this.directive.options.positioning) {
-            for (let i = 0, ii = views.length; i < ii; ++i) {
+            for (let i = 0, viewsLength = views.length; i < viewsLength; ++i) {
                 const context = views[i].context;
-                context.length = i;
-                context.index = ii;
+                context.length = viewsLength;
+                context.index = i;
             }
         }
     }

package/dist/fast-element.api.json

@@ -15154,7 +15154,25 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "export interface StyleTarget "
+              "text": "export interface StyleTarget extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "Pick",
+              "canonicalReference": "!Pick:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Node",
+              "canonicalReference": "!Node:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ", \"getRootNode\"> "
             }
           ],
           "releaseTag": "Public",
@@ -15369,7 +15387,12 @@
               "name": "removeChild"
             }
           ],
-          "extendsTokenRanges": []
+          "extendsTokenRanges": [
+            {
+              "startIndex": 1,
+              "endIndex": 4
+            }
+          ]
         },
         {
           "kind": "Interface",

package/dist/fast-element.d.ts

@@ -32,8 +32,6 @@ export declare type AddBehavior = (behavior: HostBehavior<HTMLElement>) => void;
  */
 export declare type AddViewBehaviorFactory = (factory: ViewBehaviorFactory) => string;
 
-/* Excluded from this release type: AdoptedStyleSheetsStrategy */
-
 /**
  * An observer for arrays.
  * @public
@@ -1927,13 +1925,13 @@ export declare class RepeatBehavior<TSource = any> implements ViewBehavior, Subs
     private directive;
     private location;
     private controller;
-    private views;
     private template;
     private templateBindingObserver;
     private items;
     private itemsObserver;
     private itemsBindingObserver;
     private bindView;
+    /* Excluded from this release type: views */
     /**
      * Creates an instance of RepeatBehavior.
      * @param location - The location in the DOM to render the repeat.
@@ -2300,7 +2298,7 @@ export declare interface StyleStrategy {
  * A node that can be targeted by styles.
  * @public
  */
-export declare interface StyleTarget {
+export declare interface StyleTarget extends Pick<Node, "getRootNode"> {
     /**
      * Stylesheets to be adopted by the node.
      */