@microsoft/fast-element 2.0.0-beta.2 → 2.0.0-beta.21

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,26 +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 this.metadata(type, nameOrDef).define().type;
-    },
+    define,
     /**
      * Defines metadata for a FASTElement which can be used to later define the element.
-     * IMPORTANT: This API will be renamed to "compose" in a future beta.
      * @public
      */
-    metadata(type, nameOrDef) {
-        return new FASTElementDefinition(type, nameOrDef);
-    },
+    compose,
 });
 /**
  * Decorator: Defines a platform custom element based on `FASTElement`.
@@ -63,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) {
-        FASTElement.define(type, nameOrDef);
+        define(type, nameOrDef);
     };
 }

package/dist/esm/components/hydration.js

@@ -0,0 +1,35 @@
+import { UnobservableMutationObserver } from "../utilities.js";
+import { ElementController } from "./element-controller.js";
+const deferHydrationAttribute = "defer-hydration";
+/**
+ * An ElementController capable of hydrating FAST elements from
+ * Declarative Shadow DOM.
+ *
+ * @beta
+ */
+export class HydratableElementController extends ElementController {
+    static hydrationObserverHandler(records) {
+        for (const record of records) {
+            HydratableElementController.hydrationObserver.unobserve(record.target);
+            record.target.$fastController.connect();
+        }
+    }
+    connect() {
+        if (this.source.hasAttribute(deferHydrationAttribute)) {
+            HydratableElementController.hydrationObserver.observe(this.source, {
+                attributeFilter: [deferHydrationAttribute],
+            });
+        }
+        else {
+            super.connect();
+        }
+    }
+    disconnect() {
+        super.disconnect();
+        HydratableElementController.hydrationObserver.unobserve(this.source);
+    }
+    static install() {
+        ElementController.setStrategy(HydratableElementController);
+    }
+}
+HydratableElementController.hydrationObserver = new UnobservableMutationObserver(HydratableElementController.hydrationObserverHandler);

package/dist/esm/components/install-hydration.js

@@ -0,0 +1,2 @@
+import { HydratableElementController } from "./hydration.js";
+HydratableElementController.install();

package/dist/esm/context.js

@@ -1,9 +1,11 @@
+import "./interfaces.js";
 import { Metadata } from "./metadata.js";
+import { FAST } from "./platform.js";
 const contextEventType = "context-request";
 let requestStrategy;
 /**
  * Enables using the {@link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md | W3C Community Context protocol.}
- * @beta
+ * @public
  */
 export const Context = Object.freeze({
     /**
@@ -19,7 +21,9 @@ export const Context = Object.freeze({
     create(name, initialValue) {
         const Interface = function (target, property, index) {
             if (target == null || new.target !== undefined) {
-                throw new Error(`No registration for context: '${Interface.name}'`);
+                throw FAST.error(1501 /* Message.noRegistrationForContext */, {
+                    name: Interface.name,
+                });
             }
             if (property) {
                 Context.defineProperty(target, property, Interface);
@@ -128,7 +132,7 @@ export const Context = Object.freeze({
      * initialValue if the context isn't handled.
      */
     defineProperty(target, propertyName, context) {
-        const field = `$di_${propertyName}`;
+        const field = Symbol.for(`fast:di:${propertyName}`);
         Reflect.defineProperty(target, propertyName, {
             get: function () {
                 var _a;

package/dist/esm/debug.js

@@ -9,21 +9,57 @@ if (globalThis.FAST === void 0) {
 const FAST = globalThis.FAST;
 const debugMessages = {
     [1101 /* needsArrayObservation */]: "Must call enableArrayObservation before observing arrays.",
-    [1201 /* onlySetHTMLPolicyOnce */]: "The HTML policy can only be set once.",
+    [1201 /* onlySetDOMPolicyOnce */]: "The DOM Policy can only be set once.",
     [1202 /* bindingInnerHTMLRequiresTrustedTypes */]: "To bind innerHTML, you must use a TrustedTypesPolicy.",
+    [1203 /* twoWayBindingRequiresObservables */]: "View=>Model update skipped. To use twoWay binding, the target property must be observable.",
+    [1204 /* hostBindingWithoutHost */]: "No host element is present. Cannot bind host with ${name}.",
+    [1205 /* unsupportedBindingBehavior */]: "The requested binding behavior is not supported by the binding engine.",
+    [1206 /* directCallToHTMLTagNotAllowed */]: "Calling html`` as a normal function invalidates the security guarantees provided by FAST.",
+    [1207 /* onlySetTemplatePolicyOnce */]: "The DOM Policy for an HTML template can only be set once.",
+    [1208 /* cannotSetTemplatePolicyAfterCompilation */]: "The DOM Policy cannot be set after a template is compiled.",
+    [1209 /* blockedByDOMPolicy */]: "'${aspectName}' on '${tagName}' is blocked by the current DOMPolicy.",
     [1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
+    [1501 /* noRegistrationForContext */]: "No registration for Context/Interface '${name}'.",
+    [1502 /* noFactoryForResolver */]: "Dependency injection resolver for '${key}' returned a null factory.",
+    [1503 /* invalidResolverStrategy */]: "Invalid dependency injection resolver strategy specified '${strategy}'.",
+    [1504 /* cannotAutoregisterDependency */]: "Unable to autoregister dependency.",
+    [1505 /* cannotResolveKey */]: "Unable to resolve dependency injection key '${key}'.",
+    [1506 /* cannotConstructNativeFunction */]: "'${name}' is a native function and therefore cannot be safely constructed by DI. If this is intentional, please use a callback or cachedCallback resolver.",
+    [1507 /* cannotJITRegisterNonConstructor */]: "Attempted to jitRegister something that is not a constructor '${value}'. Did you forget to register this dependency?",
+    [1508 /* cannotJITRegisterIntrinsic */]: "Attempted to jitRegister an intrinsic type '${value}'. Did you forget to add @inject(Key)?",
+    [1509 /* cannotJITRegisterInterface */]: "Attempted to jitRegister an interface '${value}'.",
+    [1510 /* invalidResolver */]: "A valid resolver was not returned from the register method.",
+    [1511 /* invalidKey */]: "Key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?",
+    [1512 /* noDefaultResolver */]: "'${key}' not registered. Did you forget to add @singleton()?",
+    [1513 /* cyclicDependency */]: "Cyclic dependency found '${name}'.",
+    [1514 /* connectUpdateRequiresController */]: "Injected properties that are updated on changes to DOM connectivity require the target object to be an instance of FASTElement.",
 };
+const allPlaceholders = /(\$\{\w+?})/g;
+const placeholder = /\$\{(\w+?)}/g;
+const noValues = Object.freeze({});
+function formatMessage(message, values) {
+    return message
+        .split(allPlaceholders)
+        .map(v => {
+        var _a;
+        const replaced = v.replace(placeholder, "$1");
+        return String((_a = values[replaced]) !== null && _a !== void 0 ? _a : v);
+    })
+        .join("");
+}
 Object.assign(FAST, {
     addMessages(messages) {
         Object.assign(debugMessages, messages);
     },
-    warn(code, ...args) {
+    warn(code, values = noValues) {
         var _a;
-        console.warn((_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Warning");
+        const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Warning";
+        console.warn(formatMessage(message, values));
     },
-    error(code, ...args) {
+    error(code, values = noValues) {
         var _a;
-        return new Error((_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Error");
+        const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Error";
+        return new Error(formatMessage(message, values));
     },
 });
 export {};