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

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

@@ -4,7 +4,28 @@ 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";
         };
     }
 }
@@ -12,6 +33,10 @@ 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

@@ -14,9 +14,9 @@ class TestElement extends FASTElement {
         this.handleAttributeArgClick = (foo) => {
             console.log(foo);
         };
-    }
-    handleModifyAttributeClick() {
-        this.foo = "modified-by-click";
+        this.handleModifyAttributeClick = () => {
+            this.foo = "modified-by-click";
+        };
     }
 }
 __decorate([

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",
+});

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

@@ -0,0 +1,174 @@
+import { __awaiter } from "tslib";
+import { test, expect } from "@playwright/test";
+test.describe("ObserverMap", () => __awaiter(void 0, void 0, void 0, function* () {
+    test.beforeEach(({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/observer-map");
+        yield page.waitForSelector("observer-map-test-element");
+    }));
+    test("should render initial users with deeply nested properties", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check that initial users are rendered
+        yield expect(page.locator(".user-card")).toHaveCount(2);
+        // Check deeply nested properties are displayed
+        yield expect(page.locator("text=Alice Johnson")).toHaveCount(3);
+        yield expect(page.locator("text=Bob Smith")).toHaveCount(2);
+        // Check nested location data
+        yield expect(page.locator("text=New York, USA")).toBeVisible();
+        yield expect(page.locator("text=London, UK")).toBeVisible();
+        // Check deeply nested preferences
+        yield expect(page.locator("text=Theme: dark")).toBeVisible();
+        yield expect(page.locator("text=Theme: light")).toBeVisible();
+    }));
+    test("should update deeply nested age property", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial age should be 28 for Alice
+        yield expect(page.locator("text=Age: 28 years old")).toBeVisible();
+        // Click the age increment button for Alice (user ID 1)
+        yield page.locator("button:has-text('Age +1')").first().click();
+        // Age should now be 29
+        yield expect(page.locator("text=Age: 29 years old")).toBeVisible();
+        yield expect(page.locator("text=Age: 28 years old")).not.toBeVisible();
+    }));
+    test("should toggle theme in deeply nested preferences", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial theme should be dark for Alice
+        yield expect(page.locator("text=Theme: dark").first()).toBeVisible();
+        // Click the toggle theme button for Alice
+        yield page.locator("button:has-text('Toggle Theme')").first().click();
+        // Theme should now be light
+        yield expect(page.locator("text=Theme: light").first()).toBeVisible();
+    }));
+    test("should update location", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial location should be New York, USA
+        yield expect(page.locator("text=New York, USA")).toBeVisible();
+        // Click the change location button for Alice
+        yield page.locator("button:has-text('Change Location')").first().click();
+        // Location should now be Tokyo, Japan
+        yield expect(page.locator("text=Tokyo, Japan")).toBeVisible();
+        yield expect(page.locator("text=New York, USA")).not.toBeVisible();
+    }));
+    test("should update notification settings", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check initial notification settings for Alice
+        yield expect(page.locator("text=Email Notifications: true").first()).toBeVisible();
+        yield expect(page.locator("text=Push Notifications: false").first()).toBeVisible();
+        yield expect(page.locator("text=Notification Frequency: daily").first()).toBeVisible();
+        // Click update notifications button
+        yield page.locator("button:has-text('Update Notifications')").first().click();
+        // Settings should be toggled
+        yield expect(page.locator("text=Email Notifications: false").first()).toBeVisible();
+        yield expect(page.locator("text=Push Notifications: true").first()).toBeVisible();
+        yield expect(page.locator("text=Notification Frequency: weekly").first()).toBeVisible();
+    }));
+    test("should add and remove categories in deeply nested arrays", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check initial categories for Alice (should include "tech")
+        yield expect(page.locator(".tag:has-text('tech')")).toHaveCount(2);
+        // Add sports category
+        yield page.locator("button:has-text('Add Category')").first().click();
+        yield expect(page.locator(".tag:has-text('sports')").first()).toBeVisible();
+        // Remove tech category
+        yield page.locator("button:has-text('Remove Tech Category')").first().click();
+        yield expect(page.locator(".tag:has-text('tech')")).toHaveCount(1);
+    }));
+    test("should increment post likes and update nested metadata", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const aliceCard = page.locator(".user-card").first();
+        const firstPost = aliceCard.locator(".post-card").first();
+        // Check initial likes (should be 25)
+        yield expect(firstPost.locator("text=25 likes")).toBeVisible();
+        // Click like button
+        yield firstPost.locator("button:has-text('Like Post')").click();
+        // Likes should increment to 26
+        yield expect(firstPost.locator("text=26 likes")).toBeVisible();
+        // Views should also increment (random amount)
+        yield expect(firstPost.locator("text=views")).toBeVisible();
+    }));
+    test("should add new posts to users", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const aliceCard = page.locator(".user-card").first();
+        // Initial post count should be 2
+        yield expect(aliceCard.locator(".post-card")).toHaveCount(2);
+        // Add new post
+        yield aliceCard.locator("button:has-text('Add New Post')").click();
+        // Should now have 3 posts
+        yield expect(aliceCard.locator(".post-card")).toHaveCount(3);
+    }));
+    test("should update the likes on a new post", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const aliceCard = page.locator(".user-card").first();
+        // Add new post first
+        yield aliceCard.locator("button:has-text('Add New Post')").click();
+        // Should now have 3 posts
+        yield expect(aliceCard.locator(".post-card")).toHaveCount(3);
+        // Get the newly added post (should be the last one)
+        const newPost = aliceCard.locator(".post-card").nth(2);
+        // Check initial likes on the new post (should be 0)
+        yield expect(newPost.locator("text=0 likes")).toBeVisible();
+        // Click like button on the new post
+        yield newPost.locator("button:has-text('Like Post')").click();
+        // Likes should increment to 1
+        yield expect(newPost.locator("text=1 likes")).toBeVisible();
+        yield expect(newPost.locator("text=0 likes")).not.toBeVisible();
+    }));
+    test("should add and remove users from the array", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial user count should be 2
+        yield expect(page.locator(".user-card")).toHaveCount(2);
+        yield expect(page.locator("text=Total Users: 2")).toBeVisible();
+        // Add new user
+        yield page.locator("button:has-text('Add New User')").click();
+        // Should now have 3 users
+        yield expect(page.locator(".user-card")).toHaveCount(3);
+        yield expect(page.locator("text=Total Users: 3")).toBeVisible();
+        yield expect(page.locator("text=User 3")).toBeVisible();
+        // Remove a user (Alice - first remove button)
+        yield page.locator("button:has-text('Remove User')").first().click();
+        // Should be back to 2 users
+        yield expect(page.locator(".user-card")).toHaveCount(2);
+        yield expect(page.locator("text=Total Users: 2")).toBeVisible();
+    }));
+    test("should update global stats with nested metrics", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check initial engagement stats
+        const initialDaily = yield page.locator(".stats .nested-info").nth(1).textContent();
+        // Update stats
+        yield page.locator(".stats .controls button").nth(0).click();
+        yield page.evaluate(() => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => resolve(true));
+            });
+        });
+        // Stats should be updated (values should change)
+        const updatedDaily = yield page.locator(".stats .nested-info").nth(1).textContent();
+        expect(updatedDaily).not.toBe(initialDaily);
+    }));
+    test("should handle user selection with conditional rendering", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initially, Alice (ID 1) should be selected
+        yield expect(page.locator("text=⭐ SELECTED").first()).toBeVisible();
+        // Select Bob (user ID 2)
+        yield page.locator(".user-card").nth(1).locator("button:has-text('Select User')").click();
+        // Bob should now show as selected
+        const bobCard = page.locator(".user-card").nth(1);
+        yield expect(bobCard.locator("text=⭐ SELECTED")).toBeVisible();
+        // Alice should no longer show as selected
+        const aliceCard = page.locator(".user-card").first();
+        yield expect(aliceCard.locator("text=⭐ SELECTED")).not.toBeVisible();
+    }));
+    test("should update when a nested property has been defined", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const undefinedText = yield page.locator(".nested-define").textContent();
+        yield expect(undefinedText).toEqual("");
+        // Define the object
+        yield page.locator("button:has-text('Define internal object')").nth(0).click();
+        yield page.evaluate(() => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => resolve(true));
+            });
+        });
+        const definedText = yield page.locator(".nested-define").textContent();
+        yield expect(definedText).toEqual("Hello world");
+    }));
+    test("should update when a nested property has been updated", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Define the object
+        yield page.locator("button:has-text('Define internal object')").nth(0).click();
+        // Update the object
+        yield page.locator("button:has-text('Update internal object')").nth(0).click();
+        yield page.evaluate(() => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => resolve(true));
+            });
+        });
+        const updatedText = yield page.locator(".nested-define").textContent();
+        yield expect(updatedText).toEqual("Hello pluto");
+    }));
+}));

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 import { FAST } from "@microsoft/fast-element";
 import { debugMessages } from "./debug.js";
 FAST.addMessages(debugMessages);
-export { RenderableFASTElement, TemplateElement } from "./components/index.js";
+export { RenderableFASTElement, TemplateElement, ObserverMap, } from "./components/index.js";