npm - @microsoft/fast-element - Versions diffs - 2.10.4 → 3.0.0-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (349) hide show

package/test/declarative/fixtures/ecosystem/lifecycle-callbacks/index.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Lifecycle Callbacks Test</title>
+    </head>
+    <body>
+        <simple-element needs-hydration><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Hello<!--fe:/b--> World</template></simple-element>
+        <complex-element needs-hydration count="0"><template shadowrootmode="open" shadowroot="open"><div>
+            <h2><!--fe:b-->Complex<!--fe:/b--></h2>
+            <p>Count: <!--fe:b-->0<!--fe:/b--></p>
+            <nested-element label="Complex" data-fe="1"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->Complex<!--fe:/b--></span></template></nested-element>
+        </div></template></complex-element>
+        <deferred-element needs-hydration defer-hydration><template shadowrootmode="open" shadowroot="open"><p>Status: <!--fe:b-->pending<!--fe:/b--></p></template></deferred-element>
+        <deferred-parent-element needs-hydration defer-hydration><template shadowrootmode="open" shadowroot="open"><section>
+            <p><!--fe:b-->Parent<!--fe:/b--></p>
+            <deferred-child-element label="Parent" data-fe="1"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->Parent<!--fe:/b--></span></template></deferred-child-element>
+        </section></template></deferred-parent-element>
+<f-template name="simple-element">
+    <template>{{message}} World</template>
+</f-template>
+<f-template name="complex-element">
+    <template>
+        <div>
+            <h2>{{title}}</h2>
+            <p>Count: {{count}}</p>
+            <nested-element label="{{title}}"></nested-element>
+        </div>
+    </template>
+</f-template>
+<f-template name="nested-element">
+    <template><span>{{label}}</span></template>
+</f-template>
+<f-template name="deferred-element">
+    <template><p>Status: {{status}}</p></template>
+</f-template>
+<f-template name="deferred-parent-element">
+    <template>
+        <section>
+            <p>{{label}}</p>
+            <deferred-child-element label="{{label}}"></deferred-child-element>
+        </section>
+    </template>
+</f-template>
+<f-template name="deferred-child-element">
+    <template><span>{{label}}</span></template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/ecosystem/lifecycle-callbacks/main.ts ADDED Viewed

@@ -0,0 +1,134 @@
+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 } from "@microsoft/fast-element/observable.js";
+import { observerMap } from "@microsoft/fast-element/observer-map.js";
+// Track lifecycle callbacks for testing
+export const lifecycleEvents: Array<{ callback: string; name?: string }> = [];
+// Enable hydration with global callback
+enableHydration({
+    hydrationComplete(): void {
+        lifecycleEvents.push({ callback: "hydrationComplete" });
+        (window as any).hydrationCompleted = true;
+    },
+});
+// Per-element lifecycle callbacks
+const lifecycleCallbacks = {
+    elementDidRegister(name: string): void {
+        lifecycleEvents.push({ callback: "elementDidRegister", name });
+    },
+    templateWillUpdate(name: string): void {
+        lifecycleEvents.push({ callback: "templateWillUpdate", name });
+    },
+    templateDidUpdate(name: string): void {
+        lifecycleEvents.push({ callback: "templateDidUpdate", name });
+    },
+    elementDidDefine(name: string): void {
+        lifecycleEvents.push({ callback: "elementDidDefine", name });
+    },
+};
+// Simple element with basic property
+class SimpleElement extends FASTElement {
+    @attr
+    message: string = "Hello";
+}
+SimpleElement.define({
+    name: "simple-element",
+    template: declarativeTemplate(lifecycleCallbacks),
+});
+// Complex element with multiple properties and methods
+class ComplexElement extends FASTElement {
+    @attr
+    title: string = "Complex";
+    @observable
+    count: number = 0;
+    @observable
+    items: string[] = [];
+    increment() {
+        this.count++;
+    }
+    addItem(item: string) {
+        this.items = [...this.items, item];
+    }
+}
+ComplexElement.define(
+    {
+        name: "complex-element",
+        template: declarativeTemplate(lifecycleCallbacks),
+    },
+    [observerMap()],
+);
+// Nested element
+class NestedElement extends FASTElement {
+    @attr
+    label: string = "Nested";
+}
+NestedElement.define({
+    name: "nested-element",
+    template: declarativeTemplate(lifecycleCallbacks),
+});
+// Element with deferred hydration
+class DeferredElement extends FASTElement {
+    @attr
+    status: string = "pending";
+    connectedCallback() {
+        super.connectedCallback();
+        // Simulate async work
+        setTimeout(() => {
+            this.status = "ready";
+        }, 100);
+    }
+}
+DeferredElement.define({
+    name: "deferred-element",
+    template: declarativeTemplate(lifecycleCallbacks),
+});
+// Nested deferred elements to verify parent-first hydration
+class DeferredParentElement extends FASTElement {
+    @attr
+    label: string = "Parent";
+    connectedCallback() {
+        super.connectedCallback();
+    }
+}
+DeferredParentElement.define({
+    name: "deferred-parent-element",
+    template: declarativeTemplate(lifecycleCallbacks),
+});
+class DeferredChildElement extends FASTElement {
+    @attr
+    label: string = "Child";
+    connectedCallback() {
+        super.connectedCallback();
+    }
+}
+DeferredChildElement.define({
+    name: "deferred-child-element",
+    template: declarativeTemplate(lifecycleCallbacks),
+});
+// Make lifecycleEvents available globally for testing
+(window as any).lifecycleEvents = lifecycleEvents;

