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/directives/when/index.html ADDED Viewed

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <!-- multiple -->
+        <test-element-multiple id="multiple1" planet="earth"><template shadowrootmode="open" shadowroot="open">Hello <!--fe:b-->world<!--fe:/b--><!--fe:b--><!--fe:/b--><!--fe:b--><!--fe:/b--></template></test-element-multiple>
+        <test-element-multiple id="multiple2" planet="pluto"><template shadowrootmode="open" shadowroot="open">Hello <!--fe:b--><!--fe:/b--><!--fe:b-->pluto<!--fe:/b--><!--fe:b--><!--fe:/b--></template></test-element-multiple>
+        <test-element-multiple id="multiple3" planet="mars"><template shadowrootmode="open" shadowroot="open">Hello <!--fe:b--><!--fe:/b--><!--fe:b--><!--fe:/b--><!--fe:b-->mars<!--fe:/b--></template></test-element-multiple>
+        <!-- boolean -->
+        <test-element id="show" show><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Hello world<!--fe:/b--></template></test-element>
+        <test-element id="hide"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element>
+        <!-- not -->
+        <test-element-not id="show-not"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Hello world<!--fe:/b--></template></test-element-not>
+        <test-element-not id="hide-not" hide><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-not>
+        <!-- equals -->
+        <test-element-equals id="equals-true" vara="3"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Equals 3<!--fe:/b--></template></test-element-equals>
+        <test-element-equals id="equals-false" vara="4"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-equals>
+        <!-- not equals -->
+        <test-element-not-equals id="not-equals-true" vara="4"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Not equals 3<!--fe:/b--></template></test-element-not-equals>
+        <test-element-not-equals id="not-equals-false" vara="3"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-not-equals>
+        <!-- greater than or equals -->
+        <test-element-ge id="ge-true" vara="3"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Two and Over<!--fe:/b--></template></test-element-ge>
+        <test-element-ge id="ge-false" vara="0"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-ge>
+        <!-- greater than -->
+        <test-element-gt id="gt-true" vara="3"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Over two<!--fe:/b--></template></test-element-gt>
+        <test-element-gt id="gt-false" vara="0"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-gt>
+        <!-- less than or equals -->
+        <test-element-le id="le-true" vara="2"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Two and Under<!--fe:/b--></template></test-element-le>
+        <test-element-le id="le-false" vara="4"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-le>
+        <!-- less than -->
+        <test-element-lt id="lt-true" vara="1"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Under two<!--fe:/b--></template></test-element-lt>
+        <test-element-lt id="lt-false" vara="3"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-lt>
+        <!-- or -->
+        <test-element-or id="or-true" thisvar="3"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->This or That<!--fe:/b--></template></test-element-or>
+        <test-element-or id="or-false"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-or>
+        <!-- and -->
+        <test-element-and id="and-true" thisvar thatvar><template shadowrootmode="open" shadowroot="open"><!--fe:b-->This and That<!--fe:/b--></template></test-element-and>
+        <test-element-and id="and-false" thisvar><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-and>
+        <!-- nested when -->
+        <nested-when id="nested-when" error="false"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b-->
+        <div class="buttons">
+            <!--fe:b-->
+                <!--fe:b-->
+                    <progress></progress>
+                <!--fe:/b-->
+                <!--fe:b--><!--fe:/b-->
+            <!--fe:/b-->
+            <!--fe:b--><!--fe:/b-->
+        </div></template></nested-when>
+        <!-- when false with repeat -->
+        <test-element-when-false-repeat id="when-false-repeat"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-when-false-repeat>
+        <!-- event -->
+        <test-element-event id="event-show" show><template shadowrootmode="open" shadowroot="open"><!--fe:b--><button data-fe="1">Click me</button><!--fe:/b--></template></test-element-event>
+        <test-element-event id="event-hide"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:/b--></template></test-element-event>
+<!-- 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>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

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

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

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

@@ -0,0 +1,75 @@
+ <!-- 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 ADDED Viewed

@@ -0,0 +1,11 @@
+# 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 ADDED Viewed

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

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

package/test/declarative/fixtures/ecosystem/declarative-no-hydration/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!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 ADDED Viewed

@@ -0,0 +1,68 @@
+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 ADDED Viewed

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

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

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

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

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

package/test/declarative/fixtures/ecosystem/errors/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!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 ADDED Viewed

@@ -0,0 +1,17 @@
+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 ADDED Viewed

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

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

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

@@ -0,0 +1,17 @@
+<!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 ADDED Viewed

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