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

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

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 (286) hide show

package/test/declarative/fixtures/directives/repeat/index.html DELETED Viewed

@@ -1,133 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element item_parent="Bat"><template shadowrootmode="open" shadowroot="open"><ul>
-            <!--fe:b--><!--fe:r-->
-                <li><!--fe:b-->Foo<!--fe:/b--> - <!--fe:b-->Bat<!--fe:/b--></li>
-            <!--fe:/r--><!--fe:r-->
-                <li><!--fe:b-->Bar<!--fe:/b--> - <!--fe:b-->Bat<!--fe:/b--></li>
-            <!--fe:/r--><!--fe:/b-->
-        </ul></template></test-element>
-        <test-element-with-observer-map item_parent="Bat"><template shadowrootmode="open" shadowroot="open"><ul>
-            <!--fe:b--><!--fe:r-->
-                <li><!--fe:b-->Foo<!--fe:/b--> - <!--fe:b-->Bat<!--fe:/b--></li>
-            <!--fe:/r--><!--fe:r-->
-                <li><!--fe:b-->Bar<!--fe:/b--> - <!--fe:b-->Bat<!--fe:/b--></li>
-            <!--fe:/r--><!--fe:/b-->
-        </ul></template></test-element-with-observer-map>
-        <test-element-inner-when><template shadowrootmode="open" shadowroot="open"><ul>
-            <!--fe:b--><!--fe:r-->
-                <!--fe:b--><!--fe:/b-->
-            <!--fe:/r--><!--fe:r-->
-                <!--fe:b--><!--fe:/b-->
-            <!--fe:/r--><!--fe:/b-->
-        </ul></template></test-element-inner-when>
-        <test-element-interval-updates><template shadowrootmode="open" shadowroot="open"><ul>
-            <!--fe:b--><!--fe:r-->
-                <li>
-                    <svg width="20px" height="20px">
-                        <use href="sprites.svg#repeat-icon" data-fe="1"></use>
-                    </svg>
-                </li>
-            <!--fe:/r--><!--fe:/b-->
-            <!--fe:b--><!--fe:r-->
-                <li>
-                    <svg width="20px" height="20px">
-                        <use href="sprites.svg#repeat-icon" data-fe="1"></use>
-                    </svg>
-                </li>
-            <!--fe:/r--><!--fe:/b-->
-        </ul></template></test-element-interval-updates>
-        <test-element-no-item-repeat-binding><template shadowrootmode="open" shadowroot="open"><ul>
-            <!--fe:b--><!--fe:/b-->
-        </ul></template></test-element-no-item-repeat-binding>
-        <test-element-empty-array><template shadowrootmode="open" shadowroot="open"><ul>
-            <!--fe:b--><!--fe:/b-->
-        </ul></template></test-element-empty-array>
-        <test-element-event><template shadowrootmode="open" shadowroot="open"><!--fe:b--><!--fe:r-->
-            <button data-fe="1">Click</button>
-        <!--fe:/r--><!--fe:/b--></template></test-element-event>
-<f-template name="test-element">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}} - {{item_parent}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-inner-when">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <f-when value="{{item.show}}">
-                    <li>{{item.text}}</li>
-                </f-when>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-with-observer-map">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}} - {{item_parent}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-no-item-repeat-binding">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-event">
-    <template>
-        <f-repeat value="{{item in list}}">
-            <button @click="{handleClick()}">Click</button>
-        </f-repeat>
-    </template>
-</f-template>
-<f-template name="test-element-empty-array">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-interval-updates">
-    <template>
-        <ul>
-            <f-repeat value="{{item in someData.list1}}">
-                <li>
-                    <svg width="20px" height="20px">
-                        <use href="sprites.svg#{{item.icon}}-icon"></use>
-                    </svg>
-                </li>
-            </f-repeat>
-            <f-repeat value="{{item in someData.list2}}">
-                <li>
-                    <svg width="20px" height="20px">
-                        <use href="sprites.svg#{{item.icon}}-icon"></use>
-                    </svg>
-                </li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/directives/repeat/main.ts DELETED Viewed

@@ -1,110 +0,0 @@
-import { attr } from "@microsoft/fast-element/attr.js";
-import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
-import { deepMerge } from "@microsoft/fast-element/declarative-utilities.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";
-export class TestElement extends FASTElement {
-    @observable
-    list: Array<string> = ["Foo", "Bar"];
-    @attr
-    item_parent: string = "Bat";
-}
-TestElement.define({
-    name: "test-element",
-    template: declarativeTemplate(),
-});
-export class TestElementInnerWhen extends FASTElement {
-    @observable
-    list: Array<any> = [
-        {
-            show: true,
-            text: "Foo",
-        },
-        {
-            show: false,
-            text: "Bar",
-        },
-    ];
-}
-TestElementInnerWhen.define({
-    name: "test-element-inner-when",
-    template: declarativeTemplate(),
-});
-export class TestElementIntervalUpdates extends FASTElement {
-    someData = { list1: [{ icon: "repeat" }], list2: [{ icon: "repeat" }] };
-    updateData() {
-        deepMerge(this.someData, {
-            list1: [{ icon: "repeat" }],
-            list2: [{ icon: "repeat" }],
-        });
-    }
-}
-TestElementIntervalUpdates.define(
-    {
-        name: "test-element-interval-updates",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-export class TestElementNoItemRepeatBinding extends FASTElement {
-    @observable
-    list: Array<string> = [];
-}
-TestElementNoItemRepeatBinding.define({
-    name: "test-element-no-item-repeat-binding",
-    template: declarativeTemplate(),
-});
-export class TestElementEmptyArray extends FASTElement {
-    @observable
-    list: Array<string> = [];
-}
-TestElementEmptyArray.define({
-    name: "test-element-empty-array",
-    template: declarativeTemplate(),
-});
-export class TestElementEvent extends FASTElement {
-    @observable
-    list: Array<string> = ["A"];
-    @observable
-    clickCount: number = 0;
-    public handleClick = (): void => {
-        this.clickCount++;
-    };
-}
-TestElementEvent.define({
-    name: "test-element-event",
-    template: declarativeTemplate(),
-});
-export class TestElementWithObserverMap extends FASTElement {
-    list: Array<string> = ["Foo", "Bar"];
-    @attr
-    item_parent: string = "Bat";
-}
-TestElementWithObserverMap.define(
-    {
-        name: "test-element-with-observer-map",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});

package/test/declarative/fixtures/directives/repeat/sprites.svg DELETED Viewed

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none" aria-hidden="true">
-    <symbol id="repeat-icon" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet">
-        <path
-            fill="currentColor"
-            d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
-        />
-    </symbol>
-</svg>

package/test/declarative/fixtures/directives/repeat/state.json DELETED Viewed

@@ -1,10 +0,0 @@
-{
-    "list": ["Foo", "Bar"],
-    "item_parent": "Bat",
-    "emptyList": [],
-    "eventList": ["A"],
-    "someData": {
-        "list1": [{ "icon": "repeat" }],
-        "list2": [{ "icon": "repeat" }]
-    }
-}

package/test/declarative/fixtures/directives/repeat/templates.html DELETED Viewed

@@ -1,75 +0,0 @@
-<f-template name="test-element">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}} - {{item_parent}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-inner-when">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <f-when value="{{item.show}}">
-                    <li>{{item.text}}</li>
-                </f-when>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-with-observer-map">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}} - {{item_parent}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-no-item-repeat-binding">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-event">
-    <template>
-        <f-repeat value="{{item in list}}">
-            <button @click="{handleClick()}">Click</button>
-        </f-repeat>
-    </template>
-</f-template>
-<f-template name="test-element-empty-array">
-    <template>
-        <ul>
-            <f-repeat value="{{item in list}}">
-                <li>{{item}}</li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>
-<f-template name="test-element-interval-updates">
-    <template>
-        <ul>
-            <f-repeat value="{{item in someData.list1}}">
-                <li>
-                    <svg width="20px" height="20px">
-                        <use href="sprites.svg#{{item.icon}}-icon"></use>
-                    </svg>
-                </li>
-            </f-repeat>
-            <f-repeat value="{{item in someData.list2}}">
-                <li>
-                    <svg width="20px" height="20px">
-                        <use href="sprites.svg#{{item.icon}}-icon"></use>
-                    </svg>
-                </li>
-            </f-repeat>
-        </ul>
-    </template>
-</f-template>

package/test/declarative/fixtures/directives/slotted/entry.html DELETED Viewed

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element>
-            <div>Slotted</div>
-            Not slotted
-            <ul slot="foo"><li>Item 1</li><li>Item 2</li></ul>
-            <div slot="bar"></div>
-            <p slot="bar"></p>
-        </test-element>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/directives/slotted/fast-build.config.json DELETED Viewed

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

package/test/declarative/fixtures/directives/slotted/index.html DELETED Viewed

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element><template shadowrootmode="open" shadowroot="open"><slot data-fe="1"></slot>
-        <slot name="foo" data-fe="1"></slot>
-        <slot name="bar" data-fe="1"></slot></template>
-            <div>Slotted</div>
-            Not slotted
-            <ul slot="foo"><li>Item 1</li><li>Item 2</li></ul>
-            <div slot="bar"></div>
-            <p slot="bar"></p>
-        </test-element>
-<f-template name="test-element">
-    <template>
-        <slot f-slotted="{slottedNodes filter elements()}"></slot>
-        <slot name="foo" f-slotted="{slottedFooNodes}"></slot>
-        <slot name="bar" f-slotted="{slottedBarNodes filter elements(p, ol)}"></slot>
-    </template>
-</f-template>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/directives/slotted/main.ts DELETED Viewed

@@ -1,29 +0,0 @@
-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 TestElement extends FASTElement {
-    @observable
-    slottedNodes: Node[] = [];
-    @observable
-    slottedFooNodes: Node[] = [];
-    slottedFooNodesChanged() {
-        this.classList.add(`class-${this.slottedFooNodes.length}`);
-    }
-    @observable
-    slottedBarNodes: Node[] = [];
-}
-TestElement.define({
-    name: "test-element",
-    template: declarativeTemplate(),
-});
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});

