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

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

@@ -0,0 +1,482 @@
+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

@@ -0,0 +1,158 @@
+{
+    "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
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+}