@microsoft/fast-element 1.10.5 → 2.0.0-beta.10

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,66 @@ if (FAST.getById === void 0) {
             return found;
         } }, propConfig));
 }
+if (FAST.error === void 0) {
+    Object.assign(FAST, {
+        warn() { },
+        error(code) {
+            return new Error(`Error ${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) {
+            if (object === null || object === void 0) {
+                return void 0;
+            }
+            return typeToDefinition.get(object.constructor);
+        },
+    });
+}
+/**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
+ * @internal
+ */
+export function createMetadataLocator() {
+    const metadataLookup = new WeakMap();
+    return function (target) {
+        let metadata = metadataLookup.get(target);
+        if (metadata === void 0) {
+            let currentTarget = Reflect.getPrototypeOf(target);
+            while (metadata === void 0 && currentTarget !== null) {
+                metadata = metadataLookup.get(currentTarget);
+                currentTarget = Reflect.getPrototypeOf(currentTarget);
+            }
+            metadata = metadata === void 0 ? [] : metadata.slice(0);
+            metadataLookup.set(target, metadata);
+        }
+        return metadata;
+    };
+}

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/state/exports.js

@@ -0,0 +1,3 @@
+export { reactive } from "./reactive.js";
+export { watch } from "./watch.js";
+export * from "./state.js";

package/dist/esm/state/reactive.js

@@ -0,0 +1,34 @@
+import { noop } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { visitObject } from "./visitor.js";
+const observed = new WeakSet();
+const makeObserverVisitor = {
+    visitObject: noop,
+    visitArray: noop,
+    visitProperty(object, propertyName, value) {
+        Reflect.defineProperty(object, propertyName, {
+            enumerable: true,
+            get() {
+                Observable.track(object, propertyName);
+                return value;
+            },
+            set(newValue) {
+                if (value !== newValue) {
+                    value = newValue;
+                    Observable.notify(object, propertyName);
+                }
+            },
+        });
+    },
+};
+/**
+ * Converts a plain object to a reactive, observable object.
+ * @param object - The object to make reactive.
+ * @param deep - Indicates whether or not to deeply convert the oject.
+ * @returns The converted object.
+ * @beta
+ */
+export function reactive(object, deep = false) {
+    visitObject(object, deep, makeObserverVisitor, void 0, observed);
+    return object;
+}

package/dist/esm/state/state.js

@@ -0,0 +1,148 @@
+// Inspired by https://www.starbeamjs.com/
+import { isFunction, isString } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { reactive } from "./reactive.js";
+const defaultStateOptions = {
+    deep: false,
+};
+/**
+ * Creates a reactive state value.
+ * @param value - The initial state value.
+ * @param options - Options to customize the state or a friendly name.
+ * @returns A State instance.
+ * @beta
+ */
+export function state(value, options = defaultStateOptions) {
+    var _a;
+    if (isString(options)) {
+        options = { deep: false, name: options };
+    }
+    const host = reactive({ value }, options.deep);
+    const state = (() => host.value);
+    Object.defineProperty(state, "current", {
+        get: () => host.value,
+        set: (value) => (host.value = value),
+    });
+    Object.defineProperty(state, "name", {
+        value: (_a = options.name) !== null && _a !== void 0 ? _a : "SharedState",
+    });
+    state.set = (value) => (host.value = value);
+    state.asReadonly = () => {
+        const readonlyState = (() => host.value);
+        Object.defineProperty(readonlyState, "current", {
+            get: () => host.value,
+        });
+        Object.defineProperty(readonlyState, "name", {
+            value: `${state.name} (Readonly)`,
+        });
+        return Object.freeze(readonlyState);
+    };
+    return state;
+}
+/**
+ * Creates a reactive state that has its value associated with a specific owner.
+ * @param value - The initial value or a factory that provides an initial value for each owner.
+ * @param options - Options to customize the state or a friendly name.
+ * @returns An OwnedState instance.
+ * @beta
+ */
+export function ownedState(value, options = defaultStateOptions) {
+    var _a;
+    if (isString(options)) {
+        options = { deep: false, name: options };
+    }
+    if (!isFunction(value)) {
+        const v = value;
+        value = () => v;
+    }
+    const storage = new WeakMap();
+    const getHost = (owner) => {
+        let host = storage.get(owner);
+        if (host === void 0) {
+            host = reactive({ value: value() }, options.deep);
+            storage.set(owner, host);
+        }
+        return host;
+    };
+    const state = ((owner) => getHost(owner).value);
+    Object.defineProperty(state, "name", {
+        value: (_a = options.name) !== null && _a !== void 0 ? _a : "OwnedState",
+    });
+    state.set = (owner, value) => (getHost(owner).value = value);
+    state.asReadonly = () => {
+        const readonlyState = ((owner) => getHost(owner).value);
+        Object.defineProperty(readonlyState, "name", {
+            value: `${state.name} (Readonly)`,
+        });
+        return Object.freeze(readonlyState);
+    };
+    return state;
+}
+/**
+ * Creates a ComputedState.
+ * @param initialize - The initialization callback.
+ * @param name - A friendly name for this computation.
+ * @returns A ComputedState
+ * @beta
+ */
+export function computedState(initialize, name = "ComputedState") {
+    let setupCallback = null;
+    const builder = {
+        on: {
+            setup(callback) {
+                setupCallback = callback;
+            },
+        },
+    };
+    const computer = initialize(builder);
+    const host = reactive({ value: null }, false);
+    const output = (() => host.value);
+    Object.defineProperty(output, "current", {
+        get: () => host.value,
+    });
+    Object.defineProperty(output, "name", {
+        value: name,
+    });
+    // eslint-disable-next-line prefer-const
+    let computedNotifier;
+    const computedSubscriber = {
+        handleChange() {
+            host.value = computedNotifier.observe(null);
+        },
+    };
+    computedNotifier = Observable.binding(computer, computedSubscriber);
+    computedNotifier.setMode(false);
+    let cleanup;
+    let setupNotifier;
+    if (setupCallback) {
+        const setupSubscriber = {
+            handleChange() {
+                if (cleanup) {
+                    cleanup();
+                }
+                cleanup = setupNotifier.observe(null);
+                host.value = computer();
+            },
+        };
+        setupNotifier = Observable.binding(setupCallback, setupSubscriber);
+        setupNotifier.setMode(false);
+        cleanup = setupNotifier.observe(null);
+    }
+    host.value = computedNotifier.observe(null);
+    output.dispose = () => {
+        if (cleanup) {
+            cleanup();
+        }
+        if (setupNotifier) {
+            setupNotifier.dispose();
+        }
+        computedNotifier.dispose();
+    };
+    output.subscribe = (subscriber) => {
+        computedNotifier.subscribe(subscriber);
+    };
+    output.unsubscribe = (subscriber) => {
+        computedNotifier.unsubscribe(subscriber);
+    };
+    return output;
+}

package/dist/esm/state/visitor.js

@@ -0,0 +1,28 @@
+function shouldTraverse(value, traversed) {
+    return (value !== null &&
+        value !== void 0 &&
+        typeof value === "object" &&
+        !traversed.has(value));
+}
+export function visitObject(object, deep, visitor, data, traversed) {
+    if (!shouldTraverse(object, traversed)) {
+        return;
+    }
+    traversed.add(object);
+    if (Array.isArray(object)) {
+        visitor.visitArray(object, data);
+        for (const item of object) {
+            visitObject(item, deep, visitor, data, traversed);
+        }
+    }
+    else {
+        visitor.visitObject(object, data);
+        for (const key in object) {
+            const value = object[key];
+            visitor.visitProperty(object, key, value, data);
+            if (deep) {
+                visitObject(value, deep, visitor, data, traversed);
+            }
+        }
+    }
+}

package/dist/esm/state/watch.js

@@ -0,0 +1,36 @@
+import { isFunction, noop } from "../interfaces.js";
+import { ArrayObserver } from "../observation/arrays.js";
+import { Observable } from "../observation/observable.js";
+import { visitObject } from "./visitor.js";
+function watchObject(object, data) {
+    const notifier = Observable.getNotifier(object);
+    notifier.subscribe(data.subscriber);
+    data.notifiers.push(notifier);
+}
+const watchVisitor = {
+    visitProperty: noop,
+    visitObject: watchObject,
+    visitArray: watchObject,
+};
+/**
+ * Deeply subscribes to changes in existing observable objects.
+ * @param object - The observable object to watch.
+ * @param subscriber - The handler to call when changes are made to the object.
+ * @returns A disposable that can be used to unsubscribe from change updates.
+ * @beta
+ */
+export function watch(object, subscriber) {
+    const data = {
+        notifiers: [],
+        subscriber: isFunction(subscriber) ? { handleChange: subscriber } : subscriber,
+    };
+    ArrayObserver.enable();
+    visitObject(object, true, watchVisitor, data, new Set());
+    return {
+        dispose() {
+            for (const n of data.notifiers) {
+                n.unsubscribe(data.subscriber);
+            }
+        },
+    };
+}

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() {
-        return this.css;
-    }
-    bind(el) {
+    createCSS(add) {
+        this.behaviors.forEach(add);
         if (this.styles) {
-            el.$fastController.addStyles(this.styles);
-        }
-        if (this.behaviors.length) {
-            el.$fastController.addBehaviors(this.behaviors);
+            add(this);
         }
+        return this.css;
     }
-    unbind(el) {
-        if (this.styles) {
-            el.$fastController.removeStyles(this.styles);
-        }
-        if (this.behaviors.length) {
-            el.$fastController.removeBehaviors(this.behaviors);
-        }
+    addedCallback(controller) {
+        controller.addStyles(this.styles);
+    }
+    removedCallback(controller) {
+        controller.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;