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

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

@@ -1,16 +1,42 @@
-import { TemplateElement } from "@microsoft/fast-html";
 import { FASTElement } from "@microsoft/fast-element";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.object = {
-            foo: "bar",
+            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";
         };
     }
 }
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
+    templateOptions: "defer-and-hydrate",
 });
-TemplateElement.define({
+TemplateElement.options({
+    "test-element": {
+        observerMap: "all",
+    },
+}).define({
     name: "f-template",
 });

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

@@ -1,12 +1,35 @@
 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", ({ page }) => __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 msgCount = 0;
-        yield page.on("console", msg => msgCount++);
-        yield customElement.locator("button").click();
-        expect(msgCount).toEqual(1);
+        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,15 +1,31 @@
-import { TemplateElement } from "@microsoft/fast-html";
-import { FASTElement } from "@microsoft/fast-element";
+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.handleClick = () => {
-            console.log("click!");
+        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";
         };
     }
 }
-TestElement.define({
+__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

@@ -0,0 +1,166 @@
+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

@@ -0,0 +1,126 @@
+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;