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

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

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

@@ -1,69 +0,0 @@
-{
-    "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

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

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

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

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

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