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/bindings/dot-syntax/state.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+    "object": {
+        "a": {
+            "b1": null,
+            "b2": {
+                "c": "FOO"
+            }
+        },
+        "b": "bar",
+        "c": [
+            { "name": "Item 1", "status": "active" },
+            { "name": "Item 2", "status": "active" },
+            { "status": "active" }
+        ]
+    }
+}

package/test/declarative/fixtures/bindings/dot-syntax/templates.html ADDED Viewed

@@ -0,0 +1,17 @@
+<f-template name="test-element">
+    <template>
+        <span>{{object.b}}</span>
+        <span>{{object.a.b1}}</span>
+        <span>{{object.a.b2.c}}</span>
+        <button @click="{handleBClick()}">Set b</button>
+        <button @click="{handleAB1Click()}">Set a.b1</button>
+        <button @click="{handleAB2CClick()}">Set a.b2.c</button>
+        <f-when value="{{object.c}}">
+            <f-repeat value="{{item in object.c}}">
+                <f-when value="{{item.name && item.status == 'active'}}">
+                    <div>{{item.name}}</div>
+                </f-when>
+            </f-repeat>
+        </f-when>
+    </template>
+</f-template>

package/test/declarative/fixtures/bindings/event/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 foo="{{foo}}"></test-element>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

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

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <test-element foo="bar"><template shadowrootmode="open" shadowroot="open"><button type="button" data-fe="1">No arguments</button>
+        <button type="button" data-fe="1">modify foo</button>
+        <button type="button" data-fe="1">
+            event argument ($e)
+        </button>
+        <button type="button" data-fe="1">
+            context argument ($c)
+        </button>
+        <button type="button" data-fe="1">
+            multiple arguments ($e, $c)
+        </button>
+        <button type="button" data-fe="1">
+            context event argument ($c.event)
+        </button></template></test-element>
+<f-template name="test-element">
+    <template>
+        <button type="button" @click="{handleNoArgsClick()}">No arguments</button>
+        <button type="button" @click="{handleModifyAttributeClick()}">modify foo</button>
+        <button type="button" @click="{handleDollarEArgClick($e)}">
+            event argument ($e)
+        </button>
+        <button type="button" @click="{handleContextArgClick($c)}">
+            context argument ($c)
+        </button>
+        <button type="button" @click="{handleMultiArgClick($e, $c)}">
+            multiple arguments ($e, $c)
+        </button>
+        <button type="button" @click="{handleContextEventArgClick($c.event)}">
+            context event argument ($c.event)
+        </button>
+    </template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/bindings/event/main.ts ADDED Viewed

@@ -0,0 +1,43 @@
+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";
+class TestElement extends FASTElement {
+    @attr
+    foo: string = "";
+    public handleNoArgsClick = (): void => {
+        console.log("no args");
+    };
+    public handleModifyAttributeClick = (): void => {
+        this.foo = "modified-by-click";
+    };
+    public handleDollarEArgClick = (e: MouseEvent): void => {
+        console.log(e.type);
+    };
+    public handleContextArgClick = (c: any): void => {
+        console.log(c.event.type);
+    };
+    public handleMultiArgClick = (e: MouseEvent, c: any): void => {
+        console.log(`${e.type},${c.event.type}`);
+    };
+    public handleContextEventArgClick = (e: MouseEvent): void => {
+        console.log(e.type);
+    };
+}
+TestElement.define({
+    name: "test-element",
+    template: declarativeTemplate(),
+});
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});

package/test/declarative/fixtures/bindings/event/state.json ADDED Viewed

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

package/test/declarative/fixtures/bindings/event/templates.html ADDED Viewed

@@ -0,0 +1,18 @@
+<f-template name="test-element">
+    <template>
+        <button type="button" @click="{handleNoArgsClick()}">No arguments</button>
+        <button type="button" @click="{handleModifyAttributeClick()}">modify foo</button>
+        <button type="button" @click="{handleDollarEArgClick($e)}">
+            event argument ($e)
+        </button>
+        <button type="button" @click="{handleContextArgClick($c)}">
+            context argument ($c)
+        </button>
+        <button type="button" @click="{handleMultiArgClick($e, $c)}">
+            multiple arguments ($e, $c)
+        </button>
+        <button type="button" @click="{handleContextEventArgClick($c.event)}">
+            context event argument ($c.event)
+        </button>
+    </template>
+</f-template>

