@microsoft/fast-html 1.0.0-alpha.16 → 1.0.0-alpha.18

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

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

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

@@ -1,9 +1,116 @@
 import { __awaiter } from "tslib";
 import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+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).toHaveText("bar");
+        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,16 +1,42 @@
+import { FASTElement } from "@microsoft/fast-element";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-class TestElement extends RenderableFASTElement {
+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.defineAsync({
+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/main.js

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

package/dist/esm/fixtures/observer-map/main.js

@@ -0,0 +1,304 @@
+import { FASTElement } from "@microsoft/fast-element";
+import { RenderableFASTElement, TemplateElement } from "../../components/index.js";
+class ObserverMapTestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.users = [
+            {
+                id: 1,
+                name: "Alice Johnson",
+                details: {
+                    personal: {
+                        age: 28,
+                        location: {
+                            city: "New York",
+                            country: "USA",
+                            coordinates: {
+                                lat: 40.7128,
+                                lng: -74.006,
+                            },
+                        },
+                    },
+                    preferences: {
+                        theme: "dark",
+                        notifications: {
+                            email: true,
+                            push: false,
+                            settings: {
+                                frequency: "daily",
+                                categories: ["tech", "news"],
+                            },
+                        },
+                    },
+                },
+                posts: [
+                    {
+                        id: 101,
+                        title: "First Post",
+                        content: "Hello World!",
+                        metadata: {
+                            views: 150,
+                            likes: 25,
+                            tags: ["introduction", "hello"],
+                            author: {
+                                name: "Alice Johnson",
+                                verified: true,
+                            },
+                        },
+                    },
+                    {
+                        id: 102,
+                        title: "Tech Update",
+                        content: "Latest in technology...",
+                        metadata: {
+                            views: 320,
+                            likes: 45,
+                            tags: ["tech", "update"],
+                            author: {
+                                name: "Alice Johnson",
+                                verified: true,
+                            },
+                        },
+                    },
+                ],
+            },
+            {
+                id: 2,
+                name: "Bob Smith",
+                details: {
+                    personal: {
+                        age: 35,
+                        location: {
+                            city: "London",
+                            country: "UK",
+                            coordinates: {
+                                lat: 51.5074,
+                                lng: -0.1278,
+                            },
+                        },
+                    },
+                    preferences: {
+                        theme: "light",
+                        notifications: {
+                            email: false,
+                            push: true,
+                            settings: {
+                                frequency: "weekly",
+                                categories: ["sports", "music"],
+                            },
+                        },
+                    },
+                },
+                posts: [
+                    {
+                        id: 201,
+                        title: "Music Review",
+                        content: "Amazing concert last night...",
+                        metadata: {
+                            views: 89,
+                            likes: 12,
+                            tags: ["music", "review"],
+                            author: {
+                                name: "Bob Smith",
+                                verified: false,
+                            },
+                        },
+                    },
+                ],
+            },
+        ];
+        this.selectedUserId = 1;
+        this.stats = {
+            totalUsers: 2,
+            activeUsers: 1,
+            metrics: {
+                engagement: {
+                    daily: 45,
+                    weekly: 120,
+                    monthly: 500,
+                },
+                performance: {
+                    loadTime: 1.2,
+                    renderTime: 0.8,
+                },
+            },
+        };
+        // Methods to test deeply nested property changes
+        this.updateUserAge = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                user.details.personal.age += 1;
+            }
+        };
+        this.toggleUserTheme = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                user.details.preferences.theme =
+                    user.details.preferences.theme === "dark" ? "light" : "dark";
+            }
+        };
+        this.updateUserLocation = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                // Use hardcoded values since we can only pass single argument
+                user.details.personal.location.city = "Tokyo";
+                user.details.personal.location.country = "Japan";
+                // Update coordinates randomly for demo
+                user.details.personal.location.coordinates.lat = Math.random() * 180 - 90;
+                user.details.personal.location.coordinates.lng = Math.random() * 360 - 180;
+            }
+        };
+        this.addPostToUser = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                const newPostId = Math.max(...user.posts.map((p) => p.id)) + 1;
+                user.posts.push({
+                    id: newPostId,
+                    title: `New Post ${newPostId}`,
+                    content: `This is a new post with ID ${newPostId}`,
+                    metadata: {
+                        views: 0,
+                        likes: 0,
+                        tags: ["new", "auto-generated"],
+                        author: {
+                            name: user.name,
+                            verified: Math.random() > 0.5,
+                        },
+                    },
+                });
+            }
+        };
+        this.incrementPostLikes = (postId) => {
+            // Find the post across all users since we only have postId
+            for (const user of this.users) {
+                const post = user.posts.find((p) => p.id === postId);
+                if (post) {
+                    post.metadata.likes += 1;
+                    post.metadata.views += Math.floor(Math.random() * 5) + 1;
+                    break;
+                }
+            }
+        };
+        this.updateNotificationSettings = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                user.details.preferences.notifications.email =
+                    !user.details.preferences.notifications.email;
+                user.details.preferences.notifications.push =
+                    !user.details.preferences.notifications.push;
+                // Cycle through frequency options
+                const frequencies = ["daily", "weekly", "monthly"];
+                const currentIndex = frequencies.indexOf(user.details.preferences.notifications.settings.frequency);
+                const nextIndex = (currentIndex + 1) % frequencies.length;
+                user.details.preferences.notifications.settings.frequency =
+                    frequencies[nextIndex];
+            }
+        };
+        this.addNotificationCategory = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                // Use hardcoded category since we can only pass single argument
+                const category = "sports";
+                if (!user.details.preferences.notifications.settings.categories.includes(category)) {
+                    user.details.preferences.notifications.settings.categories.push(category);
+                }
+            }
+        };
+        this.removeNotificationCategory = (userId) => {
+            const user = this.users.find(u => u.id === userId);
+            if (user) {
+                // Use hardcoded category since we can only pass single argument
+                const category = "tech";
+                const index = user.details.preferences.notifications.settings.categories.indexOf(category);
+                if (index > -1) {
+                    user.details.preferences.notifications.settings.categories.splice(index, 1);
+                }
+            }
+        };
+        this.addNewUser = () => {
+            const newId = Math.max(...this.users.map(u => u.id)) + 1;
+            this.users.push({
+                id: newId,
+                name: `User ${newId}`,
+                details: {
+                    personal: {
+                        age: Math.floor(Math.random() * 50) + 18,
+                        location: {
+                            city: "Random City",
+                            country: "Random Country",
+                            coordinates: {
+                                lat: Math.random() * 180 - 90,
+                                lng: Math.random() * 360 - 180,
+                            },
+                        },
+                    },
+                    preferences: {
+                        theme: Math.random() > 0.5 ? "dark" : "light",
+                        notifications: {
+                            email: Math.random() > 0.5,
+                            push: Math.random() > 0.5,
+                            settings: {
+                                frequency: ["daily", "weekly", "monthly"][Math.floor(Math.random() * 3)],
+                                categories: ["general"],
+                            },
+                        },
+                    },
+                },
+                posts: [],
+            });
+            this.stats.totalUsers = this.users.length;
+        };
+        this.removeUser = (userId) => {
+            const index = this.users.findIndex(u => u.id === userId);
+            if (index > -1) {
+                this.users.splice(index, 1);
+                this.stats.totalUsers = this.users.length;
+            }
+        };
+        this.updateStats = () => {
+            this.stats.metrics.engagement.daily += Math.floor(Math.random() * 10);
+            this.stats.metrics.engagement.weekly += Math.floor(Math.random() * 20);
+            this.stats.metrics.engagement.monthly += Math.floor(Math.random() * 50);
+            this.stats.metrics.performance.loadTime = Math.random() * 2 + 0.5;
+            this.stats.metrics.performance.renderTime = Math.random() * 1 + 0.3;
+        };
+        this.selectUser = (userId) => {
+            this.selectedUserId = userId;
+        };
+    }
+}
+RenderableFASTElement(ObserverMapTestElement).defineAsync({
+    name: "observer-map-test-element",
+    templateOptions: "defer-and-hydrate",
+});
+class ObserverMapInternalTestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.a = {
+            b: {},
+        };
+    }
+    defineB() {
+        this.a.b = {
+            c: "Hello world",
+        };
+    }
+    updateC() {
+        this.a.b.c = "Hello pluto";
+    }
+}
+RenderableFASTElement(ObserverMapInternalTestElement).defineAsync({
+    name: "observer-map-internal-test-element",
+    templateOptions: "defer-and-hydrate",
+});
+// Configure TemplateElement with observerMap enabled for this test
+TemplateElement.options({
+    "observer-map-test-element": {
+        observerMap: "all", // Enable ObserverMap to track all the nested property changes
+    },
+    "observer-map-internal-test-element": {
+        observerMap: "all", // Enable ObserverMap to track all the nested property changes
+    },
+}).define({
+    name: "f-template",
+});