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

package/test/declarative/fixtures/directives/when/main.ts

@@ -1,172 +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";
-
-class TestElementMultiple extends FASTElement {
-    @attr()
-    planet: string = "";
-}
-TestElementMultiple.define({
-    name: "test-element-multiple",
-    template: declarativeTemplate(),
-});
-
-class TestElement extends FASTElement {
-    @attr({ mode: "boolean" })
-    show: boolean = false;
-}
-TestElement.define({
-    name: "test-element",
-    template: declarativeTemplate(),
-});
-
-class TestElementNot extends FASTElement {
-    @attr({ mode: "boolean" })
-    hide: boolean = false;
-}
-TestElementNot.define({
-    name: "test-element-not",
-    template: declarativeTemplate(),
-});
-
-class TestElementEquals extends FASTElement {
-    @attr({ attribute: "vara" })
-    vara: number = 0;
-}
-TestElementEquals.define({
-    name: "test-element-equals",
-    template: declarativeTemplate(),
-});
-
-class TestElementNotEquals extends FASTElement {
-    @attr({ attribute: "vara" })
-    vara: number = 0;
-}
-TestElementNotEquals.define({
-    name: "test-element-not-equals",
-    template: declarativeTemplate(),
-});
-
-class TestElementGe extends FASTElement {
-    @attr({ attribute: "vara" })
-    vara: number = 0;
-}
-TestElementGe.define({
-    name: "test-element-ge",
-    template: declarativeTemplate(),
-});
-
-class TestElementGt extends FASTElement {
-    @attr({ attribute: "vara" })
-    vara: number = 0;
-}
-TestElementGt.define({
-    name: "test-element-gt",
-    template: declarativeTemplate(),
-});
-
-class TestElementLe extends FASTElement {
-    @attr({ attribute: "vara" })
-    vara: number = 0;
-}
-TestElementLe.define({
-    name: "test-element-le",
-    template: declarativeTemplate(),
-});
-
-class TestElementLt extends FASTElement {
-    @attr({ attribute: "vara" })
-    vara: number = 0;
-}
-TestElementLt.define({
-    name: "test-element-lt",
-    template: declarativeTemplate(),
-});
-
-class TestElementOr extends FASTElement {
-    @attr({ attribute: "thisvar", mode: "boolean" })
-    thisvar: boolean = false;
-
-    @attr({ attribute: "thatvar", mode: "boolean" })
-    thatvar: boolean = false;
-}
-TestElementOr.define({
-    name: "test-element-or",
-    template: declarativeTemplate(),
-});
-
-class TestElementAnd extends FASTElement {
-    @attr({ attribute: "thisvar", mode: "boolean" })
-    thisvar: boolean = false;
-
-    @attr({ attribute: "thatvar", mode: "boolean" })
-    thatvar: boolean = false;
-}
-TestElementAnd.define({
-    name: "test-element-and",
-    template: declarativeTemplate(),
-});
-
-export class TestElementWhenFalseRepeat extends FASTElement {
-    @attr({ mode: "boolean" })
-    show: boolean = false;
-
-    @observable
-    list: Array<string> = ["Alpha", "Beta", "Gamma"];
-}
-TestElementWhenFalseRepeat.define({
-    name: "test-element-when-false-repeat",
-    template: declarativeTemplate(),
-});
-
-export class TestElementEvent extends FASTElement {
-    @attr({ mode: "boolean" })
-    show: boolean = false;
-
-    @observable
-    clickCount: number = 0;
-
-    public handleClick = (): void => {
-        this.clickCount++;
-    };
-}
-TestElementEvent.define({
-    name: "test-element-event",
-    template: declarativeTemplate(),
-});
-
-export class NestedWhenElement extends FASTElement {
-    strings = {
-        errorMessage: "Error occurred",
-        continueButtonText: "Continue",
-        retryButtonText: "Retry",
-    };
-
-    @observable
-    error: boolean = false;
-
-    @observable
-    showProgress: boolean = true;
-
-    @observable
-    enableContinue: boolean = false;
-
-    @observable
-    clickCount: number = 0;
-
-    public handleClick = (): void => {
-        this.clickCount++;
-    };
-}
-NestedWhenElement.define({
-    name: "nested-when",
-    template: declarativeTemplate(),
-});
-
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});

package/test/declarative/fixtures/directives/when/state.json

@@ -1,12 +0,0 @@
-{
-    "error": false,
-    "showprogress": true,
-    "enablecontinue": false,
-    "showProgress": true,
-    "enableContinue": false,
-    "strings": {
-        "errorMessage": "Error occurred",
-        "continueButtonText": "Continue",
-        "retryButtonText": "Retry"
-    }
-}

package/test/declarative/fixtures/directives/when/templates.html

