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/bindings/host/index.html DELETED Viewed

@@ -1,96 +0,0 @@
-<!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 DELETED Viewed

@@ -1,222 +0,0 @@
-import { attr } from "@microsoft/fast-element/attr.js";
-import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
-import { FASTElement } from "@microsoft/fast-element/fast-element.js";
-import { enableHydration } from "@microsoft/fast-element/hydration.js";
-import { observable } from "@microsoft/fast-element/observable.js";
-// 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 DELETED Viewed

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

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

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

@@ -1,12 +0,0 @@
-# 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 DELETED Viewed

@@ -1,11 +0,0 @@
-<!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 DELETED Viewed

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

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

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

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

@@ -1,22 +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
-    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 DELETED Viewed

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

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

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

@@ -1,11 +0,0 @@
-<!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 DELETED Viewed

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

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

@@ -1,15 +0,0 @@
-<!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 DELETED Viewed

@@ -1,17 +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";
-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 DELETED Viewed

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

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

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

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

@@ -1,21 +0,0 @@
-<!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 DELETED Viewed

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