@microsoft/fast-element 2.10.4 → 3.0.0-rc.1

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

@@ -22,6 +22,10 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): ElementView<TSource, TParent>;
 }
+/**
+ * A template capable of hydrating an element view from existing DOM nodes.
+ * @beta
+ */
 export interface HydratableElementViewTemplate<TSource = any, TParent = any> extends ElementViewTemplate<TSource, TParent> {
     hydrate(firstChild: Node, lastChild: Node, hostBindingTarget?: Element): ElementView<TSource, TParent>;
 }
@@ -30,7 +34,7 @@ export interface HydratableElementViewTemplate<TSource = any, TParent = any> ext
  * into templates.
  * @public
  */
-export interface CaptureType<TSource, TParent> {
+export interface CaptureType {
 }
 /**
  * A template capable of rendering views not specifically connected to custom elements.
@@ -44,8 +48,12 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any> {
     /**
      * Returns a directive that can inline the template.
      */
-    inline(): CaptureType<TSource, TParent>;
+    inline(): CaptureType;
 }
+/**
+ * A template capable of hydrating a synthetic view from existing DOM nodes.
+ * @beta
+ */
 export interface HydratableSyntheticViewTemplate<TSource = any, TParent = any> extends SyntheticViewTemplate {
     hydrate(firstChild: Node, lastChild: Node): SyntheticView<TSource, TParent>;
 }
@@ -65,7 +73,7 @@ export interface HTMLTemplateCompilationResult<TSource = any, TParent = any> {
  * Represents the types of values that can be interpolated into a template.
  * @public
  */
-export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource, TParent>;
+export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType;
 /**
  * Inlines a template into another template.
  * @public
@@ -115,15 +123,10 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * @internal
      */
     compile(): HTMLTemplateCompilationResult<TSource, TParent>;
-    /**
-     * 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>;
     /**
      * Returns a directive that can inline the template.
      */
-    inline(): CaptureType<TSource, TParent>;
+    inline(): CaptureType;
     /**
      * Sets the DOMPolicy for this template.
      * @param policy - The policy to associated with this template.
@@ -141,6 +144,11 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * host that the template is being attached to.
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
+    /**
+     * 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>;
     /**
      * Processes the tagged template literal's static strings and interpolated values and
      * creates a ViewTemplate.

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

@@ -1,9 +1,6 @@
-import { Hydratable } from "../components/hydration.js";
-import { type ViewBehaviorBoundaries } from "../hydration/target-builder.js";
 import type { Disposable } from "../interfaces.js";
 import { ExecutionContext, SourceLifetime } from "../observation/observable.js";
-import type { ViewTemplate } from "../templating/template.js";
-import type { CompiledViewBehaviorFactory, ViewBehaviorFactory, ViewBehaviorTargets, ViewController } from "./html-directive.js";
+import type { CompiledViewBehaviorFactory, ViewBehaviorTargets, ViewController } from "./html-directive.js";
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
  * @public
@@ -77,7 +74,12 @@ export interface SyntheticView<TSource = any, TParent = any> extends View<TSourc
      */
     remove(): void;
 }
