@microsoft/fast-element 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/esm/platform.js

@@ -1,4 +1,5 @@
-// ensure FAST global - duplicated in polyfills.ts and debug.ts
+import "./polyfills.js";
+// ensure FAST global - duplicated debug.ts
 const propConfig = {
     configurable: false,
     enumerable: false,
@@ -26,7 +27,7 @@ if (FAST.error === void 0) {
     Object.assign(FAST, {
         warn() { },
         error(code) {
-            return new Error(`Code ${code}`);
+            return new Error(`Error ${code}`);
         },
         addMessages() { },
     });
@@ -57,7 +58,31 @@ export function createTypeRegistry() {
             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

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 (function ensureGlobalThis() {
     if (typeof globalThis !== "undefined") {
         // We're running in a modern environment.
         return;
     }
+    // @ts-ignore
     if (typeof global !== "undefined") {
         // We're running in NodeJS
+        // @ts-ignore
         global.globalThis = global;
     }
     else if (typeof self !== "undefined") {
@@ -22,64 +25,3 @@
         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.js

@@ -71,11 +71,11 @@ class CSSPartial {
         }
         return this.css;
     }
-    bind(el) {
-        el.$fastController.addStyles(this.styles);
+    addedCallback(controller) {
+        controller.addStyles(this.styles);
     }
-    unbind(el) {
-        el.$fastController.removeStyles(this.styles);
+    removedCallback(controller) {
+        controller.removeStyles(this.styles);
     }
 }
 CSSDirective.define(CSSPartial);
@@ -83,8 +83,3 @@ css.partial = (strings, ...values) => {
     const { styles, behaviors } = collectStyles(strings, values);
     return new CSSPartial(styles, behaviors);
 };
-/**
- * @deprecated Use css.partial instead.
- * @public
- */
-export const cssPartial = css.partial;

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

@@ -1,6 +1,3 @@
-import { FAST } from "../platform.js";
-import "../interfaces.js";
-const styleSheetCache = new Map();
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
     return styles
@@ -71,39 +68,23 @@ export class ElementStyles {
     static setDefaultStrategy(Strategy) {
         DefaultStyleStrategy = Strategy;
     }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
 }
 /**
  * Indicates whether the DOM supports the adoptedStyleSheets feature.
  */
 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 AdoptedStyleSheetsStrategy {
-    constructor(styles) {
-        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) {
-        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.sheets];
-    }
-    removeStylesFrom(target) {
-        const sheets = this.sheets;
-        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
-    }
-}
-ElementStyles.setDefaultStrategy(FAST.getById(5 /* KernelServiceId.styleSheetStrategy */, () => AdoptedStyleSheetsStrategy));

package/dist/esm/styles/host.js

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

package/dist/esm/styles/style-strategy.js

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

package/dist/esm/templating/binding-signal.js

@@ -1,84 +1,89 @@
-import { isString } from "../interfaces.js";
-import { BindingMode, UpdateBinding } from "./binding.js";
-const signals = Object.create(null);
-/**
- * A binding behavior for signal bindings.
- * @public
- */
-export class SignalBinding extends UpdateBinding {
-    constructor() {
-        super(...arguments);
-        this.handlerProperty = `${this.directive.id}-h`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        const signal = this.getSignal(source, context);
-        const handler = (target[this.handlerProperty] = () => {
-            this.updateTarget(target, directive.targetAspect, directive.binding(source, context), source, context);
-        });
-        handler();
-        const found = signals[signal];
+import { isString, noop } from "../interfaces.js";
+import { Binding } from "./html-directive.js";
+const subscribers = Object.create(null);
+export const Signal = Object.freeze({
+    subscribe(signal, subscriber) {
+        const found = subscribers[signal];
         if (found) {
-            Array.isArray(found)
-                ? found.push(handler)
-                : (signals[signal] = [found, handler]);
+            found instanceof Set
+                ? found.add(subscriber)
+                : (subscribers[signal] = new Set([found, subscriber]));
         }
         else {
-            signals[signal] = handler;
+            subscribers[signal] = subscriber;
         }
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const signal = this.getSignal(source, context);
-        const found = signals[signal];
-        if (found && Array.isArray(found)) {
-            const directive = this.directive;
-            const target = targets[directive.nodeId];
-            const handler = target[this.handlerProperty];
-            const index = found.indexOf(handler);
-            if (index !== -1) {
-                found.splice(index, 1);
-            }
+    },
+    unsubscribe(signal, subscriber) {
+        const found = subscribers[signal];
+        if (found && found instanceof Set) {
+            found.delete(subscriber);
         }
         else {
-            signals[signal] = void 0;
+            subscribers[signal] = void 0;
         }
-    }
-    getSignal(source, context) {
-        const options = this.directive.options;
-        return isString(options) ? options : options(source, context);
-    }
+    },
     /**
      * Sends the specified signal to signaled bindings.
      * @param signal - The signal to send.
      * @public
      */
-    static send(signal) {
-        const found = signals[signal];
+    send(signal) {
+        const found = subscribers[signal];
         if (found) {
-            Array.isArray(found) ? found.forEach(x => x()) : found();
+            found instanceof Set
+                ? found.forEach(x => x.handleChange(found, signal))
+                : found.handleChange(this, signal);
+        }
+    },
+});
+class SignalObserver {
+    constructor(dataBinding, subscriber) {
+        this.dataBinding = dataBinding;
+        this.subscriber = subscriber;
+        this.isNotBound = true;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
+    }
+    bind(controller) {
+        if (this.isNotBound) {
+            Signal.subscribe(this.getSignal(controller), this);
+            controller.onUnbind(this);
+            this.isNotBound = false;
         }
+        return this.dataBinding.evaluate(controller.source, controller.context);
+    }
+    unbind(controller) {
+        this.isNotBound = true;
+        Signal.unsubscribe(this.getSignal(controller), this);
+    }
+    handleChange() {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
+    }
+    getSignal(controller) {
+        const options = this.dataBinding.options;
+        return isString(options)
+            ? options
+            : options(controller.source, controller.context);
+    }
+}
+class SignalBinding extends Binding {
+    createObserver(directive, subscriber) {
+        return new SignalObserver(this, subscriber);
     }
 }
-const signalMode = BindingMode.define(SignalBinding);
 /**
  * Creates a signal binding configuration with the supplied options.
+ * @param expression - The binding to refresh when signaled.
  * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @param policy - The security policy to associate with th binding.
  * @returns A binding configuration.
  * @public
  */
-export const signal = (options) => {
-    return { mode: signalMode, options };
-};
+export function signal(expression, options, policy) {
+    const binding = new SignalBinding(expression, policy);
+    binding.options = options;
+    return binding;
+}