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

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

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

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

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

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

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

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

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

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

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

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

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

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