@microsoft/fast-html 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist/esm/fixtures/binding/main.js

@@ -1,30 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.text = "Hello";
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], TestElement.prototype, "text", void 0);
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-class TestElementUnescaped extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.html = `<p>Hello world</p>`;
-    }
-}
-RenderableFASTElement(TestElementUnescaped).defineAsync({
-    name: "test-element-unescaped",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/children/children.spec.js

@@ -1,37 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a children directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/children");
-        const listItemCount1 = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            const listItems = (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.listItems.filter((listItem) => {
-                return listItem instanceof HTMLLIElement;
-            });
-            return listItems === null || listItems === void 0 ? void 0 : listItems.length;
-        });
-        expect(listItemCount1).toEqual(2);
-        yield page.evaluate(() => {
-            const customElement = document.getElementsByTagName("test-element");
-            customElement.item(0).list = [
-                "A",
-                "B",
-                "C"
-            ];
-        });
-        const timeout = new Promise(function (resolve) {
-            setTimeout(resolve, 100);
-        });
-        yield timeout;
-        const listItemCount2 = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            const listItems = (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.listItems.filter((listItem) => {
-                return listItem instanceof HTMLLIElement;
-            });
-            return listItems === null || listItems === void 0 ? void 0 : listItems.length;
-        });
-        expect(listItemCount2).toEqual(3);
-    }));
-}));

package/dist/esm/fixtures/children/main.js

@@ -1,25 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { FASTElement, observable } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.listItems = [];
-        this.list = ["Foo", "Bar"];
-    }
-}
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "listItems", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], TestElement.prototype, "list", void 0);
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/dot-syntax/dot-syntax.spec.js

@@ -1,116 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template dot-syntax bindings", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a object property reference using dot syntax in a binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        yield expect(customElement.locator("span").nth(0)).toHaveText("bar");
-    }));
-    test("should display initial property values correctly", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        // Check initial values
-        yield expect(customElement.locator("span").nth(0)).toHaveText("bar");
-        yield expect(customElement.locator("span").nth(1)).toHaveText("");
-        yield expect(customElement.locator("span").nth(2)).toHaveText("FOO");
-    }));
-    test("should update object.b when 'Set b' button is clicked", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setBButton = customElement.locator("button").nth(0);
-        const bSpan = customElement.locator("span").nth(0);
-        // Verify initial state
-        yield expect(bSpan).toHaveText("bar");
-        // Click the "Set b" button
-        yield setBButton.click();
-        // Verify the value updated
-        yield expect(bSpan).toHaveText("Hello");
-    }));
-    test("should update object.a.b1 when 'Set a.b1' button is clicked", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setAB1Button = customElement.locator("button").nth(1);
-        const ab1Span = customElement.locator("span").nth(1);
-        // Verify initial state (should be empty/undefined)
-        yield expect(ab1Span).toHaveText("");
-        // Click the "Set a.b1" button
-        yield setAB1Button.click();
-        // Verify the value updated
-        yield expect(ab1Span).toHaveText("World");
-    }));
-    test("should update object.a.b2.c when 'Set a.b2.c' button is clicked", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setAB2CButton = customElement.locator("button").nth(2);
-        const ab2cSpan = customElement.locator("span").nth(2);
-        // Click the "Set a.b2.c" button
-        yield setAB2CButton.click();
-        // Verify the value updated
-        yield expect(ab2cSpan).toHaveText("Pluto");
-    }));
-    test("should handle multiple property updates independently", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setBButton = customElement.locator("button").nth(0);
-        const setAB1Button = customElement.locator("button").nth(1);
-        const setAB2CButton = customElement.locator("button").nth(2);
-        const bSpan = customElement.locator("span").nth(0);
-        const ab1Span = customElement.locator("span").nth(1);
-        const ab2cSpan = customElement.locator("span").nth(2);
-        // Update multiple properties
-        yield setBButton.click();
-        yield setAB1Button.click();
-        yield setAB2CButton.click();
-        // Verify all values are updated correctly
-        yield expect(bSpan).toHaveText("Hello");
-        yield expect(ab1Span).toHaveText("World");
-        yield expect(ab2cSpan).toHaveText("Pluto");
-    }));
-    test("should maintain property values after multiple clicks", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setBButton = customElement.locator("button").nth(0);
-        const bSpan = customElement.locator("span").nth(0);
-        // Click multiple times to ensure consistency
-        yield setBButton.click();
-        yield expect(bSpan).toHaveText("Hello");
-        yield setBButton.click();
-        yield expect(bSpan).toHaveText("Hello"); // Should remain the same
-        yield setBButton.click();
-        yield expect(bSpan).toHaveText("Hello"); // Should still be the same
-    }));
-    test("should update nested properties correctly", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setAB1Button = customElement.locator("button").nth(1);
-        const setAB2CButton = customElement.locator("button").nth(2);
-        const ab1Span = customElement.locator("span").nth(1);
-        const ab2cSpan = customElement.locator("span").nth(2);
-        // Test nested property updates
-        yield setAB1Button.click();
-        yield expect(ab1Span).toHaveText("World");
-        yield setAB2CButton.click();
-        yield expect(ab2cSpan).toHaveText("Pluto");
-        // Verify both nested properties coexist
-        yield expect(ab1Span).toHaveText("World");
-        yield expect(ab2cSpan).toHaveText("Pluto");
-    }));
-    test("should have correct button labels", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        // Verify button labels
-        yield expect(customElement.locator("button").nth(0)).toHaveText("Set b");
-        yield expect(customElement.locator("button").nth(1)).toHaveText("Set a.b1");
-        yield expect(customElement.locator("button").nth(2)).toHaveText("Set a.b2.c");
-    }));
-    test("should reflect property changes in DOM immediately", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/dot-syntax");
-        const customElement = yield page.locator("test-element");
-        const setBButton = customElement.locator("button").nth(0);
-        const bSpan = customElement.locator("span").nth(0);
-        // Verify immediate DOM update without additional waiting
-        yield setBButton.click();
-        // Should update immediately due to reactive system
-        yield expect(bSpan).toHaveText("Hello", { timeout: 1000 });
-    }));
-}));