@@ -1,75 +0,0 @@
- <!-- multiple -->
- <f-template name="test-element-multiple">
-    <template>Hello <f-when value="{{planet == 'earth'}}">world</f-when><f-when value="{{planet == 'pluto'}}">pluto</f-when><f-when value="{{planet == 'mars'}}">mars</f-when></template>
-</f-template>
-<!-- boolean -->
-<f-template name="test-element">
-    <template><f-when value="{{show}}">Hello world</f-when></template>
-</f-template>
-<!-- not -->
-<f-template name="test-element-not">
-    <template><f-when value="{{!hide}}">Hello world</f-when></template>
-</f-template>
-<!-- equals -->
-<f-template name="test-element-equals">
-    <template><f-when value="{{vara == 3}}">Equals 3</f-when></template>
-</f-template>
-<!-- not equals -->
-<f-template name="test-element-not-equals">
-    <template><f-when value="{{vara != 3}}">Not equals 3</f-when></template>
-</f-template>
-<!-- greater than or equals -->
-<f-template name="test-element-ge">
-    <template><f-when value="{{vara >= 2}}">Two and Over</f-when></template>
-</f-template>
-<!-- greater than -->
-<f-template name="test-element-gt">
-    <template><f-when value="{{vara > 2}}">Over two</f-when></template>
-</f-template>
-<!-- less than or equals -->
-<f-template name="test-element-le">
-    <template><f-when value="{{vara <= 2}}">Two and Under</f-when></template>
-</f-template>
-<!-- less than -->
-<f-template name="test-element-lt">
-    <template><f-when value="{{vara < 2}}">Under two</f-when></template>
-</f-template>
-<!-- or -->
-<f-template name="test-element-or">
-    <template><f-when value="{{thisvar || thatvar}}">This or That</f-when></template>
-</f-template>
-<!-- and -->
-<f-template name="test-element-and">
-    <template><f-when value="{{thisvar && thatvar}}">This and That</f-when></template>
-</f-template>
-<!-- nested when -->
-<f-template name="nested-when">
-    <template>
-        <f-when value="{{error}}">
-            <div class="error" role="alert">{{strings.errorMessage}}</div>
-        </f-when>
-        <div class="buttons">
-            <f-when value="{{!error}}">
-                <f-when value="{{showProgress}}">
-                    <progress></progress>
-                </f-when>
-                <f-when value="{{!showProgress}}">
-                    <button ?disabled="{{!enableContinue}}" @click="{handleClick()}">
-                        {{strings.continueButtonText}}
-                    </button>
-                </f-when>
-            </f-when>
-            <f-when value="{{error}}">
-                <button>{{strings.retryButtonText}}</button>
-            </f-when>
-        </div>
-    </template>
-</f-template>
-<!-- when false with repeat -->
-<f-template name="test-element-when-false-repeat">
-    <template><f-when value="{{show}}"><ul><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul></f-when></template>
-</f-template>
-<!-- event -->
-<f-template name="test-element-event">
-    <template><f-when value="{{show}}"><button @click="{handleClick()}">Click me</button></f-when></template>
-</f-template>

package/test/declarative/fixtures/ecosystem/README.md

@@ -1,11 +0,0 @@
-# Ecosystem
-
-Fixtures for other APIs and behaviors that are part of FAST Element's
-declarative ecosystem, including error handling, lifecycle management, and
-performance monitoring.
-
-| Fixture | Description |
-|---|---|
-| `errors` | Error handling and edge cases in template rendering. |
-| `lifecycle-callbacks` | `declarativeTemplate()` and `enableHydration()` lifecycle callbacks such as `elementDidRegister`, `elementDidHydrate`, and `hydrationComplete`. |
-| `performance-metrics` | Performance monitoring and measurements during the component lifecycle. |

package/test/declarative/fixtures/ecosystem/declarative-no-hydration/entry.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title>Declarative Template Without Hydration</title>
-    </head>
-    <body>
-        <basic-element greeting="Hi"></basic-element>
-        <counter-element></counter-element>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/ecosystem/declarative-no-hydration/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/declarative-no-hydration/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title>Declarative Template Without Hydration</title>
-    </head>
-    <body>
-        <basic-element greeting="Hi"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Hi<!--fe:/b--> World</template></basic-element>
-        <counter-element><template shadowrootmode="open" shadowroot="open"><span>Count: <!--fe:b-->0<!--fe:/b--></span></template></counter-element>
-<f-template name="basic-element">
-    <template>{{greeting}} World</template>
-</f-template>
-
-<f-template name="counter-element">
-    <template><span>Count: {{count}}</span></template>
-</f-template>
-
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/ecosystem/declarative-no-hydration/main.ts

