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

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

@@ -118,34 +118,6 @@ export declare class OneTimeBinding extends UpdateBinding {
      */
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
 }
-/**
- * A binding behavior for signal bindings.
- * @public
- */
-export declare class SignalBinding extends UpdateBinding {
-    private handlerProperty;
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    private getSignal;
-    /**
-     * Sends the specified signal to signaled bindings.
-     * @param signal - The signal to send.
-     * @public
-     */
-    static send(signal: string): void;
-}
 /**
  * A binding behavior for bindings that change.
  * @public
@@ -219,46 +191,6 @@ export declare class EventBinding {
      */
     handleEvent(event: Event): void;
 }
-/**
- * The settings required to enable two-way binding.
- * @public
- */
-export interface TwoWaySettings {
-    /**
-     * Determines which event to listen to, to detect changes in the view.
-     * @param directive - The directive to determine the change event for.
-     * @param target - The target element to determine the change event for.
-     */
-    determineChangeEvent(directive: HTMLBindingDirective, target: HTMLElement): string;
-}
-/**
- * A binding behavior for bindings that update in two directions.
- * @public
- */
-export declare class TwoWayBinding extends ChangeBinding {
-    private changeEvent;
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    /** @internal */
-    handleEvent(event: Event): void;
-    /**
-     * Configures two-way binding.
-     * @param settings - The settings to use for the two-way binding system.
-     */
-    static configure(settings: TwoWaySettings): void;
-}
 /**
  * The default binding options.
  * @public
@@ -269,31 +201,11 @@ export declare type DefaultBindingOptions = AddEventListenerOptions;
  * @public
  */
 export declare const onChange: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
-/**
- * The default twoWay binding options.
- * @public
- */
-export declare type DefaultTwoWayBindingOptions = DefaultBindingOptions & {
-    changeEvent?: string;
-    fromView?: (value: any) => any;
-};
-/**
- * The default twoWay binding configuration.
- * @public
- */
-export declare const twoWay: BindingConfig<DefaultTwoWayBindingOptions> & BindingConfigResolver<DefaultTwoWayBindingOptions>;
 /**
  * The default onTime binding configuration.
  * @public
  */
 export declare const oneTime: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