package/dist/esm/fixtures/dot-syntax/main.js

@@ -1,42 +0,0 @@
-import { FASTElement } from "@microsoft/fast-element";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.object = {
-            b: "bar",
-            a: {
-                b2: {
-                    c: "FOO",
-                },
-            },
-        };
-        this.handleBClick = () => {
-            this.object.b = "Hello";
-        };
-        this.handleAB1Click = () => {
-            if (this.object.a) {
-                this.object.a.b1 = "World";
-            }
-            else {
-                this.object.a = {
-                    b1: "World",
-                };
-            }
-        };
-        this.handleAB2CClick = () => {
-            this.object.a.b2.c = "Pluto";
-        };
-    }
-}
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.options({
-    "test-element": {
-        observerMap: "all",
-    },
-}).define({
-    name: "f-template",
-});

package/dist/esm/fixtures/event/event.spec.js

@@ -1,35 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create an event attribute without arguments", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/event");
-        const customElement = yield page.locator("test-element");
-        let message;
-        yield page.on("console", msg => message = msg.text());
-        yield customElement.locator("button").nth(0).click();
-        expect(message).toEqual("no args");
-    }));
-    test("create an event attribute with an event argument", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/event");
-        const customElement = yield page.locator("test-element");
-        let message;
-        yield page.on("console", msg => message = msg.text());
-        yield customElement.locator("button").nth(1).click();
-        expect(message).toEqual("click");
-    }));
-    test("create an event attribute with an attribute argument", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/event");
-        const customElement = yield page.locator("test-element");
-        let message;
-        yield page.on("console", msg => message = msg.text());
-        yield customElement.locator("button").nth(2).click();
-        expect(message).toEqual("bar");
-    }));
-    test("should properly bind events with `this`", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/event");
-        const customElement = yield page.locator("test-element");
-        yield expect(customElement).toHaveJSProperty("foo", "bar");
-        yield customElement.locator("button").nth(3).click();
-        yield expect(customElement).toHaveJSProperty("foo", "modified-by-click");
-    }));
-}));

package/dist/esm/fixtures/event/main.js