package/test/declarative/fixtures/ecosystem/lifecycle-callbacks/state.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+    "message": "Hello",
+    "title": "Complex",
+    "status": "pending",
+    "label": "Parent",
+    "simpleMessage": "Hello",
+    "complexTitle": "Complex",
+    "count": 0,
+    "deferredStatus": "pending",
+    "parentLabel": "Parent",
+    "childLabel": "Child"
+}

package/test/declarative/fixtures/ecosystem/lifecycle-callbacks/templates.html ADDED Viewed

@@ -0,0 +1,34 @@
+<f-template name="simple-element">
+    <template>{{message}} World</template>
+</f-template>
+<f-template name="complex-element">
+    <template>
+        <div>
+            <h2>{{title}}</h2>
+            <p>Count: {{count}}</p>
+            <nested-element label="{{title}}"></nested-element>
+        </div>
+    </template>
+</f-template>
+<f-template name="nested-element">
+    <template><span>{{label}}</span></template>
+</f-template>
+<f-template name="deferred-element">
+    <template><p>Status: {{status}}</p></template>
+</f-template>
+<f-template name="deferred-parent-element">
+    <template>
+        <section>
+            <p>{{label}}</p>
+            <deferred-child-element label="{{label}}"></deferred-child-element>
+        </section>
+    </template>
+</f-template>
+<f-template name="deferred-child-element">
+    <template><span>{{label}}</span></template>
+</f-template>

package/test/declarative/fixtures/ecosystem/performance-metrics/entry.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Performance Metrics Test</title>
+        <link rel="preload" as="style" href="./fast-card.css" />
+    </head>
+    <body>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"></fast-card>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/ecosystem/performance-metrics/fast-build.config.json ADDED Viewed

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

package/test/declarative/fixtures/ecosystem/performance-metrics/fast-card.css ADDED Viewed

@@ -0,0 +1,10 @@
+:host {
+    display: inline-block;
+    width: 200px;
+    height: 200px;
+    border: 1px solid #ccc;
+    dd {
+        display: inline-block;
+    }
+}

package/test/declarative/fixtures/ecosystem/performance-metrics/index.html ADDED Viewed

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Performance Metrics Test</title>
+        <link rel="preload" as="style" href="./fast-card.css" />
+    </head>
+    <body>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="0" displayDelay="0ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="150" displayDelay="150ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+        <fast-card needs-hydration defer-hydration defer-delay="300" displayDelay="300ms"><template shadowrootmode="open" shadowroot="open"><link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Will Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Did Hydrate</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+            <dt>Element Hydration Duration</dt>
+            <dd><!--fe:b-->0ms<!--fe:/b--></dd>
+        </dl></template></fast-card>
+<f-template name="fast-card">
+    <template>
+        <link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd>{{displayDelay}}</dd>
+            <dt>Element Will Hydrate</dt>
+            <dd>{{willHydrate}}</dd>
+            <dt>Element Did Hydrate</dt>
+            <dd>{{didHydrate}}</dd>
+            <dt>Element Hydration Duration</dt>
+            <dd>{{hydrationDuration}}</dd>
+        </dl>
+    </template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/ecosystem/performance-metrics/main.ts ADDED Viewed

