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/README.md DELETED Viewed

@@ -1,12 +0,0 @@
-# Bindings
-Fixtures for testing the various binding types supported by FAST Element's
-declarative templates.
-| Fixture | Description |
-|---|---|
-| `attribute` | Attribute binding via `@attr` and `@observable` decorators on custom elements. |
-| `content` | Content binding with `{{text}}` for escaped HTML and `{{{html}}}` for unescaped HTML injection. |
-| `dot-syntax` | Dot-notation path access in bindings (e.g., `{{user.name}}`, `{{user.address.city}}`). |
-| `event` | Event binding syntax with `@click="{handleClick()}"`, DOM event access via `$e`, and context access via `$c`. |
-| `host` | Host element bindings for applying styles and attributes to the host element. |

package/test/declarative/fixtures/bindings/attribute/entry.html DELETED Viewed

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

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

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element type="checkbox"><template shadowrootmode="open" shadowroot="open"><input type="checkbox" disabled data-fe="1"></template></test-element>
-        <test-element-property><template shadowrootmode="open" shadowroot="open"><input type="checkbox" disabled data-fe="1"></template></test-element-property>
-        <test-element-expression><template shadowrootmode="open" shadowroot="open"><input disabled type="button" data-fe="1"></template></test-element-expression>
-<f-template name="test-element">
-    <template> <input type="{{type}}" disabled> </template>
-</f-template>
-<f-template name="test-element-property">
-    <template> <input type="checkbox" ?disabled="{{!isEnabled}}"> </template>
-</f-template>
-<f-template name="test-element-expression">
-    <template>
-        <input ?disabled="{{activeGroup == currentGroup}}" type="button">
-    </template>
-</f-template>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/bindings/attribute/main.ts DELETED Viewed

@@ -1,41 +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";
-class TestElement extends FASTElement {
-    @attr
-    type: string = "radio";
-}
-TestElement.define({
-    name: "test-element",
-    template: declarativeTemplate(),
-});
-class TestElementProperty extends FASTElement {
-    @observable
-    isEnabled: boolean = false;
-}
-TestElementProperty.define({
-    name: "test-element-property",
-    template: declarativeTemplate(),
-});
-class TestElementExpression extends FASTElement {
-    @attr({ attribute: "active-group" })
-    activeGroup: string = "";
-    @attr({ attribute: "current-group" })
-    currentGroup: string = "";
-}
-TestElementExpression.define({
-    name: "test-element-expression",
-    template: declarativeTemplate(),
-});
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});

package/test/declarative/fixtures/bindings/attribute/state.json DELETED Viewed

@@ -1,8 +0,0 @@
-{
-    "type": "checkbox",
-    "active-group": "work",
-    "current-group": "work",
-    "activeGroup": "work",
-    "currentGroup": "work",
-    "isEnabled": false
-}

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

@@ -1,11 +0,0 @@
-<f-template name="test-element">
-    <template> <input type="{{type}}" disabled> </template>
-</f-template>
-<f-template name="test-element-property">
-    <template> <input type="checkbox" ?disabled="{{!isEnabled}}"> </template>
-</f-template>
-<f-template name="test-element-expression">
-    <template>
-        <input ?disabled="{{activeGroup == currentGroup}}" type="button">
-    </template>
-</f-template>

package/test/declarative/fixtures/bindings/content/entry.html DELETED Viewed

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

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

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element text="Hello world"><template shadowrootmode="open" shadowroot="open"><!--fe:b-->Hello world<!--fe:/b--></template></test-element>
-        <test-element-unescaped html="&lt;p&gt;Hello world&lt;/p&gt;"><template shadowrootmode="open" shadowroot="open"><!--fe:b--><p>Hello world</p><!--fe:/b--></template></test-element-unescaped>
-<f-template name="test-element">
-    <template>{{text}}</template>
-</f-template>
-<f-template name="test-element-unescaped">
-    <template>{{{html}}}</template>
-</f-template>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/bindings/content/main.ts DELETED Viewed

@@ -1,27 +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";
-class TestElement extends FASTElement {
-    @attr
-    text: string = "Hello";
-}
-TestElement.define({
-    name: "test-element",
-    template: declarativeTemplate(),
-});
-class TestElementUnescaped extends FASTElement {
-    public html = `<p>Hello world</p>`;
-}
-TestElementUnescaped.define({
-    name: "test-element-unescaped",
-    template: declarativeTemplate(),
-});
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});

package/test/declarative/fixtures/bindings/content/state.json DELETED Viewed

@@ -1,4 +0,0 @@
-{
-    "text": "Hello world",
-    "html": "<p>Hello world</p>"
-}

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

@@ -1,6 +0,0 @@
-<f-template name="test-element">
-    <template>{{text}}</template>
-</f-template>
-<f-template name="test-element-unescaped">
-    <template>{{{html}}}</template>
-</f-template>

package/test/declarative/fixtures/bindings/dot-syntax/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/bindings/dot-syntax/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/bindings/dot-syntax/index.html DELETED Viewed

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-    <head>
-        <meta charset="utf-8">
-        <title></title>
-    </head>
-    <body>
-        <test-element><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->bar<!--fe:/b--></span>
-        <span><!--fe:b--><!--fe:/b--></span>
-        <span><!--fe:b-->FOO<!--fe:/b--></span>
-        <button data-fe="1">Set b</button>
-        <button data-fe="1">Set a.b1</button>
-        <button data-fe="1">Set a.b2.c</button>
-        <!--fe:b-->
-            <!--fe:b--><!--fe:r-->
-                <!--fe:b-->
-                    <div><!--fe:b-->Item 1<!--fe:/b--></div>
-                <!--fe:/b-->
-            <!--fe:/r--><!--fe:r-->
-                <!--fe:b-->
-                    <div><!--fe:b-->Item 2<!--fe:/b--></div>
-                <!--fe:/b-->
-            <!--fe:/r--><!--fe:r-->
-                <!--fe:b--><!--fe:/b-->
-            <!--fe:/r--><!--fe:/b-->
-        <!--fe:/b--></template></test-element>
-<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>
-        <script type="module" src="./main.ts"></script>
-    </body>
-</html>

package/test/declarative/fixtures/bindings/dot-syntax/main.ts DELETED Viewed

@@ -1,59 +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 { observerMap } from "@microsoft/fast-element/observer-map.js";
-class TestElement extends FASTElement {
-    public object: any = {
-        a: {
-            b2: {
-                c: "FOO",
-            },
-        },
-        b: "bar",
-        c: [
-            {
-                name: "Item 1",
-                status: "active",
-            },
-            {
-                name: "Item 2",
-                status: "active",
-            },
-            {
-                status: "active",
-            },
-        ],
-    };
-    public handleBClick = () => {
-        this.object.b = "Hello";
-    };
-    public handleAB1Click = () => {
-        if (this.object.a) {
-            this.object.a.b1 = "World";
-        } else {
-            this.object.a = {
-                b1: "World",
-            };
-        }
-    };
-    public handleAB2CClick = () => {
-        this.object.a.b2.c = "Pluto";
-    };
-}
-TestElement.define(
-    {
-        name: "test-element",
-        template: declarativeTemplate(),
-    },
-    [observerMap()],
-);
-enableHydration({
-    hydrationComplete() {
-        (window as any).hydrationCompleted = true;
-    },
-});

package/test/declarative/fixtures/bindings/dot-syntax/state.json DELETED Viewed

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

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

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

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

package/test/declarative/fixtures/bindings/event/index.html DELETED Viewed

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

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

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

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

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

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

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