@microsoft/fast-element 1.7.0 → 1.8.0

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@microsoft/fast-element",
   "entries": [
     {
-      "date": "Sun, 23 Jan 2022 07:11:35 GMT",
+      "date": "Tue, 08 Mar 2022 07:10:44 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": {
+        "patch": [
+          {
+            "comment": "fix: prevent duplicative array observation patch",
+            "author": "roeisenb@microsoft.com",
+            "commit": "9dfb9bb20afa48320eef2c6157e26ec2b10cfd3e",
+            "package": "@microsoft/fast-element"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sun, 23 Jan 2022 07:13:56 GMT",
       "tag": "@microsoft/fast-element_v1.7.0",
       "version": "1.7.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Sun, 23 Jan 2022 07:11:35 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Mar 2022 07:10:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.8.0
+
+Tue, 08 Mar 2022 07:10:44 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:21:55 GMT
+
+### Patches
+
+- fix: prevent duplicative array observation patch (roeisenb@microsoft.com)
+
 ## 1.7.0
 
-Sun, 23 Jan 2022 07:11:35 GMT
+Sun, 23 Jan 2022 07:13:56 GMT
 
 ### Minor changes
 

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

@@ -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/dom.d.ts

@@ -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/observation/observable.d.ts

@@ -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/esm/components/fast-definitions.js

@@ -1,9 +1,24 @@
+import { FAST } from "../platform";
 import { Observable } from "../observation/observable";
 import { ElementStyles } from "../styles/element-styles";
 import { AttributeDefinition } from "./attributes";
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
-const fastDefinitions = new Map();
+const fastRegistry = FAST.getById(4 /* elementRegistry */, () => {
+    const typeToDefinition = new Map();
+    return Object.freeze({
+        register(definition) {
+            if (typeToDefinition.has(definition.type)) {
+                return false;
+            }
+            typeToDefinition.set(definition.type, definition);
+            return true;
+        },
+        getByType(key) {
+            return typeToDefinition.get(key);
+        },
+    });
+});
 /**
  * Defines metadata for a FASTElement.
  * @public
@@ -55,13 +70,19 @@ export class FASTElementDefinition {
                         ? nameOrConfig.styles
                         : ElementStyles.create([nameOrConfig.styles]);
     }
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return !!fastRegistry.getByType(this.type);
+    }
     /**
      * Defines a custom element based on this definition.
      * @param registry - The element registry to define the element in.
      */
     define(registry = customElements) {
         const type = this.type;
-        if (!this.isDefined) {
+        if (fastRegistry.register(this)) {
             const attributes = this.attributes;
             const proto = type.prototype;
             for (let i = 0, ii = attributes.length; i < ii; ++i) {
@@ -71,19 +92,15 @@ export class FASTElementDefinition {
                 value: this.observedAttributes,
                 enumerable: true,
             });
-            fastDefinitions.set(type, this);
-            this.isDefined = true;
         }
         if (!registry.get(this.name)) {
             registry.define(this.name, type, this.elementOptions);
         }
         return this;
     }
-    /**
-     * Gets the element definition associated with the specified type.
-     * @param type - The custom element type to retrieve the definition for.
-     */
-    static forType(type) {
-        return fastDefinitions.get(type);
-    }
 }
+/**
+ * Gets the element definition associated with the specified type.
+ * @param type - The custom element type to retrieve the definition for.
+ */
+FASTElementDefinition.forType = fastRegistry.getByType;

package/dist/esm/dom.js

@@ -1,27 +1,61 @@
 import { $global } from "./platform";
-const updateQueue = [];
+const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
+    const tasks = [];
+    const pendingErrors = [];
+    function throwFirstError() {
+        if (pendingErrors.length) {
+            throw pendingErrors.shift();
+        }
+    }
+    function tryRunTask(task) {
+        try {
+            task.call();
+        }
+        catch (error) {
+            pendingErrors.push(error);
+            setTimeout(throwFirstError, 0);
+        }
+    }
+    function process() {
+        const capacity = 1024;
+        let index = 0;
+        while (index < tasks.length) {
+            tryRunTask(tasks[index]);
+            index++;
+            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+            // grow, but to avoid an O(n) walk for every task we execute, we don't
+            // shift tasks off the queue after they have been executed.
+            // Instead, we periodically shift 1024 tasks off the queue.
+            if (index > capacity) {
+                // Manually shift all values starting at the index back to the
+                // beginning of the queue.
+                for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
+                    tasks[scan] = tasks[scan + index];
+                }
+                tasks.length -= index;
+                index = 0;
+            }
+        }
+        tasks.length = 0;
+    }
+    function enqueue(callable) {
+        if (tasks.length < 1) {
+            $global.requestAnimationFrame(process);
+        }
+        tasks.push(callable);
+    }
+    return Object.freeze({
+        enqueue,
+        process,
+    });
+});
 /* eslint-disable */
 const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
     createHTML: html => html,
 });
 /* eslint-enable */
 let htmlPolicy = fastHTMLPolicy;
-// We use a queue so we can ensure errors are thrown in order.
-const pendingErrors = [];
-function throwFirstError() {
-    if (pendingErrors.length) {
-        throw pendingErrors.shift();
-    }
-}
-function tryRunTask(task) {
-    try {
-        task.call();
-    }
-    catch (error) {
-        pendingErrors.push(error);
-        setTimeout(throwFirstError, 0);
-    }
-}
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 /** @internal */
 export const _interpolationStart = `${marker}{`;