@@ -1,68 +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 { observable } from "@microsoft/fast-element/observable.js";
-
-// No enableHydration() — test declarative template without hydration
-
-const lifecycleEvents: Array<{ callback: string; name?: string }> = [];
-
-class BasicElement extends FASTElement {
-    @attr
-    greeting: string = "Hello";
-}
-
-BasicElement.define({
-    name: "basic-element",
-    template: declarativeTemplate({
-        elementDidRegister(name: string) {
-            lifecycleEvents.push({ callback: "elementDidRegister", name });
-        },
-        templateWillUpdate(name: string) {
-            lifecycleEvents.push({ callback: "templateWillUpdate", name });
-        },
-        templateDidUpdate(name: string) {
-            lifecycleEvents.push({ callback: "templateDidUpdate", name });
-        },
-        elementDidDefine(name: string) {
-            lifecycleEvents.push({ callback: "elementDidDefine", name });
-            (window as any).elementsDefined = ((window as any).elementsDefined ?? 0) + 1;
-            if ((window as any).elementsDefined >= 2) {
-                (window as any).allDefined = true;
-            }
-        },
-    }),
-});
-
-class CounterElement extends FASTElement {
-    @observable
-    count: number = 0;
-
-    increment() {
-        this.count++;
-    }
-}
-
-CounterElement.define({
-    name: "counter-element",
-    template: declarativeTemplate({
-        elementDidRegister(name: string) {
-            lifecycleEvents.push({ callback: "elementDidRegister", name });
-        },
-        templateWillUpdate(name: string) {
-            lifecycleEvents.push({ callback: "templateWillUpdate", name });
-        },
-        templateDidUpdate(name: string) {
-            lifecycleEvents.push({ callback: "templateDidUpdate", name });
-        },
-        elementDidDefine(name: string) {
-            lifecycleEvents.push({ callback: "elementDidDefine", name });
-            (window as any).elementsDefined = ((window as any).elementsDefined ?? 0) + 1;
-            if ((window as any).elementsDefined >= 2) {
-                (window as any).allDefined = true;
-            }
-        },
-    }),
-});
-
-(window as any).lifecycleEvents = lifecycleEvents;

package/test/declarative/fixtures/ecosystem/declarative-no-hydration/state.json

@@ -1,4 +0,0 @@
-{
-    "greeting": "Hi",
-    "count": 0
-}

package/test/declarative/fixtures/ecosystem/declarative-no-hydration/templates.html

@@ -1,7 +0,0 @@
-<f-template name="basic-element">
-    <template>{{greeting}} World</template>
-</f-template>
-
-<f-template name="counter-element">
-    <template><span>Count: {{count}}</span></template>
-</f-template>

package/test/declarative/fixtures/ecosystem/errors/entry.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element-no-template></test-element-no-template>
-        <test-element-multiple-templates></test-element-multiple-templates>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/ecosystem/errors/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/errors/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element-no-template><template shadowrootmode="open" shadowroot="open"><span>No template element provided</span></template></test-element-no-template>
-        <test-element-multiple-templates><template shadowrootmode="open" shadowroot="open"><span>First template</span></template></test-element-multiple-templates>
-<f-template name="test-element-no-template">
-    <span>No template element provided</span>
-</f-template>
-<f-template name="test-element-multiple-templates">
-    <template><span>First template</span></template>
-    <template><span>Second template</span></template>
-</f-template>
-
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/ecosystem/errors/main.ts

@@ -1,17 +0,0 @@
-import { enableDebug } from "@microsoft/fast-element/debug.js";
-import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
-import { FASTElement } from "@microsoft/fast-element/fast-element.js";
-
-enableDebug();
-
-class TestElementNoTemplate extends FASTElement {}
-FASTElement.define(TestElementNoTemplate, {
-    name: "test-element-no-template",
-    template: declarativeTemplate(),
-});
-
-class TestElementMultipleTemplates extends FASTElement {}
-FASTElement.define(TestElementMultipleTemplates, {
-    name: "test-element-multiple-templates",
-    template: declarativeTemplate(),
-});

package/test/declarative/fixtures/ecosystem/errors/state.json

@@ -1 +0,0 @@
-{}

package/test/declarative/fixtures/ecosystem/errors/templates.html

@@ -1,7 +0,0 @@
-<f-template name="test-element-no-template">
-    <span>No template element provided</span>
-</f-template>
-<f-template name="test-element-multiple-templates">
-    <template><span>First template</span></template>
-    <template><span>Second template</span></template>
-</f-template>

package/test/declarative/fixtures/ecosystem/lifecycle-callbacks/entry.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title>Lifecycle Callbacks Test</title>
-    </head>
-    <body>
-        <simple-element needs-hydration></simple-element>
-        <complex-element needs-hydration count="{{count}}"></complex-element>
-        <deferred-element needs-hydration defer-hydration></deferred-element>
-        <deferred-parent-element
-            needs-hydration
-            defer-hydration
-        ></deferred-parent-element>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/ecosystem/lifecycle-callbacks/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/lifecycle-callbacks/index.html

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