package/test/declarative/fixtures/bindings/host/entry.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Host Bindings Test</title>
+        <style>
+            /* Ensure custom elements display as block to prevent overlap */
+            host-event-element,
+            host-multi-element,
+            host-static-element,
+            host-events-element,
+            host-multi-content-element,
+            host-text-binding-element,
+            host-property-element,
+            host-all-types-element,
+            host-perm-attr-first,
+            host-perm-bool-first,
+            host-perm-prop-first {
+                display: block;
+                margin: 10px 0;
+                padding: 10px;
+                border: 1px solid #ccc;
+            }
+        </style>
+    </head>
+    <body>
+        <host-event-element></host-event-element>
+        <host-multi-element disabled></host-multi-element>
+        <host-static-element id="static-host"></host-static-element>
+        <host-events-element text="content text"></host-events-element>
+        <host-multi-content-element first="a" second="b"></host-multi-content-element>
+        <host-text-binding-element text="text content"></host-text-binding-element>
+        <host-property-element text="property test"></host-property-element>
+        <host-all-types-element text="all types" attr="value" disabled></host-all-types-element>
+        <host-perm-attr-first text="perm attr first" attr="value" disabled></host-perm-attr-first>
+        <host-perm-bool-first text="perm bool first" attr="value" disabled></host-perm-bool-first>
+        <host-perm-prop-first text="perm prop first" attr="value" disabled></host-perm-prop-first>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

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

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title>Host Bindings Test</title>
+        <style>
+            /* Ensure custom elements display as block to prevent overlap */
+            host-event-element,
+            host-multi-element,
+            host-static-element,
+            host-events-element,
+            host-multi-content-element,
+            host-text-binding-element,
+            host-property-element,
+            host-all-types-element,
+            host-perm-attr-first,
+            host-perm-bool-first,
+            host-perm-prop-first {
+                display: block;
+                margin: 10px 0;
+                padding: 10px;
+                border: 1px solid #ccc;
+            }
+        </style>
+    </head>
+    <body>
+        <host-event-element><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->Hello<!--fe:/b--></span></template></host-event-element>
+        <host-multi-element disabled><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->World<!--fe:/b--></span></template></host-multi-element>
+        <host-static-element id="static-host"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->first<!--fe:/b--> <!--fe:b-->second<!--fe:/b--></span></template></host-static-element>
+        <host-events-element text="content text"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->content text<!--fe:/b--></template></host-events-element>
+        <host-multi-content-element first="a" second="b"><template shadowrootmode="open" shadowroot="open"><span first="a" second="b" data-fe="2"></span></template></host-multi-content-element>
+        <host-text-binding-element text="text content"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->text content<!--fe:/b--></span></template></host-text-binding-element>
+        <host-property-element text="property test"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->property test<!--fe:/b--></span></template></host-property-element>
+        <host-all-types-element text="all types" attr="value" disabled><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->all types<!--fe:/b--></span></template></host-all-types-element>
+        <host-perm-attr-first text="perm attr first" attr="value" disabled><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->perm attr first<!--fe:/b--></span></template></host-perm-attr-first>
+        <host-perm-bool-first text="perm bool first" attr="value" disabled><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->perm bool first<!--fe:/b--></span></template></host-perm-bool-first>
+        <host-perm-prop-first text="perm prop first" attr="value" disabled><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->perm prop first<!--fe:/b--></span></template></host-perm-prop-first>
+<f-template name="host-event-element">
+    <template @click="{handleClick()}">
+        <span>{{greeting}}</span>
+    </template>
+</f-template>
+<f-template name="host-multi-element">
+    <template @click="{handleClick()}" ?disabled="{{isDisabled}}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-static-element">
+    <template id="static-host" @click="{handleClick()}">
+        <span>{{first}} {{second}}</span>
+    </template>
+</f-template>
+<f-template name="host-events-element">
+    <template @click="{handleClick()}" @mouseenter="{handleMouseEnter()}">
+        {{text}}
+    </template>
+</f-template>
+<f-template name="host-multi-content-element">
+    <template @click="{handleClick()}">
+        <span first="{{first}}" second="{{second}}"></span>
+    </template>
+</f-template>
+<f-template name="host-text-binding-element">
+    <template @click="{handleClick()}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-property-element">
+    <template :title="{hostTitle}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-all-types-element">
+    <template @click="{handleClick()}" ?disabled="{{isDisabled}}" :title="{hostTitle}" attr="{{hostAttr}}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-perm-attr-first">
+    <template attr="{{hostAttr}}" :title="{hostTitle}" ?disabled="{{isDisabled}}" @click="{handleClick()}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-perm-bool-first">
+    <template ?disabled="{{isDisabled}}" @click="{handleClick()}" attr="{{hostAttr}}" :title="{hostTitle}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-perm-prop-first">
+    <template :title="{hostTitle}" attr="{{hostAttr}}" @click="{handleClick()}" ?disabled="{{isDisabled}}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/bindings/host/main.ts ADDED Viewed

