@microsoft/fast-element 3.0.0-rc.1 → 3.0.0-rc.2

package/test/declarative/fixtures/extensions/observer-map/main.ts

@@ -1,482 +0,0 @@
-import { attr } from "@microsoft/fast-element/attr.js";
-import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
-import { FASTElement } from "@microsoft/fast-element/fast-element.js";
-import { enableHydration } from "@microsoft/fast-element/hydration.js";
-import { Observable, observable } from "@microsoft/fast-element/observable.js";
-import { observerMap } from "@microsoft/fast-element/observer-map.js";
-
-class ObserverMapTestElement extends FASTElement {
-    public users: any[] = [
-        {
-            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,
-                        },
-                    },
-                },
-            ],
-        },
-    ];
-
-    public selecteduserid: number = 1;
-
-    public stats = {
-        totalusers: 2,
-        activeusers: 1,
-        metrics: {
-            engagement: {
-                daily: 100,
-                weekly: 500,
-                monthly: 2000,
-            },
-            performance: {
-                loadtime: 1.2,
-                rendertime: 0.8,
-            },
-        },
-    };
-
-    // Methods to test deeply nested property changes
-    public updateUserAge = (userId: number) => {
-        const user = this.users.find(u => u.id === userId);
-        if (user) {
-            user.details.personal.age += 1;
-        }
-    };
-
-    public toggleUserTheme = (userId: number) => {
-        const user = this.users.find(u => u.id === userId);
-        if (user) {
-            user.details.preferences.theme =
-                user.details.preferences.theme === "dark" ? "light" : "dark";
-        }
-    };
-
-    public updateUserLocation = (userId: number) => {
-        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;
-        }
-    };
-
-    public addPostToUser = (userId: number) => {
-        const user = this.users.find(u => u.id === userId);
-        if (user) {
-            const newPostId = Math.max(...user.posts.map((p: any) => 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,
-                    },
-                },
-            });
-        }
-    };
-
-    public incrementPostLikes = (postId: number) => {
-        // Find the post across all users since we only have postId
-        for (const user of this.users) {
-            const post = user.posts.find((p: any) => p.id === postId);
-            if (post) {
-                post.metadata.likes += 1;
-                post.metadata.views += Math.floor(Math.random() * 5) + 1;
-                break;
-            }
-        }
-    };
-
-    public updateNotificationSettings = (userId: number) => {
-        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];
-        }
-    };
-
-    public addNotificationCategory = (userId: number) => {
-        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);
-            }
-        }
-    };
-
-    public removeNotificationCategory = (userId: number) => {
-        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,
-                );
-            }
-        }
-    };
-
-    public 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;
-    };
-
-    public removeUser = (userId: number) => {
-        const index = this.users.findIndex(u => u.id === userId);
-        if (index > -1) {
-            this.users.splice(index, 1);
-            this.stats.totalusers = this.users.length;
-        }
-    };
-
-    public 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;
-    };
-
-    public selectUser = (userId: number) => {
-        this.selecteduserid = userId;
-    };
-}
-
-class ObserverMapInternalTestElement extends FASTElement {
-    public selecteduserid?: number;
-    public totalusers?: number;
-
-    public a: any = {};
-
-    public x: any = undefined;
-
-    public groups = [
-        {
-            items: [
-                {
-                    text: "item A",
-                    actions: {
-                        trailing: [
-                            {
-                                label: "action label A",
-                            },
-                        ],
-                    },
-                },
-            ],
-        },
-    ];
-
-    public removeAllItems() {
-        this.groups[0].items.shift();
-    }
-
-    public addAnItem() {
-        this.groups[0].items.push({
-            text: "item B",
-            actions: {
-                trailing: [
-                    {
-                        label: "action label A",
-                    },
-                ],
-            },
-        });
-    }
-
-    public updateAnItem() {
-        this.groups[0].items[0].text = "item C";
-    }
-
-    public removeGroup() {
-        this.groups = [];
-    }
-
-    public addGroup() {
-        this.groups = [
-            {
-                items: [
-                    {
-                        text: "item A",
-                        actions: {
-                            trailing: [
-                                {
-                                    label: "action label A",
-                                },
-                            ],
-                        },
-                    },
-                ],
-            },
-        ];
-    }
-
-    public updateActionLabel() {
-        this.groups[0].items[0].actions.trailing[0].label = "action label B";
-    }
-
-    public defineB() {
-        this.a = {
-            b: {
-                c: "Hello world",
-            },
-        };
-    }
-
-    public updateC() {
-        this.a.b.c = "Hello pluto";
-    }
-
-    public defineY() {
-        this.x = {
-            y: {
-                z: "Z1",
-            },
-        };
-    }
-
-    public updateZ() {
-        this.x.y.z = "Z2";
-    }
-}
-
-(window as any).messages = [];
-
-class ObserverMapWithObservablesTestElement extends FASTElement {
-    @observable
-    public value1: number = 42;
-
-    value1Changed(previous: any, current: any) {
-        (window as any).messages.push(`value1 changed from ${previous} to ${current}`);
-    }
-
-    public updateValue1() {
-        this.value1 += 1;
-    }
-
-    public value2: number = 42;
-
-    value2Changed(previous: any, current: any) {
-        (window as any).messages.push(`value2 changed from ${previous} to ${current}`);
-    }
-
-    @attr({ attribute: "some-attribute" })
-    attribute: string = "initial";
-
-    attributeChanged(previous: string, current: string) {
-        (window as any).messages.push(`attribute changed from ${previous} to ${current}`);
-    }
-
-    public updateValue2() {
-        this.value2 += 1;
-    }
-}
-
-ObserverMapInternalTestElement.define(
-    {
-        name: "observer-map-internal-test-element",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-
-ObserverMapTestElement.define(
-    {
-        name: "observer-map-test-element",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-
-ObserverMapWithObservablesTestElement.define(
-    {
-        name: "observer-map-with-observables-test-element",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-
-class ObserverMapSimpleArrayTestElement extends FASTElement {
-    public items: string[] = ["foo", "baz"];
-
-    public updateFirstItem() {
-        this.items[0] = "bar";
-    }
-
-    public updateSecondItem() {
-        this.items[1] = "qux";
-    }
-}
-
-ObserverMapSimpleArrayTestElement.define(
-    {
-        name: "observer-map-simple-array-test-element",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});
-
-(window as any).Observable = Observable;

package/test/declarative/fixtures/extensions/observer-map/state.json

@@ -1,158 +0,0 @@
-{
-    "items": ["foo", "baz"],
-    "value1": 42,
-    "value2": 42,
-    "selecteduserid": 1,
-    "totalusers": 2,
-    "metrics": {
-        "engagement": {
-            "daily": 100,
-            "weekly": 500,
-            "monthly": 2000
-        },
-        "performance": {
-            "loadtime": 1.2,
-            "rendertime": 0.8
-        }
-    },
-    "groups": [
-        {
-            "items": [
-                {
-                    "text": "item A",
-                    "actions": {
-                        "trailing": [
-                            {
-                                "label": "action label A"
-                            }
-                        ]
-                    }
-                }
-            ]
-        }
-    ],
-    "a": {
-        "b": {
-            "c": ""
-        }
-    },
-    "stats": {
-        "totalusers": 2,
-        "activeusers": 1,
-        "metrics": {
-            "performance": {
-                "loadtime": 1.2,
-                "rendertime": 0.8
-            },
-            "engagement": {
-                "daily": 100,
-                "weekly": 500,
-                "monthly": 2000
-            }
-        }
-    },
-    "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
-                        }
-                    }
-                }
-            ]
-        }
-    ]
-}