@microsoft/fast-element 1.7.1 → 1.9.0

package/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
+    "rules": {
+        "max-classes-per-file": "off",
+        "no-case-declarations": "off",
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                "types": {
+                    "{}": false,
+                    "Function": false,
+                    "Object": false
+                },
+                "extendDefaults": true
+            }
+        ],
+        "@typescript-eslint/no-use-before-define": ["error", { "typedefs": false }],
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/explicit-function-return-type": [
+            "error",
+            {
+                "allowExpressions": true
+            }
+        ],
+        "import/extensions": [
+            "error",
+            "always"
+        ]
+    }
+}

package/CHANGELOG.json

@@ -2,7 +2,79 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Thu, 24 Feb 2022 22:19:38 GMT",
+      "date": "Wed, 06 Apr 2022 07:10:25 GMT",
+      "tag": "@microsoft/fast-element_v1.9.0",
+      "version": "1.9.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "convert fast-element to type:module",
+            "author": "nicholasrice@users.noreply.github.com",
+            "commit": "ead7f7340654236f2503359e2fc6f0b41639b507",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sun, 03 Apr 2022 07:12:01 GMT",
+      "tag": "@microsoft/fast-element_v1.8.0",
+      "version": "1.8.0",
+      "comments": {
+        "none": [
+          {
+            "comment": "Fixed a typo in a doc example",
+            "author": "47367562+bheston@users.noreply.github.com",
+            "commit": "35913ce3a2dcba83bebb63cce2b8edf4e9da7df9",
+            "package": "@microsoft/fast-element"
+          },
+          {
+            "comment": "add comment-style tags for syntax highlighting (#5561)",
+            "author": "chhol@microsoft.com",
+            "commit": "7495a63e6e89b6e92e2d7f289eea063a8a354108",
+            "package": "@microsoft/fast-element"
+          },
+          {
+            "comment": "Update binding documentation to have an accurate example. Changes \"Bindings\" to \"Volatile Properties\".",
+            "author": "tgoze@ntst.com",
+            "commit": "1ffb431816f418864d2385b29ba494efcb3fa844",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 08 Mar 2022 07:12:45 GMT",
+      "tag": "@microsoft/fast-element_v1.8.0",
+      "version": "1.8.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "feat: enable multiple fast-element instances in browser at once",
+            "author": "roeisenb@microsoft.com",
+            "commit": "0e506c6c67a8a7d75e4ef9cfbd000f9da810dc14",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 25 Feb 2022 17:09:32 GMT",
+      "tag": "@microsoft/fast-element_v1.7.2",
+      "version": "1.7.2",
+      "comments": {
+        "patch": [
+          {
+            "comment": "fix: defend against for/in use on arrays",
+            "author": "roeisenb@microsoft.com",
+            "commit": "76a9c866277cd13a92a9ca6b3518eae2fb625d79",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 24 Feb 2022 22:21:55 GMT",
       "tag": "@microsoft/fast-element_v1.7.1",
       "version": "1.7.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Thu, 24 Feb 2022 22:19:38 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Apr 2022 07:10:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.9.0
+
+Wed, 06 Apr 2022 07:10:25 GMT
+
+### Minor changes
+
+- convert fast-element to type:module (nicholasrice@users.noreply.github.com)
+
+## 1.8.0
+
+Tue, 08 Mar 2022 07:12:45 GMT
+
+### Minor changes
+
+- feat: enable multiple fast-element instances in browser at once (roeisenb@microsoft.com)
+
+## 1.7.2
+
+Fri, 25 Feb 2022 17:09:32 GMT
+
+### Patches
+
+- fix: defend against for/in use on arrays (roeisenb@microsoft.com)
+
 ## 1.7.1
 
-Thu, 24 Feb 2022 22:19:38 GMT
+Thu, 24 Feb 2022 22:21:55 GMT
 
 ### Patches
 

package/dist/dts/components/attributes.d.ts

@@ -1,4 +1,4 @@
-import { Accessor } from "../observation/observable";
+import { Accessor } from "../observation/observable.js";
 /**
  * Represents objects that can convert values to and from
  * view or model representations.

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

@@ -1,9 +1,9 @@
-import type { Behavior } from "../observation/behavior";
-import { PropertyChangeNotifier } from "../observation/notifier";
-import type { ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import type { ElementView } from "../templating/view";
-import { FASTElementDefinition } from "./fast-definitions";
+import type { Behavior } from "../observation/behavior.js";
+import { PropertyChangeNotifier } from "../observation/notifier.js";
+import type { ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import type { ElementView } from "../templating/view.js";
+import { FASTElementDefinition } from "./fast-definitions.js";
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public

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

@@ -1,6 +1,6 @@
-import { ComposableStyles, ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes";
+import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
 /**
  * Represents metadata configuration for a custom element.
  * @public
@@ -44,7 +44,7 @@ export declare class FASTElementDefinition<TType extends Function = Function> {
     /**
      * Indicates if this element has been defined in at least one registry.
      */
-    readonly isDefined: boolean;
+    get isDefined(): boolean;
     /**
      * The name of the custom element.
      */
@@ -93,5 +93,5 @@ export declare class FASTElementDefinition<TType extends Function = Function> {
      * Gets the element definition associated with the specified type.
      * @param type - The custom element type to retrieve the definition for.
      */
-    static forType<TType extends Function>(type: TType): FASTElementDefinition | undefined;
+    static readonly forType: <TType_1 extends Function>(key: TType_1) => FASTElementDefinition<Function> | undefined;
 }

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

@@ -1,5 +1,5 @@
-import { Controller } from "./controller";
-import { PartialFASTElementDefinition } from "./fast-definitions";
+import { Controller } from "./controller.js";
+import { PartialFASTElementDefinition } from "./fast-definitions.js";
 /**
  * Represents a custom element based on the FASTElement infrastructure.
  * @public

package/dist/dts/dom.d.ts

@@ -1,5 +1,5 @@
-import type { Callable } from "./interfaces";
-import { TrustedTypesPolicy } from "./platform";
+import type { Callable } from "./interfaces.js";
+import { TrustedTypesPolicy } from "./platform.js";
 /** @internal */
 export declare const _interpolationStart: string;
 /** @internal */
@@ -67,7 +67,7 @@ export declare const DOM: Readonly<{
      * Schedules DOM update work in the next async batch.
      * @param callable - The callable function or object to queue.
      */
-    queueUpdate(callable: Callable): void;
+    queueUpdate: (callable: Callable) => void;
     /**
      * Immediately processes all work previously scheduled
      * through queueUpdate.
@@ -75,7 +75,7 @@ export declare const DOM: Readonly<{
      * This also forces nextUpdate promises
      * to resolve.
      */
-    processUpdates(): void;
+    processUpdates: () => void;
     /**
      * Resolves with the next DOM update.
      */

package/dist/dts/index.d.ts

@@ -1,26 +1,26 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
-export { FASTElementDefinition, PartialFASTElementDefinition, } from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export type { Callable, Constructable, Mutable } from "./interfaces";
-export * from "./templating/compiler";
-export { ElementStyles, ElementStyleFactory, ComposableStyles, StyleTarget, } from "./styles/element-styles";
-export { css, cssPartial } from "./styles/css";
-export { CSSDirective } from "./styles/css-directive";
-export * from "./templating/view";
-export * from "./observation/observable";
-export * from "./observation/notifier";
-export { Splice } from "./observation/array-change-records";
-export { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-export type { Behavior } from "./observation/behavior";
-export * from "./templating/binding";
-export * from "./templating/html-directive";
-export * from "./templating/ref";
-export * from "./templating/when";
-export * from "./templating/repeat";
-export * from "./templating/slotted";
-export * from "./templating/children";
-export { elements, ElementsFilter, NodeBehaviorOptions, } from "./templating/node-observation";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
+export { FASTElementDefinition, PartialFASTElementDefinition, } from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export type { Callable, Constructable, Mutable } from "./interfaces.js";
+export * from "./templating/compiler.js";
+export { ElementStyles, ElementStyleFactory, ComposableStyles, StyleTarget, } from "./styles/element-styles.js";
+export { css, cssPartial } from "./styles/css.js";
+export { CSSDirective } from "./styles/css-directive.js";
+export * from "./templating/view.js";
+export * from "./observation/observable.js";
+export * from "./observation/notifier.js";
+export { Splice } from "./observation/array-change-records.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.js";
+export type { Behavior } from "./observation/behavior.js";
+export * from "./templating/binding.js";
+export * from "./templating/html-directive.js";
+export * from "./templating/ref.js";
+export * from "./templating/when.js";
+export * from "./templating/repeat.js";
+export * from "./templating/slotted.js";
+export * from "./templating/children.js";
+export { elements, ElementsFilter, NodeBehaviorOptions, } from "./templating/node-observation.js";

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

@@ -1,4 +1,4 @@
-import type { ExecutionContext } from "./observable";
+import type { ExecutionContext } from "./observable.js";
 /**
  * Represents and object that can contribute behavior to a view or
  * element's bind/unbind operations.

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

@@ -1,4 +1,4 @@
-import type { Notifier, Subscriber } from "./notifier";
+import type { Notifier, Subscriber } from "./notifier.js";
 /**
  * Represents a getter/setter property accessor on an object.
  * @public
@@ -20,6 +20,48 @@ export interface Accessor {
      */
     setValue(source: any, value: any): void;
 }
+/**
+ * The signature of an arrow function capable of being evaluated
+ * as part of a template binding update.
+ * @public
+ */
+export declare type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
+/**
+ * A record of observable property access.
+ * @public
+ */
+export interface ObservationRecord {
+    /**
+     * The source object with an observable property that was accessed.
+     */
+    propertySource: any;
+    /**
+     * The name of the observable property on {@link ObservationRecord.propertySource} that was accessed.
+     */
+    propertyName: string;
+}
+/**
+ * Enables evaluation of and subscription to a binding.
+ * @public
+ */
+export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
+    /**
+     * Begins observing the binding for the source and returns the current value.
+     * @param source - The source that the binding is based on.
+     * @param context - The execution context to execute the binding within.
+     * @returns The value of the binding.
+     */
+    observe(source: TSource, context: ExecutionContext<TParent>): TReturn;
+    /**
+     * Unsubscribe from all dependent observables of the binding.
+     */
+    disconnect(): void;
+    /**
+     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
+     * is observing.
+     */
+    records(): IterableIterator<ObservationRecord>;
+}
 /**
  * Common Observable APIs.
  * @public
@@ -34,7 +76,7 @@ export declare const Observable: Readonly<{
      * Gets a notifier for an object or Array.
      * @param source - The object or Array to get the notifier for.
      */
-    getNotifier(source: any): Notifier;
+    getNotifier: (source: any) => Notifier;
     /**
      * Records a property change for a source object.
      * @param source - The object to record the change against.
@@ -64,7 +106,7 @@ export declare const Observable: Readonly<{
      * including its prototype chain.
      * @param target - The target object to search for accessor on.
      */
-    getAccessors(target: {}): Accessor[];
+    getAccessors: (target: {}) => Accessor[];
     /**
      * Creates a {@link BindingObserver} that can watch the
      * provided {@link Binding} for changes.
@@ -95,11 +137,6 @@ export declare function observable(target: {}, nameOrAccessor: string | Accessor
  * @public
  */
 export declare function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
-/**
- * @param event - The event to set as current for the context.
- * @internal
- */
-export declare function setCurrentEvent(event: Event | null): void;
 /**
  * Provides additional contextual information available to behaviors and expressions.
  * @public
@@ -150,51 +187,15 @@ export declare class ExecutionContext<TParent = any, TGrandparent = any> {
      * is the last item in the collection.
      */
     get isLast(): boolean;
-}
-/**
- * The default execution context used in binding expressions.
- * @public
- */
-export declare const defaultExecutionContext: ExecutionContext<any, any>;
-/**
- * The signature of an arrow function capable of being evaluated
- * as part of a template binding update.
- * @public
- */
-export declare type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
-/**
- * A record of observable property access.
- * @public
- */
-export interface ObservationRecord {
     /**
-     * The source object with an observable property that was accessed.
-     */
-    propertySource: any;
-    /**
-     * The name of the observable property on {@link ObservationRecord.propertySource} that was accessed.
+     * Sets the event for the current execution context.
+     * @param event - The event to set.
+     * @internal
      */
-    propertyName: string;
+    static setEvent(event: Event | null): void;
 }
 /**
- * Enables evaluation of and subscription to a binding.
+ * The default execution context used in binding expressions.
  * @public
  */
-export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier {
-    /**
-     * Begins observing the binding for the source and returns the current value.
-     * @param source - The source that the binding is based on.
-     * @param context - The execution context to execute the binding within.
-     * @returns The value of the binding.
-     */
-    observe(source: TSource, context: ExecutionContext): TReturn;
-    /**
-     * Unsubscribe from all dependent observables of the binding.
-     */
-    disconnect(): void;
-    /**
-     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
-     * is observing.
-     */
-    records(): IterableIterator<ObservationRecord>;
-}
+export declare const defaultExecutionContext: ExecutionContext<any, any>;

package/dist/dts/platform.d.ts

@@ -21,6 +21,23 @@ export declare type TrustedTypes = {
      */
     createPolicy(name: string, rules: TrustedTypesPolicy): TrustedTypesPolicy;
 };
+/**
+ * The FAST global.
+ * @internal
+ */
+export interface FASTGlobal {
+    /**
+     * The list of loaded versions.
+     */
+    readonly versions: string[];
+    /**
+     * Gets a kernel value.
+     * @param id - The id to get the value for.
+     * @param initialize - Creates the initial value for the id if not already existing.
+     */
+    getById<T>(id: string | number): T | null;
+    getById<T>(id: string | number, initialize: () => T): T;
+}
 /**
  * The platform global type.
  * @public
@@ -30,6 +47,11 @@ export declare type Global = typeof globalThis & {
      * Enables working with trusted types.
      */
     trustedTypes: TrustedTypes;
+    /**
+     * The FAST global.
+     * @internal
+     */
+    readonly FAST: FASTGlobal;
 };
 /**
  * A reference to globalThis, with support
@@ -37,6 +59,21 @@ export declare type Global = typeof globalThis & {
  * @public
  */
 export declare const $global: Global;
+/**
+ * The FAST global.
+ * @internal
+ */
+export declare const FAST: FASTGlobal;
+/**
+ * Core services shared across FAST instances.
+ * @internal
+ */
+export declare const enum KernelServiceId {
+    updateQueue = 1,
+    observable = 2,
+    contextEvent = 3,
+    elementRegistry = 4
+}
 /**
  * A readonly, empty array.
  * @remarks

package/dist/dts/styles/css-directive.d.ts

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { ComposableStyles } from "./element-styles";
+import type { Behavior } from "../observation/behavior.js";
+import type { ComposableStyles } from "./element-styles.js";
 /**
  * Directive for use in {@link css}.
  *

package/dist/dts/styles/css.d.ts

@@ -1,5 +1,5 @@
-import { CSSDirective } from "./css-directive";
-import { ComposableStyles, ElementStyles } from "./element-styles";
+import { CSSDirective } from "./css-directive.js";
+import { ComposableStyles, ElementStyles } from "./element-styles.js";
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.

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

@@ -1,4 +1,4 @@
-import type { Behavior } from "../observation/behavior";
+import type { Behavior } from "../observation/behavior.js";
 /**
  * A node that can be targeted by styles.
  * @public

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

@@ -1,6 +1,6 @@
-import type { Behavior } from "../observation/behavior";
-import { Binding, BindingObserver, ExecutionContext } from "../observation/observable";
-import { TargetedHTMLDirective } from "./html-directive";
+import type { Behavior } from "../observation/behavior.js";
+import { Binding, BindingObserver, ExecutionContext } from "../observation/observable.js";
+import { TargetedHTMLDirective } from "./html-directive.js";
 declare function normalBind(this: BindingBehavior, source: unknown, context: ExecutionContext): void;
 declare function normalUnbind(this: BindingBehavior): void;
 declare function updatePropertyTarget(this: BindingBehavior, value: unknown): void;

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

@@ -1,5 +1,5 @@
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
-import type { CaptureType } from "./template";
+import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 /**
  * The options used to configure child list observation.
  * @public

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

@@ -1,4 +1,4 @@
-import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive";
+import type { HTMLDirective, NodeBehaviorFactory } from "./html-directive.js";
 /**
  * The result of compiling a template and its directives.
  * @beta

package/dist/dts/templating/html-directive.d.ts

@@ -1,4 +1,4 @@
-import type { Behavior } from "../observation/behavior";
+import type { Behavior } from "../observation/behavior.js";
 /**
  * A factory that can create a {@link Behavior} associated with a particular
  * location within a DOM fragment.

package/dist/dts/templating/node-observation.d.ts

@@ -1,4 +1,4 @@
-import type { Behavior } from "../observation/behavior";
+import type { Behavior } from "../observation/behavior.js";
 /**
  * Options for configuring node observation behavior.
  * @public

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

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { CaptureType } from "./template";
+import type { Behavior } from "../observation/behavior.js";
+import type { CaptureType } from "./template.js";
 /**
  * The runtime behavior for template references.
  * @public

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

@@ -1,9 +1,9 @@
-import { Binding, ExecutionContext } from "../observation/observable";
-import type { Subscriber } from "../observation/notifier";
-import type { Splice } from "../observation/array-change-records";
-import type { Behavior } from "../observation/behavior";
-import { HTMLDirective } from "./html-directive";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
+import { Binding, ExecutionContext } from "../observation/observable.js";
+import type { Subscriber } from "../observation/notifier.js";
+import type { Splice } from "../observation/array-change-records.js";
+import type { Behavior } from "../observation/behavior.js";
+import { HTMLDirective } from "./html-directive.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 /**
  * Options for configuring repeat behavior.
  * @public

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

@@ -1,5 +1,5 @@
-import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation";
-import type { CaptureType } from "./template";
+import { NodeBehaviorOptions, NodeObservationBehavior } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 /**
  * The options used to configure slotted node observation.
  * @public

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

@@ -1,6 +1,6 @@
-import { Binding } from "../observation/observable";
-import { ElementView, HTMLView, SyntheticView } from "./view";
-import { HTMLDirective } from "./html-directive";
+import { Binding } from "../observation/observable.js";
+import { ElementView, HTMLView, SyntheticView } from "./view.js";
+import { HTMLDirective } from "./html-directive.js";
 /**
  * A template capable of creating views specifically for rendering custom elements.
  * @public

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

@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import type { ExecutionContext } from "../observation/observable";
+import type { Behavior } from "../observation/behavior.js";
+import type { ExecutionContext } from "../observation/observable.js";
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public

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

@@ -1,5 +1,5 @@
-import type { Binding } from "../observation/observable";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
+import type { Binding } from "../observation/observable.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param binding - The condition to test for rendering.

package/dist/esm/components/attributes.js

@@ -1,5 +1,5 @@
-import { Observable } from "../observation/observable";
-import { DOM } from "../dom";
+import { Observable } from "../observation/observable.js";
+import { DOM } from "../dom.js";
 /**
  * A {@link ValueConverter} that converts to and from `boolean` values.
  * @remarks

package/dist/esm/components/controller.js

@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier } from "../observation/notifier";
-import { defaultExecutionContext, Observable } from "../observation/observable";
-import { FASTElementDefinition } from "./fast-definitions";
+import { DOM } from "../dom.js";
+import { PropertyChangeNotifier } from "../observation/notifier.js";
+import { defaultExecutionContext, Observable } from "../observation/observable.js";
+import { FASTElementDefinition } from "./fast-definitions.js";
 const shadowRoots = new WeakMap();
 const defaultEventOptions = {
     bubbles: true,