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

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

@@ -1,21 +1,24 @@
-import { DOM } from "../dom.js";
+import "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
-import { defaultExecutionContext, Observable } from "../observation/observable.js";
+import { Observable, SourceLifetime } from "../observation/observable.js";
+import { FAST } from "../platform.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) {
-    return element.shadowRoot || shadowRoots.get(element) || null;
+    var _a, _b;
+    return (_b = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : shadowRoots.get(element)) !== null && _b !== void 0 ? _b : null;
 }
 /**
  * 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.
@@ -26,11 +29,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
@@ -46,13 +50,19 @@ 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) {
-            const shadowRoot = element.attachShadow(shadowOptions);
-            if (shadowOptions.mode === "closed") {
-                shadowRoots.set(element, shadowRoot);
+            let shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                this.hasExistingShadowRoot = true;
+            }
+            else {
+                shadowRoot = element.attachShadow(shadowOptions);
+                if (shadowOptions.mode === "closed") {
+                    shadowRoots.set(element, shadowRoot);
+                }
             }
         }
         // Capture any observable values that were set by the binding engine before
@@ -77,12 +87,12 @@ export class Controller extends PropertyChangeNotifier {
      * connected to the document.
      */
     get isConnected() {
-        Observable.track(this, "isConnected");
+        Observable.track(this, isConnectedPropertyName);
         return this._isConnected;
     }
     setIsConnected(value) {
         this._isConnected = value;
-        Observable.notify(this, "isConnected");
+        Observable.notify(this, isConnectedPropertyName);
     }
     /**
      * Gets/sets the template used to render the component.
@@ -90,6 +100,19 @@ export class Controller extends PropertyChangeNotifier {
      * This value can only be accurately read after connect but can be set at any time.
      */
     get template() {
+        var _a;
+        // 1. Template overrides take top precedence.
+        if (this._template === null) {
+            const definition = this.definition;
+            if (this.source.resolveTemplate) {
+                // 2. Allow for element instance overrides next.
+                this._template = this.source.resolveTemplate();
+            }
+            else if (definition.template) {
+                // 3. Default to the static definition.
+                this._template = (_a = definition.template) !== null && _a !== void 0 ? _a : null;
+            }
+        }
         return this._template;
     }
     set template(value) {
@@ -102,40 +125,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() {
-        return this._styles;
+    get mainStyles() {
+        var _a;
+        // 1. Styles overrides take top precedence.
+        if (this._mainStyles === null) {
+            const definition = this.definition;
+            if (this.source.resolveStyles) {
+                // 2. Allow for element instance overrides next.
+                this._mainStyles = this.source.resolveStyles();
+            }
+            else if (definition.styles) {
+                // 3. Default to the static definition.
+                this._mainStyles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
+            }
+        }
+        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;
-        if (!this.needsInitialization && value !== null) {
+        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) {
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
-        if (styles instanceof HTMLStyleElement) {
+        var _a;
+        if (!styles) {
+            return;
+        }
+        const source = this.source;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
+        if (styles instanceof HTMLElement) {
             target.append(styles);
         }
         else if (!styles.isAttachedTo(target)) {
             const sourceBehaviors = styles.behaviors;
             styles.addStylesTo(target);
             if (sourceBehaviors !== null) {
-                this.addBehaviors(sourceBehaviors);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
@@ -144,90 +229,42 @@ export class Controller extends PropertyChangeNotifier {
      * @param styles - the styles to remove.
      */
     removeStyles(styles) {
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
-        if (styles instanceof HTMLStyleElement) {
+        var _a;
+        if (!styles) {
+            return;
+        }
+        const source = this.source;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
+        if (styles instanceof HTMLElement) {
             target.removeChild(styles);
         }
         else if (styles.isAttachedTo(target)) {
             const sourceBehaviors = styles.behaviors;
             styles.removeStylesFrom(target);
             if (sourceBehaviors !== null) {
-                this.removeBehaviors(sourceBehaviors);
-            }
-        }
-    }
-    /**
-     * Adds behaviors to this element.
-     * @param behaviors - The behaviors to add.
-     */
-    addBehaviors(behaviors) {
-        const targetBehaviors = this.behaviors || (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;
-            for (let i = 0; i < behaviorsToBind.length; ++i) {
-                behaviorsToBind[i].bind(element, defaultExecutionContext);
-            }
-        }
-    }
-    /**
-     * 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;
-            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element);
+                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;
         if (this.needsInitialization) {
             this.finishInitialization();
         }
         else if (this.view !== null) {
-            this.view.bind(element, defaultExecutionContext);
+            this.view.bind(this.source);
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            for (const [behavior] of behaviors) {
-                behavior.bind(element, defaultExecutionContext);
+            for (const key of behaviors.keys()) {
+                key.connectedCallback && key.connectedCallback(this);
             }
         }
         this.setIsConnected(true);
@@ -235,20 +272,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;
-            for (const [behavior] of behaviors) {
-                behavior.unbind(element);
+            for (const key of behaviors.keys()) {
+                key.disconnectedCallback && key.disconnectedCallback(this);
             }
         }
     }
@@ -261,7 +296,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);
         }
     }
     /**
@@ -274,12 +309,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) {
@@ -290,59 +325,34 @@ export class Controller extends PropertyChangeNotifier {
             }
             this.boundObservables = null;
         }
-        const definition = this.definition;
-        // 1. Template overrides take top precedence.
-        if (this._template === null) {
-            if (this.element.resolveTemplate) {
-                // 2. Allow for element instance overrides next.
-                this._template = this.element.resolveTemplate();
-            }
-            else if (definition.template) {
-                // 3. Default to the static definition.
-                this._template = definition.template || null;
-            }
-        }
-        // If we have a template after the above process, render it.
-        // If there's no template, then the element author has opted into
-        // custom rendering and they will managed the shadow root's content themselves.
-        if (this._template !== null) {
-            this.renderTemplate(this._template);
-        }
-        // 1. Styles overrides take top precedence.
-        if (this._styles === null) {
-            if (this.element.resolveStyles) {
-                // 2. Allow for element instance overrides next.
-                this._styles = this.element.resolveStyles();
-            }
-            else if (definition.styles) {
-                // 3. Default to the static definition.
-                this._styles = definition.styles || null;
-            }
-        }
-        // If we have styles after the above process, add them.
-        if (this._styles !== null) {
-            this.addStyles(this._styles);
-        }
+        this.renderTemplate(this.template);
+        this.addStyles(this.mainStyles);
         this.needsInitialization = false;
     }
     renderTemplate(template) {
-        const element = this.element;
+        var _a;
         // 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 host = getShadowRoot(element) || element;
+        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.
             this.view.dispose();
             this.view = null;
         }
-        else if (!this.needsInitialization) {
+        else if (!this.needsInitialization || this.hasExistingShadowRoot) {
+            this.hasExistingShadowRoot = false;
             // If there was previous custom rendering, we need to clear out the host.
-            DOM.removeChildNodes(host);
+            for (let child = host.firstChild; child !== null; child = host.firstChild) {
+                host.removeChild(child);
+            }
         }
         if (template) {
             // If a new template was provided, render it.
             this.view = template.render(element, host, element);
+            this.view.sourceLifetime =
+                SourceLifetime.coupled;
         }
     }
     /**
@@ -358,10 +368,10 @@ export class Controller extends PropertyChangeNotifier {
         if (controller !== void 0) {
             return controller;
         }
-        const definition = FASTElementDefinition.forType(element.constructor);
+        const definition = FASTElementDefinition.getForInstance(element);
         if (definition === void 0) {
-            throw new Error("Missing FASTElement definition.");
+            throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
-        return (element.$fastController = new Controller(element, definition));
+        return (element.$fastController = new ElementController(element, definition));
     }
 }

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

@@ -1,42 +1,28 @@
-import { FAST } from "../platform.js";
+import { isString } from "../interfaces.js";
 import { Observable } from "../observation/observable.js";
+import { createTypeRegistry, FAST } from "../platform.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import { AttributeDefinition } from "./attributes.js";
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
-const fastRegistry = FAST.getById(4 /* elementRegistry */, () => {
-    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);
-        },
-    });
-});
+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) {
-        if (typeof nameOrConfig === "string") {
+        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 = {};
@@ -46,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 =
@@ -61,46 +51,58 @@ 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)
-                    ? ElementStyles.create(nameOrConfig.styles)
-                    : nameOrConfig.styles instanceof ElementStyles
-                        ? nameOrConfig.styles
-                        : ElementStyles.create([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 !!fastRegistry.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 (fastRegistry.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.
  * @param type - The custom element type to retrieve the definition for.
  */
-FASTElementDefinition.forType = fastRegistry.getByType;
+FASTElementDefinition.getByType = fastElementRegistry.getByType;
+/**
+ * Gets the element definition associated with the instance.
+ * @param instance - The custom element instance to retrieve the definition for.
+ */
+FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;