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

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

@@ -0,0 +1,172 @@
+<f-template name="observer-map-test-element">
+    <template>
+        <observer-map-internal-test-element
+            :selecteduserid="{{selecteduserid}}"
+            :totalusers="{{stats.totalusers}}"
+            :metrics="{{stats.metrics}}"
+        ></observer-map-internal-test-element>
+        <div class="stats">
+            <h2>Global Stats</h2>
+            <div class="nested-info">
+                <strong>Total Users:</strong> {{stats.totalusers}} |
+                <strong>Active Users:</strong> {{stats.activeusers}}
+            </div>
+            <div class="nested-info">
+                <strong>Performance:</strong>
+                Load: {{stats.metrics.performance.loadtime}}s,
+                Render: {{stats.metrics.performance.rendertime}}s
+            </div>
+            <div class="controls">
+                <button @click="{updateStats()}">Update Stats</button>
+                <button @click="{addNewUser()}">Add New User</button>
+            </div>
+        </div>
+
+        <div class="section">
+            <h2>Users List</h2>
+            <f-repeat value="{{user in users}}">
+                <div class="user-card">
+                    <h3>{{user.name}} (ID: {{user.id}})
+                        <f-when value="{{user.id == selecteduserid}}">
+                            <span>⭐ SELECTED</span>
+                        </f-when>
+                    </h3>
+
+                    <div class="nested-info">
+                        <strong>Age:</strong> {{user.details.personal.age}} years old
+                    </div>
+                    <div class="nested-info">
+                        <strong>Location:</strong> {{user.details.personal.location.city}}, {{user.details.personal.location.country}}
+                    </div>
+                    <div class="nested-info">
+                        <strong>Coordinates:</strong>
+                        Lat: {{user.details.personal.location.coordinates.lat}},
+                        Lng: {{user.details.personal.location.coordinates.lng}}
+                    </div>
+
+                    <div class="nested-info">
+                        <strong>Theme:</strong> {{user.details.preferences.theme}} |
+                        <strong>Email Notifications:</strong> {{user.details.preferences.notifications.email}} |
+                        <strong>Push Notifications:</strong> {{user.details.preferences.notifications.push}}
+                    </div>
+                    <div class="nested-info">
+                        <strong>Notification Frequency:</strong> {{user.details.preferences.notifications.settings.frequency}}
+                    </div>
+                    <div class="nested-info">
+                        <strong>Categories:</strong>
+                        <f-repeat value="{{category in user.details.preferences.notifications.settings.categories}}">
+                            <span class="tag">{{category}}</span>
+                        </f-repeat>
+                    </div>
+
+                    <div class="controls">
+                        <button @click="{selectUser(user.id)}">Select User</button>
+                        <button @click="{updateUserAge(user.id)}">Age +1</button>
+                        <button @click="{toggleUserTheme(user.id)}">Toggle Theme</button>
+                        <button @click="{updateUserLocation(user.id)}">Change Location</button>
+                        <button @click="{updateNotificationSettings(user.id)}">Update Notifications</button>
+                        <button @click="{addNotificationCategory(user.id)}">Add Category</button>
+                        <button @click="{removeNotificationCategory(user.id)}">Remove Tech Category</button>
+                        <button @click="{removeUser(user.id)}">Remove User</button>
+                    </div>
+
+                    <div>
+                        <h4>Posts ({{user.posts.length}} posts)</h4>
+                        <f-repeat value="{{post in user.posts}}">
+                            <div class="post-card">
+                                <div><strong>{{post.title}}</strong> (ID: {{post.id}})</div>
+                                <div class="nested-info">{{post.content}}</div>
+                                <div class="nested-info">
+                                    <strong>Author:</strong> {{post.metadata.author.name}}
+                                    <f-when value="{{post.metadata.author.verified}}">
+                                        <span>✓ Verified</span>
+                                    </f-when>
+                                </div>
+                                <div class="nested-info">
+                                    <strong>Stats:</strong> {{post.metadata.views}} views, {{post.metadata.likes}} likes
+                                </div>
+                                <div class="nested-info">
+                                    <strong>Tags:</strong>
+                                    <f-repeat value="{{tag in post.metadata.tags}}">
+                                        <span class="tag">{{tag}}</span>
+                                    </f-repeat>
+                                </div>
+                                <div class="controls">
+                                    <button @click="{incrementPostLikes(post.id)}">Like Post</button>
+                                </div>
+                            </div>
+                        </f-repeat>
+                        <div class="controls">
+                            <button @click="{addPostToUser(user.id)}">Add New Post</button>
+                        </div>
+                    </div>
+                </div>
+            </f-repeat>
+        </div>
+    </template>
+</f-template>
+<f-template name="observer-map-internal-test-element">
+    <template>
+        selected user: {{selecteduserid}} <!-- because this is bound to an attribute property it must be lowercase -->
+        <br>
+        total users: {{totalusers}}
+        <br>
+        <div class="stats">
+            <div class="nested-info">
+                <strong>Engagement:</strong>
+                Daily: {{metrics.engagement.daily}},
+                Weekly: {{metrics.engagement.weekly}},
+                Monthly: {{metrics.engagement.monthly}}
+            </div>
+        </div>
+        <f-when value="{{a}}">
+            <span class="nested-define">{{a.b.c}}</span>
+        </f-when>
+        <button @click="{defineB()}">Define B</button>
+        <button @click="{updateC()}">Update C</button>
+        <br>
+        <f-when value="{{x}}">
+            <span class="nested-define-2">{{x.y.z}}</span>
+        </f-when>
+        <button @click="{defineY()}">Define Y</button>
+        <button @click="{updateZ()}">Update Z</button>
+        <div>
+            <f-repeat value="{{group in groups}}">
+                <f-repeat value="{{item in group.items}}">
+                    <div class="item">{{item.text}}</div>
+                    <span>
+                        <f-repeat value="{{action in item.actions.trailing}}">
+                            <span class="action-label">{{action.label}}</span>
+                        </f-repeat>
+                    </span>
+                </f-repeat>
+            </f-repeat>
+        </div>
+        <button @click="{removeAllItems()}">Remove all items</button>
+        <button @click="{addAnItem()}">Add an item</button>
+        <button @click="{updateAnItem()}">Update an item</button>
+        <button @click="{removeGroup()}">Remove groups</button>
+        <button @click="{addGroup()}">Add group</button>
+        <button @click="{updateActionLabel()}">Update an action label</button>
+    </template>
+</f-template>
+<f-template name="observer-map-with-observables-test-element">
+    <template>
+        Level 3 Value: {{value1}}
+        <button @click="{updateValue1()}">Update Value1</button>
+        <br>
+        Level 3 Value Observable: {{value2}}
+        <button @click="{updateValue2()}">Update Value2</button>
+    </template>
+</f-template>
+<f-template name="observer-map-simple-array-test-element">
+    <template>
+        <ul>
+            <f-repeat value="{{item in items}}">
+                <li class="simple-item">{{item}}</li>
+            </f-repeat>
+        </ul>
+        <button @click="{updateFirstItem()}">Update First Item</button>
+        <button @click="{updateSecondItem()}">Update Second Item</button>
+    </template>
+</f-template>

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

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <config-observer-map-test-element
+            id="observer-test"
+        ></config-observer-map-test-element>
+        <config-attribute-map-test-element
+            id="attribute-test"
+        ></config-attribute-map-test-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/observer-map-config-object/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-config-object/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <config-observer-map-test-element id="observer-test"><template shadowrootmode="open" shadowroot="open"><div class="message"><!--fe:b-->hello<!--fe:/b--></div>
+        <div class="nested-value"><!--fe:b-->42<!--fe:/b--></div></template></config-observer-map-test-element>
+        <config-attribute-map-test-element id="attribute-test"><template shadowrootmode="open" shadowroot="open"><span class="label-value"><!--fe:b--><!--fe:/b--></span>
+        <button type="button" data-fe="1">Set Label</button></template></config-attribute-map-test-element>
+<f-template name="config-observer-map-test-element">
+    <template>
+        <div class="message">{{data.message}}</div>
+        <div class="nested-value">{{data.nested.value}}</div>
+    </template>
+</f-template>
+<f-template name="config-attribute-map-test-element">
+    <template>
+        <span class="label-value">{{label}}</span>
+        <button type="button" @click="{setLabel()}">Set Label</button>
+    </template>
+</f-template>
+
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

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

