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

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

package/dist/esm/context.js

@@ -0,0 +1,163 @@
+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
+ */
+export const Context = Object.freeze({
+    /**
+     * The event type used for W3C Context Protocol requests.
+     */
+    eventType: contextEventType,
+    /**
+     * Creates a W3C Community Protocol-based Context object to use in requesting/providing
+     * context through the DOM.
+     * @param name - The name to use for the connext. Useful in debugging.
+     * @param initialValue - An optional initial value to use if a context handler isn't found.
+     */
+    create(name, initialValue) {
+        const Interface = function (target, property, index) {
+            if (target == null || new.target !== undefined) {
+                throw FAST.error(1501 /* Message.noRegistrationForContext */, {
+                    name: Interface.name,
+                });
+            }
+            if (property) {
+                Context.defineProperty(target, property, Interface);
+            }
+            else {
+                const types = Metadata.getOrCreateAnnotationParamTypes(target);
+                types[index] = Interface;
+            }
+        };
+        Interface.$isInterface = true;
+        Interface.initialValue = initialValue;
+        Reflect.defineProperty(Interface, "name", { value: name });
+        Interface.handle = (target, callback) => Context.handle(target, callback, Interface);
+        Interface.provide = (target, value) => Context.provide(target, Interface, value);
+        Interface.get = (target) => Context.get(target, Interface);
+        Interface.request = (target, callback, multiple) => Context.request(target, Interface, callback, multiple);
+        Interface.toString = () => `Context<${Interface.name}>`;
+        return Interface;
+    },
+    /**
+     * Sets the strategy used by all FAST-specific context requests made through the
+     * Context.request, Context.get, Context.defineProperty, and ContextDecorator APIs.
+     * @param strategy - The strategy to use. By default, the strategy is Context.dispatch.
+     */
+    setDefaultRequestStrategy(strategy) {
+        requestStrategy = strategy;
+    },
+    /**
+     * Gets the context value for the target node or returns the initial value if
+     * a context handler is not found.
+     * @param target - The target to get the context for.
+     * @param context - The context to locate.
+     * @returns The context value.
+     * @remarks
+     * Uses the default request strategy to locate the context. If no context is found
+     * then the initial value of the context is returned.
+     */
+    get(target, context) {
+        var _a;
+        let value;
+        requestStrategy(target, context, found => (value = found), false);
+        return (_a = value) !== null && _a !== void 0 ? _a : context.initialValue;
+    },
+    /**
+     * Requests the context value for the target node.
+     * @param target - The target to request the context for.
+     * @param context - The context to locate.
+     * @param callback - A callback to invoke with the context value.
+     * @param multiple - Whether the context requestor expects to handle updates
+     * to the context value after the initial request.
+     * @remarks
+     * Uses the default request strategy to locate the context.
+     */
+    request(target, context, callback, multiple = false) {
+        requestStrategy(target, context, callback, multiple);
+    },
+    /**
+     *
+     * @param target - The target to dispatch the context event on.
+     * @param context - The context to locate.
+     * @param callback - The callback to invoke with the context value.
+     * @param multiple - Whether the context requestor expects to handle updates
+     * to the context value after the initial request.
+     * @remarks
+     * This API does NOT use the default request strategy. It always dispatches
+     * an event through the DOM.
+     */
+    dispatch(target, context, callback, multiple = false) {
+        target.dispatchEvent(new ContextEvent(context, callback, multiple));
+    },
+    provide(target, context, value) {
+        this.handle(target, (event) => {
+            event.stopImmediatePropagation();
+            event.callback(value);
+        }, context);
+    },
+    /**
+     *
+     * @param target - The target on which to handle context requests.
+     * @param callback - The callback to invoke when a context request is received.
+     * @param context - The context to handle requests for.
+     * @remarks
+     * If a context is not provided then the callback will be invoked for all context
+     * requests that are received on the target.
+     */
+    handle(target, callback, context) {
+        if (context) {
+            target.addEventListener(contextEventType, (event) => {
+                if (event.context === context) {
+                    callback(event);
+                }
+            });
+        }
+        else {
+            target.addEventListener(contextEventType, callback);
+        }
+    },
+    /**
+     * Defines a getter-only property on the target that will return the context
+     * value for the target.
+     * @param target The target to define the property on.
+     * @param propertyName The name of the property to define.
+     * @param context The context that will be used to retrieve the property value.
+     * @remarks
+     * Uses the default request strategy to locate the context and will return the
+     * initialValue if the context isn't handled.
+     */
+    defineProperty(target, propertyName, context) {
+        const field = `$di_${propertyName}`;
+        Reflect.defineProperty(target, propertyName, {
+            get: function () {
+                var _a;
+                return (_a = this[field]) !== null && _a !== void 0 ? _a : (this[field] = Context.get(this, context));
+            },
+        });
+    },
+});
+Context.setDefaultRequestStrategy(Context.dispatch);
+/**
+ * An event fired by a context requester to signal it desires a named context.
+ *
+ * A provider should inspect the `context` property of the event to determine if it has a value that can
+ * satisfy the request, calling the `callback` with the requested value if so.
+ *
+ * If the requested context event contains a truthy `multiple` value, then a provider can call the callback
+ * multiple times if the value is changed, if this is the case the provider should pass a `dispose`
+ * method to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
+ * @public
+ */
+export class ContextEvent extends Event {
+    constructor(context, callback, multiple) {
+        super(contextEventType, { bubbles: true, composed: true });
+        this.context = context;
+        this.callback = callback;
+        this.multiple = multiple;
+    }
+}

package/dist/esm/debug.js

@@ -0,0 +1,61 @@
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", {
+        value: Object.create(null),
+        configurable: false,
+        enumerable: false,
+        writable: false,
+    });
+}
+const FAST = globalThis.FAST;
+const debugMessages = {
+    [1101 /* needsArrayObservation */]: "Must call enableArrayObservation before observing arrays.",
+    [1201 /* onlySetHTMLPolicyOnce */]: "The HTML 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.",
+    [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, values = noValues) {
+        var _a;
+        const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Warning";
+        console.warn(formatMessage(message, values));
+    },
+    error(code, values = noValues) {
+        var _a;
+        const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Error";
+        return new Error(formatMessage(message, values));
+    },
+});
+export {};