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

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

@@ -0,0 +1,366 @@
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { deepMerge } from "@microsoft/fast-element/declarative-utilities.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+import { enableHydration } from "@microsoft/fast-element/hydration.js";
+import { observable } from "@microsoft/fast-element/observable.js";
+import { observerMap } from "@microsoft/fast-element/observer-map.js";
+
+interface Product {
+    id: number;
+    name: string;
+    price: number;
+    inStock: boolean;
+    tags: string[];
+    metadata: {
+        views: number;
+        rating: number;
+    };
+}
+
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    profile: {
+        age: number;
+        location: {
+            city: string;
+            country: string;
+        };
+        preferences: {
+            theme: "light" | "dark";
+            notifications: boolean;
+        };
+    };
+    orders: Array<{
+        id: number;
+        date: string;
+        total: number;
+        items: Product[];
+    }>;
+}
+
+class DeepMergeTestElement extends FASTElement {
+    users: User[] = [
+        {
+            id: 1,
+            name: "Alice Johnson",
+            email: "alice@example.com",
+            profile: {
+                age: 28,
+                location: {
+                    city: "New York",
+                    country: "USA",
+                },
+                preferences: {
+                    theme: "dark",
+                    notifications: true,
+                },
+            },
+            orders: [
+                {
+                    id: 101,
+                    date: "2024-01-15",
+                    total: 150.5,
+                    items: [
+                        {
+                            id: 1001,
+                            name: "Laptop",
+                            price: 100.0,
+                            inStock: true,
+                            tags: ["electronics", "computers"],
+                            metadata: {
+                                views: 250,
+                                rating: 4.5,
+                            },
+                        },
+                        {
+                            id: 1002,
+                            name: "Mouse",
+                            price: 50.5,
+                            inStock: true,
+                            tags: ["electronics", "accessories"],
+                            metadata: {
+                                views: 180,
+                                rating: 4.0,
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: 102,
+                    date: "2024-02-20",
+                    total: 75.0,
+                    items: [
+                        {
+                            id: 1003,
+                            name: "Keyboard",
+                            price: 75.0,
+                            inStock: true,
+                            tags: ["electronics", "accessories"],
+                            metadata: {
+                                views: 120,
+                                rating: 4.8,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: 2,
+            name: "Bob Smith",
+            email: "bob@example.com",
+            profile: {
+                age: 35,
+                location: {
+                    city: "London",
+                    country: "UK",
+                },
+                preferences: {
+                    theme: "light",
+                    notifications: false,
+                },
+            },
+            orders: [
+                {
+                    id: 201,
+                    date: "2024-03-10",
+                    total: 200.0,
+                    items: [
+                        {
+                            id: 2001,
+                            name: "Headphones",
+                            price: 200.0,
+                            inStock: false,
+                            tags: ["electronics", "audio"],
+                            metadata: {
+                                views: 350,
+                                rating: 4.7,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ];
+
+    @observable
+    showDetails: boolean = true;
+
+    @observable
+    stats: {
+        totalOrders: number;
+        totalRevenue: number;
+        activeUsers: number;
+    } = {
+        totalOrders: 3,
+        totalRevenue: 425.5,
+        activeUsers: 2,
+    };
+
+    // Test: Deep merge with nested object changes
+    public updateUserProfile() {
+        const updates = {
+            profile: {
+                age: 29,
+                location: {
+                    city: "San Francisco", // Changed
+                    // country stays "USA"
+                },
+                preferences: {
+                    theme: "light" as const, // Changed
+                    // notifications stays true
+                },
+            },
+        };
+
+        deepMerge(this.users[0], updates);
+    }
+
+    // Test: Array replacement via deep merge
+    public updateUserOrders() {
+        const updates = {
+            orders: [
+                {
+                    id: 103,
+                    date: "2024-04-01",
+                    total: 99.99,
+                    items: [
+                        {
+                            id: 1004,
+                            name: "Monitor",
+                            price: 99.99,
+                            inStock: true,
+                            tags: ["electronics", "displays"],
+                            metadata: {
+                                views: 400,
+                                rating: 4.9,
+                            },
+                        },
+                    ],
+                },
+            ],
+        };
+
+        deepMerge(this.users[0], updates);
+    }
+
+    // Test: Array item removal (shorter array)
+    public removeOrderItems() {
+        const updates = {
+            orders: [
+                {
+                    id: 101,
+                    date: "2024-01-15",
+                    total: 100.0,
+                    items: [
+                        // Only one item now, second item removed
+                        {
+                            id: 1001,
+                            name: "Laptop",
+                            price: 100.0,
+                            inStock: true,
+                            tags: ["electronics", "computers"],
+                            metadata: {
+                                views: 250,
+                                rating: 4.5,
+                            },
+                        },
+                    ],
+                },
+            ],
+        };
+
+        deepMerge(this.users[0], updates);
+    }
+
+    // Test: Nested array tag changes
+    public updateProductTags() {
+        const updates = {
+            orders: [
+                {
+                    id: 101,
+                    date: "2024-01-15",
+                    total: 150.5,
+                    items: [
+                        {
+                            id: 1001,
+                            name: "Laptop",
+                            price: 100.0,
+                            inStock: true,
+                            tags: ["tech", "premium", "sale"], // Changed tags
+                            metadata: {
+                                views: 300, // Updated
+                                rating: 4.5,
+                            },
+                        },
+                        {
+                            id: 1002,
+                            name: "Mouse",
+                            price: 50.5,
+                            inStock: false, // Changed
+                            tags: ["accessories"], // Reduced tags
+                            metadata: {
+                                views: 180,
+                                rating: 4.0,
+                            },
+                        },
+                    ],
+                },
+                {
+                    id: 102,
+                    date: "2024-02-20",
+                    total: 75.0,
+                    items: [
+                        {
+                            id: 1003,
+                            name: "Keyboard",
+                            price: 75.0,
+                            inStock: true,
+                            tags: ["electronics", "accessories"],
+                            metadata: {
+                                views: 120,
+                                rating: 4.8,
+                            },
+                        },
+                    ],
+                },
+            ],
+        };
+
+        deepMerge(this.users[0], updates);
+    }
+
+    // Test: Complete user replacement
+    public addNewUser() {
+        const newUser: User = {
+            id: 3,
+            name: "Charlie Davis",
+            email: "charlie@example.com",
+            profile: {
+                age: 42,
+                location: {
+                    city: "Tokyo",
+                    country: "Japan",
+                },
+                preferences: {
+                    theme: "dark",
+                    notifications: true,
+                },
+            },
+            orders: [],
+        };
+
+        this.users = [...this.users, newUser];
+    }
+
+    // Test: Toggle for conditional rendering
+    public toggleDetails() {
+        this.showDetails = !this.showDetails;
+    }
+
+    // Test: Stats update via deep merge
+    public updateStats() {
+        const updates = {
+            totalOrders: 4,
+            totalRevenue: 525.49,
+            // activeUsers stays 2
+        };
+
+        deepMerge(this.stats, updates);
+    }
+
+    // Test: Direct property update
+    public incrementAge() {
+        this.users[0].profile.age++;
+    }
+
+    // Test: Undefined value handling
+    public testUndefinedMerge() {
+        const updates = {
+            profile: {
+                age: undefined, // Should be skipped
+                location: {
+                    city: "Boston",
+                },
+            },
+        };
+
+        deepMerge(this.users[0], updates);
+    }
+}
+
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});
+
+DeepMergeTestElement.define(
+    {
+        name: "deep-merge-test-element",
+        template: declarativeTemplate(),
+    },
+    [observerMap()],
+);

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

@@ -0,0 +1,69 @@
+{
+    "show-details": true,
+    "showDetails": true,
+    "stats": {
+        "totalOrders": 3,
+        "totalRevenue": 425.5,
+        "activeUsers": 2
+    },
+    "users": [
+        {
+            "id": 1,
+            "name": "Alice Johnson",
+            "email": "alice@example.com",
+            "profile": {
+                "age": 28,
+                "location": {
+                    "city": "New York",
+                    "country": "USA"
+                },
+                "preferences": {
+                    "theme": "dark",
+                    "notifications": true
+                }
+            },
+            "orders": [
+                {
+                    "id": 101,
+                    "date": "2024-01-15",
+                    "total": 150.5,
+                    "items": [
+                        {
+                            "id": 1001,
+                            "name": "Laptop",
+                            "price": 100.0,
+                            "inStock": true,
+                            "tags": ["electronics", "computers"],
+                            "metadata": { "views": 250, "rating": 4.5 }
+                        },
+                        {
+                            "id": 1002,
+                            "name": "Mouse",
+                            "price": 50.5,
+                            "inStock": true,
+                            "tags": ["electronics", "accessories"],
+                            "metadata": { "views": 180, "rating": 4.0 }
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": 2,
+            "name": "Bob Smith",
+            "email": "bob@example.com",
+            "profile": {
+                "age": 35,
+                "location": {
+                    "city": "London",
+                    "country": "UK"
+                },
+                "preferences": {
+                    "theme": "light",
+                    "notifications": false
+                }
+            },
+            "orders": []
+        }
+    ]
+}

package/test/declarative/fixtures/extensions/observer-map-deep-merge/templates.html

@@ -0,0 +1,91 @@
+<f-template name="deep-merge-test-element">
+    <template>
+        <div class="container">
+            <h1>Deep Merge Test Fixture</h1>
+
+            <!-- Stats Section with Deep Property Access -->
+            <div class="stats">
+                <h2>Statistics</h2>
+                <p>Total Orders: <strong>{{stats.totalOrders}}</strong></p>
+                <p>Total Revenue: <strong>${{stats.totalRevenue}}</strong></p>
+                <p>Active Users: <strong>{{stats.activeUsers}}</strong></p>
+                <button @click="{updateStats()}">Update Stats</button>
+            </div>
+
+            <!-- Control Buttons -->
+            <div class="controls">
+                <h2>Test Actions</h2>
+                <button @click="{updateUserProfile()}">Update User Profile</button>
+                <button @click="{updateUserOrders()}">Replace Orders</button>
+                <button @click="{removeOrderItems()}">Remove Order Items</button>
+                <button @click="{updateProductTags()}">Update Product Tags</button>
+                <button @click="{addNewUser()}">Add New User</button>
+                <button @click="{toggleDetails()}">Toggle Details</button>
+                <button @click="{incrementAge()}">Increment Age</button>
+                <button @click="{testUndefinedMerge()}">Test Undefined Merge</button>
+            </div>
+
+            <!-- Users List with Conditional Rendering -->
+            <div class="users">
+                <h2>Users ({{users.length}} total)</h2>
+
+                <f-repeat value="{{user in users}}">
+                    <div class="user-card">
+                        <h3>{{user.name}} (ID: {{user.id}})</h3>
+                        <p>Email: {{user.email}}</p>
+
+                        <!-- Conditional Details Section -->
+                        <f-when value="{{showDetails}}">
+                            <div class="profile">
+                                <h4>Profile</h4>
+                                <p>Age: {{user.profile.age}}</p>
+                                <p>Location: {{user.profile.location.city}}, {{user.profile.location.country}}</p>
+                                <p>Theme: {{user.profile.preferences.theme}}</p>
+                                <p>Notifications: <f-when value="{{user.profile.preferences.notifications}}">Enabled</f-when><f-when value="{{!user.profile.preferences.notifications}}">Disabled</f-when></p>
+                            </div>
+                        </f-when>
+
+                        <!-- Orders Section with Nested Repeats -->
+                        <div class="orders">
+                            <h4>Orders ({{user.orders.length}})</h4>
+
+                            <f-when value="{{user.orders.length > 0}}">
+                                <f-repeat value="{{order in user.orders}}">
+                                    <div class="order">
+                                        <p><strong>Order #{{order.id}}</strong> - {{order.date}} - Total: ${{order.total}}</p>
+
+                                        <!-- Items with Nested Array -->
+                                        <ul class="items">
+                                            <f-repeat value="{{item in order.items}}">
+                                                <li class="item">
+                                                    <strong>{{item.name}}</strong> - ${{item.price}}
+                                                    <span class="stock"><f-when value="{{item.inStock}}">✓ In Stock</f-when><f-when value="{{!item.inStock}}">✗ Out of Stock</f-when></span>
+
+                                                    <!-- Tags Array -->
+                                                    <div class="tags">
+                                                        Tags: <f-repeat value="{{tag in item.tags}}"><span class="tag">{{tag}}</span></f-repeat>
+                                                    </div>
+
+                                                    <!-- Metadata -->
+                                                    <f-when value="{{showDetails}}">
+                                                        <div class="metadata">
+                                                            <small>Views: {{item.metadata.views}} | Rating: {{item.metadata.rating}}</small>
+                                                        </div>
+                                                    </f-when>
+                                                </li>
+                                            </f-repeat>
+                                        </ul>
+                                    </div>
+                                </f-repeat>
+                            </f-when>
+
+                            <f-when value="{{user.orders.length == 0}}">
+                                <p><em>No orders yet</em></p>
+                            </f-when>
+                        </div>
+                    </div>
+                </f-repeat>
+            </div>
+        </div>
+    </template>
+</f-template>

package/test/declarative/fixtures/extensions/observer-map-properties/entry.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <selective-obs-element></selective-obs-element>
+        <all-obs-element></all-obs-element>
+        <empty-props-element></empty-props-element>
+        <array-selective-element></array-selective-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/observer-map-properties/fast-build.config.json

@@ -0,0 +1,6 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html"
+}

package/test/declarative/fixtures/extensions/observer-map-properties/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <selective-obs-element><template shadowrootmode="open" shadowroot="open"><div class="user-section">
+            <span class="user-name"><!--fe:b-->Alice<!--fe:/b--></span>
+            <span class="user-age"><!--fe:b-->28<!--fe:/b--></span>
+            <span class="user-history-joined"><!--fe:b-->2020-01-01<!--fe:/b--></span>
+            <span class="user-history-visits"><!--fe:b-->100<!--fe:/b--></span>
+            <span class="user-location-city"><!--fe:b-->New York<!--fe:/b--></span>
+        </div>
+        <div class="settings-section">
+            <span class="settings-theme"><!--fe:b-->dark<!--fe:/b--></span>
+        </div>
+        <div class="analytics-section">
+            <span class="active-chart"><!--fe:b-->line<!--fe:/b--></span>
+            <span class="cached-data"><!--fe:b-->heavy-data<!--fe:/b--></span>
+            <span class="analytics-summary"><!--fe:b-->good<!--fe:/b--></span>
+        </div>
+        <button data-fe="1">Update Name</button>
+        <button data-fe="1">Update Age</button>
+        <button data-fe="1">Update History</button>
+        <button data-fe="1">Update Location</button>
+        <button data-fe="1">Update Settings</button>
+        <button data-fe="1">Update Active Chart</button>
+        <button data-fe="1">Update Cached Data</button>
+        <button data-fe="1">Update Summary</button></template></selective-obs-element>
+        <all-obs-element><template shadowrootmode="open" shadowroot="open"><span class="user-name"><!--fe:b-->Alice<!--fe:/b--></span>
+        <span class="settings-theme"><!--fe:b-->dark<!--fe:/b--></span>
+        <button data-fe="1">Update Name</button>
+        <button data-fe="1">Update Settings</button></template></all-obs-element>
+        <empty-props-element><template shadowrootmode="open" shadowroot="open"><span class="user-name"><!--fe:b-->Alice<!--fe:/b--></span>
+        <span class="settings-theme"><!--fe:b-->dark<!--fe:/b--></span>
+        <button data-fe="1">Update Name</button>
+        <button data-fe="1">Update Settings</button></template></empty-props-element>
+        <array-selective-element><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:r-->
+            <div class="item-row">
+                <span class="item-text"><!--fe:b-->item-1<!--fe:/b--></span>
+                <span class="item-count"><!--fe:b-->1<!--fe:/b--></span>
+            </div>
+        <!--fe:/r--><!--fe:r-->
+            <div class="item-row">
+                <span class="item-text"><!--fe:b-->item-2<!--fe:/b--></span>
+                <span class="item-count"><!--fe:b-->2<!--fe:/b--></span>
+            </div>
+        <!--fe:/r--><!--fe:/b-->
+        <button data-fe="1">Update Item Text</button>
+        <button data-fe="1">Add Item</button></template></array-selective-element>
+<f-template name="selective-obs-element">
+    <template>
+        <div class="user-section">
+            <span class="user-name">{{user.name}}</span>
+            <span class="user-age">{{user.age}}</span>
+            <span class="user-history-joined">{{user.history.joined}}</span>
+            <span class="user-history-visits">{{user.history.visits}}</span>
+            <span class="user-location-city">{{user.location.city}}</span>
+        </div>
+        <div class="settings-section">
+            <span class="settings-theme">{{settings.theme}}</span>
+        </div>
+        <div class="analytics-section">
+            <span class="active-chart">{{analytics.charts.activeChart}}</span>
+            <span class="cached-data">{{analytics.charts.cachedData}}</span>
+            <span class="analytics-summary">{{analytics.summary}}</span>
+        </div>
+        <button @click="{updateUserName()}">Update Name</button>
+        <button @click="{updateUserAge()}">Update Age</button>
+        <button @click="{updateHistory()}">Update History</button>
+        <button @click="{updateLocation()}">Update Location</button>
+        <button @click="{updateSettings()}">Update Settings</button>
+        <button @click="{updateActiveChart()}">Update Active Chart</button>
+        <button @click="{updateCachedData()}">Update Cached Data</button>
+        <button @click="{updateSummary()}">Update Summary</button>
+    </template>
+</f-template>
+<f-template name="all-obs-element">
+    <template>
+        <span class="user-name">{{user.name}}</span>
+        <span class="settings-theme">{{settings.theme}}</span>
+        <button @click="{updateUserName()}">Update Name</button>
+        <button @click="{updateSettings()}">Update Settings</button>
+    </template>
+</f-template>
+<f-template name="empty-props-element">
+    <template>
+        <span class="user-name">{{user.name}}</span>
+        <span class="settings-theme">{{settings.theme}}</span>
+        <button @click="{updateUserName()}">Update Name</button>
+        <button @click="{updateSettings()}">Update Settings</button>
+    </template>
+</f-template>
+<f-template name="array-selective-element">
+    <template>
+        <f-repeat value="{{item in items}}">
+            <div class="item-row">
+                <span class="item-text">{{item.text}}</span>
+                <span class="item-count">{{item.meta.count}}</span>
+            </div>
+        </f-repeat>
+        <button @click="{updateItemText()}">Update Item Text</button>
+        <button @click="{addItem()}">Add Item</button>
+    </template>
+</f-template>
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>