package/test/declarative/fixtures/directives/slotted/state.json DELETED Viewed

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

package/test/declarative/fixtures/directives/slotted/templates.html DELETED Viewed

@@ -1,7 +0,0 @@
-<f-template name="test-element">
-    <template>
-        <slot f-slotted="{slottedNodes filter elements()}"></slot>
-        <slot name="foo" f-slotted="{slottedFooNodes}"></slot>
-        <slot name="bar" f-slotted="{slottedBarNodes filter elements(p, ol)}"></slot>
-    </template>
-</f-template>

package/test/declarative/fixtures/directives/when/entry.html DELETED Viewed

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <!-- multiple -->
-        <test-element-multiple id="multiple1" planet="earth"></test-element-multiple>
-        <test-element-multiple id="multiple2" planet="pluto"></test-element-multiple>
-        <test-element-multiple id="multiple3" planet="mars"></test-element-multiple>
-        <!-- boolean -->
-        <test-element id="show" show></test-element>
-        <test-element id="hide"></test-element>
-        <!-- not -->
-        <test-element-not id="show-not"></test-element-not>
-        <test-element-not id="hide-not" hide></test-element-not>
-        <!-- equals -->
-        <test-element-equals id="equals-true" vara="3"></test-element-equals>
-        <test-element-equals id="equals-false" vara="4"></test-element-equals>
-        <!-- not equals -->
-        <test-element-not-equals id="not-equals-true" vara="4"></test-element-not-equals>
-        <test-element-not-equals id="not-equals-false" vara="3"></test-element-not-equals>
-        <!-- greater than or equals -->
-        <test-element-ge id="ge-true" vara="3"></test-element-ge>
-        <test-element-ge id="ge-false" vara="0"></test-element-ge>
-        <!-- greater than -->
-        <test-element-gt id="gt-true" vara="3"></test-element-gt>
-        <test-element-gt id="gt-false" vara="0"></test-element-gt>
-        <!-- less than or equals -->
-        <test-element-le id="le-true" vara="2"></test-element-le>
-        <test-element-le id="le-false" vara="4"></test-element-le>
-        <!-- less than -->
-        <test-element-lt id="lt-true" vara="1"></test-element-lt>
-        <test-element-lt id="lt-false" vara="3"></test-element-lt>
-        <!-- or -->
-        <test-element-or id="or-true" thisvar="3"></test-element-or>
-        <test-element-or id="or-false"></test-element-or>
-        <!-- and -->
-        <test-element-and id="and-true" thisvar thatvar></test-element-and>
-        <test-element-and id="and-false" thisvar></test-element-and>
-        <!-- nested when -->
-        <nested-when id="nested-when" error="{{error}}"></nested-when>
-        <!-- when false with repeat -->
-        <test-element-when-false-repeat id="when-false-repeat"></test-element-when-false-repeat>
-        <!-- event -->
-        <test-element-event id="event-show" show></test-element-event>
-        <test-element-event id="event-hide"></test-element-event>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/directives/when/fast-build.config.json DELETED Viewed

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

package/test/declarative/fixtures/directives/when/index.html DELETED Viewed

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