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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/test/declarative/fixtures/extensions/attribute-map/main.ts

@@ -1,40 +0,0 @@
-import { attr } from "@microsoft/fast-element/attr.js";
-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";
-
-class AttributeMapTestElement extends FASTElement {
-    public setFoo() {
-        (this as any).foo = "hello";
-    }
-
-    public setFooBar() {
-        (this as any)["foo-bar"] = "world";
-    }
-
-    public setMultiple() {
-        (this as any).foo = "updated";
-        (this as any)["foo-bar"] = "also-updated";
-    }
-}
-
-AttributeMapTestElement.define(
-    {
-        name: "attribute-map-test-element",
-        template: declarativeTemplate(),
-    },
-    [attributeMap()],
-);
-
-class AttributeMapWithExistingAttrElement extends FASTElement {
-    @attr
-    foo: string = "original";
-}
-
-AttributeMapWithExistingAttrElement.define(
-    {
-        name: "attribute-map-existing-attr-test-element",
-        template: declarativeTemplate(),
-    },
-    [attributeMap()],
-);

package/test/declarative/fixtures/extensions/attribute-map/state.json

@@ -1,4 +0,0 @@
-{
-    "foo": "",
-    "foo-bar": ""
-}

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

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

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/entry.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <naming-strategy-test id="test-element" foo-bar="{{fooBar}}" my-custom-prop="{{myCustomProp}}"></naming-strategy-test>
-        <naming-strategy-no-dash-test id="no-dash-test" label="{{label}}"></naming-strategy-no-dash-test>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/fast-build.config.json

@@ -1,7 +0,0 @@
-{
-    "entry": "entry.html",
-    "state": "state.json",
-    "output": "index.html",
-    "templates": "templates.html",
-    "attribute-name-strategy": "camelCase"
-}