@@ -1,32 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement } from "@microsoft/fast-element";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.foo = "";
-        this.handleNoArgsClick = () => {
-            console.log("no args");
-        };
-        this.handleEventArgClick = (e) => {
-            console.log(e.type);
-        };
-        this.handleAttributeArgClick = (foo) => {
-            console.log(foo);
-        };
-        this.handleModifyAttributeClick = () => {
-            this.foo = "modified-by-click";
-        };
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], TestElement.prototype, "foo", void 0);
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

package/dist/esm/fixtures/lifecycle-callbacks/lifecycle-callbacks.spec.js

@@ -1,166 +0,0 @@
-import { __awaiter } from "tslib";
-import { expect, test } from "@playwright/test";
-test.describe("Lifecycle Callbacks", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("should invoke all lifecycle callbacks in correct order for simple element", ({ page, }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        // Wait for hydration to complete
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        // Verify callbacks for simple-element were called
-        const simpleElementEvents = events.filter((e) => e.name === "simple-element");
-        expect(simpleElementEvents.length).toBeGreaterThan(0);
-        // Check that callbacks were called in the correct order
-        const callbackOrder = simpleElementEvents.map((e) => e.callback);
-        expect(callbackOrder).toContain("elementDidRegister");
-        expect(callbackOrder).toContain("templateWillUpdate");
-        expect(callbackOrder).toContain("templateDidUpdate");
-        expect(callbackOrder).toContain("elementDidDefine");
-        expect(callbackOrder).toContain("elementWillHydrate");
-        expect(callbackOrder).toContain("elementDidHydrate");
-        // Verify the order is correct
-        const registerIndex = callbackOrder.indexOf("elementDidRegister");
-        const willUpdateIndex = callbackOrder.indexOf("templateWillUpdate");
-        const didUpdateIndex = callbackOrder.indexOf("templateDidUpdate");
-        const defineIndex = callbackOrder.indexOf("elementDidDefine");
-        const willHydrateIndex = callbackOrder.indexOf("elementWillHydrate");
-        const didHydrateIndex = callbackOrder.indexOf("elementDidHydrate");
-        expect(registerIndex).toBeLessThan(willUpdateIndex);
-        expect(willUpdateIndex).toBeLessThan(didUpdateIndex);
-        expect(didUpdateIndex).toBeLessThan(defineIndex);
-        expect(willHydrateIndex).toBeGreaterThan(-1);
-        expect(didHydrateIndex).toBeGreaterThan(willHydrateIndex);
-    }));
-    test("should invoke callbacks for multiple elements", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        // Check that callbacks were invoked for all elements
-        const elementNames = new Set(events.map((e) => e.name));
-        expect(elementNames.has("simple-element")).toBe(true);
-        expect(elementNames.has("complex-element")).toBe(true);
-        expect(elementNames.has("nested-element")).toBe(true);
-    }));
-    test("should invoke elementWillHydrate before hydration", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        const willHydrateEvents = events.filter((e) => e.callback === "elementWillHydrate");
-        const didHydrateEvents = events.filter((e) => e.callback === "elementDidHydrate");
-        // Every elementWillHydrate should be followed by elementDidHydrate for the same element
-        willHydrateEvents.forEach((willEvent) => {
-            const correspondingDidEvent = didHydrateEvents.find((e) => e.name === willEvent.name);
-            expect(correspondingDidEvent).toBeDefined();
-        });
-    }));
-    test("should invoke hydrationComplete callback after all elements hydrate", ({ page, }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        const hydrationComplete = yield page.waitForFunction(() => window.getHydrationCompleteStatus(), { timeout: 5000 });
-        expect(hydrationComplete).toBeTruthy();
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        // Verify hydrationComplete callback was invoked
-        const hydrationCompleteEvents = events.filter((e) => e.callback === "hydrationComplete");
-        expect(hydrationCompleteEvents.length).toBe(1);
-        // Verify all elements are hydrated
-        const simpleElement = yield page.locator("simple-element");
-        const complexElement = yield page.locator("complex-element");
-        const nestedElement = yield page.locator("nested-element");
-        yield expect(simpleElement).not.toHaveAttribute("needs-hydration");
-        yield expect(complexElement).not.toHaveAttribute("needs-hydration");
-        yield expect(nestedElement).not.toHaveAttribute("needs-hydration");
-        // Verify hydrationComplete was called AFTER all individual element hydrations
-        const lastElementDidHydrateIndex = events.reduce((maxIndex, e, index) => {
-            return e.callback === "elementDidHydrate" ? index : maxIndex;
-        }, -1);
-        const hydrationCompleteIndex = events.findIndex((e) => e.callback === "hydrationComplete");
-        expect(hydrationCompleteIndex).toBeGreaterThan(lastElementDidHydrateIndex);
-    }));
-    test("should handle complex element with observer map", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const complexElement = yield page.locator("complex-element");
-        // Verify the element has hydrated correctly
-        yield expect(complexElement).toHaveText(/Complex/);
-        yield expect(complexElement).not.toHaveAttribute("needs-hydration");
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        const complexEvents = events.filter((e) => e.name === "complex-element");
-        // Complex element should have all lifecycle callbacks
-        expect(complexEvents.length).toBeGreaterThan(0);
-        expect(complexEvents.some((e) => e.callback === "elementDidHydrate")).toBe(true);
-    }));
-    test("should handle nested elements correctly", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        // Both parent complex-element and nested nested-element should have callbacks
-        const complexEvents = events.filter((e) => e.name === "complex-element");
-        const nestedEvents = events.filter((e) => e.name === "nested-element");
-        expect(complexEvents.length).toBeGreaterThan(0);
-        expect(nestedEvents.length).toBeGreaterThan(0);
-        // Both should have hydrated
-        expect(complexEvents.some((e) => e.callback === "elementDidHydrate")).toBe(true);
-        expect(nestedEvents.some((e) => e.callback === "elementDidHydrate")).toBe(true);
-    }));
-    test("should handle deferred hydration element", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        // The deferred element has a prepare() method that delays hydration
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus(), {
-            timeout: 5000,
-        });
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        const deferredEvents = events.filter((e) => e.name === "deferred-element");
-        // Should have hydration callbacks
-        expect(deferredEvents.some((e) => e.callback === "elementWillHydrate")).toBe(true);
-        expect(deferredEvents.some((e) => e.callback === "elementDidHydrate")).toBe(true);
-        const deferredElement = yield page.locator("deferred-element");
-        yield expect(deferredElement).not.toHaveAttribute("needs-hydration");
-        yield expect(deferredElement).not.toHaveAttribute("defer-hydration");
-    }));
-    test("should verify template and hydration callbacks are invoked", ({ page, }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const events = yield page.evaluate(() => window.lifecycleEvents);
-        // For each element, verify both template and hydration callbacks are invoked
-        // Note: These callbacks can be interleaved as template processing is async
-        const elementNames = ["simple-element", "complex-element", "nested-element"];
-        elementNames.forEach(name => {
-            const elementEvents = events.filter((e) => e.name === name);
-            const callbacks = elementEvents.map((e) => e.callback);
-            // Verify all expected callbacks were invoked
-            expect(callbacks).toContain("elementDidRegister");
-            expect(callbacks).toContain("templateWillUpdate");
-            expect(callbacks).toContain("templateDidUpdate");
-            expect(callbacks).toContain("elementDidDefine");
-            expect(callbacks).toContain("elementWillHydrate");
-            expect(callbacks).toContain("elementDidHydrate");
-            // Verify hydration callbacks are in order
-            const willHydrateIndex = callbacks.indexOf("elementWillHydrate");
-            const didHydrateIndex = callbacks.indexOf("elementDidHydrate");
-            expect(willHydrateIndex).toBeLessThan(didHydrateIndex);
-            // Verify template callbacks are in order
-            const registerIndex = callbacks.indexOf("elementDidRegister");
-            const willUpdateIndex = callbacks.indexOf("templateWillUpdate");
-            const didUpdateIndex = callbacks.indexOf("templateDidUpdate");
-            const defineIndex = callbacks.indexOf("elementDidDefine");
-            expect(registerIndex).toBeLessThan(willUpdateIndex);
-            expect(willUpdateIndex).toBeLessThan(didUpdateIndex);
-            expect(didUpdateIndex).toBeLessThan(defineIndex);
-        });
-    }));
-    test("should properly hydrate elements and maintain functionality", ({ page, }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/lifecycle-callbacks");
-        yield page.waitForFunction(() => window.getHydrationCompleteStatus());
-        const simpleElement = yield page.locator("simple-element");
-        const complexElement = yield page.locator("complex-element");
-        // Verify simple element displays correctly
-        yield expect(simpleElement).toHaveText("Hello World");
-        // Verify complex element displays correctly
-        yield expect(complexElement).toHaveText(/Complex/);
-        // Verify elements are interactive after hydration
-        const currentCount = yield complexElement.evaluate((el) => el.count);
-        expect(currentCount).toBe(0);
-        // Interact with the element
-        yield complexElement.evaluate((el) => el.increment());
-        const newCount = yield complexElement.evaluate((el) => el.count);
-        expect(newCount).toBe(1);
-    }));
-}));

