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/children/main.ts ADDED Viewed

@@ -0,0 +1,22 @@
+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
+    listItems: Node[] = [];
+    @observable
+    list: Array<string> = ["Foo", "Bar"];
+}
+TestElement.define({
+    name: "test-element",
+    template: declarativeTemplate(),
+});
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});

package/test/declarative/fixtures/directives/children/state.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+    "list": ["Foo", "Bar"]
+}

package/test/declarative/fixtures/directives/children/templates.html ADDED Viewed

@@ -0,0 +1,3 @@
+<f-template name="test-element">
+    <template><ul f-children="{listItems}"><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul></template>
+</f-template>

package/test/declarative/fixtures/directives/ref/entry.html ADDED Viewed

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

package/test/declarative/fixtures/directives/ref/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/directives/ref/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <test-element><template shadowrootmode="open" shadowroot="open"><video data-fe="1"></video></template></test-element>
+<f-template name="test-element">
+    <template><video f-ref="{video}"></video></template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

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

@@ -0,0 +1,17 @@
+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";
+class TestElement extends FASTElement {
+    public video: HTMLVideoElement | null = null;
+}
+TestElement.define({
+    name: "test-element",
+    template: declarativeTemplate(),
+});
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});

package/test/declarative/fixtures/directives/ref/state.json ADDED Viewed

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

package/test/declarative/fixtures/directives/ref/templates.html ADDED Viewed

@@ -0,0 +1,3 @@
+<f-template name="test-element">
+    <template><video f-ref="{video}"></video></template>
+</f-template>

package/test/declarative/fixtures/directives/repeat/entry.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <test-element item_parent="{{item_parent}}"></test-element>
+        <test-element-with-observer-map
+            item_parent="{{item_parent}}"
+        ></test-element-with-observer-map>
+        <test-element-inner-when></test-element-inner-when>
+        <test-element-interval-updates></test-element-interval-updates>
+        <test-element-no-item-repeat-binding
+            list="{{emptyList}}"
+        ></test-element-no-item-repeat-binding>
+        <test-element-empty-array :list="{{emptyList}}"></test-element-empty-array>
+        <test-element-event :list="{{eventList}}"></test-element-event>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/directives/repeat/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/directives/repeat/index.html ADDED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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