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

package/dist/esm/platform.js

@@ -1,3 +1,4 @@
+import "./polyfills.js";
 // ensure FAST global - duplicated in polyfills.ts and debug.ts
 const propConfig = {
     configurable: 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

@@ -28,58 +28,4 @@ if (!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);
-}
+export {};

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);

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/templating/binding-signal.js

@@ -0,0 +1,83 @@
+import { isString } 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) {
+            found instanceof Set
+                ? found.add(subscriber)
+                : (subscribers[signal] = new Set([found, subscriber]));
+        }
+        else {
+            subscribers[signal] = subscriber;
+        }
+    },
+    unsubscribe(signal, subscriber) {
+        const found = subscribers[signal];
+        if (found && found instanceof Set) {
+            found.delete(subscriber);
+        }
+        else {
+            subscribers[signal] = void 0;
+        }
+    },
+    /**
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
+     */
+    send(signal) {
+        const found = subscribers[signal];
+        if (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;
+    }
+    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);
+    }
+}
+/**
+ * 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.
+ * @returns A binding configuration.
+ * @public
+ */
+export function signal(expression, options) {
+    const binding = new SignalBinding(expression);
+    binding.options = options;
+    return binding;
+}

package/dist/esm/templating/binding-two-way.js

@@ -0,0 +1,103 @@
+import { isString } from "../interfaces.js";
+import { Observable, } from "../observation/observable.js";
+import { FAST } from "../platform.js";
+import { Binding } from "./html-directive.js";
+const defaultOptions = {
+    fromView: v => v,
+};
+let twoWaySettings = {
+    determineChangeEvent() {
+        return "change";
+    },
+};
+export const TwoWaySettings = Object.freeze({
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    configure(settings) {
+        twoWaySettings = settings;
+    },
+});
+class TwoWayObserver {
+    constructor(directive, subscriber, dataBinding) {
+        this.directive = directive;
+        this.subscriber = subscriber;
+        this.dataBinding = dataBinding;
+        this.isNotBound = true;
+        this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
+    }
+    bind(controller) {
+        var _a;
+        if (!this.changeEvent) {
+            this.changeEvent =
+                (_a = this.dataBinding.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(this.directive, this.target);
+        }
+        if (this.isNotBound) {
+            this.target.addEventListener(this.changeEvent, this);
+            controller.onUnbind(this);
+            this.isNotBound = false;
+        }
+        return this.notifier.bind(controller);
+    }
+    unbind(controller) {
+        this.isNotBound = true;
+        this.target.removeEventListener(this.changeEvent, this);
+    }
+    handleChange(subject, args) {
+        this.subscriber.handleChange(this.dataBinding.evaluate, this);
+    }
+    handleEvent(event) {
+        const directive = this.directive;
+        const target = event.currentTarget;
+        const notifier = this.notifier;
+        const last = notifier.last; // using internal API!!!
+        if (!last) {
+            FAST.warn(1203 /* Message.twoWayBindingRequiresObservables */);
+            return;
+        }
+        let value;
+        switch (directive.aspectType) {
+            case 1:
+                value = target.getAttribute(directive.targetAspect);
+                break;
+            case 2:
+                value = target.hasAttribute(directive.targetAspect);
+                break;
+            case 4:
+                value = target.innerText;
+                break;
+            default:
+                value = target[directive.targetAspect];
+                break;
+        }
+        last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
+    }
+}
+class TwoWayBinding extends Binding {
+    createObserver(directive, subscriber) {
+        return new TwoWayObserver(directive, subscriber, this);
+    }
+}
+/**
+ * Creates a default binding.
+ * @param expression - The binding to refresh when changed.
+ * @param optionsOrChangeEvent - The binding options or the name of the change event to use.
+ * @param isBindingVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding.
+ * @public
+ */
+export function twoWay(expression, optionsOrChangeEvent, isBindingVolatile = Observable.isVolatileBinding(expression)) {
+    if (isString(optionsOrChangeEvent)) {
+        optionsOrChangeEvent = { changeEvent: optionsOrChangeEvent };
+    }
+    if (!optionsOrChangeEvent) {
+        optionsOrChangeEvent = defaultOptions;
+    }
+    else if (!optionsOrChangeEvent.fromView) {
+        optionsOrChangeEvent.fromView = defaultOptions.fromView;
+    }
+    const binding = new TwoWayBinding(expression, isBindingVolatile);
+    binding.options = optionsOrChangeEvent;
+    return binding;
+}