@microsoft/fast-element 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/dts/index.d.ts

@@ -4,10 +4,10 @@ export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
 export * from "./observation/arrays.js";
 export * from "./observation/update-queue.js";
-export type { Behavior } from "./observation/behavior.js";
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
+export * from "./styles/host.js";
 export * from "./templating/dom.js";
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
@@ -24,4 +24,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 { ElementController } from "./components/element-controller.js";

package/dist/dts/interfaces.d.ts

@@ -13,6 +13,20 @@ export declare type Callable = typeof Function.prototype.call | {
 export declare type Constructable<T = {}> = {
     new (...args: any[]): T;
 };
+/**
+ * Represents a class.
+ * @public
+ */
+export declare type Class<T, C = {}> = C & {
+    /**
+     * The class's prototype;
+     */
+    readonly prototype: T;
+    /**
+     * The class's constructor.
+     */
+    new (...args: any[]): T;
+};
 /**
  * Provides a mechanism for releasing resources.
  * @public
@@ -30,11 +44,6 @@ export interface Disposable {
 export declare type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
-/**
- * Extracts the item type from an array.
- * @public
- */
-export declare type ArrayItem<T> = T extends ReadonlyArray<infer TItem> ? TItem : T extends Array<infer TItem> ? TItem : any;
 /**
  * A policy for use with the standard trustedTypes platform API.
  * @public
@@ -77,18 +86,21 @@ export interface FASTGlobal {
     /**
      * Sends a warning to the developer.
      * @param code - The warning code to send.
-     * @param args - Args relevant for the warning.
+     * @param values - Values relevant for the warning message.
      */
-    warn(code: number, ...args: any[]): void;
+    warn(code: number, values?: Record<string, any>): void;
     /**
      * Creates an error.
      * @param code - The error code to send.
-     * @param args - Args relevant for the error.
+     * @param values - Values relevant for the error message.
      */
-    error(code: number, ...args: any[]): Error;
+    error(code: number, values?: Record<string, any>): Error;
     /**
      * Adds debug messages for errors and warnings.
      * @param messages - The message dictionary to add.
+     * @remarks
+     * Message can include placeholders like $\{name\} which can be
+     * replaced by values passed at runtime.
      */
     addMessages(messages: Record<number, string>): void;
 }
@@ -100,15 +112,13 @@ export declare const enum KernelServiceId {
     updateQueue = 1,
     observable = 2,
     contextEvent = 3,
-    elementRegistry = 4,
-    styleSheetStrategy = 5,
-    developerChannel = 6
+    elementRegistry = 4
 }
 /**
  * A node that can be targeted by styles.
  * @public
  */