package/dist/esm/fixtures/lifecycle-callbacks/main.js

@@ -1,126 +0,0 @@
-import { __awaiter, __decorate, __metadata } from "tslib";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement, observable } from "@microsoft/fast-element";
-// Track lifecycle callbacks for testing
-export const lifecycleEvents = [];
-// Track hydration complete
-export let hydrationCompleteEmitted = false;
-// Configure lifecycle callbacks
-TemplateElement.config({
-    elementDidRegister(name) {
-        lifecycleEvents.push({ callback: "elementDidRegister", name });
-    },
-    templateWillUpdate(name) {
-        lifecycleEvents.push({ callback: "templateWillUpdate", name });
-    },
-    templateDidUpdate(name) {
-        lifecycleEvents.push({ callback: "templateDidUpdate", name });
-    },
-    elementDidDefine(name) {
-        lifecycleEvents.push({ callback: "elementDidDefine", name });
-    },
-    elementWillHydrate(name) {
-        lifecycleEvents.push({ callback: "elementWillHydrate", name });
-    },
-    elementDidHydrate(name) {
-        lifecycleEvents.push({ callback: "elementDidHydrate", name });
-    },
-    hydrationComplete() {
-        lifecycleEvents.push({ callback: "hydrationComplete" });
-        hydrationCompleteEmitted = true;
-    },
-});
-// Simple element with basic property
-class SimpleElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.message = "Hello";
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], SimpleElement.prototype, "message", void 0);
-RenderableFASTElement(SimpleElement).defineAsync({
-    name: "simple-element",
-    templateOptions: "defer-and-hydrate",
-});
-// Complex element with multiple properties and methods
-class ComplexElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.title = "Complex";
-        this.count = 0;
-        this.items = [];
-    }
-    increment() {
-        this.count++;
-    }
-    addItem(item) {
-        this.items = [...this.items, item];
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], ComplexElement.prototype, "title", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Number)
-], ComplexElement.prototype, "count", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Array)
-], ComplexElement.prototype, "items", void 0);
-RenderableFASTElement(ComplexElement).defineAsync({
-    name: "complex-element",
-    templateOptions: "defer-and-hydrate",
-});
-// Nested element
-class NestedElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.label = "Nested";
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], NestedElement.prototype, "label", void 0);
-RenderableFASTElement(NestedElement).defineAsync({
-    name: "nested-element",
-    templateOptions: "defer-and-hydrate",
-});
-// Element with deferred hydration
-class DeferredElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.status = "pending";
-    }
-    prepare() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Simulate async work
-            yield new Promise(resolve => setTimeout(resolve, 100));
-            this.status = "ready";
-        });
-    }
-}
-__decorate([
-    attr,
-    __metadata("design:type", String)
-], DeferredElement.prototype, "status", void 0);
-RenderableFASTElement(DeferredElement).defineAsync({
-    name: "deferred-element",
-    templateOptions: "defer-and-hydrate",
-});
-// Define templates
-TemplateElement.options({
-    "complex-element": {
-        observerMap: "all",
-    },
-}).define({
-    name: "f-template",
-});
-// Make lifecycleEvents available globally for testing
-window.lifecycleEvents = lifecycleEvents;
-window.getHydrationCompleteStatus = () => hydrationCompleteEmitted;