@@ -0,0 +1,222 @@
+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";
+// Test 1: Element with single host event binding and content attribute binding
+class HostEventElement extends FASTElement {
+    @attr
+    greeting: string = "Hello";
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-event clicked: ${this.clickCount}`);
+    };
+}
+HostEventElement.define({
+    name: "host-event-element",
+    template: declarativeTemplate(),
+});
+// Test 2: Element with multiple host bindings (event + boolean)
+class HostMultiElement extends FASTElement {
+    @attr
+    text: string = "World";
+    @observable
+    isDisabled: boolean = true;
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-multi clicked: ${this.clickCount}`);
+    };
+}
+HostMultiElement.define({
+    name: "host-multi-element",
+    template: declarativeTemplate(),
+});
+// Test 3: Element with static attribute and multiple content bindings
+class HostStaticElement extends FASTElement {
+    @attr
+    first: string = "first";
+    @attr
+    second: string = "second";
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-static clicked: ${this.clickCount}`);
+    };
+}
+HostStaticElement.define({
+    name: "host-static-element",
+    template: declarativeTemplate(),
+});
+// Test 4: Element with multiple host events
+class HostEventsElement extends FASTElement {
+    @attr
+    text: string = "content text";
+    public clickCount = 0;
+    public mouseEnterCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-events clicked: ${this.clickCount}`);
+    };
+    public handleMouseEnter = (): void => {
+        this.mouseEnterCount++;
+        console.log(`host-events mouseenter: ${this.mouseEnterCount}`);
+    };
+}
+HostEventsElement.define({
+    name: "host-events-element",
+    template: declarativeTemplate(),
+});
+// Test 5: Element with host event and multiple content attribute bindings
+// KEY TEST: Verifies content binding indexes are 0,1 not offset by host bindings
+class HostMultiContentElement extends FASTElement {
+    @attr
+    first: string = "a";
+    @attr
+    second: string = "b";
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-multi-content clicked: ${this.clickCount}`);
+    };
+}
+HostMultiContentElement.define({
+    name: "host-multi-content-element",
+    template: declarativeTemplate(),
+});
+// Test 6: Element with host event and content text binding
+class HostTextBindingElement extends FASTElement {
+    @attr
+    text: string = "text content";
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-text-binding clicked: ${this.clickCount}`);
+    };
+}
+HostTextBindingElement.define({
+    name: "host-text-binding-element",
+    template: declarativeTemplate(),
+});
+// Test 7: Element with host property binding
+class HostPropertyElement extends FASTElement {
+    @attr
+    text: string = "property test";
+    @observable
+    hostTitle: string = "tooltip text";
+    public clickCount = 0;
+}
+HostPropertyElement.define({
+    name: "host-property-element",
+    template: declarativeTemplate(),
+});
+// Test 8: Element with all host binding types (event + boolean + property + attribute)
+class HostAllTypesElement extends FASTElement {
+    @attr
+    text: string = "all types";
+    @observable
+    isDisabled: boolean = true;
+    @observable
+    hostTitle: string = "all types tooltip";
+    @attr({ attribute: "attr" })
+    hostAttr: string = "value";
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`host-all-types clicked: ${this.clickCount}`);
+    };
+}
+HostAllTypesElement.define({
+    name: "host-all-types-element",
+    template: declarativeTemplate(),
+});
+// Base class for permutation tests - all have same properties/behavior
+class HostPermutationBase extends FASTElement {
+    @attr
+    text: string = "";
+    @observable
+    isDisabled: boolean = true;
+    @observable
+    hostTitle: string = "permutation tooltip";
+    @attr({ attribute: "attr" })
+    hostAttr: string = "value";
+    public clickCount = 0;
+    public handleClick = (): void => {
+        this.clickCount++;
+        console.log(`${this.tagName.toLowerCase()} clicked: ${this.clickCount}`);
+    };
+}
+// Test 9: Permutation - attribute first
+class HostPermAttrFirst extends HostPermutationBase {
+    @attr
+    override text: string = "perm attr first";
+}
+HostPermAttrFirst.define({
+    name: "host-perm-attr-first",
+    template: declarativeTemplate(),
+});
+// Test 10: Permutation - boolean first
+class HostPermBoolFirst extends HostPermutationBase {
+    @attr
+    override text: string = "perm bool first";
+}
+HostPermBoolFirst.define({
+    name: "host-perm-bool-first",
+    template: declarativeTemplate(),
+});
+// Test 11: Permutation - property first
+class HostPermPropFirst extends HostPermutationBase {
+    @attr
+    override text: string = "perm prop first";
+}
+HostPermPropFirst.define({
+    name: "host-perm-prop-first",
+    template: declarativeTemplate(),
+});
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});