@@ -108,12 +142,7 @@ export const DOM = Object.freeze({
      * Schedules DOM update work in the next async batch.
      * @param callable - The callable function or object to queue.
      */
-    queueUpdate(callable) {
-        if (updateQueue.length < 1) {
-            window.requestAnimationFrame(DOM.processUpdates);
-        }
-        updateQueue.push(callable);
-    },
+    queueUpdate: updateQueue.enqueue,
     /**
      * Immediately processes all work previously scheduled
      * through queueUpdate.
@@ -121,36 +150,12 @@ export const DOM = Object.freeze({
      * This also forces nextUpdate promises
      * to resolve.
      */
-    processUpdates() {
-        const capacity = 1024;
-        let index = 0;
-        while (index < updateQueue.length) {
-            tryRunTask(updateQueue[index]);
-            index++;
-            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
-            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
-            // grow, but to avoid an O(n) walk for every task we execute, we don't
-            // shift tasks off the queue after they have been executed.
-            // Instead, we periodically shift 1024 tasks off the queue.
-            if (index > capacity) {
-                // Manually shift all values starting at the index back to the
-                // beginning of the queue.
-                for (let scan = 0, newLength = updateQueue.length - index; scan < newLength; scan++) {
-                    updateQueue[scan] = updateQueue[scan + index];
-                }
-                updateQueue.length -= index;
-                index = 0;
-            }
-        }
-        updateQueue.length = 0;
-    },
+    processUpdates: updateQueue.process,
     /**
      * Resolves with the next DOM update.
      */
     nextUpdate() {
-        return new Promise((resolve) => {
-            DOM.queueUpdate(resolve);
-        });
+        return new Promise(updateQueue.enqueue);
     },
     /**
      * Sets an attribute value on an element.

package/dist/esm/observation/array-observer.js

@@ -26,7 +26,10 @@ class ArrayObserver extends SubscriberSet {
         this.splices = void 0;
         this.needsQueue = true;
         this.call = this.flush;
-        source.$fastController = this;
+        Reflect.defineProperty(source, "$fastController", {
+            value: this,
+            enumerable: false,
+        });
     }
     addSplice(splice) {
         if (this.splices === void 0) {
@@ -80,15 +83,24 @@ export function enableArrayObservation() {
     Observable.setArrayObserverFactory((collection) => {
         return new ArrayObserver(collection);
     });
-    const arrayProto = Array.prototype;
-    const pop = arrayProto.pop;
-    const push = arrayProto.push;
-    const reverse = arrayProto.reverse;
-    const shift = arrayProto.shift;
-    const sort = arrayProto.sort;
-    const splice = arrayProto.splice;
-    const unshift = arrayProto.unshift;
-    arrayProto.pop = function () {
+    const proto = Array.prototype;
+    // Don't patch Array if it has already been patched
+    // by another copy of fast-element.
+    if (proto.$fastPatch) {
+        return;
+    }
+    Reflect.defineProperty(proto, "$fastPatch", {
+        value: 1,
+        enumerable: false,
+    });
+    const pop = proto.pop;
+    const push = proto.push;
+    const reverse = proto.reverse;
+    const shift = proto.shift;
+    const sort = proto.sort;
+    const splice = proto.splice;
+    const unshift = proto.unshift;
+    proto.pop = function () {
         const notEmpty = this.length > 0;
         const methodCallResult = pop.apply(this, arguments);
         const o = this.$fastController;
@@ -97,7 +109,7 @@ export function enableArrayObservation() {
         }
         return methodCallResult;
     };
-    arrayProto.push = function () {
+    proto.push = function () {
         const methodCallResult = push.apply(this, arguments);
         const o = this.$fastController;
         if (o !== void 0) {
@@ -105,7 +117,7 @@ export function enableArrayObservation() {
         }
         return methodCallResult;
     };
-    arrayProto.reverse = function () {
+    proto.reverse = function () {
         let oldArray;
         const o = this.$fastController;
         if (o !== void 0) {
@@ -118,7 +130,7 @@ export function enableArrayObservation() {
         }
         return methodCallResult;
     };
-    arrayProto.shift = function () {
+    proto.shift = function () {
         const notEmpty = this.length > 0;
         const methodCallResult = shift.apply(this, arguments);
         const o = this.$fastController;
@@ -127,7 +139,7 @@ export function enableArrayObservation() {
         }
         return methodCallResult;
     };
-    arrayProto.sort = function () {
+    proto.sort = function () {
         let oldArray;
         const o = this.$fastController;
         if (o !== void 0) {
@@ -140,7 +152,7 @@ export function enableArrayObservation() {
         }
         return methodCallResult;
     };
-    arrayProto.splice = function () {
+    proto.splice = function () {
         const methodCallResult = splice.apply(this, arguments);
         const o = this.$fastController;
         if (o !== void 0) {
@@ -148,7 +160,7 @@ export function enableArrayObservation() {
         }
         return methodCallResult;
     };
-    arrayProto.unshift = function () {
+    proto.unshift = function () {
         const methodCallResult = unshift.apply(this, arguments);
         const o = this.$fastController;
         if (o !== void 0) {