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

package/dist/esm/templating/view.js

@@ -1,9 +1,6 @@
-var _a;
-import { Hydratable } from "../components/hydration.js";
-import { buildViewBindingTargets, createRangeForNodes, HydrationTargetElementError, targetFactory, } from "../hydration/target-builder.js";
 import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
 import { makeSerializationNoop } from "../platform.js";
-function removeNodeSequence(firstNode, lastNode) {
+export function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
     let current = firstNode;
     let next;
@@ -17,7 +14,11 @@ function removeNodeSequence(firstNode, lastNode) {
     }
     parent.removeChild(lastNode);
 }
-class DefaultExecutionContext {
+/**
+ * The default execution context for template views.
+ * @public
+ */
+export class DefaultExecutionContext {
     constructor() {
         /**
          * The index of the current item within a repeat context.
@@ -111,6 +112,24 @@ export class HTMLView extends DefaultExecutionContext {
          * Indicates how the source's lifetime relates to the controller's lifetime.
          */
         this.sourceLifetime = SourceLifetime.unknown;
+        /**
+         * When true, directives skip attribute/booleanAttribute DOM
+         * updates during bind(). Set only during the prerendered bind
+         * window and cleared immediately after.
+         * @internal
+         */
+        this._skipAttrUpdates = false;
+        /**
+         * 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.
+         */
+        this.isPrerendered = Promise.resolve(false);
+        /**
+         * Resolves `true` after prerendered content has been hydrated,
+         * `false` when client-side rendered or hydration not enabled.
+         */
+        this.isHydrated = Promise.resolve(false);
         /**
          * The execution context the view is running within.
          */
@@ -192,7 +211,7 @@ export class HTMLView extends DefaultExecutionContext {
      * @param context - The execution context to run the behaviors within.
      */
     bind(source, context = this) {
-        if (this.source === source) {
+        if (this.source === source && this.context === context) {
             return;
         }
         let behaviors = this.behaviors;
@@ -258,231 +277,3 @@ export class HTMLView extends DefaultExecutionContext {
 makeSerializationNoop(HTMLView);
 Observable.defineProperty(HTMLView.prototype, "index");
 Observable.defineProperty(HTMLView.prototype, "length");
-export const HydrationStage = {
-    unhydrated: "unhydrated",
-    hydrating: "hydrating",
-    hydrated: "hydrated",
-};
-/** @public */
-export class HydrationBindingError extends Error {
-    constructor(
-    /**
-     * The error message
-     */
-    message, 
-    /**
-     * The factory that was unable to be bound
-     */
-    factory, 
-    /**
-     * A DocumentFragment containing a clone of the
-     * view's Nodes.
-     */
-    fragment, 
-    /**
-     * String representation of the HTML in the template that
-     * threw the binding error.
-     */
-    templateString) {
-        super(message);
-        this.factory = factory;
-        this.fragment = fragment;
-        this.templateString = templateString;
-    }
-}
-export class HydrationView extends DefaultExecutionContext {
-    get hydrationStage() {
-        return this._hydrationStage;
-    }
-    get targets() {
-        return this._targets;
-    }
-    get bindingViewBoundaries() {
-        return this._bindingViewBoundaries;
-    }
-    constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
-        super();
-        this.firstChild = firstChild;
-        this.lastChild = lastChild;
-        this.sourceTemplate = sourceTemplate;
-        this.hostBindingTarget = hostBindingTarget;
-        this[_a] = Hydratable;
-        this.context = this;
-        this.source = null;
-        this.isBound = false;
-        this.sourceLifetime = SourceLifetime.unknown;
-        this.unbindables = [];
-        this.fragment = null;
-        this.behaviors = null;
-        this._hydrationStage = HydrationStage.unhydrated;
-        this._bindingViewBoundaries = {};
-        this._targets = {};
-        this.factories = sourceTemplate.compile().factories;
-    }
-    /**
-     * no-op. Hydrated views are don't need to be moved from a documentFragment
-     * to the target node.
-     */
-    insertBefore(node) {
-        // No-op in cases where this is called before the view is removed,
-        // because the nodes will already be in the document and just need hydrating.
-        if (this.fragment === null) {
-            return;
-        }
-        if (this.fragment.hasChildNodes()) {
-            node.parentNode.insertBefore(this.fragment, node);
-        }
-        else {
-            const end = this.lastChild;
-            if (node.previousSibling === end)
-                return;
-            const parentNode = node.parentNode;
-            let current = this.firstChild;
-            let next;
-            while (current !== end) {
-                next = current.nextSibling;
-                parentNode.insertBefore(current, node);
-                current = next;
-            }
-            parentNode.insertBefore(end, node);
-        }
-    }
-    /**
-     * 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) {
-        if (this.fragment !== null) {
-            node.appendChild(this.fragment);
-        }
-    }
-    remove() {
-        const fragment = this.fragment || (this.fragment = document.createDocumentFragment());
-        const end = this.lastChild;
-        let current = this.firstChild;
-        let next;
-        while (current !== end) {
-            next = current.nextSibling;
-            if (!next) {
-                throw new Error(`Unmatched first/last child inside "${end.getRootNode().host.nodeName}".`);
-            }
-            fragment.appendChild(current);
-            current = next;
-        }
-        fragment.appendChild(end);
-    }
-    bind(source, context = this) {
-        var _b;
-        if (this.hydrationStage !== HydrationStage.hydrated) {
-            this._hydrationStage = HydrationStage.hydrating;
-        }
-        if (this.source === source) {
-            return;
-        }
-        let behaviors = this.behaviors;
-        if (behaviors === null) {
-            this.source = source;
-            this.context = context;
-            try {
-                const { targets, boundaries } = buildViewBindingTargets(this.firstChild, this.lastChild, this.factories);
-                this._targets = targets;
-                this._bindingViewBoundaries = boundaries;
-            }
-            catch (error) {
-                if (error instanceof HydrationTargetElementError) {
-                    let templateString = this.sourceTemplate.html;
-                    if (typeof templateString !== "string") {
-                        templateString = templateString.innerHTML;
-                    }
-                    error.templateString = templateString;
-                }
-                throw error;
-            }
-            this.behaviors = behaviors = new Array(this.factories.length);
-            const factories = this.factories;
-            for (let i = 0, ii = factories.length; i < ii; ++i) {
-                const factory = factories[i];
-                if (factory.targetNodeId === "h" && this.hostBindingTarget) {
-                    targetFactory(factory, this.hostBindingTarget, this._targets);
-                }
-                // If the binding has been targeted or it is a host binding and the view has a hostBindingTarget
-                if (factory.targetNodeId in this.targets) {
-                    const behavior = factory.createBehavior();
-                    behavior.bind(this);
-                    behaviors[i] = behavior;
-                }
-                else {
-                    let templateString = this.sourceTemplate.html;
-                    if (typeof templateString !== "string") {
-                        templateString = templateString.innerHTML;
-                    }
-                    const hostElement = ((_b = this.firstChild) === null || _b === void 0 ? void 0 : _b.getRootNode())
-                        .host;
-                    const hostName = (hostElement === null || hostElement === void 0 ? void 0 : hostElement.nodeName) || "unknown";
-                    const factoryInfo = factory;
-                    // Build detailed error message
-                    const details = [
-                        `HydrationView was unable to successfully target bindings inside "<${hostName.toLowerCase()}>".`,
-                        `\nMismatch Details:`,
-                        `  - Expected target node ID: "${factory.targetNodeId}"`,
-                        `  - Available target IDs: [${Object.keys(this.targets).join(", ") || "none"}]`,
-                    ];
-                    if (factory.targetTagName) {
-                        details.push(`  - Expected tag name: "${factory.targetTagName}"`);
-                    }
-                    if (factoryInfo.sourceAspect) {
-                        details.push(`  - Source aspect: "${factoryInfo.sourceAspect}"`);
-                    }
-                    if (factoryInfo.aspectType !== undefined) {
-                        details.push(`  - Aspect type: ${factoryInfo.aspectType}`);
-                    }
-                    details.push(`\nThis usually means:`, `  1. The server-rendered HTML doesn't match the client template`, `  2. The hydration markers are missing or corrupted`, `  3. The DOM structure was modified before hydration`, `\nTemplate: ${templateString.slice(0, 200)}${templateString.length > 200 ? "..." : ""}`);
-                    throw new HydrationBindingError(details.join("\n"), factory, createRangeForNodes(this.firstChild, this.lastChild).cloneContents(), templateString);
-                }
-            }
-        }
-        else {
-            if (this.source !== null) {
-                this.evaluateUnbindables();
-            }
-            this.isBound = false;
-            this.source = source;
-            this.context = context;
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(this);
-            }
-        }
-        this.isBound = true;
-        this._hydrationStage = HydrationStage.hydrated;
-    }
-    unbind() {
-        if (!this.isBound || this.source === null) {
-            return;
-        }
-        this.evaluateUnbindables();
-        this.source = null;
-        this.context = this;
-        this.isBound = false;
-    }
-    /**
-     * 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() {
-        removeNodeSequence(this.firstChild, this.lastChild);
-        this.unbind();
-    }
-    onUnbind(behavior) {
-        this.unbindables.push(behavior);
-    }
-    evaluateUnbindables() {
-        const unbindables = this.unbindables;
-        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
-            unbindables[i].unbind(this);
-        }
-        unbindables.length = 0;
-    }
-}
-_a = Hydratable;
-makeSerializationNoop(HydrationView);

package/dist/esm/templating.js

@@ -0,0 +1,7 @@
+export { Compiler } from "./templating/compiler.js";
+export { HTMLBindingDirective, } from "./templating/html-binding-directive.js";
+export { HTMLDirective, htmlDirective, StatelessAttachedAttributeDirective, } from "./templating/html-directive.js";
+export { Markup, Parser } from "./templating/markup.js";
+export { RenderBehavior, RenderDirective, render } from "./templating/render.js";
+export { InlineTemplateDirective, ViewTemplate, } from "./templating/template.js";
+export { HTMLView, } from "./templating/view.js";

package/dist/esm/testing/exports.js

@@ -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/esm/testing/fixture.js

@@ -32,8 +32,8 @@ export function uniqueElementName(prefix = "fast-unique") {
  * ensure that the DOM has settled.
  * @public
  */
-export function fixture(templateNameOrType, options = {}) {
-    return __awaiter(this, void 0, void 0, function* () {
+export function fixture(templateNameOrType_1) {
+    return __awaiter(this, arguments, void 0, function* (templateNameOrType, options = {}) {
         const document = options.document || globalThis.document;
         const parent = options.parent || document.createElement("div");
         const source = options.source || {};

package/dist/esm/testing/timeout.js

@@ -13,8 +13,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
  * @returns A promise that resolves once the configured time has elapsed.
  * @public
  */
-export function timeout(timeout = 0) {
-    return __awaiter(this, void 0, void 0, function* () {
+export function timeout() {
+    return __awaiter(this, arguments, void 0, function* (timeout = 0) {
         return new Promise((resolve, reject) => {
             window.setTimeout(() => {
                 resolve(void 0);

package/dist/esm/updates.js

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

package/dist/esm/volatile.js

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