-export interface StyleTarget {
+export interface StyleTarget extends Pick<Node, "getRootNode"> {
     /**
      * Stylesheets to be adopted by the node.
      */
@@ -154,7 +164,24 @@ export declare const enum Message {
     needsArrayObservation = 1101,
     onlySetHTMLPolicyOnce = 1201,
     bindingInnerHTMLRequiresTrustedTypes = 1202,
-    missingElementDefinition = 1401
+    twoWayBindingRequiresObservables = 1203,
+    hostBindingWithoutHost = 1204,
+    unsupportedBindingBehavior = 1205,
+    missingElementDefinition = 1401,
+    noRegistrationForContext = 1501,
+    noFactoryForResolver = 1502,
+    invalidResolverStrategy = 1503,
+    cannotAutoregisterDependency = 1504,
+    cannotResolveKey = 1505,
+    cannotConstructNativeFunction = 1506,
+    cannotJITRegisterNonConstructor = 1507,
+    cannotJITRegisterIntrinsic = 1508,
+    cannotJITRegisterInterface = 1509,
+    invalidResolver = 1510,
+    invalidKey = 1511,
+    noDefaultResolver = 1512,
+    cyclicDependency = 1513,
+    connectUpdateRequiresController = 1514
 }
 /**
  * @internal
@@ -164,3 +191,7 @@ export declare const isFunction: (object: any) => object is Function;
  * @internal
  */
 export declare const isString: (object: any) => object is string;
+/**
+ * @internal
+ */
+export declare const noop: () => undefined;

package/dist/dts/metadata.d.ts

@@ -0,0 +1,25 @@
+import type { Constructable } from "./interfaces.js";
+/**
+ * Provides basic metadata capabilities used by Context and Dependency Injection.
+ */
+export declare const Metadata: Readonly<{
+    /**
+     * Gets the "design:paramtypes" metadata for the specified type.
+     * @param Type - The type to get the metadata for.
+     * @returns The metadata array or a frozen empty array if no metadata is found.
+     */
+    getDesignParamTypes: (Type: any) => any;
+    /**
+     * Gets the "annotation:paramtypes" metadata for the specified type.
+     * @param Type - The type to get the metadata for.
+     * @returns The metadata array or a frozen empty array if no metadata is found.
+     */
+    getAnnotationParamTypes: (Type: any) => any;
+    /**
+     *
+     * @param Type - Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
+     * an empty, mutable metadata array is created and added.
+     * @returns The metadata array.
+     */
+    getOrCreateAnnotationParamTypes(Type: Constructable): any[];
+}>;

package/dist/dts/observation/arrays.d.ts

@@ -204,4 +204,4 @@ export declare const ArrayObserver: Readonly<{
  * @returns The length of the array.
  * @public
  */
-export declare function length<T>(array: readonly T[]): number;
+export declare function lengthOf<T>(array: readonly T[]): number;

package/dist/dts/observation/observable.d.ts

@@ -23,10 +23,10 @@ export interface Accessor {
 }
 /**
  * The signature of an arrow function capable of being evaluated
- * as part of a template binding update.
+ * against source data and within an execution context.
  * @public
  */
-export declare type Binding<TSource = any, TReturn = any, TContext extends ExecutionContext = ExecutionContext> = (source: TSource, context: TContext) => TReturn;
+export declare type Expression<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
 /**
  * A record of observable property access.
  * @public
@@ -41,20 +41,80 @@ export interface ObservationRecord {
      */
     propertyName: string;
 }
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+export declare const SourceLifetime: Readonly<{
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    readonly unknown: undefined;
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    readonly coupled: 1;
+}>;
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+export declare type SourceLifetime = typeof SourceLifetime[keyof typeof SourceLifetime];
+/**
+ * Controls the lifecycle of an expression and provides relevant context.
+ * @public
+ */
+export interface ExpressionController<TSource = any, TParent = any> {
+    /**
+     * The source the expression is evaluated against.
+     */
+    readonly source: TSource;
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    readonly sourceLifetime?: SourceLifetime;
+    /**
+     * The context the expression is evaluated against.
+     */
+    readonly context: ExecutionContext<TParent>;
+    /**
+     * Indicates whether the controller is bound.
+     */
+    readonly isBound: boolean;
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior: {
+        unbind(controller: ExpressionController<TSource, TParent>): any;
+    }): void;
+}
+/**
+ * Observes an expression for changes.
+ * @public
+ */
+export interface ExpressionObserver<TSource = any, TReturn = any, TParent = any> {
+    /**
+     * Binds the expression to the source.
+     * @param controller - The controller that manages the lifecycle and related
+     * context for the expression.
+     */
+    bind(controller: ExpressionController<TSource, TParent>): TReturn;
+}
 /**
  * Enables evaluation of and subscription to a binding.
  * @public
  */
-export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier, Disposable {
+export interface ExpressionNotifier<TSource = any, TReturn = any, TParent = any> extends Notifier, ExpressionObserver<TSource, TReturn, TParent>, Disposable {
     /**
-     * Begins observing the binding for the source and returns the current value.
-     * @param source - The source that the binding is based on.
-     * @param context - The execution context to execute the binding within.
-     * @returns The value of the binding.
+     * Observes the expression.
+     * @param source - The source for the expression.
+     * @param context - The context for the expression.
      */
-    observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
+    observe(source: TSource, context?: ExecutionContext): TReturn;
     /**
-     * Gets {@link ObservationRecord|ObservationRecords} that the {@link BindingObserver}
+     * Gets {@link ObservationRecord|ObservationRecords} that the {@link ExpressionNotifier}
      * is observing.
      */
     records(): IterableIterator<ObservationRecord>;
@@ -114,19 +174,19 @@ export declare const Observable: Readonly<{
      */
     getAccessors: (target: {}) => Accessor[];
     /**
-     * Creates a {@link BindingObserver} that can watch the
-     * provided {@link Binding} for changes.
-     * @param binding - The binding to observe.
+     * Creates a {@link ExpressionNotifier} that can watch the
+     * provided {@link Expression} for changes.
+     * @param expression - The binding to observe.
      * @param initialSubscriber - An initial subscriber to changes in the binding value.
      * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
      */
-    binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, ExecutionContext<any>>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
+    binding<TSource = any, TReturn = any>(expression: Expression<TSource, TReturn, any>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn, any>;
     /**
      * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
      * on every evaluation of the value.
-     * @param binding - The binding to inspect.
+     * @param expression - The binding to inspect.
      */
-    isVolatileBinding<TSource_1 = any, TReturn_1 = any>(binding: Binding<TSource_1, TReturn_1, ExecutionContext<any>>): boolean;
+    isVolatileBinding<TSource_1 = any, TReturn_1 = any>(expression: Expression<TSource_1, TReturn_1, any>): boolean;
 }>;
 /**
  * Decorator: Defines an observable property on the target.
@@ -147,60 +207,27 @@ export declare function volatile(target: {}, name: string | Accessor, descriptor
  * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
-export interface RootContext {
-    /**
-     * The current event within an event handler.
-     */
-    readonly event: Event;
+export interface ExecutionContext<TParent = any> {
     /**
-     * Returns the typed event detail of a custom event.
-     */
-    eventDetail<TDetail = any>(): TDetail;
-    /**
-     * Returns the typed event target of the event.
+     * The index of the current item within a repeat context.
      */
-    eventTarget<TTarget extends EventTarget = EventTarget>(): TTarget;
+    index: number;
     /**
-     * Creates a new execution context descendent from the current context.
-     * @param source - The source for the context if different than the parent.
-     * @returns A child execution context.
+     * The length of the current collection within a repeat context.
      */
-    createChildContext<TParentSource>(source: TParentSource): ChildContext<TParentSource>;
-}
-/**
- * Provides additional contextual information when inside a child template.
- * @public
- */
-export interface ChildContext<TParentSource = any> extends RootContext {
+    length: number;
     /**
      * The parent data source within a nested context.
      */
-    readonly parent: TParentSource;
+    parent: TParent;
     /**
      * The parent execution context when in nested context scenarios.
      */
-    readonly parentContext: ChildContext<TParentSource>;
+    parentContext: ExecutionContext<TParent>;
     /**
-     * Creates a new execution context descent suitable for use in list rendering.
-     * @param item - The list item to serve as the source.
-     * @param index - The index of the item in the list.
-     * @param length - The length of the list.
-     */
-    createItemContext(index: number, length: number): ItemContext<TParentSource>;
-}
-/**
- * Provides additional contextual information when inside a repeat item template.s
- * @public
- */
-export interface ItemContext<TParentSource = any> extends ChildContext<TParentSource> {
-    /**
-     * The index of the current item within a repeat context.
-     */
-    readonly index: number;
-    /**
-     * The length of the current collection within a repeat context.
+     * The current event within an event handler.
      */
-    readonly length: number;
+    readonly event: Event;
     /**
      * Indicates whether the current item within a repeat context
      * has an even index.
@@ -227,32 +254,31 @@ export interface ItemContext<TParentSource = any> extends ChildContext<TParentSo
      */
     readonly isLast: boolean;
     /**
-     * Updates the position/size on a context associated with a list item.
-     * @param index - The new index of the item.
-     * @param length - The new length of the list.
+     * Returns the typed event detail of a custom event.
      */
-    updatePosition(index: number, length: number): void;
+    eventDetail<TDetail>(): TDetail;
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget<TTarget extends EventTarget>(): TTarget;
 }
 /**
- * The common execution context APIs.
+ * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
 export declare const ExecutionContext: Readonly<{
-    default: RootContext;
     /**
-     * Sets the event for the current execution context.
-     * @param event - The event to set.
-     * @internal
+     * A default execution context.
      */
-    setEvent(event: Event | null): void;
+    default: ExecutionContext<any>;
+    /**
+     * Gets the current event.
+     * @returns An event object.
+     */
+    getEvent(): Event | null;
     /**
-     * Creates a new root execution context.
-     * @returns A new execution context.
+     * Sets the current event.
+     * @param event - An event object.
      */
-    create(): RootContext;
+    setEvent(event: Event | null): void;
 }>;
-/**
- * Represents some sort of execution context.
- * @public
- */
-export declare type ExecutionContext<TParentSource = any> = RootContext | ChildContext<TParentSource> | ItemContext<TParentSource>;

package/dist/dts/pending-task.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This module provides
+ */
+/**
+ * An implementation of the https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/pending-task.md proposal.
+ * @beta
+ */
+export interface PendingTask extends Event {
+    complete: Promise<void>;
+}
+/**
+ * A concrete implementation of {@link PendingTask}
+ * @beta
+ */
+export declare class PendingTaskEvent extends Event implements PendingTask {
+    complete: Promise<void>;
+    static readonly type = "pending-task";
+    constructor(complete: Promise<void>);
+    static isPendingTask<T extends Event>(value: T | PendingTask): value is PendingTask;
+}

package/dist/dts/platform.d.ts

@@ -1,4 +1,5 @@
 import type { FASTGlobal } from "./interfaces.js";
+import "./polyfills.js";
 /**
  * The FAST global.
  * @internal
@@ -33,3 +34,9 @@ export interface TypeRegistry<TDefinition extends TypeDefinition> {
  * @internal
  */
 export declare function createTypeRegistry<TDefinition extends TypeDefinition>(): TypeRegistry<TDefinition>;
+/**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
+ * @internal
+ */
+export declare function createMetadataLocator<TMetadata>(): (target: {}) => TMetadata[];

package/dist/dts/polyfills.d.ts

@@ -1,8 +1 @@
-import type { StyleStrategy, StyleTarget } from "./interfaces.js";
-export declare class StyleElementStrategy implements StyleStrategy {
-    private readonly styles;
-    private readonly styleClass;
-    constructor(styles: string[]);
-    addStylesTo(target: StyleTarget): void;
-    removeStylesFrom(target: StyleTarget): void;
-}
+export {};

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

@@ -0,0 +1,3 @@
+export { reactive } from "./reactive.js";
+export { watch } from "./watch.js";
+export * from "./state.js";

package/dist/dts/state/reactive.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Converts a plain object to a reactive, observable object.
+ * @param object - The object to make reactive.
+ * @param deep - Indicates whether or not to deeply convert the oject.
+ * @returns The converted object.
+ * @beta
+ */
+export declare function reactive<T>(object: T, deep?: boolean): T;

package/dist/dts/state/state.d.ts

@@ -0,0 +1,141 @@
+import { Disposable } from "../interfaces.js";
+import type { Subscriber } from "../observation/notifier.js";
+/**
+ * Options for creating state.
+ * @beta
+ */
+export declare type StateOptions = {
+    /**
+     * Indicates whether to deeply make the state value observable.
+     */
+    deep?: boolean;
+    /**
+     * A friendly name for the state.
+     */
+    name?: string;
+};
+/**
+ * A readonly stateful value.
+ * @beta
+ */
+export declare type ReadonlyState<T> = {
+    /**
+     * Gets the current state value.
+     */
+    (): T;
+    /**
+     * Gets the current state value.
+     */
+    readonly current: T;
+};
+/**
+ * A read/write stateful value.
+ * @beta
+ */
+export declare type State<T> = ReadonlyState<T> & {
+    /**
+     * Gets or sets the current state value.
+     */
+    current: T;
+    /**
+     * Sets the current state value.
+     * @param value The new state value.
+     */
+    set(value: T): void;
+    /**
+     * Creates a readonly version of the state.
+     */
+    asReadonly(): ReadonlyState<T>;
+};
+/**
+ * Creates a reactive state value.
+ * @param value - The initial state value.
+ * @param options - Options to customize the state or a friendly name.
+ * @returns A State instance.
+ * @beta
+ */
+export declare function state<T>(value: T, options?: string | StateOptions): State<T>;
+/**
+ * A readonly stateful value associated with an object owner.
+ * @beta
+ */
+export declare type ReadonlyOwnedState<T> = {
+    /**
+     * Gets the current stateful value for the owner.
+     */
+    (owner: any): T;
+};
+/**
+ * A read/write stateful value associated with an owner.
+ * @beta
+ */
+export declare type OwnedState<T> = ReadonlyOwnedState<T> & {
+    /**
+     * Sets
+     * @param owner - The object to set the state for the owner.
+     * @param value - The new state value.
+     */
+    set(owner: any, value: T): void;
+    /**
+     * Creates a readonly version of the state.
+     */
+    asReadonly(): ReadonlyOwnedState<T>;
+};
+/**
+ * Creates a reactive state that has its value associated with a specific owner.
+ * @param value - The initial value or a factory that provides an initial value for each owner.
+ * @param options - Options to customize the state or a friendly name.
+ * @returns An OwnedState instance.
+ * @beta
+ */
+export declare function ownedState<T>(value: T | (() => T), options?: string | StateOptions): OwnedState<T>;
+/**
+ * State whose value is computed from other dependencies.
+ * @beta
+ */
+export declare type ComputedState<T> = ReadonlyState<T> & Disposable & {
+    /**
+     * Subscribes to notification of changes in the state.
+     * @param subscriber - The object that is subscribing for change notification.
+     */
+    subscribe(subscriber: Subscriber): void;
+    /**
+     * Unsubscribes from notification of changes in the state.
+     * @param subscriber - The object that is unsubscribing from change notification.
+     */
+    unsubscribe(subscriber: Subscriber): void;
+};
+/**
+ * A callback that enables computation setup.
+ * @beta
+ */
+export declare type ComputedSetupCallback = () => (() => void) | void;
+/**
+ * Provides computed state capabilities.
+ * @beta
+ */
+export declare type ComputedBuilder = {
+    /**
+     * Callbacks related to computed state.
+     */
+    on: {
+        /**
+         * Provides a setup callback for the computation.
+         * @param callback The callback to run to setup the computation.
+         */
+        setup(callback: ComputedSetupCallback): void;
+    };
+};
+/**
+ * A callback that initializes the computation.
+ * @beta
+ */
+export declare type ComputedInitializer<T> = (builder: ComputedBuilder) => () => T;
+/**
+ * Creates a ComputedState.
+ * @param initialize - The initialization callback.
+ * @param name - A friendly name for this computation.
+ * @returns A ComputedState
+ * @beta
+ */
+export declare function computedState<T>(initialize: ComputedInitializer<T>, name?: string): ComputedState<T>;

package/dist/dts/state/visitor.d.ts

@@ -0,0 +1,6 @@
+export interface ObjectVisitor<TVisitorData> {
+    visitObject(object: any, data: TVisitorData): void;
+    visitArray(array: any[], data: TVisitorData): void;
+    visitProperty(object: any, key: PropertyKey, value: any, data: TVisitorData): void;
+}
+export declare function visitObject<TVisitorData>(object: any, deep: boolean, visitor: ObjectVisitor<TVisitorData>, data: TVisitorData, traversed: WeakSet<any> | Set<any>): void;

package/dist/dts/state/watch.d.ts

@@ -0,0 +1,10 @@
+import { Disposable } from "../interfaces.js";
+import type { Subscriber } from "../observation/notifier.js";
+/**
+ * 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;

package/dist/dts/styles/css-directive.d.ts

@@ -1,11 +1,11 @@
 import type { Constructable } from "../interfaces.js";
-import type { Behavior } from "../observation/behavior.js";
+import type { HostBehavior } from "./host.js";
 import type { ComposableStyles } from "./element-styles.js";
 /**
  * Used to add behaviors when constructing styles.
  * @public
  */
-export declare type AddBehavior = (behavior: Behavior<HTMLElement>) => void;
+export declare type AddBehavior = (behavior: HostBehavior<HTMLElement>) => void;
 /**
  * Directive for use in {@link css}.
  *