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

package/dist/esm/components/{controller.js → element-controller.js}

@@ -1,24 +1,25 @@
 import "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
-import { ExecutionContext, Observable } from "../observation/observable.js";
+import { Observable, SourceLifetime } from "../observation/observable.js";
 import { FAST } from "../platform.js";
+import { ElementStyles } from "../styles/element-styles.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
-const shadowRoots = new WeakMap();
 const defaultEventOptions = {
     bubbles: true,
     composed: true,
     cancelable: true,
 };
+const isConnectedPropertyName = "isConnected";
+const shadowRoots = new WeakMap();
 function getShadowRoot(element) {
     var _a, _b;
     return (_b = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : shadowRoots.get(element)) !== null && _b !== void 0 ? _b : null;
 }
-const isConnectedPropertyName = "isConnected";
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
  */
-export class Controller extends PropertyChangeNotifier {
+export class ElementController extends PropertyChangeNotifier {
     /**
      * Creates a Controller to control the specified element.
      * @param element - The element to be controlled by this controller.
@@ -29,12 +30,12 @@ export class Controller extends PropertyChangeNotifier {
     constructor(element, definition) {
         super(element);
         this.boundObservables = null;
-        this.behaviors = null;
         this.needsInitialization = true;
         this.hasExistingShadowRoot = false;
         this._template = null;
-        this._styles = null;
         this._isConnected = false;
+        this.behaviors = null;
+        this._mainStyles = null;
         /**
          * This allows Observable.getNotifier(...) to return the Controller
          * when the notifier for the Controller itself is being requested. The
@@ -50,7 +51,7 @@ export class Controller extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        this.element = element;
+        this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
         if (shadowOptions !== void 0) {
@@ -104,9 +105,9 @@ export class Controller extends PropertyChangeNotifier {
         // 1. Template overrides take top precedence.
         if (this._template === null) {
             const definition = this.definition;
-            if (this.element.resolveTemplate) {
+            if (this.source.resolveTemplate) {
                 // 2. Allow for element instance overrides next.
-                this._template = this.element.resolveTemplate();
+                this._template = this.source.resolveTemplate();
             }
             else if (definition.template) {
                 // 3. Default to the static definition.
@@ -125,56 +126,102 @@ export class Controller extends PropertyChangeNotifier {
         }
     }
     /**
-     * Gets/sets the primary styles used for the component.
-     * @remarks
-     * This value can only be accurately read after connect but can be set at any time.
+     * The main set of styles used for the component, independent
+     * of any dynamically added styles.
      */
-    get styles() {
+    get mainStyles() {
         var _a;
         // 1. Styles overrides take top precedence.
-        if (this._styles === null) {
+        if (this._mainStyles === null) {
             const definition = this.definition;
-            if (this.element.resolveStyles) {
+            if (this.source.resolveStyles) {
                 // 2. Allow for element instance overrides next.
-                this._styles = this.element.resolveStyles();
+                this._mainStyles = this.source.resolveStyles();
             }
             else if (definition.styles) {
                 // 3. Default to the static definition.
-                this._styles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
+                this._mainStyles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
             }
         }
-        return this._styles;
+        return this._mainStyles;
     }
-    set styles(value) {
-        if (this._styles === value) {
+    set mainStyles(value) {
+        if (this._mainStyles === value) {
             return;
         }
-        if (this._styles !== null) {
-            this.removeStyles(this._styles);
+        if (this._mainStyles !== null) {
+            this.removeStyles(this._mainStyles);
         }
-        this._styles = value;
+        this._mainStyles = value;
         if (!this.needsInitialization) {
             this.addStyles(value);
         }
     }
+    /**
+     * Adds the behavior to the component.
+     * @param behavior - The behavior to add.
+     */
+    addBehavior(behavior) {
+        var _a, _b;
+        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
+        const count = (_b = targetBehaviors.get(behavior)) !== null && _b !== void 0 ? _b : 0;
+        if (count === 0) {
+            targetBehaviors.set(behavior, 1);
+            behavior.addedCallback && behavior.addedCallback(this);
+            if (behavior.connectedCallback && this.isConnected) {
+                behavior.connectedCallback(this);
+            }
+        }
+        else {
+            targetBehaviors.set(behavior, count + 1);
+        }
+    }
+    /**
+     * Removes the behavior from the component.
+     * @param behavior - The behavior to remove.
+     * @param force - Forces removal even if this behavior was added more than once.
+     */
+    removeBehavior(behavior, force = false) {
+        const targetBehaviors = this.behaviors;
+        if (targetBehaviors === null) {
+            return;
+        }
+        const count = targetBehaviors.get(behavior);
+        if (count === void 0) {
+            return;
+        }
+        if (count === 1 || force) {
+            targetBehaviors.delete(behavior);
+            if (behavior.disconnectedCallback && this.isConnected) {
+                behavior.disconnectedCallback(this);
+            }
+            behavior.removedCallback && behavior.removedCallback(this);
+        }
+        else {
+            targetBehaviors.set(behavior, count - 1);
+        }
+    }
     /**
      * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
      * @param styles - The styles to add.
      */
     addStyles(styles) {
+        var _a;
         if (!styles) {
             return;
         }
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
+        const source = this.source;
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : this.source;
             target.append(styles);
         }
-        else if (!styles.isAttachedTo(target)) {
+        else if (!styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.addStylesTo(target);
+            styles.addStylesTo(source);
             if (sourceBehaviors !== null) {
-                this.addBehaviors(sourceBehaviors);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
@@ -183,97 +230,42 @@ export class Controller extends PropertyChangeNotifier {
      * @param styles - the styles to remove.
      */
     removeStyles(styles) {
+        var _a;
         if (!styles) {
             return;
         }
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
+        const source = this.source;
         if (styles instanceof HTMLElement) {
+            const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source;
             target.removeChild(styles);
         }
-        else if (styles.isAttachedTo(target)) {
+        else if (styles.isAttachedTo(source)) {
             const sourceBehaviors = styles.behaviors;
-            styles.removeStylesFrom(target);
+            styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
-                this.removeBehaviors(sourceBehaviors);
-            }
-        }
-    }
-    /**
-     * Adds behaviors to this element.
-     * @param behaviors - The behaviors to add.
-     */
-    addBehaviors(behaviors) {
-        var _a;
-        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
-        const length = behaviors.length;
-        const behaviorsToBind = [];
-        for (let i = 0; i < length; ++i) {
-            const behavior = behaviors[i];
-            if (targetBehaviors.has(behavior)) {
-                targetBehaviors.set(behavior, targetBehaviors.get(behavior) + 1);
-            }
-            else {
-                targetBehaviors.set(behavior, 1);
-                behaviorsToBind.push(behavior);
-            }
-        }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToBind.length; ++i) {
-                behaviorsToBind[i].bind(element, context);
-            }
-        }
-    }
-    /**
-     * Removes behaviors from this element.
-     * @param behaviors - The behaviors to remove.
-     * @param force - Forces unbinding of behaviors.
-     */
-    removeBehaviors(behaviors, force = false) {
-        const targetBehaviors = this.behaviors;
-        if (targetBehaviors === null) {
-            return;
-        }
-        const length = behaviors.length;
-        const behaviorsToUnbind = [];
-        for (let i = 0; i < length; ++i) {
-            const behavior = behaviors[i];
-            if (targetBehaviors.has(behavior)) {
-                const count = targetBehaviors.get(behavior) - 1;
-                count === 0 || force
-                    ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior)
-                    : targetBehaviors.set(behavior, count);
-            }
-        }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element, context);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
     /**
      * Runs connected lifecycle behavior on the associated element.
      */
-    onConnectedCallback() {
+    connect() {
         if (this._isConnected) {
             return;
         }
-        const element = this.element;
-        const context = ExecutionContext.default;
         if (this.needsInitialization) {
             this.finishInitialization();
         }
         else if (this.view !== null) {
-            this.view.bind(element, context);
+            this.view.bind(this.source);
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            for (const behavior of behaviors.keys()) {
-                behavior.bind(element, context);
+            for (const key of behaviors.keys()) {
+                key.connectedCallback && key.connectedCallback(this);
             }
         }
         this.setIsConnected(true);
@@ -281,21 +273,18 @@ export class Controller extends PropertyChangeNotifier {
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
-    onDisconnectedCallback() {
+    disconnect() {
         if (!this._isConnected) {
             return;
         }
         this.setIsConnected(false);
-        const view = this.view;
-        if (view !== null) {
-            view.unbind();
+        if (this.view !== null) {
+            this.view.unbind();
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (const behavior of behaviors.keys()) {
-                behavior.unbind(element, context);
+            for (const key of behaviors.keys()) {
+                key.disconnectedCallback && key.disconnectedCallback(this);
             }
         }
     }
@@ -308,7 +297,7 @@ export class Controller extends PropertyChangeNotifier {
     onAttributeChangedCallback(name, oldValue, newValue) {
         const attrDef = this.definition.attributeLookup[name];
         if (attrDef !== void 0) {
-            attrDef.onAttributeChangedCallback(this.element, newValue);
+            attrDef.onAttributeChangedCallback(this.source, newValue);
         }
     }
     /**
@@ -321,12 +310,12 @@ export class Controller extends PropertyChangeNotifier {
      */
     emit(type, detail, options) {
         if (this._isConnected) {
-            return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+            return this.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
         }
         return false;
     }
     finishInitialization() {
-        const element = this.element;
+        const element = this.source;
         const boundObservables = this.boundObservables;
         // If we have any observables that were bound, re-apply their values.
         if (boundObservables !== null) {
@@ -338,15 +327,15 @@ export class Controller extends PropertyChangeNotifier {
             this.boundObservables = null;
         }
         this.renderTemplate(this.template);
-        this.addStyles(this.styles);
+        this.addStyles(this.mainStyles);
         this.needsInitialization = false;
     }
     renderTemplate(template) {
         var _a;
-        const element = this.element;
         // When getting the host to render to, we start by looking
         // up the shadow root. If there isn't one, then that means
         // we're doing a Light DOM render to the element's direct children.
+        const element = this.source;
         const host = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : element;
         if (this.view !== null) {
             // If there's already a view, we need to unbind and remove through dispose.
@@ -363,6 +352,8 @@ export class Controller extends PropertyChangeNotifier {
         if (template) {
             // If a new template was provided, render it.
             this.view = template.render(element, host, element);
+            this.view.sourceLifetime =
+                SourceLifetime.coupled;
         }
     }
     /**
@@ -382,6 +373,94 @@ export class Controller extends PropertyChangeNotifier {
         if (definition === void 0) {
             throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
-        return (element.$fastController = new Controller(element, definition));
+        return (element.$fastController = new ElementController(element, definition));
+    }
+}
+/**
+ * Converts a styleTarget into the operative target. When the provided target is an Element
+ * that is a FASTElement, the function will return the ShadowRoot for that element. Otherwise,
+ * it will return the root node for the element.
+ * @param target
+ * @returns
+ */
+function normalizeStyleTarget(target) {
+    var _a;
+    if ("adoptedStyleSheets" in target) {
+        return target;
+    }
+    else {
+        return ((_a = getShadowRoot(target)) !== null && _a !== void 0 ? _a : target.getRootNode());
+    }
+}
+// Default StyleStrategy implementations are defined in this module because they
+// require access to element shadowRoots, and we don't want to leak shadowRoot
+// objects out of this module.
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+export class AdoptedStyleSheetsStrategy {
+    constructor(styles) {
+        const styleSheetCache = AdoptedStyleSheetsStrategy.styleSheetCache;
+        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 t = normalizeStyleTarget(target);
+        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+    }
+    removeStylesFrom(target) {
+        const t = normalizeStyleTarget(target);
+        const sheets = this.sheets;
+        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+    }
+}
+AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
+let id = 0;
+const nextStyleId = () => `fast-${++id}`;
+function usableStyleTarget(target) {
+    return target === document ? document.body : target;
+}
+/**
+ * @internal
+ */
+export class StyleElementStrategy {
+    constructor(styles) {
+        this.styles = styles;
+        this.styleClass = nextStyleId();
+    }
+    addStylesTo(target) {
+        target = usableStyleTarget(normalizeStyleTarget(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) {
+        target = usableStyleTarget(normalizeStyleTarget(target));
+        const styles = target.querySelectorAll(`.${this.styleClass}`);
+        styles[0].parentNode;
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
     }
 }
+ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
+    ? AdoptedStyleSheetsStrategy
+    : StyleElementStrategy);

package/dist/esm/components/fast-definitions.js

@@ -5,25 +5,24 @@ import { ElementStyles } from "../styles/element-styles.js";
 import { AttributeDefinition } from "./attributes.js";
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
+const fastElementBaseTypes = new Set();
 const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => createTypeRegistry());
 /**
  * Defines metadata for a FASTElement.
  * @public
  */
 export class FASTElementDefinition {
-    /**
-     * Creates an instance of FASTElementDefinition.
-     * @param type - The type this definition is being created for.
-     * @param nameOrConfig - The name of the element to define or a config object
-     * that describes the element to define.
-     */
     constructor(type, nameOrConfig = type.definition) {
+        var _a;
+        this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
         this.type = type;
         this.name = nameOrConfig.name;
         this.template = nameOrConfig.template;
+        this.registry = (_a = nameOrConfig.registry) !== null && _a !== void 0 ? _a : customElements;
+        const proto = type.prototype;
         const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
         const observedAttributes = new Array(attributes.length);
         const propertyLookup = {};
@@ -33,9 +32,13 @@ export class FASTElementDefinition {
             observedAttributes[i] = current.attribute;
             propertyLookup[current.name] = current;
             attributeLookup[current.attribute] = current;
+            Observable.defineProperty(proto, current);
         }
+        Reflect.defineProperty(type, "observedAttributes", {
+            value: observedAttributes,
+            enumerable: true,
+        });
         this.attributes = attributes;
-        this.observedAttributes = observedAttributes;
         this.propertyLookup = propertyLookup;
         this.attributeLookup = attributeLookup;
         this.shadowOptions =
@@ -48,43 +51,50 @@ export class FASTElementDefinition {
             nameOrConfig.elementOptions === void 0
                 ? defaultElementOptions
                 : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
-        this.styles =
-            nameOrConfig.styles === void 0
-                ? void 0
-                : Array.isArray(nameOrConfig.styles)
-                    ? new ElementStyles(nameOrConfig.styles)
-                    : nameOrConfig.styles instanceof ElementStyles
-                        ? nameOrConfig.styles
-                        : new ElementStyles([nameOrConfig.styles]);
+        this.styles = ElementStyles.normalize(nameOrConfig.styles);
+        fastElementRegistry.register(this);
     }
     /**
      * Indicates if this element has been defined in at least one registry.
      */
     get isDefined() {
-        return !!fastElementRegistry.getByType(this.type);
+        return this.platformDefined;
     }
     /**
      * Defines a custom element based on this definition.
      * @param registry - The element registry to define the element in.
+     * @remarks
+     * This operation is idempotent per registry.
      */
-    define(registry = customElements) {
+    define(registry = this.registry) {
         const type = this.type;
-        if (fastElementRegistry.register(this)) {
-            const attributes = this.attributes;
-            const proto = type.prototype;
-            for (let i = 0, ii = attributes.length; i < ii; ++i) {
-                Observable.defineProperty(proto, attributes[i]);
-            }
-            Reflect.defineProperty(type, "observedAttributes", {
-                value: this.observedAttributes,
-                enumerable: true,
-            });
-        }
         if (!registry.get(this.name)) {
+            this.platformDefined = true;
             registry.define(this.name, type, this.elementOptions);
         }
         return this;
     }
+    /**
+     * Creates an instance of FASTElementDefinition.
+     * @param type - The type this definition is being created for.
+     * @param nameOrDef - The name of the element to define or a config object
+     * that describes the element to define.
+     */
+    static compose(type, nameOrDef) {
+        if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
+            return new FASTElementDefinition(class extends type {
+            }, nameOrDef);
+        }
+        return new FASTElementDefinition(type, nameOrDef);
+    }
+    /**
+     * Registers a FASTElement base type.
+     * @param type - The type to register as a base type.
+     * @internal
+     */
+    static registerBaseType(type) {
+        fastElementBaseTypes.add(type);
+    }
 }
 /**
  * Gets the element definition associated with the specified type.

package/dist/esm/components/fast-element.js

@@ -1,26 +1,44 @@
-import { Controller } from "./controller.js";
+import { isFunction } from "../interfaces.js";
+import { ElementController } from "./element-controller.js";
 import { FASTElementDefinition, } from "./fast-definitions.js";
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
-    return class extends BaseType {
+    const type = class extends BaseType {
         constructor() {
             /* eslint-disable-next-line */
             super();
-            Controller.forCustomElement(this);
+            ElementController.forCustomElement(this);
         }
         $emit(type, detail, options) {
             return this.$fastController.emit(type, detail, options);
         }
         connectedCallback() {
-            this.$fastController.onConnectedCallback();
+            this.$fastController.connect();
         }
         disconnectedCallback() {
-            this.$fastController.onDisconnectedCallback();
+            this.$fastController.disconnect();
         }
         attributeChangedCallback(name, oldValue, newValue) {
             this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
         }
     };
+    FASTElementDefinition.registerBaseType(type);
+    return type;
+}
+function compose(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef);
+    }
+    return FASTElementDefinition.compose(this, type);
+}
+function define(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef).define().type;
+    }
+    return FASTElementDefinition.compose(this, type).define().type;
+}
+function from(BaseType) {
+    return createFASTElement(BaseType);
 }
 /**
  * A minimal base class for FASTElements that also provides
@@ -33,18 +51,19 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * provided base type.
      * @param BaseType - The base element type to inherit from.
      */
-    from(BaseType) {
-        return createFASTElement(BaseType);
-    },
+    from,
     /**
      * Defines a platform custom element based on the provided type and definition.
      * @param type - The custom element type to define.
      * @param nameOrDef - The name of the element to define or a definition object
      * that describes the element to define.
      */
-    define(type, nameOrDef) {
-        return new FASTElementDefinition(type, nameOrDef).define().type;
-    },
+    define,
+    /**
+     * Defines metadata for a FASTElement which can be used to later define the element.
+     * @public
+     */
+    compose,
 });
 /**
  * Decorator: Defines a platform custom element based on `FASTElement`.
@@ -55,6 +74,6 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
 export function customElement(nameOrDef) {
     /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
     return function (type) {
-        new FASTElementDefinition(type, nameOrDef).define();
+        define(type, nameOrDef);
     };
 }