package/test/declarative/fixtures/bindings/host/state.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+    "greeting": "Hello",
+    "text": "World",
+    "isDisabled": true,
+    "first": "first",
+    "second": "second",
+    "hostTitle": "tooltip",
+    "hostAttr": "value"
+}

package/test/declarative/fixtures/bindings/host/templates.html ADDED Viewed

@@ -0,0 +1,55 @@
+<f-template name="host-event-element">
+    <template @click="{handleClick()}">
+        <span>{{greeting}}</span>
+    </template>
+</f-template>
+<f-template name="host-multi-element">
+    <template @click="{handleClick()}" ?disabled="{{isDisabled}}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-static-element">
+    <template id="static-host" @click="{handleClick()}">
+        <span>{{first}} {{second}}</span>
+    </template>
+</f-template>
+<f-template name="host-events-element">
+    <template @click="{handleClick()}" @mouseenter="{handleMouseEnter()}">
+        {{text}}
+    </template>
+</f-template>
+<f-template name="host-multi-content-element">
+    <template @click="{handleClick()}">
+        <span first="{{first}}" second="{{second}}"></span>
+    </template>
+</f-template>
+<f-template name="host-text-binding-element">
+    <template @click="{handleClick()}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-property-element">
+    <template :title="{hostTitle}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-all-types-element">
+    <template @click="{handleClick()}" ?disabled="{{isDisabled}}" :title="{hostTitle}" attr="{{hostAttr}}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-perm-attr-first">
+    <template attr="{{hostAttr}}" :title="{hostTitle}" ?disabled="{{isDisabled}}" @click="{handleClick()}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-perm-bool-first">
+    <template ?disabled="{{isDisabled}}" @click="{handleClick()}" attr="{{hostAttr}}" :title="{hostTitle}">
+        <span>{{text}}</span>
+    </template>
+</f-template>
+<f-template name="host-perm-prop-first">
+    <template :title="{hostTitle}" attr="{{hostAttr}}" @click="{handleClick()}" ?disabled="{{isDisabled}}">
+        <span>{{text}}</span>
+    </template>
+</f-template>

package/test/declarative/fixtures/directives/README.md ADDED Viewed

@@ -0,0 +1,12 @@
+# Directives
+Fixtures for testing attribute and element directives available in FAST
+Element's declarative templates.
+| Fixture | Description |
+|---|---|
+| `children` | The `f-children` directive for injecting child nodes into templates. |
+| `ref` | The `f-ref` directive for obtaining direct references to DOM elements. |
+| `repeat` | The `f-repeat` directive for iterating over arrays with binding context access. |
+| `slotted` | The `f-slotted` directive for filtering slotted content. |
+| `when` | The `f-when` conditional directive with boolean and comparison operators. |

package/test/declarative/fixtures/directives/children/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/children/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/children/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"><ul data-fe="1"><!--fe:b--><!--fe:r--><li><!--fe:b-->Foo<!--fe:/b--></li><!--fe:/r--><!--fe:r--><li><!--fe:b-->Bar<!--fe:/b--></li><!--fe:/r--><!--fe:/b--></ul></template></test-element>
+<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>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>