@microsoft/fast-element 2.0.0-beta.9 → 2.0.1

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

@@ -1,5 +1,12 @@
+import type { Expression } from "../observation/observable.js";
+import { Binding } from "../binding/binding.js";
 import { CSSDirective } from "./css-directive.js";
 import { ComposableStyles, ElementStyles } from "./element-styles.js";
+/**
+ * Represents the types of values that can be interpolated into a template.
+ * @public
+ */
+export declare type CSSValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | ComposableStyles | CSSDirective;
 /**
  * Transforms a template literal string into styles.
  * @param strings - The string fragments that are interpolated with the values.
@@ -9,14 +16,14 @@ import { ComposableStyles, ElementStyles } from "./element-styles.js";
  * Use the .partial method to create partial CSS fragments.
  * @public
  */
-export declare type CSSTemplateTag = ((strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]) => ElementStyles) & {
+export declare type CSSTemplateTag = (<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]) => ElementStyles) & {
     /**
      * Transforms a template literal string into partial CSS.
      * @param strings - The string fragments that are interpolated with the values.
      * @param values - The values that are interpolated with the string fragments.
      * @public
      */
-    partial(strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]): CSSDirective;
+    partial<TSource = any, TParent = any>(strings: TemplateStringsArray, ...values: CSSValue<TSource, TParent>[]): CSSDirective;
 };
 /**
  * Transforms a template literal string into styles.
@@ -27,8 +34,3 @@ export declare type CSSTemplateTag = ((strings: TemplateStringsArray, ...values:
  * @public
  */
 export declare const css: CSSTemplateTag;
-/**
- * @deprecated Use css.partial instead.
- * @public
- */
-export declare const cssPartial: (strings: TemplateStringsArray, ...values: (ComposableStyles | CSSDirective)[]) => CSSDirective;

package/dist/dts/styles/element-styles.d.ts

@@ -1,4 +1,4 @@
-import { StyleStrategy, StyleTarget } from "../interfaces.js";
+import type { StyleStrategy, StyleTarget } from "./style-strategy.js";
 import type { HostBehavior } from "./host.js";
 /**
  * Represents styles that can be composed into the ShadowDOM of a custom element.
@@ -69,16 +69,3 @@ export declare class ElementStyles {
      */
     static readonly supportsAdoptedStyleSheets: boolean;
 }
-/**
- * https://wicg.github.io/construct-stylesheets/
- * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
- *
- * @internal
- */
-export declare class AdoptedStyleSheetsStrategy implements StyleStrategy {
-    /** @internal */
-    readonly sheets: CSSStyleSheet[];
-    constructor(styles: (string | CSSStyleSheet)[]);
-    addStylesTo(target: StyleTarget): void;
-    removeStylesFrom(target: StyleTarget): void;
-}

package/dist/dts/styles/host.d.ts

@@ -1,14 +1,11 @@
+import type { ExpressionController } from "../observation/observable.js";
 import type { ElementStyles } from "./element-styles.js";
 /**
  * Controls the lifecycle and context of behaviors and styles
  * associated with a component host.
  * @public
  */