@@ -0,0 +1,53 @@
+import { attributeMap } from "@microsoft/fast-element/attribute-map.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+import { observerMap } from "@microsoft/fast-element/observer-map.js";
+
+class ConfigObserverMapTestElement extends FASTElement {
+    public data: any = {
+        message: "hello",
+        nested: {
+            value: 42,
+        },
+    };
+
+    public updateMessage() {
+        this.data.message = "updated";
+    }
+
+    public updateNestedValue() {
+        this.data.nested.value = 99;
+    }
+}
+
+ConfigObserverMapTestElement.define(
+    {
+        name: "config-observer-map-test-element",
+        template: declarativeTemplate(),
+    },
+    [
+        observerMap({
+            properties: {
+                data: true,
+            },
+        }),
+    ],
+);
+
+class ConfigAttributeMapTestElement extends FASTElement {
+    public setLabel() {
+        (this as any).label = "new-label";
+    }
+}
+
+ConfigAttributeMapTestElement.define(
+    {
+        name: "config-attribute-map-test-element",
+        template: declarativeTemplate(),
+    },
+    [
+        attributeMap({
+            "attribute-name-strategy": "none",
+        }),
+    ],
+);

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

@@ -0,0 +1,9 @@
+{
+    "data": {
+        "message": "hello",
+        "nested": {
+            "value": 42
+        }
+    },
+    "label": ""
+}

