@microsoft/fast-element 2.0.0-beta.6 → 2.0.0-beta.8

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

@@ -1,24 +1,24 @@
 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 { 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 +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
@@ -50,7 +50,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 +104,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,48 +125,92 @@ 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;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
             target.append(styles);
         }
@@ -174,7 +218,9 @@ export class Controller extends PropertyChangeNotifier {
             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]);
+                }
             }
         }
     }
@@ -183,11 +229,12 @@ 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;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
             target.removeChild(styles);
         }
@@ -195,85 +242,29 @@ export class Controller extends PropertyChangeNotifier {
             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) {
-        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 +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;
-            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 +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);
         }
     }
     /**
@@ -321,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) {
@@ -338,15 +326,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 +351,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 +372,6 @@ 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));
     }
 }

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

@@ -12,6 +12,7 @@ const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */
  */
 export class FASTElementDefinition {
     constructor(type, nameOrConfig = type.definition) {
+        var _a;
         this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
@@ -19,6 +20,7 @@ export class FASTElementDefinition {
         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);
@@ -63,7 +65,7 @@ export class FASTElementDefinition {
      * @remarks
      * This operation is idempotent per registry.
      */
-    define(registry = customElements) {
+    define(registry = this.registry) {
         const type = this.type;
         if (!registry.get(this.name)) {
             this.platformDefined = true;

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

@@ -1,5 +1,5 @@
 import { isFunction } from "../interfaces.js";
-import { Controller } from "./controller.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) {
@@ -7,16 +7,16 @@ function createFASTElement(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);

package/dist/esm/di/di.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
  * for the bulk of this code and many of the associated tests.
@@ -134,6 +143,7 @@ export const ContainerConfiguration = Object.freeze({
      */
     default: Object.freeze({
         parentLocator: () => null,
+        asyncRegistrationLocator: () => __awaiter(void 0, void 0, void 0, function* () { return null; }),
         responsibleForOwnerRequests: false,
         defaultResolver: DefaultResolver.singleton,
     }),
@@ -718,6 +728,35 @@ export class ResolverImpl {
     register(container) {
         return container.registerResolver(this.key, this);
     }
+    resolveAsync(handler, requestor) {
+        switch (this.strategy) {
+            case 1 /* ResolverStrategy.singleton */: {
+                if (this.resolving) {
+                    throw FAST.error(1513 /* Message.cyclicDependency */, { name: this.state.name });
+                }
+                this.resolving = true;
+                return handler
+                    .getFactory(this.state)
+                    .constructAsync(requestor)
+                    .then(instance => {
+                    this.state = instance;
+                    this.strategy = 0 /* ResolverStrategy.instance */;
+                    this.resolving = false;
+                    return instance;
+                });
+            }
+            case 2 /* ResolverStrategy.transient */: {
+                // Always create transients from the requesting container
+                const factory = handler.getFactory(this.state);
+                if (factory === null) {
+                    throw FAST.error(1502 /* Message.noFactoryForResolver */, { key: this.key });
+                }
+                return factory.constructAsync(requestor);
+            }
+            default:
+                return Promise.resolve(this.resolve(handler, requestor));
+        }
+    }
     resolve(handler, requestor) {
         switch (this.strategy) {
             case 0 /* ResolverStrategy.instance */:
@@ -780,15 +819,25 @@ export class FactoryImpl {
         this.dependencies = dependencies;
         this.transformers = null;
     }
+    constructAsync(container, dynamicDependencies) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const resolved = yield Promise.all(this.dependencies.map(x => container.getAsync(x)));
+            return this.constructCore(resolved, dynamicDependencies);
+        });
+    }
     construct(container, dynamicDependencies) {
+        const resolved = this.dependencies.map(containerGetKey, container);
+        return this.constructCore(resolved, dynamicDependencies);
+    }
+    constructCore(resolved, dynamicDependencies) {
         let instance;
         if (dynamicDependencies === void 0) {
-            instance = new this.Type(...this.dependencies.map(containerGetKey, container));
+            instance = new this.Type(...resolved);
         }
         else {
-            instance = new this.Type(...this.dependencies.map(containerGetKey, container), ...dynamicDependencies);
+            instance = new this.Type(...resolved, ...dynamicDependencies);
         }
-        if (this.transformers == null) {
+        if (this.transformers === null) {
             return instance;
         }
         return this.transformers.reduce(transformInstance, instance);
@@ -802,6 +851,9 @@ const containerResolver = {
     resolve(handler, requestor) {
         return requestor;
     },
+    resolveAsync: function (handler, requestor) {
+        return Promise.resolve(requestor);
+    },
 };
 function isRegistry(obj) {
     return typeof obj.register === "function";
@@ -1014,6 +1066,38 @@ export class ContainerImpl {
                 ? this.parent.has(key, true)
                 : false;
     }
+    getAsync(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            validateKey(key);
+            if (key.$isResolver) {
+                return key.resolveAsync(this, this);
+            }
+            /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+            let current = this;
+            let resolver;
+            while (current != null) {
+                resolver = current.resolvers.get(key);
+                if (resolver == null) {
+                    if (current.parent == null) {
+                        const registration = yield this.config.asyncRegistrationLocator(key);
+                        if (!registration) {
+                            throw FAST.error(1505 /* Message.cannotResolveKey */, { key });
+                        }
+                        const handler = isRegisterInRequester(key)
+                            ? this
+                            : current;
+                        resolver = registration.register(handler);
+                        return resolver.resolveAsync(current, this);
+                    }
+                    current = current.parent;
+                }
+                else {
+                    return resolver.resolveAsync(current, this);
+                }
+            }
+            throw FAST.error(1505 /* Message.cannotResolveKey */, { key });
+        });
+    }
     get(key) {
         validateKey(key);
         if (key.$isResolver) {

package/dist/esm/index.js

@@ -8,6 +8,7 @@ export * from "./observation/update-queue.js";
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
+export * from "./styles/host.js";
 // Templating
 export * from "./templating/dom.js";
 export * from "./templating/template.js";
@@ -26,4 +27,4 @@ export * from "./templating/node-observation.js";
 export * from "./components/fast-element.js";
 export * from "./components/fast-definitions.js";
 export * from "./components/attributes.js";
-export * from "./components/controller.js";
+export * from "./components/element-controller.js";