-declare class DefaultExecutionContext<TParent> implements ExecutionContext<TParent> {
+export declare function removeNodeSequence(firstNode: Node, lastNode: Node): void;
+/**
+ * The default execution context for template views.
+ * @public
+ */
+export declare class DefaultExecutionContext<TParent> implements ExecutionContext<TParent> {
     /**
      * The index of the current item within a repeat context.
      */
@@ -154,6 +156,24 @@ export declare class HTMLView<TSource = any, TParent = any> extends DefaultExecu
      * Indicates how the source's lifetime relates to the controller's lifetime.
      */
     readonly sourceLifetime: SourceLifetime;
+    /**
+     * When true, directives skip attribute/booleanAttribute DOM
+     * updates during bind(). Set only during the prerendered bind
+     * window and cleared immediately after.
+     * @internal
+     */
+    _skipAttrUpdates: boolean;
+    /**
+     * A promise that resolves with `true` after prerendered content
+     * has been hydrated, or `false` when the view is client-side
+     * rendered. Resolves once the first bind completes.
+     */
+    isPrerendered: Promise<boolean>;
+    /**
+     * Resolves `true` after prerendered content has been hydrated,
+     * `false` when client-side rendered or hydration not enabled.
+     */
+    isHydrated: Promise<boolean>;
     /**
      * The execution context the view is running within.
      */
@@ -223,100 +243,3 @@ export declare class HTMLView<TSource = any, TParent = any> extends DefaultExecu
      */
     static disposeContiguousBatch(views: SyntheticView[]): void;
 }
-/** @public */
-export interface HydratableView<TSource = any, TParent = any> extends ElementView, SyntheticView, DefaultExecutionContext<TParent> {
-    [Hydratable]: symbol;
-    readonly bindingViewBoundaries: Record<string, ViewNodes>;
-    readonly hydrationStage: keyof typeof HydrationStage;
-}
-export interface ViewNodes {
-    first: Node;
-    last: Node;
-}
-export declare const HydrationStage: {
-    readonly unhydrated: "unhydrated";
-    readonly hydrating: "hydrating";
-    readonly hydrated: "hydrated";
-};
-/** @public */
-export declare class HydrationBindingError extends Error {
-    /**
-     * The factory that was unable to be bound
-     */
-    readonly factory: ViewBehaviorFactory;
-    /**
-     * A DocumentFragment containing a clone of the
-     * view's Nodes.
-     */
-    readonly fragment: DocumentFragment;
-    /**
-     * String representation of the HTML in the template that
-     * threw the binding error.
-     */
-    readonly templateString: string;
-    constructor(
-    /**
-     * The error message
-     */
-    message: string | undefined, 
-    /**
-     * The factory that was unable to be bound
-     */
-    factory: ViewBehaviorFactory, 
-    /**
-     * A DocumentFragment containing a clone of the
-     * view's Nodes.
-     */
-    fragment: DocumentFragment, 
-    /**
-     * String representation of the HTML in the template that
-     * threw the binding error.
-     */
-    templateString: string);
-}
-export declare class HydrationView<TSource = any, TParent = any> extends DefaultExecutionContext<TParent> implements HydratableView {
-    readonly firstChild: Node;
-    readonly lastChild: Node;
-    private sourceTemplate;
-    private hostBindingTarget?;
-    [Hydratable]: symbol;
-    context: ExecutionContext<any>;
-    source: TSource | null;
-    isBound: boolean;
-    get hydrationStage(): "unhydrated" | "hydrating" | "hydrated";
-    get targets(): ViewBehaviorTargets;
-    get bindingViewBoundaries(): ViewBehaviorBoundaries;
-    readonly sourceLifetime: SourceLifetime;
-    private unbindables;
-    private fragment;
-    private behaviors;
-    private factories;
-    private _hydrationStage;
-    private _bindingViewBoundaries;
-    private _targets;
-    constructor(firstChild: Node, lastChild: Node, sourceTemplate: ViewTemplate, hostBindingTarget?: Element | undefined);
-    /**
-     * no-op. Hydrated views are don't need to be moved from a documentFragment
-     * to the target node.
-     */
-    insertBefore(node: Node): void;
-    /**
-     * Appends the view to a node. In cases where this is called before the
-     * view has been removed, the method will no-op.
-     * @param node - the node to append the view to.
-     */
-    appendTo(node: Node): void;
-    remove(): void;
-    bind(source: TSource, context?: ExecutionContext<any>): void;
-    unbind(): void;
-    /**
-     * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-     * Once a view has been disposed, it cannot be inserted or bound again.
-     */
-    dispose(): void;
-    onUnbind(behavior: {
-        unbind(controller: ViewController<TSource, TParent>): void;
-    }): void;
-    private evaluateUnbindables;
-}
-export {};

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

@@ -9,4 +9,4 @@ import type { CaptureType, SyntheticViewTemplate } from "./template.js";
  * gets the template to render when the conditional is false.
  * @public
  */
-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>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
+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>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType;

package/dist/dts/templating.d.ts

@@ -0,0 +1,10 @@
+export type { Binding, BindingDirective } from "./binding/binding.js";
+export type { DOMAspect, DOMPolicy } from "./dom.js";
+export type { ExecutionContext, ExpressionController, SourceLifetime, } from "./observation/observable.js";
+export { type CompilationStrategy, Compiler } from "./templating/compiler.js";
+export { type ContentTemplate, type ContentView, HTMLBindingDirective, } from "./templating/html-binding-directive.js";
+export { type AddViewBehaviorFactory, type Aspected, type CompiledViewBehaviorFactory, HTMLDirective, type HTMLDirectiveDefinition, htmlDirective, type PartialHTMLDirectiveDefinition, StatelessAttachedAttributeDirective, type ViewBehavior, type ViewBehaviorFactory, type ViewBehaviorTargets, type ViewController, } from "./templating/html-directive.js";
+export { Markup, Parser } from "./templating/markup.js";
+export { RenderBehavior, RenderDirective, render } from "./templating/render.js";
+export { type CaptureType, type ElementViewTemplate, type HTMLTemplateCompilationResult, type HTMLTemplateTag, InlineTemplateDirective, type SyntheticViewTemplate, type TemplateValue, ViewTemplate, } from "./templating/template.js";
+export { type ElementView, HTMLView, type SyntheticView, type View, } from "./templating/view.js";

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

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

package/dist/dts/updates.d.ts

@@ -0,0 +1 @@
+export { type UpdateQueue, Updates } from "./observation/update-queue.js";

package/dist/dts/volatile.d.ts

@@ -0,0 +1,2 @@
+export type { Accessor } from "./observation/observable.js";
+export { volatile } from "./observation/observable.js";

package/dist/esm/array-observer.js

@@ -0,0 +1 @@
+export { ArrayObserver, Sort, Splice, SpliceStrategy, SpliceStrategySupport, } from "./observation/arrays.js";

package/dist/esm/arrays.js

@@ -0,0 +1 @@
+export { lengthOf, Sort, Splice, SpliceStrategy, SpliceStrategySupport, sortedCount, } from "./observation/arrays.js";

package/dist/esm/attr.js

@@ -0,0 +1 @@
+export { AttributeConfiguration, AttributeDefinition, attr, booleanConverter, nullableBooleanConverter, nullableNumberConverter, } from "./components/attributes.js";

package/dist/esm/binding/normalize.js

@@ -1,7 +1,7 @@
 import { isFunction } from "../interfaces.js";
 import { Binding } from "./binding.js";
-import { oneWay } from "./one-way.js";
 import { oneTime } from "./one-time.js";
+import { oneWay } from "./one-way.js";
 /**
  * Normalizes the input value into a binding.
  * @param value - The value to create the default binding for.

package/dist/esm/binding/signal.js

@@ -9,8 +9,8 @@ const subscribers = Object.create(null);
 export const Signal = Object.freeze({
     /**
      * Subscribes to a signal.
-     * @param signal The signal to subscribe to.
-     * @param subscriber The subscriber.
+     * @param signal - The signal to subscribe to.
+     * @param subscriber - The subscriber.
      */
     subscribe(signal, subscriber) {
         const found = subscribers[signal];
@@ -25,8 +25,8 @@ export const Signal = Object.freeze({
     },
     /**
      * Unsubscribes from the signal.
-     * @param signal The signal to unsubscribe from.
-     * @param subscriber The subscriber.
+     * @param signal - The signal to unsubscribe from.
+     * @param subscriber - The subscriber.
      */
     unsubscribe(signal, subscriber) {
         const found = subscribers[signal];

package/dist/esm/binding/two-way.js

@@ -1,5 +1,5 @@
 import { isString, Message } from "../interfaces.js";
-import { ExecutionContext, Observable, } from "../observation/observable.js";
+import { Observable, } from "../observation/observable.js";
 import { FAST, makeSerializationNoop } from "../platform.js";
 import { Binding } from "./binding.js";
 const defaultOptions = {
@@ -12,6 +12,7 @@ let twoWaySettings = {
 };
 /**
  * Enables configuring two-way binding settings.
+ * @public
  */
 export const TwoWaySettings = Object.freeze({
     /**

package/dist/esm/binding.js

@@ -0,0 +1,4 @@
+export { Binding } from "./binding/binding.js";
+export { normalizeBinding } from "./binding/normalize.js";
+export { oneTime } from "./binding/one-time.js";
+export { listener, oneWay } from "./binding/one-way.js";

package/dist/esm/components/attributes.js

@@ -1,7 +1,7 @@
-import { Observable } from "../observation/observable.js";
+import { DOM } from "../dom.js";
 import { isString } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
 import { Updates } from "../observation/update-queue.js";
-import { DOM } from "../dom.js";
 import { createMetadataLocator } from "../platform.js";
 const booleanMode = "boolean";
 const reflectMode = "reflect";
@@ -70,7 +70,7 @@ export const nullableNumberConverter = {
     fromView: toNumber,
 };
 /**
- * An implementation of {@link Accessor} that supports reactivity,
+ * An implementation of `Accessor` that supports reactivity,
  * change callbacks, attribute reflection, and type conversion for
  * custom elements.
  * @public
@@ -146,10 +146,13 @@ export class AttributeDefinition {
             guards.add(element);
             const latestValue = element[this.fieldName];
             switch (mode) {
-                case reflectMode:
+                case reflectMode: {
                     const converter = this.converter;
-                    DOM.setAttribute(element, this.attribute, converter !== void 0 ? converter.toView(latestValue) : latestValue);
+                    DOM.setAttribute(element, this.attribute, converter !== void 0
+                        ? converter.toView(latestValue)
+                        : latestValue);
                     break;
+                }
                 case booleanMode:
                     DOM.setBooleanAttribute(element, this.attribute, latestValue);
                     break;

package/dist/esm/components/definition-schema-transforms.js

@@ -0,0 +1,23 @@
+const definitionSchemaTransformsKey = Symbol("definitionSchemaTransforms");
+let schemaTransformOrder = 0;
+export function setDefinitionSchemaTransform(definition, key, transform, priority) {
+    var _a;
+    const target = definition;
+    const transforms = ((_a = target[definitionSchemaTransformsKey]) !== null && _a !== void 0 ? _a : (target[definitionSchemaTransformsKey] = []));
+    const existingIndex = transforms.findIndex(record => record.key === key);
+    if (existingIndex !== -1) {
+        transforms.splice(existingIndex, 1);
+    }
+    transforms.push({
+        key,
+        transform,
+        order: schemaTransformOrder++,
+        priority,
+    });
+    transforms.sort((a, b) => a.priority - b.priority || a.order - b.order);
+}
+export function getDefinitionSchemaTransforms(definition) {
+    var _a;
+    const transforms = definition === null || definition === void 0 ? void 0 : definition[definitionSchemaTransformsKey];
+    return (_a = transforms === null || transforms === void 0 ? void 0 : transforms.map(record => record.transform)) !== null && _a !== void 0 ? _a : [];
+}