-export interface HostController<TSource = any> {
-    /**
-     * The component source.
-     */
-    readonly source: TSource;
+export interface HostController<TSource = any> extends ExpressionController<TSource> {
     /**
      * Indicates whether the host is connected or not.
      */

package/dist/dts/styles/style-strategy.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A node that can be targeted by styles.
+ * @public
+ */
+export interface StyleTarget extends Pick<Node, "getRootNode"> {
+    /**
+     * Stylesheets to be adopted by the node.
+     */
+    adoptedStyleSheets?: CSSStyleSheet[];
+    /**
+     * Adds styles to the target by appending the styles.
+     * @param styles - The styles element to add.
+     */
+    append(styles: HTMLStyleElement): void;
+    /**
+     * Removes styles from the target.
+     * @param styles - The styles element to remove.
+     */
+    removeChild(styles: HTMLStyleElement): void;
+    /**
+     * Returns all element descendants of node that match selectors.
+     * @param selectors - The CSS selector to use for the query.
+     */
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+}
+/**
+ * Implemented to provide specific behavior when adding/removing styles
+ * for elements.
+ * @public
+ */
+export interface StyleStrategy {
+    /**
+     * Adds styles to the target.
+     * @param target - The target to add the styles to.
+     */
+    addStylesTo(target: StyleTarget): void;
+    /**
+     * Removes styles from the target.
+     * @param target - The target to remove the styles from.
+     */
+    removeStylesFrom(target: StyleTarget): void;
+}

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

@@ -1,4 +1,4 @@
-import { TrustedTypesPolicy } from "../interfaces.js";
+import { DOMPolicy } from "../dom.js";
 import { ViewBehaviorFactory } from "./html-directive.js";
 import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from "./template.js";
 /**
@@ -14,32 +14,29 @@ html: string | HTMLTemplateElement,
 /**
  * The behavior factories used within the html that is being compiled.
  */
-factories: Record<string, ViewBehaviorFactory>) => TemplateCompilationResult;
+factories: Record<string, ViewBehaviorFactory>, 
+/**
+ * The security policy to compile the html with.
+ */
+policy: DOMPolicy) => TemplateCompilationResult;
 /**
  * Common APIs related to compilation.
  * @public
  */
 export declare const Compiler: {
-    /**
-     * Sets the HTML trusted types policy used by the compiler.
-     * @param policy - The policy to set for HTML.
-     * @remarks
-     * This API can only be called once, for security reasons. It should be
-     * called by the application developer at the start of their program.
-     */
-    setHTMLPolicy(policy: TrustedTypesPolicy): void;
     /**
      * Compiles a template and associated directives into a compilation
      * result which can be used to create views.
      * @param html - The html string or template element to compile.
-     * @param directives - The directives referenced by the template.
+     * @param factories - The behavior factories referenced by the template.
+     * @param policy - The security policy to compile the html with.
      * @remarks
      * The template that is provided for compilation is altered in-place
      * and cannot be compiled again. If the original template must be preserved,
      * it is recommended that you clone the original and pass the clone to this API.
      * @public
      */
-    compile<TSource = any, TParent = any>(html: string | HTMLTemplateElement, directives: Record<string, ViewBehaviorFactory>): TemplateCompilationResult<TSource, TParent>;
+    compile<TSource = any, TParent = any>(html: string | HTMLTemplateElement, factories: Record<string, ViewBehaviorFactory>, policy?: DOMPolicy): 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.
@@ -50,7 +47,8 @@ export declare const Compiler: {
      * Aggregates an array of strings and directives into a single directive.
      * @param parts - A heterogeneous array of static strings interspersed with
      * directives.
+     * @param policy - The security policy to use with the aggregated bindings.
      * @returns A single inline directive that aggregates the behavior of all the parts.
      */
-    aggregate(parts: (string | ViewBehaviorFactory)[]): ViewBehaviorFactory;
+    aggregate(parts: (string | ViewBehaviorFactory)[], policy?: DOMPolicy): ViewBehaviorFactory;
 };

package/dist/dts/templating/{binding.d.ts → html-binding-directive.d.ts}

@@ -1,5 +1,7 @@
+import { DOMAspect, DOMPolicy } from "../dom.js";
 import { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
-import { AddViewBehaviorFactory, Aspect, Aspected, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
+import type { Binding, BindingDirective } from "../binding/binding.js";
+import { AddViewBehaviorFactory, Aspected, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 /**
  * A simple View that can be interpolated into HTML content.
  * @public
@@ -37,11 +39,17 @@ export interface ContentTemplate {
      */
     create(): ContentView;
 }
+export interface HydratableContentTemplate extends ContentTemplate {
+    /**
+     * Hydrates a content view from first/last nodes.
+     */
+    hydrate(first: Node, last: Node): ContentView;
+}
 /**
  * A directive that applies bindings.
  * @public
  */
-export declare class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, ViewBehavior, Aspected {
+export declare class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, ViewBehavior, Aspected, BindingDirective {
     dataBinding: Binding;
     private data;
     private updateTarget;
@@ -52,7 +60,15 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
     /**
      * The structural id of the DOM node to which the created behavior will apply.
      */
-    nodeId: string;
+    targetNodeId: string;
+    /**
+     * The tagname associated with the target node.
+     */
+    targetTagName: string | null;
+    /**
+     * The policy that the created behavior must run under.
+     */
+    policy: DOMPolicy;
     /**
      * The original source aspect exactly as represented in markup.
      */
@@ -64,7 +80,7 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
     /**
      * The type of aspect to target.
      */
-    aspectType: Aspect;
+    aspectType: DOMAspect;
     /**
      * Creates an instance of HTMLBindingDirective.
      * @param dataBinding - The binding configuration to apply.
@@ -80,13 +96,7 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
      */
     createBehavior(): ViewBehavior;
     /** @internal */
-    bindDefault(controller: ViewController): void;
-    /** @internal */
-    bind: (controller: ViewController) => void;
-    /** @internal */
-    bindContent(controller: ViewController): void;
-    /** @internal */
-    bindEvent(controller: ViewController): void;
+    bind(controller: ViewController): void;
     /** @internal */
     unbind(controller: ViewController): void;
     /** @internal */
@@ -94,33 +104,3 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
     /** @internal */
     handleChange(binding: Expression, observer: ExpressionObserver): void;
 }
-/**
- * Creates an standard binding.
- * @param binding - The binding to refresh when changed.
- * @param isVolatile - Indicates whether the binding is volatile or not.
- * @returns A binding configuration.
- * @public
- */
-export declare function bind<T = any>(binding: Expression<T>, isVolatile?: boolean): Binding<T>;
-/**
- * Creates a one time binding
- * @param binding - The binding to refresh when signaled.
- * @returns A binding configuration.
- * @public
- */
-export declare function oneTime<T = any>(binding: Expression<T>): Binding<T>;
-/**
- * Creates an event listener binding.
- * @param binding - The binding to invoke when the event is raised.
- * @param options - Event listener options.
- * @returns A binding configuration.
- * @public
- */
-export declare function listener<T = any>(binding: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
-/**
- * Normalizes the input value into a binding.
- * @param value - The value to create the default binding for.
- * @returns A binding configuration for the provided value.
- * @public
- */
-export declare function normalizeBinding<TSource = any, TReturn = any, TParent = any>(value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}): Binding<TSource, TReturn, TParent>;

package/dist/dts/templating/html-directive.d.ts

@@ -1,7 +1,7 @@
-import type { HostBehavior } from "../index.js";
+import { DOMAspect, DOMPolicy } from "../dom.js";
 import type { Constructable } from "../interfaces.js";
-import type { Subscriber } from "../observation/notifier.js";
-import { Expression, ExpressionController, ExpressionObserver } from "../observation/observable.js";
+import type { Binding } from "../binding/binding.js";
+import type { ExpressionController } from "../observation/observable.js";
 /**
  * The target nodes available to a behavior.
  * @public
@@ -19,43 +19,6 @@ export interface ViewController<TSource = any, TParent = any> extends Expression
      */
     readonly targets: ViewBehaviorTargets;
 }
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-export interface ViewBehaviorOrchestrator<TSource = any, TParent = any> extends ViewController<TSource, TParent>, HostBehavior<TSource> {
-    /**
-     *
-     * @param nodeId - The structural id of the DOM node to which a behavior will apply.
-     * @param target - The DOM node associated with the id.
-     */
-    addTarget(nodeId: string, target: Node): void;
-    /**
-     * Adds a behavior.
-     * @param behavior - The behavior to add.
-     */
-    addBehavior(behavior: ViewBehavior): void;
-    /**
-     * Adds a behavior factory.
-     * @param factory - The behavior factory to add.
-     * @param target - The target the factory will create behaviors for.
-     */
-    addBehaviorFactory(factory: ViewBehaviorFactory, target: Node): void;
-}
-/**
- * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
- * control ViewBehaviors.
- * @public
- */
-export declare const ViewBehaviorOrchestrator: Readonly<{
-    /**
-     * Creates a ViewBehaviorOrchestrator.
-     * @param source - The source to to associate behaviors with.
-     * @returns A ViewBehaviorOrchestrator.
-     */
-    create<TSource = any, TParent = any>(source: TSource): ViewBehaviorOrchestrator<TSource, TParent>;
-}>;
 /**
  * Represents an object that can contribute behavior to a view.
  * @public
@@ -76,16 +39,29 @@ export interface ViewBehaviorFactory {
     /**
      * The unique id of the factory.
      */
-    id: string;
+    id?: string;
     /**
      * The structural id of the DOM node to which the created behavior will apply.
      */
-    nodeId: string;
+    targetNodeId?: string;
+    /**
+     * The tag name of the DOM node to which the created behavior will apply.
+     */
+    targetTagName?: string | null;
+    /**
+     * The policy that the created behavior must run under.
+     */
+    policy?: DOMPolicy;
     /**
      * Creates a behavior.
      */
     createBehavior(): ViewBehavior;
 }
+/**
+ * Represents a ViewBehaviorFactory after the compilation process has completed.
+ * @public
+ */
+export declare type CompiledViewBehaviorFactory = Required<ViewBehaviorFactory>;
 /**
  * Used to add behavior factories when constructing templates.
  * @public
@@ -102,6 +78,28 @@ export interface HTMLDirective {
      */
     createHTML(add: AddViewBehaviorFactory): string;
 }
+/**
+ * Represents something that applies to a specific aspect of the DOM.
+ * @public
+ */
+export interface Aspected {
+    /**
+     * The original source aspect exactly as represented in markup.
+     */
+    sourceAspect: string;
+    /**
+     * The evaluated target aspect, determined after processing the source.
+     */
+    targetAspect: string;
+    /**
+     * The type of aspect to target.
+     */
+    aspectType: DOMAspect;
+    /**
+     * A binding if one is associated with the aspect.
+     */
+    dataBinding?: Binding;
+}
 /**
  * Represents metadata configuration for an HTMLDirective.
  * @public
@@ -144,71 +142,6 @@ export declare const HTMLDirective: Readonly<{
      * @param options - Options that specify the directive's application.
      */
     define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition): TType;
-}>;
-/**
- * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directive's application.
- * @public
- */
-export declare function htmlDirective(options?: PartialHTMLDirectiveDefinition): (type: Constructable<HTMLDirective>) => void;
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-export declare abstract class Binding<TSource = any, TReturn = any, TParent = any> {
-    evaluate: Expression<TSource, TReturn, TParent>;
-    isVolatile: boolean;
-    /**
-     * Options associated with the binding.
-     */
-    options?: any;
-    /**
-     * Creates a binding.
-     * @param evaluate - Evaluates the binding.
-     * @param isVolatile - Indicates whether the binding is volatile.
-     */
-    constructor(evaluate: Expression<TSource, TReturn, TParent>, isVolatile?: boolean);
-    /**
-     * Creates an observer capable of notifying a subscriber when the output of a binding changes.
-     * @param directive - The HTML Directive to create the observer for.
-     * @param subscriber - The subscriber to changes in the binding.
-     */
-    abstract createObserver(directive: HTMLDirective, subscriber: Subscriber): ExpressionObserver<TSource, TReturn, TParent>;
-}
-/**
- * The type of HTML aspect to target.
- * @public
- */
-export declare const Aspect: Readonly<{
-    /**
-     * Not aspected.
-     */
-    readonly none: 0;
-    /**
-     * An attribute.
-     */
-    readonly attribute: 1;
-    /**
-     * A boolean attribute.
-     */
-    readonly booleanAttribute: 2;
-    /**
-     * A property.
-     */
-    readonly property: 3;
-    /**
-     * Content
-     */
-    readonly content: 4;
-    /**
-     * A token list.
-     */
-    readonly tokenList: 5;
-    /**
-     * An event.
-     */
-    readonly event: 6;
     /**
      *
      * @param directive - The directive to assign the aspect to.
@@ -216,49 +149,20 @@ export declare const Aspect: Readonly<{
      * @remarks
      * If a falsy value is provided, then the content aspect will be assigned.
      */
-    readonly assign: (directive: Aspected, value?: string) => void;
+    assignAspect(directive: Aspected, value?: string): void;
 }>;
 /**
- * The type of HTML aspect to target.
- * @public
- */
-export declare type Aspect = typeof Aspect[Exclude<keyof typeof Aspect, "assign" | "none">];
-/**
- * Represents something that applies to a specific aspect of the DOM.
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
  * @public
  */
-export interface Aspected {
-    /**
-     * The original source aspect exactly as represented in markup.
-     */
-    sourceAspect: string;
-    /**
-     * The evaluated target aspect, determined after processing the source.
-     */
-    targetAspect: string;
-    /**
-     * The type of aspect to target.
-     */
-    aspectType: Aspect;
-    /**
-     * A binding if one is associated with the aspect.
-     */
-    dataBinding?: Binding;
-}
+export declare function htmlDirective(options?: PartialHTMLDirectiveDefinition): (type: Constructable<HTMLDirective>) => void;
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
  */
 export declare abstract class StatelessAttachedAttributeDirective<TOptions> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
     protected options: TOptions;
-    /**
-     * The unique id of the factory.
-     */
-    id: string;
-    /**
-     * The structural id of the DOM node to which the created behavior will apply.
-     */
-    nodeId: string;
     /**
      * Creates an instance of RefDirective.
      * @param options - The options to use in configuring the directive.

package/dist/dts/templating/install-hydratable-view-templates.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -36,7 +36,17 @@ export declare const elements: (selector?: string) => ElementsFilter;
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export declare abstract class NodeObservationDirective<T extends NodeBehaviorOptions> extends StatelessAttachedAttributeDirective<T> {
-    private sourceProperty;
+    private _id;
+    private _controllerProperty;
+    /**
+     * The unique id of the factory.
+     */
+    get id(): string;
+    set id(value: string);
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    targetNodeId: string;
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.

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

@@ -5,6 +5,10 @@ import type { CaptureType } from "./template.js";
  * @public
  */
 export declare class RefDirective extends StatelessAttachedAttributeDirective<string> {
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    targetNodeId: string;
     /**
      * Bind this behavior.
      * @param controller - The view controller that manages the lifecycle of this behavior.

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

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";