@@ -0,0 +1,58 @@
+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 { volatile } from "@microsoft/fast-element/volatile.js";
+let markSequence = 0;
+// Enable hydration with global start/complete callbacks
+enableHydration({
+    hydrationStarted(): void {
+        performance.mark("hydration:started", { detail: { sequence: markSequence++ } });
+    },
+    hydrationComplete(): void {
+        performance.measure("hydration:complete", "hydration:started");
+        (window as any).hydrationCompleted = true;
+    },
+});
+class FastCard extends FASTElement {
+    @attr({ attribute: "defer-delay" })
+    deferDelay!: number;
+    @volatile
+    get displayDelay(): string {
+        return `${(this.deferDelay ?? 0).toString()}ms`;
+    }
+}
+FastCard.define({
+    name: "fast-card",
+    template: declarativeTemplate({
+        templateWillUpdate(name: string) {
+            performance.mark(`template-update:${name}:start`, {
+                detail: { sequence: markSequence++ },
+            });
+        },
+        templateDidUpdate(name) {
+            performance.measure(
+                `template-update:${name}`,
+                `template-update:${name}:start`,
+            );
+        },
+        elementDidDefine(name) {
+            performance.mark(`element-define:${name}`, {
+                detail: { sequence: markSequence++ },
+            });
+        },
+        elementDidRegister(name) {
+            performance.mark(`element-register:${name}`, {
+                detail: { sequence: markSequence++ },
+            });
+        },
+    }),
+});

package/test/declarative/fixtures/ecosystem/performance-metrics/state.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+    "displayDelay": "0ms",
+    "willHydrate": "0ms",
+    "didHydrate": "0ms",
+    "hydrationDuration": "0ms"
+}

package/test/declarative/fixtures/ecosystem/performance-metrics/templates.html ADDED Viewed

@@ -0,0 +1,15 @@
+<f-template name="fast-card">
+    <template>
+        <link rel="stylesheet" href="./fast-card.css" />
+        <dl>
+            <dt>Configured Delay</dt>
+            <dd>{{displayDelay}}</dd>
+            <dt>Element Will Hydrate</dt>
+            <dd>{{willHydrate}}</dd>
+            <dt>Element Did Hydrate</dt>
+            <dd>{{didHydrate}}</dd>
+            <dt>Element Hydration Duration</dt>
+            <dd>{{hydrationDuration}}</dd>
+        </dl>
+    </template>
+</f-template>

package/test/declarative/fixtures/extensions/README.md ADDED Viewed

@@ -0,0 +1,15 @@
+# Extensions
+Fixtures for additional functionality that augments the core declarative FAST
+Element behavior beyond developer direct configuration, such as automatic
+attribute mapping and deep property observation.
+| Fixture | Description |
+|---|---|
+| `attribute-map` | Automatic attribute mapping enabled with the `attributeMap()` definition extension. |
+| `attribute-map-naming-strategy` | The `attributeMap({ "attribute-name-strategy": "camelCase" })` definition extension for mapping HTML attribute names to property names. |
+| `attribute-map-naming-strategy-camel-case` | Explicit `@attr` decorator behavior with `camelCase` attribute name strategy in the build configuration. |
+| `observer-map` | Automatic deep reactive observation enabled with the `observerMap()` definition extension. |
+| `observer-map-config-object` | Explicit non-default configuration objects applied via `observerMap(...)` and `attributeMap(...)` definition extensions. |
+| `observer-map-deep-merge` | Nested object merging behavior for complex state structures. |
+| `observer-map-properties` | Selective property observation using `observerMap({ properties: {...} })` for fine-grained control. |

package/test/declarative/fixtures/extensions/attribute-map/entry.html ADDED Viewed

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

package/test/declarative/fixtures/extensions/attribute-map/fast-build.config.json ADDED Viewed

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

package/test/declarative/fixtures/extensions/attribute-map/index.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <attribute-map-test-element id="test-element"><template shadowrootmode="open" shadowroot="open"><div class="foo-value"><!--fe:b--><!--fe:/b--></div>
+        <div class="foo-bar-value"><!--fe:b--><!--fe:/b--></div>
+        <button type="button" data-fe="1">Set Foo</button>
+        <button type="button" data-fe="1">Set FooBar</button>
+        <button type="button" data-fe="1">Set Multiple</button></template></attribute-map-test-element>
+        <attribute-map-existing-attr-test-element id="existing-attr-test-element"><template shadowrootmode="open" shadowroot="open"><div class="existing-foo-value"><!--fe:b--><!--fe:/b--></div></template></attribute-map-existing-attr-test-element>
+<f-template name="attribute-map-test-element">
+    <template>
+        <div class="foo-value">{{foo}}</div>
+        <div class="foo-bar-value">{{foo-bar}}</div>
+        <button type="button" @click="{setFoo()}">Set Foo</button>
+        <button type="button" @click="{setFooBar()}">Set FooBar</button>
+        <button type="button" @click="{setMultiple()}">Set Multiple</button>
+    </template>
+</f-template>
+<f-template name="attribute-map-existing-attr-test-element">
+    <template>
+        <div class="existing-foo-value">{{foo}}</div>
+    </template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>