@microsoft/fast-element 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/dts/templating/node-observation.d.ts

@@ -1,5 +1,4 @@
-import type { ExecutionContext } from "../observation/observable.js";
-import { StatelessAttachedAttributeDirective, ViewBehaviorTargets } from "./html-directive.js";
+import { StatelessAttachedAttributeDirective, ViewController } from "./html-directive.js";
 /**
  * Options for configuring node observation behavior.
  * @public
@@ -23,7 +22,7 @@ export interface NodeBehaviorOptions<T = any> {
  *
  * @public
  */
-export declare type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
+export declare type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
  * @param selector - An optional selector to restrict the filter to.
@@ -44,14 +43,14 @@ export declare abstract class NodeObservationDirective<T extends NodeBehaviorOpt
      * @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;
+    bind(controller: ViewController): 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;
+    unbind(controller: ViewController): void;
     /**
      * Gets the data source for the target.
      * @param target - The target to get the source for.

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

@@ -1,5 +1,4 @@
-import type { ExecutionContext } from "../observation/observable.js";
-import { StatelessAttachedAttributeDirective, ViewBehaviorTargets } from "./html-directive.js";
+import { StatelessAttachedAttributeDirective, ViewController } from "./html-directive.js";
 import type { CaptureType } from "./template.js";
 /**
  * The runtime behavior for template references.
@@ -7,21 +6,14 @@ import type { CaptureType } from "./template.js";
  */
 export declare class RefDirective extends StatelessAttachedAttributeDirective<string> {
     /**
-     * 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 this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    unbind(): void;
+    bind(controller: ViewController): void;
 }
 /**
  * A directive that observes the updates a property with a reference to the element.
  * @param propertyName - The name of the property to assign the reference to.
  * @public
  */
-export declare const ref: <T = any>(propertyName: keyof T & string) => CaptureType<T>;
+export declare const ref: <TSource = any, TParent = any>(propertyName: keyof TSource & string) => CaptureType<TSource, TParent>;

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

@@ -1,44 +1,38 @@
 import type { FASTElement } from "../components/fast-element.js";
 import { Constructable } from "../interfaces.js";
-import type { Behavior } from "../observation/behavior.js";
 import type { Subscriber } from "../observation/notifier.js";
 import type { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
 import { ContentTemplate, ContentView } from "./binding.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
+import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import { CaptureType, SyntheticViewTemplate, TemplateValue, ViewTemplate } from "./template.js";
 /**
  * A Behavior that enables advanced rendering.
  * @public
  */
-export declare class RenderBehavior<TSource = any, TParent = any> implements Behavior, Subscriber {
+export declare class RenderBehavior<TSource = any> implements ViewBehavior, Subscriber {
     private directive;
     private location;
-    private source;
+    private controller;
     private view;
     private template;
     private templateBindingObserver;
     private data;
     private dataBindingObserver;
-    private originalContext;
-    private childContext;
     /**
      * Creates an instance of RenderBehavior.
-     * @param location - A Node representing the location where this behavior will render.
-     * @param dataBinding - A binding expression that returns the data to render.
-     * @param templateBinding - A binding expression that returns the template to use with the data.
+     * @param directive - The render directive that created this behavior.
      */
-    constructor(directive: RenderDirective, location: Node);
+    constructor(directive: RenderDirective);
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source: TSource, context: ExecutionContext): void;
+    bind(controller: ViewController): void;
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    unbind(source: TSource, context: ExecutionContext<TParent>): void;
+    unbind(controller: ViewController): void;
     /** @internal */
     handleChange(source: any, observer: ExpressionObserver): void;
     private refreshView;
@@ -74,7 +68,7 @@ export declare class RenderDirective<TSource = any> implements HTMLDirective, Vi
      * Creates a behavior.
      * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets: ViewBehaviorTargets): RenderBehavior<TSource>;
+    createBehavior(): RenderBehavior<TSource>;
 }
 /**
  * Provides instructions for how to render a type.
@@ -251,7 +245,8 @@ export declare function renderWith(template: ContentTemplate, name?: string): Cl
 export declare class NodeTemplate implements ContentTemplate, ContentView {
     readonly node: Node;
     constructor(node: Node);
-    bind(source: any, context: ExecutionContext<any>): void;
+    get context(): ExecutionContext<any>;
+    bind(source: any): void;
     unbind(): void;
     insertBefore(refNode: Node): void;
     remove(): void;
@@ -273,5 +268,5 @@ export declare class NodeTemplate implements ContentTemplate, ContentView {
  * RenderInstruction to determine the view.
  * @public
  */
-export declare function render<TSource = any, TItem = any>(value?: Expression<TSource, TItem> | Binding<TSource, TItem> | {}, template?: ContentTemplate | string | Expression<TSource, ContentTemplate | string | Node> | Binding<TSource, ContentTemplate | string | Node>): CaptureType<TSource>;
+export declare function render<TSource = any, TItem = any, TParent = any>(value?: Expression<TSource, TItem> | Binding<TSource, TItem> | {}, template?: ContentTemplate | string | Expression<TSource, ContentTemplate | string | Node, TParent> | Binding<TSource, ContentTemplate | string | Node, TParent>): CaptureType<TSource, TParent>;
 export {};

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

@@ -1,8 +1,7 @@
-import type { Behavior } from "../observation/behavior.js";
 import type { Subscriber } from "../observation/notifier.js";
-import { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
+import { Expression, ExpressionObserver } from "../observation/observable.js";
 import { Splice } from "../observation/arrays.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
+import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import type { CaptureType, SyntheticViewTemplate, ViewTemplate } from "./template.js";
 /**
  * Options for configuring repeat behavior.
@@ -22,18 +21,16 @@ export interface RepeatOptions {
  * A behavior that renders a template for each item in an array.
  * @public
  */
-export declare class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
+export declare class RepeatBehavior<TSource = any> implements ViewBehavior, Subscriber {
     private directive;
     private location;
-    private source;
+    private controller;
     private views;
     private template;
     private templateBindingObserver;
     private items;
     private itemsObserver;
     private itemsBindingObserver;
-    private context;
-    private childContext;
     private bindView;
     /**
      * Creates an instance of RepeatBehavior.
@@ -44,16 +41,14 @@ export declare class RepeatBehavior<TSource = any> implements Behavior, Subscrib
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(directive: RepeatDirective, location: Node);
+    constructor(directive: RepeatDirective);
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source: TSource, context: ExecutionContext): void;
+    bind(controller: ViewController): void;
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
      */
     unbind(): void;
     /**
@@ -99,7 +94,7 @@ export declare class RepeatDirective<TSource = any> implements HTMLDirective, Vi
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
+    createBehavior(): RepeatBehavior<TSource>;
 }
 /**
  * A directive that enables list rendering.
@@ -109,4 +104,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>>(items: Expression<TSource, TArray, ExecutionContext<TSource>> | Binding<TSource, TArray> | ReadonlyArray<any>, template: Expression<TSource, ViewTemplate> | Binding<TSource, ViewTemplate> | ViewTemplate, options?: RepeatOptions): CaptureType<TSource>;
+export declare function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>, TParent = any>(items: Expression<TSource, TArray, TParent> | Binding<TSource, TArray, TParent> | ReadonlyArray<any>, template: Expression<TSource, ViewTemplate<any, TSource>> | Binding<TSource, ViewTemplate<any, TSource>> | ViewTemplate<any, TSource>, options?: RepeatOptions): CaptureType<TSource, TParent>;

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

@@ -35,4 +35,4 @@ export declare class SlottedDirective extends NodeObservationDirective<SlottedDi
  * @param propertyOrOptions - The options used to configure slotted node observation.
  * @public
  */
-export declare function slotted<T = any>(propertyOrOptions: (keyof T & string) | SlottedDirectiveOptions<keyof T & string>): CaptureType<T>;
+export declare function slotted<TSource = any, TParent = any>(propertyOrOptions: (keyof TSource & string) | SlottedDirectiveOptions<keyof TSource & string>): CaptureType<TSource, TParent>;

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

@@ -1,4 +1,4 @@
-import { ExecutionContext, Expression } from "../observation/observable.js";
+import type { Expression } from "../observation/observable.js";
 import { Binding, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 /**
@@ -74,20 +74,20 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * @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?: ExecutionContext): HTMLView<TSource, TParent>;
+    render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
 }
 /**
  * A marker interface used to capture types when interpolating Directive helpers
  * into templates.
  * @public
  */
-export interface CaptureType<TSource> {
+export interface CaptureType<TSource, TParent> {
 }
 /**
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export declare type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | 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, TParent>;
 /**
  * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.

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

@@ -1,6 +1,6 @@
 import type { Disposable } from "../interfaces.js";
-import type { ExecutionContext } from "../observation/observable.js";
-import type { ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
+import { ExecutionContext } from "../observation/observable.js";
+import type { ViewBehaviorFactory, ViewBehaviorTargets, ViewController } from "./html-directive.js";
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public
@@ -9,7 +9,7 @@ export interface View<TSource = any, TParent = any> extends Disposable {
     /**
      * The execution context the view is running within.
      */
-    readonly context: ExecutionContext<TParent> | null;
+    readonly context: ExecutionContext<TParent>;
     /**
      * The data that the view is bound to.
      */
@@ -17,9 +17,8 @@ export interface View<TSource = any, TParent = any> extends Disposable {
     /**
      * Binds a view's behaviors to its binding source.
      * @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: ExecutionContext<TParent>): void;
+    bind(source: TSource): void;
     /**
      * Unbinds a view's behaviors from its binding source and context.
      */
@@ -64,19 +63,75 @@ export interface SyntheticView<TSource = any, TParent = any> extends View<TSourc
  * The standard View implementation, which also implements ElementView and SyntheticView.
  * @public
  */
-export declare class HTMLView<TSource = any, TParent = any> implements ElementView<TSource, TParent>, SyntheticView<TSource, TParent> {
+export declare class HTMLView<TSource = any, TParent = any> implements ElementView<TSource, TParent>, SyntheticView<TSource, TParent>, ExecutionContext<TParent> {
     private fragment;
     private factories;
-    private targets;
+    readonly targets: ViewBehaviorTargets;
     private behaviors;
+    private unbindables;
     /**
      * The data that the view is bound to.
      */
     source: TSource | null;
+    isBound: boolean;
+    selfContained: boolean;
     /**
      * The execution context the view is running within.
      */
-    context: ExecutionContext<TParent> | null;
+    get context(): ExecutionContext<TParent>;
+    /**
+     * The index of the current item within a repeat context.
+     */
+    index: number;
+    /**
+     * The length of the current collection within a repeat context.
+     */
+    length: number;
+    /**
+     * The parent data source within a nested context.
+     */
+    readonly parent: TParent;
+    /**
+     * The parent execution context when in nested context scenarios.
+     */
+    readonly parentContext: ExecutionContext<TParent>;
+    /**
+     * The current event within an event handler.
+     */
+    get event(): Event;
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
+    get isEven(): boolean;
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
+    get isOdd(): boolean;
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
+    get isFirst(): boolean;
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
+    get isInMiddle(): boolean;
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
+    get isLast(): boolean;
+    /**
+     * Returns the typed event detail of a custom event.
+     */
+    eventDetail<TDetail>(): TDetail;
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget<TTarget extends EventTarget>(): TTarget;
     /**
      * The first DOM node in the range of nodes that make up the view.
      */
@@ -111,16 +166,20 @@ export declare class HTMLView<TSource = any, TParent = any> implements ElementVi
      * Once a view has been disposed, it cannot be inserted or bound again.
      */
     dispose(): void;
+    onUnbind(behavior: {
+        unbind(controller: ViewController<TSource, TParent>): any;
+    }): void;
     /**
      * Binds a view's behaviors to its binding source.
      * @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: ExecutionContext<TParent>): void;
+    bind(source: TSource): void;
     /**
      * Unbinds a view's behaviors from its binding source.
      */
     unbind(): void;
+    private evaluateUnbindables;
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.
      * @param views - A contiguous range of views to be disposed.

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

@@ -7,4 +7,4 @@ import type { CaptureType, SyntheticViewTemplate } from "./template.js";
  * the template to render when the condition is true.
  * @public
  */
-export declare function when<TSource = any, TReturn = any>(condition: Expression<TSource, TReturn> | boolean, templateOrTemplateBinding: SyntheticViewTemplate | Expression<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
+export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;

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

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

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

@@ -0,0 +1,4 @@
+import { ExecutionContext } from "../index.js";
+export declare const Fake: Readonly<{
+    executionContext<TParent = any>(parent?: TParent | undefined, parentContext?: ExecutionContext<TParent> | undefined): ExecutionContext<TParent>;
+}>;

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

@@ -1,5 +1,4 @@
 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";
 /**
@@ -22,11 +21,6 @@ export interface FixtureOptions {
      * @defaultValue An empty object.
      */
     source?: any;
-    /**
-     * The execution context to use during binding.
-     * @defaultValue {@link @microsoft/fast-element#ExecutionContext}
-     */
-    context?: ExecutionContext;
 }
 /**
  * A test fixture.

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/attributes.js

@@ -2,8 +2,19 @@ import { Observable } from "../observation/observable.js";
 import { isString } from "../interfaces.js";
 import { Updates } from "../observation/update-queue.js";
 import { DOM } from "../templating/dom.js";
+import { createMetadataLocator } from "../platform.js";
 const booleanMode = "boolean";
 const reflectMode = "reflect";
+/**
+ * Metadata used to configure a custom attribute's behavior.
+ * @public
+ */
+export const AttributeConfiguration = Object.freeze({
+    /**
+     * Locates all attribute configurations associated with a type.
+     */
+    locate: createMetadataLocator(),
+});
 /**
  * A {@link ValueConverter} that converts to and from `boolean` values.
  * @remarks
@@ -141,7 +152,7 @@ export class AttributeDefinition {
      */
     static collect(Owner, ...attributeLists) {
         const attributes = [];
-        attributeLists.push(Owner.attributes);
+        attributeLists.push(AttributeConfiguration.locate(Owner));
         for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
             const list = attributeLists[i];
             if (list === void 0) {
@@ -171,9 +182,7 @@ export function attr(configOrTarget, prop) {
             // - @attr({...opts})
             config.property = $prop;
         }
-        const attributes = $target.constructor.attributes ||
-            ($target.constructor.attributes = []);
-        attributes.push(config);
+        AttributeConfiguration.locate($target.constructor).push(config);
     }
     if (arguments.length > 1) {
         // Non invocation: