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

@microsoft/fast-element 2.10.3 → 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 (351) hide show

package/test/declarative/fixtures/extensions/attribute-map/main.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { attr } from "@microsoft/fast-element/attr.js";
+import { attributeMap } from "@microsoft/fast-element/attribute-map.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+class AttributeMapTestElement extends FASTElement {
+    public setFoo() {
+        (this as any).foo = "hello";
+    }
+    public setFooBar() {
+        (this as any)["foo-bar"] = "world";
+    }
+    public setMultiple() {
+        (this as any).foo = "updated";
+        (this as any)["foo-bar"] = "also-updated";
+    }
+}
+AttributeMapTestElement.define(
+    {
+        name: "attribute-map-test-element",
+        template: declarativeTemplate(),
+    },
+    [attributeMap()],
+);
+class AttributeMapWithExistingAttrElement extends FASTElement {
+    @attr
+    foo: string = "original";
+}
+AttributeMapWithExistingAttrElement.define(
+    {
+        name: "attribute-map-existing-attr-test-element",
+        template: declarativeTemplate(),
+    },
+    [attributeMap()],
+);

package/test/declarative/fixtures/extensions/attribute-map/state.json ADDED Viewed

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

package/test/declarative/fixtures/extensions/attribute-map/templates.html ADDED Viewed

@@ -0,0 +1,14 @@
+<f-template name="attribute-map-test-element">
+    <template>
+        <div class="foo-value">{{foo}}</div>
+        <div class="foo-bar-value">{{foo-bar}}</div>
+        <button type="button" @click="{setFoo()}">Set Foo</button>
+        <button type="button" @click="{setFooBar()}">Set FooBar</button>
+        <button type="button" @click="{setMultiple()}">Set Multiple</button>
+    </template>
+</f-template>
+<f-template name="attribute-map-existing-attr-test-element">
+    <template>
+        <div class="existing-foo-value">{{foo}}</div>
+    </template>
+</f-template>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/entry.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <naming-strategy-test id="test-element" foo-bar="{{fooBar}}" my-custom-prop="{{myCustomProp}}"></naming-strategy-test>
+        <naming-strategy-no-dash-test id="no-dash-test" label="{{label}}"></naming-strategy-no-dash-test>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/fast-build.config.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html",
+    "attribute-name-strategy": "camelCase"
+}

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <naming-strategy-test id="test-element" foo-bar="default-foo" my-custom-prop="default-prop"><template shadowrootmode="open" shadowroot="open"><div class="foo-bar-value"><!--fe:b-->default-foo<!--fe:/b--></div>
+        <div class="my-custom-prop-value"><!--fe:b-->default-prop<!--fe:/b--></div></template></naming-strategy-test>
+        <naming-strategy-no-dash-test id="no-dash-test" label="default-label"><template shadowrootmode="open" shadowroot="open"><div class="label-value"><!--fe:b-->default-label<!--fe:/b--></div></template></naming-strategy-no-dash-test>
+<f-template name="naming-strategy-test">
+    <template>
+        <div class="foo-bar-value">{{fooBar}}</div>
+        <div class="my-custom-prop-value">{{myCustomProp}}</div>
+    </template>
+</f-template>
+<f-template name="naming-strategy-no-dash-test">
+    <template>
+        <div class="label-value">{{label}}</div>
+    </template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/main.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { attributeMap } from "@microsoft/fast-element/attribute-map.js";
+import { declarativeTemplate } from "@microsoft/fast-element/declarative.js";
+import { FASTElement } from "@microsoft/fast-element/fast-element.js";
+class NamingStrategyTestElement extends FASTElement {}
+NamingStrategyTestElement.define(
+    {
+        name: "naming-strategy-test",
+        template: declarativeTemplate(),
+    },
+    [
+        attributeMap({
+            "attribute-name-strategy": "camelCase",
+        }),
+    ],
+);
+class NamingStrategyNoDashTestElement extends FASTElement {}
+NamingStrategyNoDashTestElement.define(
+    {
+        name: "naming-strategy-no-dash-test",
+        template: declarativeTemplate(),
+    },
+    [
+        attributeMap({
+            "attribute-name-strategy": "camelCase",
+        }),
+    ],
+);

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/state.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+    "fooBar": "default-foo",
+    "myCustomProp": "default-prop",
+    "label": "default-label"
+}

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy/templates.html ADDED Viewed