package/test/declarative/fixtures/extensions/observer-map-config-object/templates.html

@@ -0,0 +1,12 @@
+<f-template name="config-observer-map-test-element">
+    <template>
+        <div class="message">{{data.message}}</div>
+        <div class="nested-value">{{data.nested.value}}</div>
+    </template>
+</f-template>
+<f-template name="config-attribute-map-test-element">
+    <template>
+        <span class="label-value">{{label}}</span>
+        <button type="button" @click="{setLabel()}">Set Label</button>
+    </template>
+</f-template>

package/test/declarative/fixtures/extensions/observer-map-deep-merge/README.md

@@ -0,0 +1,98 @@
+# Deep Merge Test Fixture
+
+A comprehensive test fixture for validating the `deepMerge` utility function with FAST's observable system.
+
+## Overview
+
+This fixture combines multiple FAST features to thoroughly test `deepMerge` behavior:
+
+- **Observable Arrays** - Tests array mutation tracking via splice operations
+- **Nested Objects** - Deep property access with dot syntax (e.g., `user.profile.location.city`)
+- **Conditional Rendering** - `f-when` directives with boolean expressions and comparisons
+- **Nested Repeats** - Multiple levels: users → orders → items → tags
+- **Observer Map** - Full observable tracking across all nested structures
+
+## Data Structure
+
+The fixture uses a realistic e-commerce data model:
+
+```
+DeepMergeTestElement
+├── users[] (observable array)
+│   ├── User
+│   │   ├── id, name, email
+│   │   ├── profile
+│   │   │   ├── age
+│   │   │   ├── location { city, country }
+│   │   │   └── preferences { theme, notifications }
+│   │   └── orders[] (nested observable array)
+│   │       └── Order
+│   │           ├── id, date, total
+│   │           └── items[] (deeply nested array)
+│   │               └── Product
+│   │                   ├── id, name, price, inStock
+│   │                   ├── tags[] (4th level array)
+│   │                   └── metadata { views, rating }
+├── showDetails (boolean for conditionals)
+└── stats { totalOrders, totalRevenue, activeUsers }
+```
+
+## Test Scenarios
+
+### 1. **Nested Object Updates** (`updateUserProfile`)
+- Updates deeply nested properties
+- Verifies partial merging (some properties unchanged)
+- Tests: `profile.age`, `profile.location.city`, `profile.preferences.theme`
+
+### 2. **Array Replacement** (`updateUserOrders`)
+- Completely replaces an array with new data
+- Tests observable array splice operations
+- Verifies UI updates correctly
+
+### 3. **Array Item Removal** (`removeOrderItems`)
+- Reduces array length (2 items → 1 item)
+- Tests that removed items disappear from UI
+- Validates splice handles item deletion
+
+### 4. **Nested Array Updates** (`updateProductTags`)
+- Updates deeply nested arrays (tags within items within orders)
+- Modifies multiple properties simultaneously
+- Tests 4-level deep array structures
+
+### 5. **Array Addition** (`addNewUser`)
+- Adds new items to observable arrays
+- Tests array expansion
+- Verifies new items render correctly
+
+### 6. **Conditional Rendering** (`toggleDetails`)
+- Shows/hides content based on boolean flag
+- Tests `f-when` integration
+- Verifies conditional updates propagate
+
+### 7. **Direct Property Mutation** (`incrementAge`)
+- Updates properties without using deepMerge
+- Provides baseline comparison
+- Tests standard observable behavior
+
+### 8. **Stats Object Update** (`updateStats`)
+- Partial object updates
+- Verifies unchanged properties remain untouched
+- Tests shallow object merging
+
+### 9. **Undefined Value Handling** (`testUndefinedMerge`)
+- Validates undefined values are skipped
+- Tests selective property updates
+- Ensures undefined doesn't overwrite existing values
+
+## Key Test Assertions
+
+The spec file validates:
+
+1. **Splice-based Updates** - Arrays maintain identity and use splice
+2. **Partial Merges** - Only specified properties change
+3. **Nested Updates** - Deep property paths update correctly
+4. **Array Length Changes** - Items added/removed appropriately
+5. **Conditional Re-evaluation** - UI responds to boolean changes
+6. **Multiple Update Cycles** - Repeated operations work consistently
+7. **Empty Array Handling** - Zero-length arrays render correctly
+8. **Cross-cutting Updates** - Changes propagate through nested structures

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

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Deep Merge Test Fixture</title>
+        <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+
+        h1 {
+            color: #333;
+            border-bottom: 2px solid #0078d4;
+            padding-bottom: 10px;
+        }
+
+        h2 {
+            color: #555;
+            margin-top: 30px;
+        }
+
+        .container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .stats {
+            background: #e3f2fd;
+            padding: 15px;
+            border-radius: 6px;
+            margin: 20px 0;
+        }
+
+        .stats p {
+            margin: 8px 0;
+        }
+
+        .controls {
+            background: #f5f5f5;
+            padding: 15px;
+            border-radius: 6px;
+            margin: 20px 0;
+        }
+
+        button {
+            background: #0078d4;
+            color: white;
+            border: none;
+            padding: 10px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 14px;
+        }
+
+        button:hover {
+            background: #106ebe;
+        }
+
+        button:active {
+            background: #005a9e;
+        }
+
+        .user-card {
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            padding: 15px;
+            margin: 15px 0;
+            background: #fafafa;
+        }
+
+        .user-card h3 {
+            margin-top: 0;
+            color: #0078d4;
+        }
+
+        .profile {
+            background: white;
+            padding: 10px;
+            border-radius: 4px;
+            margin: 10px 0;
+        }
+
+        .profile h4 {
+            margin-top: 0;
+        }
+
+        .orders {
+            margin-top: 15px;
+        }
+
+        .order {
+            background: white;
+            padding: 10px;
+            border-radius: 4px;
+            margin: 10px 0;
+            border-left: 3px solid #0078d4;
+        }
+
+        .items {
+            list-style: none;
+            padding: 0;
+            margin: 10px 0;
+        }
+
+        .item {
+            padding: 8px;
+            margin: 5px 0;
+            background: #f9f9f9;
+            border-radius: 4px;
+        }
+
+        .stock {
+            margin-left: 10px;
+            font-size: 12px;
+        }
+
+        .tags {
+            margin-top: 5px;
+            font-size: 12px;
+        }
+
+        .tag {
+            background: #0078d4;
+            color: white;
+            padding: 2px 8px;
+            border-radius: 3px;
+            margin-right: 5px;
+            display: inline-block;
+        }
+
+        .metadata {
+            margin-top: 5px;
+            color: #666;
+        }
+
+        strong {
+            color: #333;
+        }
+
+        em {
+            color: #999;
+        }
+        </style>
+    </head>
+    <body>
+        <deep-merge-test-element></deep-merge-test-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

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

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