@microsoft/fast-element 1.10.2 → 2.0.0-beta.1

package/dist/esm/observation/update-queue.js

@@ -0,0 +1,67 @@
+import "../interfaces.js";
+import { FAST } from "../platform.js";
+/**
+ * The default UpdateQueue.
+ * @public
+ */
+export const Updates = FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
+    const tasks = [];
+    const pendingErrors = [];
+    const rAF = globalThis.requestAnimationFrame;
+    let updateAsync = true;
+    function throwFirstError() {
+        if (pendingErrors.length) {
+            throw pendingErrors.shift();
+        }
+    }
+    function tryRunTask(task) {
+        try {
+            task.call();
+        }
+        catch (error) {
+            if (updateAsync) {
+                pendingErrors.push(error);
+                setTimeout(throwFirstError, 0);
+            }
+            else {
+                tasks.length = 0;
+                throw error;
+            }
+        }
+    }
+    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 `enqueue`.
+            // If we call `enqueue` within a task scheduled by `enqueue`, 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) {
+        tasks.push(callable);
+        if (tasks.length < 2) {
+            updateAsync ? rAF(process) : process();
+        }
+    }
+    return Object.freeze({
+        enqueue,
+        next: () => new Promise(enqueue),
+        process,
+        setMode: (isAsync) => (updateAsync = isAsync),
+    });
+});

package/dist/esm/platform.js

@@ -1,54 +1,17 @@
-/**
- * A reference to globalThis, with support
- * for browsers that don't yet support the spec.
- * @public
- */
-export const $global = (function () {
-    if (typeof globalThis !== "undefined") {
-        // We're running in a modern environment.
-        return globalThis;
-    }
-    if (typeof global !== "undefined") {
-        // We're running in NodeJS
-        return global;
-    }
-    if (typeof self !== "undefined") {
-        // We're running in a worker.
-        return self;
-    }
-    if (typeof window !== "undefined") {
-        // We're running in the browser's main thread.
-        return window;
-    }
-    try {
-        // Hopefully we never get here...
-        // Not all environments allow eval and Function. Use only as a last resort:
-        // eslint-disable-next-line no-new-func
-        return new Function("return this")();
-    }
-    catch (_a) {
-        // If all fails, give up and create an object.
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return {};
-    }
-})();
-// API-only Polyfill for trustedTypes
-if ($global.trustedTypes === void 0) {
-    $global.trustedTypes = { createPolicy: (n, r) => r };
-}
+// ensure FAST global - duplicated in polyfills.ts and debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
     writable: false,
 };
-if ($global.FAST === void 0) {
-    Reflect.defineProperty($global, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
 }
 /**
  * The FAST global.
  * @internal
  */
-export const FAST = $global.FAST;
+export const FAST = globalThis.FAST;
 if (FAST.getById === void 0) {
     const storage = Object.create(null);
     Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
@@ -59,11 +22,42 @@ if (FAST.getById === void 0) {
             return found;
         } }, propConfig));
 }
+if (FAST.error === void 0) {
+    Object.assign(FAST, {
+        warn() { },
+        error(code) {
+            return new Error(`Code ${code}`);
+        },
+        addMessages() { },
+    });
+}
 /**
  * A readonly, empty array.
  * @remarks
  * Typically returned by APIs that return arrays when there are
  * no actual items to return.
- * @internal
+ * @public
  */
 export const emptyArray = Object.freeze([]);
+/**
+ * Do not change. Part of shared kernel contract.
+ * @internal
+ */
+export function createTypeRegistry() {
+    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);
+        },
+        getForInstance(object) {
+            return typeToDefinition.get(object.constructor);
+        },
+    });
+}

package/dist/esm/polyfills.js

@@ -0,0 +1,85 @@
+(function ensureGlobalThis() {
+    if (typeof globalThis !== "undefined") {
+        // We're running in a modern environment.
+        return;
+    }
+    if (typeof global !== "undefined") {
+        // We're running in NodeJS
+        global.globalThis = global;
+    }
+    else if (typeof self !== "undefined") {
+        self.globalThis = self;
+    }
+    else if (typeof window !== "undefined") {
+        // We're running in the browser's main thread.
+        window.globalThis = window;
+    }
+    else {
+        // Hopefully we never get here...
+        // Not all environments allow eval and Function. Use only as a last resort:
+        // eslint-disable-next-line no-new-func
+        const result = new Function("return this")();
+        result.globalThis = result;
+    }
+})();
+// API-only Polyfill for trustedTypes
+if (!globalThis.trustedTypes) {
+    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);
+}

package/dist/esm/styles/css-directive.js

@@ -1,21 +1,37 @@
+import { createTypeRegistry } from "../platform.js";
+const registry = createTypeRegistry();
 /**
- * Directive for use in {@link css}.
- *
+ * Instructs the css engine to provide dynamic styles or
+ * associate behaviors with styles.
  * @public
  */
