@microsoft/fast-element 1.7.2 → 1.10.0

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,

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

@@ -1,9 +1,24 @@
-import { Observable } from "../observation/observable";
-import { ElementStyles } from "../styles/element-styles";
-import { AttributeDefinition } from "./attributes";
+import { FAST } from "../platform.js";
+import { Observable } from "../observation/observable.js";
+import { ElementStyles } from "../styles/element-styles.js";
+import { AttributeDefinition } from "./attributes.js";
 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/components/fast-element.js

@@ -1,5 +1,5 @@
-import { Controller } from "./controller";
-import { FASTElementDefinition } from "./fast-definitions";
+import { Controller } from "./controller.js";
+import { FASTElementDefinition, } from "./fast-definitions.js";
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
     return class extends BaseType {

package/dist/esm/dom.js

@@ -1,27 +1,61 @@
-import { $global } from "./platform";
-const updateQueue = [];
+import { $global } from "./platform.js";
+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/index.js

@@ -1,23 +1,24 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
-export { FASTElementDefinition, } from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export * from "./templating/compiler";
-export { ElementStyles, } 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 { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-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, } from "./templating/node-observation";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
+export { FASTElementDefinition, } from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export * from "./templating/compiler.js";
+export { ElementStyles, } 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 {} from "./observation/array-change-records.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.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, } from "./templating/node-observation.js";

package/dist/esm/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/observation/array-change-records.js

@@ -1,4 +1,4 @@
-import { emptyArray } from "../platform";
+import { emptyArray } from "../platform.js";
 /** @internal */
 export function newSplice(index, removed, addedCount) {
     return {

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

@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { calcSplices, newSplice, projectArraySplices } from "./array-change-records";
-import { SubscriberSet } from "./notifier";
-import { Observable } from "./observable";
+import { DOM } from "../dom.js";
+import { calcSplices, newSplice, projectArraySplices } from "./array-change-records.js";
+import { SubscriberSet } from "./notifier.js";
+import { Observable } from "./observable.js";
 let arrayObservationEnabled = false;
 function adjustIndex(changeRecord, array) {
     let index = changeRecord.index;

package/dist/esm/observation/behavior.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/observation/notifier.js

@@ -147,7 +147,8 @@ export class PropertyChangeNotifier {
             subscribers.subscribe(subscriber);
         }
         else {
-            this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+            this.sourceSubscribers =
+                (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
             this.sourceSubscribers.subscribe(subscriber);
         }
     }