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

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

@@ -1,375 +0,0 @@
-import { __awaiter } from "tslib";
-import { FASTElement } from "@microsoft/fast-element";
-import { 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: "dark",
-                        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;
-        };
-    }
-}
-class ObserverMapInternalTestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.a = {};
-        this.x = undefined;
-        this.groups = [
-            {
-                items: [
-                    {
-                        text: "item A",
-                        actions: {
-                            trailing: [
-                                {
-                                    label: "action label A",
-                                },
-                            ],
-                        },
-                    },
-                ],
-            },
-        ];
-    }
-    removeAllItems() {
-        this.groups[0].items.shift();
-    }
-    addAnItem() {
-        this.groups[0].items.push({
-            text: "item B",
-            actions: {
-                trailing: [
-                    {
-                        label: "action label A",
-                    },
-                ],
-            },
-        });
-    }
-    updateAnItem() {
-        this.groups[0].items[0].text = "item C";
-    }
-    removeGroup() {
-        this.groups = [];
-    }
-    addGroup() {
-        this.groups = [
-            {
-                items: [
-                    {
-                        text: "item A",
-                        actions: {
-                            trailing: [
-                                {
-                                    label: "action label A",
-                                },
-                            ],
-                        },
-                    },
-                ],
-            },
-        ];
-    }
-    updateActionLabel() {
-        this.groups[0].items[0].actions.trailing[0].label = "action label B";
-    }
-    defineB() {
-        this.a = {
-            b: {
-                c: "Hello world",
-            },
-        };
-    }
-    updateC() {
-        this.a.b.c = "Hello pluto";
-    }
-    defineY() {
-        this.x = {
-            y: {
-                z: "Z1",
-            },
-        };
-    }
-    updateZ() {
-        this.x.y.z = "Z2";
-    }
-}
-// Nested child components must be defined first
-(() => __awaiter(void 0, void 0, void 0, function* () {
-    yield ObserverMapInternalTestElement.defineAsync({
-        name: "observer-map-internal-test-element",
-    });
-    yield ObserverMapTestElement.defineAsync({
-        name: "observer-map-test-element",
-    });
-}))();
-// 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

@@ -1,251 +0,0 @@
-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 be able to update nested properties on added users", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        // Initial user count should be 2
-        yield expect(page.locator(".user-card")).toHaveCount(2);
-        // 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);
-        const userCard3 = yield page.locator(".user-card").nth(2);
-        // Initial theme should be dark for User 3
-        yield expect(userCard3.locator("text=Theme: dark")).toBeVisible();
-        // Click the toggle theme button for User 3
-        yield userCard3.locator("button:has-text('Toggle Theme')").click();
-        // Theme should now be light
-        yield expect(userCard3.locator("text=Theme: light")).toBeVisible();
-    }));
-    test("should be able to update nested properties on added users after the items array has been emptied", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        // Initial item count should be 1
-        yield expect(page.locator(".item")).toHaveCount(1);
-        // Remove item
-        yield page.locator("button:has-text('Remove all items')").click();
-        // Should now have 0 items
-        yield expect(page.locator(".item")).toHaveCount(0);
-        // Click the add item button
-        yield page.locator("button:has-text('Add an item')").click();
-        // There should now be 1 item
-        yield expect(page.locator(".item")).toHaveCount(1);
-        // Click the update item button
-        yield page.locator("button:has-text('Update an item')").click();
-        // The item should have updated text
-        yield expect(page.locator(".item")).toHaveText('item C');
-    }));
-    test("should be able to update nested properties on added users after the group array has been emptied", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        // Initial item count should be 1
-        yield expect(page.locator(".item")).toHaveCount(1);
-        // Remove groups
-        yield page.locator("button:has-text('Remove groups')").click();
-        // Should now have 0 items
-        yield expect(page.locator(".item")).toHaveCount(0);
-        // Click the add group button
-        yield page.locator("button:has-text('Add group')").click();
-        // There should now be 1 item
-        yield expect(page.locator(".item")).toHaveCount(1);
-        // Click the update item button
-        yield page.locator("button:has-text('Update an item')").click();
-        // The item should have updated text
-        yield expect(page.locator(".item")).toHaveText('item C');
-        // Click the update action label
-        yield page.locator("button:has-text('Update an action label')").click();
-        // The action label should have updated text
-        yield expect(page.locator(".action-label")).toHaveText('action label B');
-    }));
-    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 a defined object 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 B')").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 a defined object 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 B')").nth(0).click();
-        // Update the object
-        yield page.locator("button:has-text('Update C')").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");
-    }));
-    test("should update an undefined object when a nested property has been defined", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        const undefinedText = yield page.locator(".nested-define-2");
-        yield expect(undefinedText).toHaveCount(0);
-        // Define the object
-        yield page.locator("button:has-text('Define Y')").nth(0).click();
-        yield page.evaluate(() => {
-            return new Promise((resolve) => {
-                requestAnimationFrame(() => resolve(true));
-            });
-        });
-        const definedText = yield page.locator(".nested-define-2").textContent();
-        yield expect(definedText).toEqual("Z1");
-    }));
-    test("should update an undefined object 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 Y')").nth(0).click();
-        // Update the object
-        yield page.locator("button:has-text('Update Z')").nth(0).click();
-        yield page.evaluate(() => {
-            return new Promise((resolve) => {
-                requestAnimationFrame(() => resolve(true));
-            });
-        });
-        const updatedText = yield page.locator(".nested-define-2").textContent();
-        yield expect(updatedText).toEqual("Z2");
-    }));
-}));

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

@@ -1,15 +0,0 @@
-import { FASTElement } from "@microsoft/fast-element";
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-class TestElement extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.video = null;
-    }
-}
-RenderableFASTElement(TestElement).defineAsync({
-    name: "test-element",
-    templateOptions: "defer-and-hydrate",
-});
-TemplateElement.define({
-    name: "f-template",
-});

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

@@ -1,9 +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 ref directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
-        yield page.goto("/ref");
-        const element = page.locator("test-element");
-        yield expect(element).toHaveJSProperty("video.nodeName", "VIDEO");
-    }));
-}));