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

package/dist/dts/templating/repeat.d.ts

@@ -1,8 +1,8 @@
 import type { Behavior } from "../observation/behavior.js";
 import type { Subscriber } from "../observation/notifier.js";
-import { Binding, ExecutionContext } from "../observation/observable.js";
+import { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
 import { Splice } from "../observation/arrays.js";
-import { AddViewBehaviorFactory, HTMLDirective, ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
+import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
 import type { CaptureType, SyntheticViewTemplate, ViewTemplate } from "./template.js";
 /**
  * Options for configuring repeat behavior.
@@ -23,10 +23,8 @@ export interface RepeatOptions {
  * @public
  */
 export declare class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
+    private directive;
     private location;
-    private itemsBinding;
-    private templateBinding;
-    private options;
     private source;
     private views;
     private template;
@@ -40,13 +38,13 @@ export declare class RepeatBehavior<TSource = any> implements Behavior, Subscrib
     /**
      * Creates an instance of RepeatBehavior.
      * @param location - The location in the DOM to render the repeat.
-     * @param itemsBinding - The array to render.
+     * @param dataBinding - The array to render.
      * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
      * @param templateBinding - The template to render for each item.
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(location: Node, itemsBinding: Binding<TSource, any[]>, isItemsBindingVolatile: boolean, templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean, options: RepeatOptions);
+    constructor(directive: RepeatDirective, location: Node);
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -63,7 +61,7 @@ export declare class RepeatBehavior<TSource = any> implements Behavior, Subscrib
      * @param source - The source of the change.
      * @param args - The details about what was changed.
      */
-    handleChange(source: any, args: Splice[]): void;
+    handleChange(source: any, args: Splice[] | ExpressionObserver): void;
     private observeItems;
     private updateViews;
     private refreshAllViews;
@@ -74,11 +72,9 @@ export declare class RepeatBehavior<TSource = any> implements Behavior, Subscrib
  * @public
  */
 export declare class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
-    readonly itemsBinding: Binding;
+    readonly dataBinding: Binding<TSource>;
     readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
     readonly options: RepeatOptions;
-    private isItemsBindingVolatile;
-    private isTemplateBindingVolatile;
     /**
      * The unique id of the factory.
      */
@@ -94,11 +90,11 @@ export declare class RepeatDirective<TSource = any> implements HTMLDirective, Vi
     createHTML(add: AddViewBehaviorFactory): string;
     /**
      * Creates an instance of RepeatDirective.
-     * @param itemsBinding - The binding that provides the array to render.
+     * @param dataBinding - The binding that provides the array to render.
      * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
+    constructor(dataBinding: Binding<TSource>, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
     /**
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
@@ -107,10 +103,10 @@ export declare class RepeatDirective<TSource = any> implements HTMLDirective, Vi
 }
 /**
  * A directive that enables list rendering.
- * @param itemsBinding - The array to render.
- * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * @param items - The array to render.
+ * @param template - The template or a template binding used obtain a template
  * to render for each item in the array.
  * @param options - Options used to turn on special repeat features.
  * @public
  */
-export declare function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ViewTemplate | Binding<TSource, ViewTemplate>, options?: RepeatOptions): CaptureType<TSource>;
+export declare function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(items: Expression<TSource, TArray, ExecutionContext<TSource>> | Binding<TSource, TArray> | ReadonlyArray<any>, template: Expression<TSource, ViewTemplate> | Binding<TSource, ViewTemplate> | ViewTemplate, options?: RepeatOptions): CaptureType<TSource>;

package/dist/dts/templating/template.d.ts

@@ -1,5 +1,5 @@
-import { Binding, ExecutionContext } from "../observation/observable.js";
-import { HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
+import { ExecutionContext, Expression } from "../observation/observable.js";
+import { Binding, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -87,7 +87,7 @@ export interface CaptureType<TSource> {
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export declare type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
+export declare type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.

package/dist/dts/templating/when.d.ts

@@ -1,10 +1,10 @@
-import type { Binding } from "../observation/observable.js";
+import type { Expression } from "../observation/observable.js";
 import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 /**
  * A directive that enables basic conditional rendering in a template.
- * @param binding - The condition to test for rendering.
+ * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
  * @public
  */
-export declare function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
+export declare function when<TSource = any, TReturn = any>(condition: Expression<TSource, TReturn> | boolean, templateOrTemplateBinding: SyntheticViewTemplate | Expression<TSource, SyntheticViewTemplate>): CaptureType<TSource>;

package/dist/dts/testing/exports.d.ts

@@ -0,0 +1,2 @@
+export { timeout } from "./timeout.js";
+export * from "./fixture.js";

package/dist/dts/testing/fixture.d.ts

@@ -0,0 +1,90 @@
+import type { Constructable } from "../interfaces.js";
+import { ExecutionContext } from "../observation/observable.js";
+import { ViewTemplate } from "../templating/template.js";
+import type { HTMLView } from "../templating/view.js";
+/**
+ * Options used to customize the creation of the test fixture.
+ * @public
+ */
+export interface FixtureOptions {
+    /**
+     * The document to run the fixture in.
+     * @defaultValue `globalThis.document`
+     */
+    document?: Document;
+    /**
+     * The parent element to append the fixture to.
+     * @defaultValue An instance of `HTMLDivElement`.
+     */
+    parent?: HTMLElement;
+    /**
+     * The data source to bind the HTML to.
+     * @defaultValue An empty object.
+     */
+    source?: any;
+    /**
+     * The execution context to use during binding.
+     * @defaultValue {@link @microsoft/fast-element#ExecutionContext}
+     */
+    context?: ExecutionContext;
+}
+/**
+ * A test fixture.
+ * @public
+ */
+export interface Fixture<TElement = HTMLElement> {
+    /**
+     * The document the fixture is running in.
+     */
+    document: Document;
+    /**
+     * The template the fixture was created from.
+     */
+    template: ViewTemplate;
+    /**
+     * The view that was created from the fixture's template.
+     */
+    view: HTMLView;
+    /**
+     * The parent element that the view was appended to.
+     * @remarks
+     * This element will be appended to the DOM only
+     * after {@link Fixture.connect} has been called.
+     */
+    parent: HTMLElement;
+    /**
+     * The first element in the {@link Fixture.view}.
+     */
+    element: TElement;
+    /**
+     * Adds the {@link Fixture.parent} to the DOM, causing the
+     * connect lifecycle to begin.
+     * @remarks
+     * Yields control to the caller one Microtask later, in order to
+     * ensure that the DOM has settled.
+     */
+    connect: () => Promise<void>;
+    /**
+     * Removes the {@link Fixture.parent} from the DOM, causing the
+     * disconnect lifecycle to begin.
+     * @remarks
+     * Yields control to the caller one Microtask later, in order to
+     * ensure that the DOM has settled.
+     */
+    disconnect: () => Promise<void>;
+}
+/**
+ * Creates a random, unique name suitable for use as a Custom Element name.
+ * @public
+ */
+export declare function uniqueElementName(prefix?: string): string;
+/**
+ * Creates a test fixture suitable for testing custom elements, templates, and bindings.
+ * @param templateNameOrType An HTML template or single element name to create the fixture for.
+ * @param options Enables customizing fixture creation behavior.
+ * @remarks
+ * Yields control to the caller one Microtask later, in order to
+ * ensure that the DOM has settled.
+ * @public
+ */
+export declare function fixture<TElement = HTMLElement>(templateNameOrType: ViewTemplate | string | Constructable<TElement>, options?: FixtureOptions): Promise<Fixture<TElement>>;

package/dist/dts/testing/timeout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A timeout helper for use in tests.
+ * @param timeout The length of the timeout.
+ * @returns A promise that resolves once the configured time has elapsed.
+ * @public
+ */
+export declare function timeout(timeout?: number): Promise<void>;

package/dist/dts/utilities.d.ts

@@ -1,21 +1,3 @@
-import { Disposable } from "./interfaces.js";
-import type { Subscriber } from "./observation/notifier.js";
-/**
- * Converts a plain object to an observable object.
- * @param object - The object to make observable.
- * @param deep - Indicates whether or not to deeply convert the oject.
- * @returns The converted object.
- * @beta
- */
-export declare function makeObservable<T>(object: T, deep?: boolean): T;
-/**
- * Deeply subscribes to changes in existing observable objects.
- * @param object - The observable object to watch.
- * @param subscriber - The handler to call when changes are made to the object.
- * @returns A disposable that can be used to unsubscribe from change updates.
- * @beta
- */
-export declare function watch(object: any, subscriber: Subscriber | ((subject: any, args: any) => void)): Disposable;
 /**
  * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
  * When the parent of a node is a shadow-root, it will return the host

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

@@ -11,19 +11,15 @@ const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */
  * @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) {
+        this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
         this.type = type;
         this.name = nameOrConfig.name;
         this.template = nameOrConfig.template;
+        const proto = type.prototype;
         const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
         const observedAttributes = new Array(attributes.length);
         const propertyLookup = {};
@@ -33,9 +29,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,20 +48,14 @@ 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.
@@ -71,22 +65,26 @@ export class FASTElementDefinition {
      */
     define(registry = customElements) {
         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) {
+        const found = fastElementRegistry.getByType(type);
+        if (found) {
+            return new FASTElementDefinition(class extends type {
+            }, nameOrDef);
+        }
+        return new FASTElementDefinition(type, nameOrDef);
+    }
 }
 /**
  * Gets the element definition associated with the specified type.

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

@@ -1,3 +1,4 @@
+import { isFunction } from "../interfaces.js";
 import { Controller } from "./controller.js";
 import { FASTElementDefinition, } from "./fast-definitions.js";
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
@@ -22,6 +23,21 @@ function createFASTElement(BaseType) {
         }
     };
 }
+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
  * static helpers for working with FASTElements.
@@ -33,26 +49,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 +72,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/context.js

@@ -1,4 +1,6 @@
+import "./interfaces.js";
 import { Metadata } from "./metadata.js";
+import { FAST } from "./platform.js";
 const contextEventType = "context-request";
 let requestStrategy;
 /**
@@ -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);

package/dist/esm/debug.js

@@ -12,19 +12,50 @@ const debugMessages = {
     [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, ...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 {};