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

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,68 @@ 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;
+    }
+    /**
+     * 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]);
+    }
 }
 /**
- * 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));

package/dist/esm/styles/host.js

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

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;
+}