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

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

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

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