-export class CSSDirective {
+export const CSSDirective = Object.freeze({
     /**
-     * Creates a CSS fragment to interpolate into the CSS document.
-     * @returns - the string to interpolate into CSS
+     * Gets the directive definition associated with the instance.
+     * @param instance - The directive instance to retrieve the definition for.
      */
-    createCSS() {
-        return "";
-    }
+    getForInstance: registry.getForInstance,
     /**
-     * Creates a behavior to bind to the host element.
-     * @returns - the behavior to bind to the host element, or undefined.
+     * Gets the directive definition associated with the specified type.
+     * @param type - The directive type to retrieve the definition for.
      */
-    createBehavior() {
-        return undefined;
-    }
+    getByType: registry.getByType,
+    /**
+     * Defines a CSSDirective.
+     * @param type - The type to define as a directive.
+     */
+    define(type) {
+        registry.register({ type });
+        return type;
+    },
+});
+/**
+ * Decorator: Defines a CSSDirective.
+ * @public
+ */
+export function cssDirective() {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        CSSDirective.define(type);
+    };
 }

package/dist/esm/styles/css.js

@@ -1,18 +1,18 @@
+import { isString } from "../interfaces.js";
 import { CSSDirective } from "./css-directive.js";
 import { ElementStyles } from "./element-styles.js";
 function collectStyles(strings, values) {
     const styles = [];
     let cssString = "";
     const behaviors = [];
+    const add = (behavior) => {
+        behaviors.push(behavior);
+    };
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         cssString += strings[i];
         let value = values[i];
-        if (value instanceof CSSDirective) {
-            const behavior = value.createBehavior();
-            value = value.createCSS();
-            if (behavior) {
-                behaviors.push(behavior);
-            }
+        if (CSSDirective.getForInstance(value) !== void 0) {
+            value = value.createCSS(add);
         }
         if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
             if (cssString.trim() !== "") {
@@ -42,21 +42,17 @@ function collectStyles(strings, values) {
  * The css helper supports interpolation of strings and ElementStyle instances.
  * @public
  */
-export function css(strings, ...values) {
+export const css = ((strings, ...values) => {
     const { styles, behaviors } = collectStyles(strings, values);
-    const elementStyles = ElementStyles.create(styles);
-    if (behaviors.length) {
-        elementStyles.withBehaviors(...behaviors);
-    }
-    return elementStyles;
-}
-class CSSPartial extends CSSDirective {
+    const elementStyles = new ElementStyles(styles);
+    return behaviors.length ? elementStyles.withBehaviors(...behaviors) : elementStyles;
+});
+class CSSPartial {
     constructor(styles, behaviors) {
-        super();
         this.behaviors = behaviors;
         this.css = "";
         const stylesheets = styles.reduce((accumulated, current) => {
-            if (typeof current === "string") {
+            if (isString(current)) {
                 this.css += current;
             }
             else {
@@ -65,39 +61,30 @@ class CSSPartial extends CSSDirective {
             return accumulated;
         }, []);
         if (stylesheets.length) {
-            this.styles = ElementStyles.create(stylesheets);
+            this.styles = new ElementStyles(stylesheets);
         }
     }
-    createBehavior() {
-        return this;
-    }
-    createCSS() {
+    createCSS(add) {
+        this.behaviors.forEach(add);
+        if (this.styles) {
+            add(this);
+        }
         return this.css;
     }
     bind(el) {
-        if (this.styles) {
-            el.$fastController.addStyles(this.styles);
-        }
-        if (this.behaviors.length) {
-            el.$fastController.addBehaviors(this.behaviors);
-        }
+        el.$fastController.addStyles(this.styles);
     }
     unbind(el) {
-        if (this.styles) {
-            el.$fastController.removeStyles(this.styles);
-        }
-        if (this.behaviors.length) {
-            el.$fastController.removeBehaviors(this.behaviors);
-        }
+        el.$fastController.removeStyles(this.styles);
     }
 }
+CSSDirective.define(CSSPartial);
+css.partial = (strings, ...values) => {
+    const { styles, behaviors } = collectStyles(strings, values);
+    return new CSSPartial(styles, behaviors);
+};
 /**
- * Transforms a template literal string into partial CSS.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
+ * @deprecated Use css.partial instead.
  * @public
  */
-export function cssPartial(strings, ...values) {
-    const { styles, behaviors } = collectStyles(strings, values);
-    return new CSSPartial(styles, behaviors);
-}
+export const cssPartial = css.partial;

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

@@ -1,18 +1,46 @@
-import { DOM } from "../dom.js";
+import { FAST } from "../platform.js";
+import "../interfaces.js";
+const styleSheetCache = new Map();
+let DefaultStyleStrategy;
+function reduceStyles(styles) {
+    return styles
+        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
+        .reduce((prev, curr) => prev.concat(curr), []);
+}
 /**
  * Represents styles that can be applied to a custom element.
  * @public
  */
 export class ElementStyles {
-    constructor() {
+    /**
+     * Creates an instance of ElementStyles.
+     * @param styles - The styles that will be associated with elements.
+     */
+    constructor(styles) {
+        this.styles = styles;
         this.targets = new WeakSet();
+        this._strategy = null;
+        this.behaviors = styles
+            .map((x) => x instanceof ElementStyles ? x.behaviors : null)
+            .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
+    }
+    /**
+     * Gets the StyleStrategy associated with these element styles.
+     */
+    get strategy() {
+        if (this._strategy === null) {
+            this.withStrategy(DefaultStyleStrategy);
+        }
+        return this._strategy;
     }
     /** @internal */
     addStylesTo(target) {
+        this.strategy.addStylesTo(target);
         this.targets.add(target);
     }
     /** @internal */
     removeStylesFrom(target) {
+        this.strategy.removeStylesFrom(target);
         this.targets.delete(target);
     }
     /** @internal */
@@ -28,121 +56,54 @@ export class ElementStyles {
             this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
         return this;
     }
+    /**
+     * Sets the strategy that handles adding/removing these styles for an element.
+     * @param strategy - The strategy to use.
+     */
+    withStrategy(Strategy) {
+        this._strategy = new Strategy(reduceStyles(this.styles));
+        return this;
+    }
+    /**
+     * Sets the default strategy type to use when creating style strategies.
+     * @param Strategy - The strategy type to construct.
+     */
+    static setDefaultStrategy(Strategy) {
+        DefaultStyleStrategy = Strategy;
+    }
 }
 /**
- * Create ElementStyles from ComposableStyles.
+ * Indicates whether the DOM supports the adoptedStyleSheets feature.
  */
-ElementStyles.create = (() => {
-    if (DOM.supportsAdoptedStyleSheets) {
-        const styleSheetCache = new Map();
-        return (styles) => 
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        new AdoptedStyleSheetsStyles(styles, styleSheetCache);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    return (styles) => new StyleElementStyles(styles);
-})();
-function reduceStyles(styles) {
-    return styles
-        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
-        .reduce((prev, curr) => prev.concat(curr), []);
-}
-function reduceBehaviors(styles) {
-    return styles
-        .map((x) => (x instanceof ElementStyles ? x.behaviors : null))
-        .reduce((prev, curr) => {
-        if (curr === null) {
-            return prev;
-        }
-        if (prev === null) {
-            prev = [];
-        }
-        return prev.concat(curr);
-    }, null);
-}
+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 AdoptedStyleSheetsStyles extends ElementStyles {
-    constructor(styles, styleSheetCache) {
-        super();
-        this.styles = styles;
-        this.styleSheetCache = styleSheetCache;
-        this._styleSheets = void 0;
-        this.behaviors = reduceBehaviors(styles);
-    }
-    get styleSheets() {
-        if (this._styleSheets === void 0) {
-            const styles = this.styles;
-            const styleSheetCache = this.styleSheetCache;
-            this._styleSheets = reduceStyles(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;
-            });
-        }
-        return this._styleSheets;
-    }
-    addStylesTo(target) {
-        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.styleSheets];
-        super.addStylesTo(target);
-    }
-    removeStylesFrom(target) {
-        const sourceSheets = this.styleSheets;
-        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sourceSheets.indexOf(x) === -1);
-        super.removeStylesFrom(target);
-    }
-}
-let styleClassId = 0;
-function getNextStyleClass() {
-    return `fast-style-class-${++styleClassId}`;
-}
-/**
- * @internal
- */
-export class StyleElementStyles extends ElementStyles {
+export class AdoptedStyleSheetsStrategy {
     constructor(styles) {
-        super();
-        this.styles = styles;
-        this.behaviors = null;
-        this.behaviors = reduceBehaviors(styles);
-        this.styleSheets = reduceStyles(styles);
-        this.styleClass = getNextStyleClass();
+        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 styleSheets = this.styleSheets;
-        const styleClass = this.styleClass;
-        target = this.normalizeTarget(target);
-        for (let i = 0; i < styleSheets.length; i++) {
-            const element = document.createElement("style");
-            element.innerHTML = styleSheets[i];
-            element.className = styleClass;
-            target.append(element);
-        }
-        super.addStylesTo(target);
+        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.sheets];
     }
     removeStylesFrom(target) {
-        target = this.normalizeTarget(target);
-        const styles = target.querySelectorAll(`.${this.styleClass}`);
-        for (let i = 0, ii = styles.length; i < ii; ++i) {
-            target.removeChild(styles[i]);
-        }
-        super.removeStylesFrom(target);
-    }
-    isAttachedTo(target) {
-        return super.isAttachedTo(this.normalizeTarget(target));
-    }
-    normalizeTarget(target) {
-        return target === document ? document.body : target;
+        const sheets = this.sheets;
+        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
     }
 }
+ElementStyles.setDefaultStrategy(FAST.getById(5 /* KernelServiceId.styleSheetStrategy */, () => AdoptedStyleSheetsStrategy));