@@ -0,0 +1,11 @@
+<f-template name="naming-strategy-test">
+    <template>
+        <div class="foo-bar-value">{{fooBar}}</div>
+        <div class="my-custom-prop-value">{{myCustomProp}}</div>
+    </template>
+</f-template>
+<f-template name="naming-strategy-no-dash-test">
+    <template>
+        <div class="label-value">{{label}}</div>
+    </template>
+</f-template>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy-camel-case/entry.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <test-camel-case foo-bar="hello"></test-camel-case>
+        <test-camel-case-multi my-custom-prop="world"></test-camel-case-multi>
+        <test-camel-case-no-dash label="simple"></test-camel-case-no-dash>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy-camel-case/fast-build.config.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+    "entry": "entry.html",
+    "state": "state.json",
+    "output": "index.html",
+    "templates": "templates.html",
+    "attribute-name-strategy": "camelCase"
+}

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy-camel-case/index.html ADDED Viewed

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <test-camel-case foo-bar="hello"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->hello<!--fe:/b--></span></template></test-camel-case>
+        <test-camel-case-multi my-custom-prop="world"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->world<!--fe:/b--></span></template></test-camel-case-multi>
+        <test-camel-case-no-dash label="simple"><template shadowrootmode="open" shadowroot="open"><span><!--fe:b-->simple<!--fe:/b--></span></template></test-camel-case-no-dash>
+<f-template name="test-camel-case">
+    <template> <span>{{fooBar}}</span> </template>
+</f-template>
+<f-template name="test-camel-case-multi">
+    <template> <span>{{myCustomProp}}</span> </template>
+</f-template>
+<f-template name="test-camel-case-no-dash">
+    <template> <span>{{label}}</span> </template>
+</f-template>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy-camel-case/main.ts ADDED Viewed

@@ -0,0 +1,37 @@
+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 TestCamelCase extends FASTElement {
+    @attr({ attribute: "foo-bar" })
+    fooBar: string = "";
+}
+TestCamelCase.define({
+    name: "test-camel-case",
+    template: declarativeTemplate(),
+});
+class TestCamelCaseMulti extends FASTElement {
+    @attr({ attribute: "my-custom-prop" })
+    myCustomProp: string = "";
+}
+TestCamelCaseMulti.define({
+    name: "test-camel-case-multi",
+    template: declarativeTemplate(),
+});
+class TestCamelCaseNoDash extends FASTElement {
+    @attr
+    label: string = "";
+}
+TestCamelCaseNoDash.define({
+    name: "test-camel-case-no-dash",
+    template: declarativeTemplate(),
+});
+enableHydration({
+    hydrationComplete() {
+        (window as any).hydrationCompleted = true;
+    },
+});

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy-camel-case/state.json ADDED Viewed

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

package/test/declarative/fixtures/extensions/attribute-map-naming-strategy-camel-case/templates.html ADDED Viewed

@@ -0,0 +1,9 @@
+<f-template name="test-camel-case">
+    <template> <span>{{fooBar}}</span> </template>
+</f-template>
+<f-template name="test-camel-case-multi">
+    <template> <span>{{myCustomProp}}</span> </template>
+</f-template>
+<f-template name="test-camel-case-no-dash">
+    <template> <span>{{label}}</span> </template>
+</f-template>

package/test/declarative/fixtures/extensions/observer-map/entry.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <title></title>
+    </head>
+    <body>
+        <div class="container">
+            <observer-map-simple-array-test-element></observer-map-simple-array-test-element>
+            <observer-map-test-element></observer-map-test-element>
+            <observer-map-with-observables-test-element></observer-map-with-observables-test-element>
+        </div>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>

package/test/declarative/fixtures/extensions/observer-map/fast-build.config.json ADDED Viewed

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