@microsoft/fast-element 2.0.0-beta.22 → 2.0.0-beta.24

package/CHANGELOG.json

@@ -1,6 +1,80 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Fri, 16 Jun 2023 18:17:12 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.24",
+      "version": "2.0.0-beta.24",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "8250aa8352940584ff443b550ee756d49f01c478",
+            "comment": "fix: update compiler to ensure first and last child references are defined"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "e678a782dd06a1c9ca79726da4a5765244858d21",
+            "comment": "Adds 'else' template option to the when directive"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "58f7ce2ca73cf59dd957889e0763f45d087c77c9",
+            "comment": "fixed a bug where re-binding a ChildrenDirective instance would throw a runtime exception from the mutation handler"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "88a0d7feb71b2452fa521b72ce308b1e499dfd94",
+            "comment": "Update adoptedStyleSheets strategy to use push/splice when available to fix Safari 16.4 bug"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "9793634f3d06316a6a8689a909f4d41bdd667e99",
+            "comment": "fixes a bug where ChildrenDirective could not be used multiple times for the same element"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "86c1952373b1fa0d7100cf0d8e942a0580cda725",
+            "comment": "fixed bug causing behaviors attached to stylesheets not to be removed when the stylesheet was removed"
+          }
+        ],
+        "none": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "ca0e62ee8d05f72d1d8c1ad66bd6eea8e3f0a4eb",
+            "comment": "update prettier and eslint-config-prettier versions"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Mar 2023 22:14:10 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.23",
+      "version": "2.0.0-beta.23",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "1d9c23ecd77a4079126b1156567b906efff66350",
+            "comment": "docs: add missing API docs"
+          },
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "032285c2bf0311f9f44cbc875b40696fc8f62857",
+            "comment": "fix: correct types for a break in TypeScript 5 legacy decorators"
+          }
+        ]
+      }
+    },
     {
       "date": "Sat, 11 Mar 2023 00:09:48 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.22",

package/CHANGELOG.md

@@ -1,9 +1,31 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Sat, 11 Mar 2023 00:09:48 GMT and should not be manually modified.
+This log was last generated on Fri, 16 Jun 2023 18:17:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.24
+
+Fri, 16 Jun 2023 18:17:12 GMT
+
+### Changes
+
+- fix: update compiler to ensure first and last child references are defined (chhol@microsoft.com)
+- Adds 'else' template option to the when directive (nicholasrice@users.noreply.github.com)
+- fixed a bug where re-binding a ChildrenDirective instance would throw a runtime exception from the mutation handler (nicholasrice@users.noreply.github.com)
+- Update adoptedStyleSheets strategy to use push/splice when available to fix Safari 16.4 bug (nicholasrice@users.noreply.github.com)
+- fixes a bug where ChildrenDirective could not be used multiple times for the same element (nicholasrice@users.noreply.github.com)
+- fixed bug causing behaviors attached to stylesheets not to be removed when the stylesheet was removed (nicholasrice@users.noreply.github.com)
+
+## 2.0.0-beta.23
+
+Tue, 28 Mar 2023 22:14:10 GMT
+
+### Changes
+
+- docs: add missing API docs (rob@bluespire.com)
+- fix: correct types for a break in TypeScript 5 legacy decorators (rob@bluespire.com)
+
 ## 2.0.0-beta.22
 
 Sat, 11 Mar 2023 00:09:48 GMT

package/dist/dts/binding/signal.d.ts

@@ -2,13 +2,26 @@ import type { Expression } from "../observation/observable.js";
 import type { Subscriber } from "../observation/notifier.js";
 import type { DOMPolicy } from "../dom.js";
 import { Binding } from "./binding.js";
+/**
+ * The gateway to signal APIs.
+ * @public
+ */
 export declare const Signal: Readonly<{
+    /**
+     * Subscribes to a signal.
+     * @param signal The signal to subscribe to.
+     * @param subscriber The subscriber.
+     */
     subscribe(signal: string, subscriber: Subscriber): void;
+    /**
+     * Unsubscribes from the signal.
+     * @param signal The signal to unsubscribe from.
+     * @param subscriber The subscriber.
+     */
     unsubscribe(signal: string, subscriber: Subscriber): void;
     /**
-     * Sends the specified signal to signaled bindings.
+     * Sends the specified signal to subscribers.
      * @param signal - The signal to send.
-     * @public
      */
     send(signal: string): void;
 }>;

package/dist/dts/binding/two-way.d.ts

@@ -21,6 +21,9 @@ export interface TwoWaySettings {
      */
     determineChangeEvent(bindingSource: BindingDirective, target: HTMLElement): string;
 }
+/**
+ * Enables configuring two-way binding settings.
+ */
 export declare const TwoWaySettings: Readonly<{
     /**
      * Configures two-way binding.

package/dist/dts/context.d.ts

@@ -1,4 +1,4 @@
-import { Constructable } from "./interfaces.js";
+import { Constructable, ParameterDecorator } from "./interfaces.js";
 /**
  * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.
  * @public

package/dist/dts/dom.d.ts

@@ -36,7 +36,7 @@ export declare const DOMAspect: Readonly<{
  * The type of HTML aspect to target.
  * @public
  */
-export declare type DOMAspect = typeof DOMAspect[Exclude<keyof typeof DOMAspect, "none">];
+export declare type DOMAspect = (typeof DOMAspect)[Exclude<keyof typeof DOMAspect, "none">];
 /**
  * A function used to send values to a DOM sink.
  * @public

package/dist/dts/index.d.ts

@@ -8,6 +8,7 @@ export * from "./observation/update-queue.js";
 export * from "./binding/binding.js";
 export * from "./binding/one-way.js";
 export * from "./binding/one-time.js";
+export * from "./binding/normalize.js";
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";

package/dist/dts/interfaces.d.ts

@@ -51,6 +51,11 @@ export declare type TrustedTypesPolicy = {
 export declare type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
+/**
+ * A temporary type as a workaround for the TS compiler's erroneous built-in ParameterDecorator type.
+ * @public
+ */
+export declare type ParameterDecorator = (target: Object, propertyKey: string | undefined, parameterIndex: number) => void;
 /**
  * The FAST global.
  * @public

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

@@ -57,7 +57,7 @@ export declare const SpliceStrategySupport: Readonly<{
  * The available values for SpliceStrategySupport.
  * @public
  */
-export declare type SpliceStrategySupport = typeof SpliceStrategySupport[keyof typeof SpliceStrategySupport];
+export declare type SpliceStrategySupport = (typeof SpliceStrategySupport)[keyof typeof SpliceStrategySupport];
 /**
  * An approach to tracking changes in an array.
  * @public

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

@@ -60,7 +60,7 @@ export declare const SourceLifetime: Readonly<{
  * Describes how the source's lifetime relates to its controller's lifetime.
  * @public
  */
-export declare type SourceLifetime = typeof SourceLifetime[keyof typeof SourceLifetime];
+export declare type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
 /**
  * Controls the lifecycle of an expression and provides relevant context.
  * @public

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

@@ -5,6 +5,8 @@ import type { CaptureType, SyntheticViewTemplate } from "./template.js";
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
+export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;

package/dist/esm/binding/signal.js

@@ -2,7 +2,16 @@ import { isString } from "../interfaces.js";
 import { makeSerializationNoop } from "../platform.js";
 import { Binding } from "./binding.js";
 const subscribers = Object.create(null);
+/**
+ * The gateway to signal APIs.
+ * @public
+ */
 export const Signal = Object.freeze({
+    /**
+     * Subscribes to a signal.
+     * @param signal The signal to subscribe to.
+     * @param subscriber The subscriber.
+     */
     subscribe(signal, subscriber) {
         const found = subscribers[signal];
         if (found) {
@@ -14,6 +23,11 @@ export const Signal = Object.freeze({
             subscribers[signal] = subscriber;
         }
     },
+    /**
+     * Unsubscribes from the signal.
+     * @param signal The signal to unsubscribe from.
+     * @param subscriber The subscriber.
+     */
     unsubscribe(signal, subscriber) {
         const found = subscribers[signal];
         if (found && found instanceof Set) {
@@ -24,9 +38,8 @@ export const Signal = Object.freeze({
         }
     },
     /**
-     * Sends the specified signal to signaled bindings.
+     * Sends the specified signal to subscribers.
      * @param signal - The signal to send.
-     * @public
      */
     send(signal) {
         const found = subscribers[signal];

package/dist/esm/binding/two-way.js

@@ -10,6 +10,9 @@ let twoWaySettings = {
         return "change";
     },
 };
+/**
+ * Enables configuring two-way binding settings.
+ */
 export const TwoWaySettings = Object.freeze({
     /**
      * Configures two-way binding.
@@ -71,7 +74,8 @@ class TwoWayObserver {
                 value = target[bindingSource.targetAspect];
                 break;
         }
-        last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
+        last.propertySource[last.propertyName] =
+            this.dataBinding.options.fromView(value);
     }
 }
 makeSerializationNoop(TwoWayObserver);

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

@@ -278,7 +278,7 @@ export class ElementController extends PropertyChangeNotifier {
             styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-                    this.addBehavior(sourceBehaviors[i]);
+                    this.removeBehavior(sourceBehaviors[i]);
                 }
             }
         }
@@ -466,13 +466,10 @@ export class AdoptedStyleSheetsStrategy {
         });
     }
     addStylesTo(target) {
-        const t = normalizeStyleTarget(target);
-        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+        addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
     removeStylesFrom(target) {
-        const t = normalizeStyleTarget(target);
-        const sheets = this.sheets;
-        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+        removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
 }
 AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
@@ -508,6 +505,39 @@ export class StyleElementStrategy {
         }
     }
 }
-ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
-    ? AdoptedStyleSheetsStrategy
-    : StyleElementStrategy);
+let addAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+    try {
+        // Test if browser implementation uses FrozenArray.
+        // If not, use push / splice to alter the stylesheets
+        // in place. This circumvents a bug in Safari 16.4 where
+        // periodically, assigning the array would previously
+        // cause sheets to be removed.
+        document.adoptedStyleSheets.push();
+        document.adoptedStyleSheets.splice();
+        addAdoptedStyleSheets = (target, sheets) => {
+            target.adoptedStyleSheets.push(...sheets);
+        };
+        removeAdoptedStyleSheets = (target, sheets) => {
+            for (const sheet of sheets) {
+                const index = target.adoptedStyleSheets.indexOf(sheet);
+                if (index !== -1) {
+                    target.adoptedStyleSheets.splice(index, 1);
+                }
+            }
+        };
+    }
+    catch (e) {
+        // Do nothing if an error is thrown, the default
+        // case handles FrozenArray.
+    }
+    ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+}
+else {
+    ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export * from "./observation/update-queue.js";
 export * from "./binding/binding.js";
 export * from "./binding/one-way.js";
 export * from "./binding/one-time.js";
+export * from "./binding/normalize.js";
 // Styles
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";

package/dist/esm/templating/children.js

@@ -12,7 +12,7 @@ export class ChildrenDirective extends NodeObservationDirective {
      */
     constructor(options) {
         super(options);
-        this.observerProperty = `${this.id}-o`;
+        this.observerProperty = Symbol();
         this.handleEvent = (mutations, observer) => {
             const target = observer.target;
             this.updateTarget(this.getSource(target), this.computeNodes(target));
@@ -28,9 +28,9 @@ export class ChildrenDirective extends NodeObservationDirective {
         if (!observer) {
             observer = new MutationObserver(this.handleEvent);
             observer.toJSON = noop;
-            observer.target = target;
             target[this.observerProperty] = observer;
         }
+        observer.target = target;
         observer.observe(target, this.options);
     }
     /**

package/dist/esm/templating/compiler.js

@@ -215,6 +215,9 @@ export const Compiler = {
         else {
             template = html;
         }
+        if (!template.content.firstChild && !template.content.lastChild) {
+            template.content.appendChild(document.createComment(""));
+        }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
         const context = new CompilationContext(fragment, factories, policy);

package/dist/esm/templating/when.js

@@ -1,15 +1,22 @@
 import { isFunction } from "../interfaces.js";
+const noTemplate = () => null;
+function normalizeBinding(value) {
+    return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export function when(condition, templateOrTemplateBinding) {
+export function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
     const dataBinding = isFunction(condition) ? condition : () => condition;
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+    const templateBinding = normalizeBinding(templateOrTemplateBinding);
+    const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+    return (source, context) => dataBinding(source, context)
+        ? templateBinding(source, context)
+        : elseBinding(source, context);
 }