-/**
- * Creates a signal binding configuration with the supplied options.
- * @param options - The signal name or a binding to use to retrieve the signal name.
- * @returns A binding configuration.
- * @public
- */
-export declare const signal: <T = any>(options: string | Binding<T, any, ExecutionContext<any>>) => BindingConfig<string | Binding<T, any, ExecutionContext<any>>>;
 /**
  * A directive that applies bindings.
  * @public

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

@@ -1,5 +1,4 @@
 import { TrustedTypesPolicy } from "../interfaces.js";
-import type { ExecutionContext } from "../observation/observable.js";
 import { ViewBehaviorFactory } from "./html-directive.js";
 import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from "./template.js";
 /**
@@ -40,7 +39,7 @@ export declare const Compiler: {
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(html: string | HTMLTemplateElement, directives: Record<string, ViewBehaviorFactory>): TemplateCompilationResult<TSource, TParent, TContext>;
+    compile<TSource = any, TParent = any>(html: string | HTMLTemplateElement, directives: Record<string, ViewBehaviorFactory>): TemplateCompilationResult<TSource, TParent>;
     /**
      * Sets the default compilation strategy that will be used by the ViewTemplate whenever
      * it needs to compile a view preprocessed with the html template function.

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

@@ -1,9 +1,9 @@
 import type { Behavior } from "../observation/behavior.js";
 import type { Subscriber } from "../observation/notifier.js";
-import { Binding, ChildContext, ExecutionContext, ItemContext, RootContext } from "../observation/observable.js";
+import { Binding, ExecutionContext } from "../observation/observable.js";
 import { Splice } from "../observation/arrays.js";
 import { AddViewBehaviorFactory, HTMLDirective, ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
-import type { CaptureType, ChildViewTemplate, ItemViewTemplate, SyntheticViewTemplate, ViewTemplate } from "./template.js";
+import type { CaptureType, SyntheticViewTemplate, ViewTemplate } from "./template.js";
 /**
  * Options for configuring repeat behavior.
  * @public
@@ -113,50 +113,4 @@ export declare class RepeatDirective<TSource = any> implements HTMLDirective, Vi
  * @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, RootContext>, options?: {
-    positioning: false;
-} | {
-    recycle: true;
-} | {
-    positioning: false;
-    recycle: false;
-} | {
-    positioning: false;
-    recycle: true;
-}): CaptureType<TSource>;
-/**
- * A directive that enables list rendering.
- * @param itemsBinding - The array to render.
- * @param templateOrTemplateBinding - 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: ChildViewTemplate | Binding<TSource, ChildViewTemplate, ChildContext>, options?: {
-    positioning: false;
-} | {
-    recycle: true;
-} | {
-    positioning: false;
-    recycle: false;
-} | {
-    positioning: false;
-    recycle: true;
-}): CaptureType<TSource>;
-/**
- * A directive that enables list rendering.
- * @param itemsBinding - The array to render.
- * @param templateOrTemplateBinding - 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: ItemViewTemplate | Binding<TSource, ItemViewTemplate, ItemContext>, options: {
-    positioning: true;
-} | {
-    positioning: true;
-    recycle: true;
-} | {
-    positioning: true;
-    recycle: false;
-}): CaptureType<TSource>;
+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>;

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

@@ -1,4 +1,4 @@
-import { Binding, ChildContext, ExecutionContext, ItemContext } from "../observation/observable.js";
+import { Binding, ExecutionContext } from "../observation/observable.js";
 import { HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 /**
@@ -6,7 +6,6 @@ import type { ElementView, HTMLView, SyntheticView } from "./view.js";
  * @public
  */
 export interface ElementViewTemplate<TSource = any, TParent = any> {
-    type: "element";
     /**
      * Creates an ElementView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
@@ -25,57 +24,29 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
  * A template capable of rendering views not specifically connected to custom elements.
  * @public
  */
-export interface SyntheticViewTemplate<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
-    type: "synthetic";
+export interface SyntheticViewTemplate<TSource = any, TParent = any> {
     /**
      * Creates a SyntheticView instance based on this template definition.
      */
-    create(): SyntheticView<TSource, TParent, TContext>;
-}
-/**
- * A template capable of rendering child views not specifically connected to custom elements.
- * @public
- */
-export interface ChildViewTemplate<TSource = any, TParent = any> {
-    type: "child";
-    /**
-     * Creates a SyntheticView instance based on this template definition.
-     */
-    create(): SyntheticView<TSource, TParent, ChildContext<TParent>>;
-}
-/**
- * A template capable of rendering item views not specifically connected to custom elements.
- * @public
- */
-export interface ItemViewTemplate<TSource = any, TParent = any> {
-    type: "item";
-    /**
-     * Creates a SyntheticView instance based on this template definition.
-     */
-    create(): SyntheticView<TSource, TParent, ItemContext<TParent>>;
+    create(): SyntheticView<TSource, TParent>;
 }
 /**
  * The result of a template compilation operation.
  * @public
  */
-export interface HTMLTemplateCompilationResult<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> {
+export interface HTMLTemplateCompilationResult<TSource = any, TParent = any> {
     /**
      * Creates a view instance.
      * @param hostBindingTarget - The host binding target for the view.
      */
-    createView(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext>;
+    createView(hostBindingTarget?: Element): HTMLView<TSource, TParent>;
 }
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
-export declare class ViewTemplate<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext> implements ElementViewTemplate<TSource, TParent>, SyntheticViewTemplate<TSource, TParent, TContext> {
+export declare class ViewTemplate<TSource = any, TParent = any> implements ElementViewTemplate<TSource, TParent>, SyntheticViewTemplate<TSource, TParent> {
     private result;
-    /**
-     * Used for TypeScript purposes only.
-     * Do not use.
-     */
-    type: any;
     /**
      * The html representing what this template will
      * instantiate, including placeholders for directives.
@@ -95,7 +66,7 @@ export declare class ViewTemplate<TSource = any, TParent = any, TContext extends
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
-    create(hostBindingTarget?: Element): HTMLView<TSource, TParent, TContext>;
+    create(hostBindingTarget?: Element): HTMLView<TSource, TParent>;
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
      * @param source - The data source to bind the template to.
@@ -103,7 +74,7 @@ export declare class ViewTemplate<TSource = any, TParent = any, TContext extends
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source: TSource, host: Node, hostBindingTarget?: Element, context?: TContext): HTMLView<TSource, TParent, TContext>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element, context?: ExecutionContext): HTMLView<TSource, TParent>;
 }
 /**
  * A marker interface used to capture types when interpolating Directive helpers
@@ -116,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, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> = Binding<TSource, any, TContext> | HTMLDirective | CaptureType<TSource>;
+export declare type TemplateValue<TSource, TParent = any> = 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.
@@ -126,24 +97,4 @@ export declare type TemplateValue<TSource, TParent = any, TContext extends Execu
  * other template instances, and Directive instances.
  * @public
  */
-export declare function html<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent, TContext>[]): ViewTemplate<TSource, TParent>;
-/**
- * Transforms a template literal string into a ChildViewTemplate.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
- * @remarks
- * The html helper supports interpolation of strings, numbers, binding expressions,
- * other template instances, and Directive instances.
- * @public
- */
-export declare const child: <TChild = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TChild, TParent, ChildContext<TParent>>[]) => ChildViewTemplate<TChild, TParent>;
-/**
- * Transforms a template literal string into an ItemViewTemplate.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
- * @remarks
- * The html helper supports interpolation of strings, numbers, binding expressions,
- * other template instances, and Directive instances.
- * @public
- */
-export declare const item: <TItem = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TItem, TParent, ItemContext<TParent>>[]) => ItemViewTemplate<TItem, TParent>;
+export declare function html<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: TemplateValue<TSource, TParent>[]): ViewTemplate<TSource, TParent>;

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

@@ -1,15 +1,15 @@
 import type { Disposable } from "../interfaces.js";
-import type { ExecutionContext, RootContext } from "../observation/observable.js";
+import type { ExecutionContext } from "../observation/observable.js";
 import type { ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public
  */
-export interface View<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends Disposable {
+export interface View<TSource = any, TParent = any> extends Disposable {
     /**
      * The execution context the view is running within.
      */
-    readonly context: TContext | null;
+    readonly context: ExecutionContext<TParent> | null;
     /**
      * The data that the view is bound to.
      */
@@ -19,7 +19,7 @@ export interface View<TSource = any, TParent = any, TContext extends ExecutionCo
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the view within.
      */
-    bind(source: TSource, context: TContext): void;
+    bind(source: TSource, context: ExecutionContext<TParent>): void;
     /**
      * Unbinds a view's behaviors from its binding source and context.
      */
@@ -29,7 +29,7 @@ export interface View<TSource = any, TParent = any, TContext extends ExecutionCo
  * A View representing DOM nodes specifically for rendering the view of a custom element.
  * @public
  */
-export interface ElementView<TSource = any, TParent = any> extends View<TSource, TParent, RootContext> {
+export interface ElementView<TSource = any, TParent = any> extends View<TSource, TParent> {
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -40,7 +40,7 @@ export interface ElementView<TSource = any, TParent = any> extends View<TSource,
  * A view representing a range of DOM nodes which can be added/removed ad hoc.
  * @public
  */
-export interface SyntheticView<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> extends View<TSource, TParent, TContext> {
+export interface SyntheticView<TSource = any, TParent = any> extends View<TSource, TParent> {
     /**
      * The first DOM node in the range of nodes that make up the view.
      */
@@ -64,7 +64,7 @@ export interface SyntheticView<TSource = any, TParent = any, TContext extends Ex
  * The standard View implementation, which also implements ElementView and SyntheticView.
  * @public
  */
-export declare class HTMLView<TSource = any, TParent = any, TContext extends ExecutionContext<TParent> = ExecutionContext<TParent>> implements ElementView<TSource, TParent>, SyntheticView<TSource, TParent, TContext> {
+export declare class HTMLView<TSource = any, TParent = any> implements ElementView<TSource, TParent>, SyntheticView<TSource, TParent> {
     private fragment;
     private factories;
     private targets;
@@ -76,7 +76,7 @@ export declare class HTMLView<TSource = any, TParent = any, TContext extends Exe
     /**
      * The execution context the view is running within.
      */
-    context: TContext | null;
+    context: ExecutionContext<TParent> | null;
     /**
      * The first DOM node in the range of nodes that make up the view.
      */
@@ -116,7 +116,7 @@ export declare class HTMLView<TSource = any, TParent = any, TContext extends Exe
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    bind(source: TSource, context: TContext): void;
+    bind(source: TSource, context: ExecutionContext<TParent>): void;
     /**
      * Unbinds a view's behaviors from its binding source.
      */

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

@@ -66,6 +66,8 @@ export class FASTElementDefinition {
     /**
      * Defines a custom element based on this definition.
      * @param registry - The element registry to define the element in.
+     * @remarks
+     * This operation is idempotent per registry.
      */
     define(registry = customElements) {
         const type = this.type;

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

@@ -43,7 +43,15 @@ export const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * that describes the element to define.
      */
     define(type, nameOrDef) {
-        return new FASTElementDefinition(type, nameOrDef).define().type;
+        return this.metadata(type, nameOrDef).define().type;
+    },
+    /**
+     * 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);
     },
 });
 /**
@@ -55,6 +63,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();
+        FASTElement.define(type, nameOrDef);
     };
 }

package/dist/esm/context.js

@@ -0,0 +1,159 @@
+import { Metadata } from "./metadata.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 new Error(`No registration for context: '${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/metadata.js

@@ -0,0 +1,60 @@
+import { emptyArray } from "./platform.js";
+// Tiny polyfill for TypeScript's Reflect metadata API.
+const metadataByTarget = new Map();
+if (!("metadata" in Reflect)) {
+    Reflect.metadata = function (key, value) {
+        return function (target) {
+            Reflect.defineMetadata(key, value, target);
+        };
+    };
+    Reflect.defineMetadata = function (key, value, target) {
+        let metadata = metadataByTarget.get(target);
+        if (metadata === void 0) {
+            metadataByTarget.set(target, (metadata = new Map()));
+        }
+        metadata.set(key, value);
+    };
+    Reflect.getOwnMetadata = function (key, target) {
+        const metadata = metadataByTarget.get(target);
+        if (metadata !== void 0) {
+            return metadata.get(key);
+        }
+        return void 0;
+    };
+}
+/**
+ * Provides basic metadata capabilities used by Context and Dependency Injection.
+ */
+export const Metadata = Object.freeze({
+    /**
+     * 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 => {
+        var _a;
+        return (_a = Reflect.getOwnMetadata("design:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+    },
+    /**
+     * 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 => {
+        var _a;
+        return (_a = Reflect.getOwnMetadata("annotation:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray;
+    },
+    /**
+     *
+     * @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) {
+        let types = this.getAnnotationParamTypes(Type);
+        if (types === emptyArray) {
+            Reflect.defineMetadata("annotation:paramtypes", (types = []), Type);
+        }
+        return types;
+    },
+});

package/dist/esm/observation/arrays.js

@@ -255,7 +255,7 @@ export const ArrayObserver = Object.freeze({
  * @returns The length of the array.
  * @public
  */
-export function length(array) {
+export function lengthOf(array) {
     if (!array) {
         return 0;
     }