@microsoft/fast-html 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/esm/components/utilities.spec.js

@@ -0,0 +1,189 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+import { getNextBehavior, getAllPartials, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML } from "./utilities.js";
+test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* () {
+    test.describe("content", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("get the next content binding", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "{{text}}";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("content");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("default");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingStartIndex).toEqual(0);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingEndIndex).toEqual(2);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(6);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingEndIndex).toEqual(8);
+        }));
+    }));
+    test.describe("attributes", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("get the next attribute binding", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<input type=\"{{type}}\" disabled>";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.aspect).toEqual(null);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("default");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingStartIndex).toEqual(13);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingEndIndex).toEqual(15);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(19);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingEndIndex).toEqual(21);
+        }));
+        test("get the next attribute event binding", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<input @click=\"{handleClick()}\">";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("dataBinding");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.subtype).toEqual("attribute");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.aspect).toEqual("@");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.bindingType).toEqual("client");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingStartIndex).toEqual(15);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingEndIndex).toEqual(16);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(29);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingEndIndex).toEqual(30);
+        }));
+    }));
+    test.describe("templates", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("when directive", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<f-when value=\"{{show}}\">Hello world</f-when>";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("templateDirective");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagStartIndex).toEqual(0);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagEndIndex).toEqual(25);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagStartIndex).toEqual(36);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagEndIndex).toEqual(45);
+        }));
+        test("when directive with content", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "Hello pluto<f-when value=\"{{show}}\">Hello world</f-when>";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("templateDirective");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagStartIndex).toEqual(11);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagEndIndex).toEqual(36);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagStartIndex).toEqual(47);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagEndIndex).toEqual(56);
+        }));
+        test("when directive with binding", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<f-when value=\"{{show}}\">{{text}}</f-when>";
+            const templateResult = getNextBehavior(innerHTML);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.type).toEqual("templateDirective");
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagStartIndex).toEqual(0);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingTagEndIndex).toEqual(25);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagStartIndex).toEqual(33);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingTagEndIndex).toEqual(42);
+        }));
+    }));
+    test.describe("attributes", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("children directive", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<ul f-children=\"{list}\"></ul>";
+            const result = getNextBehavior(innerHTML);
+            expect(result === null || result === void 0 ? void 0 : result.type).toEqual("dataBinding");
+            expect(result === null || result === void 0 ? void 0 : result.subtype).toEqual("attributeDirective");
+            expect(result === null || result === void 0 ? void 0 : result.name).toEqual("children");
+            expect(result === null || result === void 0 ? void 0 : result.bindingType).toEqual("client");
+            expect(result === null || result === void 0 ? void 0 : result.openingStartIndex).toEqual(16);
+            expect(result === null || result === void 0 ? void 0 : result.openingEndIndex).toEqual(17);
+            expect(result === null || result === void 0 ? void 0 : result.closingStartIndex).toEqual(21);
+            expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(22);
+        }));
+        test("slotted directive", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<slot f-slotted=\"{slottedNodes}\"></slot>";
+            const result = getNextBehavior(innerHTML);
+            expect(result === null || result === void 0 ? void 0 : result.type).toEqual("dataBinding");
+            expect(result === null || result === void 0 ? void 0 : result.subtype).toEqual("attributeDirective");
+            expect(result === null || result === void 0 ? void 0 : result.name).toEqual("slotted");
+            expect(result === null || result === void 0 ? void 0 : result.bindingType).toEqual("client");
+            expect(result === null || result === void 0 ? void 0 : result.openingStartIndex).toEqual(17);
+            expect(result === null || result === void 0 ? void 0 : result.openingEndIndex).toEqual(18);
+            expect(result === null || result === void 0 ? void 0 : result.closingStartIndex).toEqual(30);
+            expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(31);
+        }));
+        test("ref directive", () => __awaiter(void 0, void 0, void 0, function* () {
+            const innerHTML = "<video f-ref=\"{video}\"></video>";
+            const result = getNextBehavior(innerHTML);
+            expect(result === null || result === void 0 ? void 0 : result.type).toEqual("dataBinding");
+            expect(result === null || result === void 0 ? void 0 : result.subtype).toEqual("attributeDirective");
+            expect(result === null || result === void 0 ? void 0 : result.name).toEqual("ref");
+            expect(result === null || result === void 0 ? void 0 : result.bindingType).toEqual("client");
+            expect(result === null || result === void 0 ? void 0 : result.openingStartIndex).toEqual(14);
+            expect(result === null || result === void 0 ? void 0 : result.openingEndIndex).toEqual(15);
+            expect(result === null || result === void 0 ? void 0 : result.closingStartIndex).toEqual(20);
+            expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(21);
+        }));
+    }));
+    test.describe("partials", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("get a single partial", () => __awaiter(void 0, void 0, void 0, function* () {
+            const partialContent = "{{text}}";
+            const partial = `<f-partial id="foo">${partialContent}</f-partial>`;
+            const allPartials = getAllPartials(partial);
+            expect(allPartials.foo.innerHTML).toEqual(partialContent);
+            expect(allPartials.foo.startIndex).toEqual(20);
+            expect(allPartials.foo.endIndex).toEqual(28);
+        }));
+        test("get multiple partials", () => __awaiter(void 0, void 0, void 0, function* () {
+            const partial1Content = "{{text}}";
+            const partial2Content = "{{othertext}}";
+            const partial1 = `<f-partial id="foo">${partial1Content}</f-partial>`;
+            const partial2 = `<f-partial id="foobar">${partial2Content}</f-partial>`;
+            const allPartials = getAllPartials(`${partial1}${partial2}`);
+            expect(allPartials.foo.innerHTML).toEqual(partial1Content);
+            expect(allPartials.foo.startIndex).toEqual(20);
+            expect(allPartials.foo.endIndex).toEqual(28);
+            expect(allPartials.foobar.innerHTML).toEqual(partial2Content);
+            expect(allPartials.foobar.startIndex).toEqual(63);
+            expect(allPartials.foobar.endIndex).toEqual(76);
+        }));
+    }));
+    test.describe("getIndexOfNextMatchingTag", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should resolve a single tag", () => __awaiter(void 0, void 0, void 0, function* () {
+            const index = getIndexOfNextMatchingTag(`<div>Hello world</div>`, `<div`, `</div>`, 0);
+            expect(index).toEqual(16);
+        }));
+        test("should resolve when there is a nested tag", () => __awaiter(void 0, void 0, void 0, function* () {
+            const index = getIndexOfNextMatchingTag(`<div><div>Hello world</div></div>`, `<div`, `</div>`, 0);
+            expect(index).toEqual(27);
+        }));
+        test("should get adjacent tags", () => __awaiter(void 0, void 0, void 0, function* () {
+            const index = getIndexOfNextMatchingTag(`<div>Hello world</div><div>Hello pluto</div>`, `<div`, `</div>`, 0);
+            expect(index).toEqual(16);
+        }));
+        test("should add an offset for content before the tag", () => __awaiter(void 0, void 0, void 0, function* () {
+            const index = getIndexOfNextMatchingTag(`<div>Hello world</div>`, `<div`, `</div>`, 23);
+            expect(index).toEqual(39);
+        }));
+    }));
+    test.describe("pathResolver", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should resolve a path with no nesting", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("foo")({ foo: "bar" }, {})).toEqual("bar");
+        }));
+        test("should resolve a path with nesting", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("foo.bar.bat")({ foo: { bar: { bat: "baz" } } }, {})).toEqual("baz");
+        }));
+        test("should resolve a path with no nesting and self reference", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("foo", true)("bar", {})).toEqual("bar");
+        }));
+        test("should resolve a path with nesting and self reference", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("foo.bar.bat", true)({ bar: { bat: "baz" } }, {})).toEqual("baz");
+        }));
+        test("should resolve a path with context", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("../foo")({}, { parent: { foo: "bar" } })).toEqual("bar");
+        }));
+    }));
+    test.describe("transformInnerHTML", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should resolve a single unescaped data binding", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(transformInnerHTML(`{{{html}}}`)).toEqual(`<div :innerHTML="{{html}}"></div>`);
+        }));
+        test("should resolve multiple unescaped data bindings", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(transformInnerHTML(`{{{foo}}}{{{bar}}}`)).toEqual(`<div :innerHTML="{{foo}}"></div><div :innerHTML="{{bar}}"></div>`);
+        }));
+        test("should resolve an unescaped data bindings in a mix of other data content bindings", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(transformInnerHTML(`{{text1}}{{{foo}}}{{text2}}{{{bar}}}{{text3}}`)).toEqual(`{{text1}}<div :innerHTML="{{foo}}"></div>{{text2}}<div :innerHTML="{{bar}}"></div>{{text3}}`);
+        }));
+        test("should resolve default data bindings in sequence", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(transformInnerHTML(`{{text1}}{{text2}}`)).toEqual(`{{text1}}{{text2}}`);
+        }));
+        test("should resolve an unescaped data bindings in a mix of other data attribute bindings and nesting", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(transformInnerHTML(`<div data-foo="{{text1}}">{{{foo}}}</div><div data-bar="{{text2}}"></div>{{{bar}}}<div data-bat="{{text3}}"></div>`)).toEqual(`<div data-foo="{{text1}}"><div :innerHTML="{{foo}}"></div></div><div data-bar="{{text2}}"></div><div :innerHTML="{{bar}}"></div><div data-bat="{{text3}}"></div>`);
+        }));
+        test("should resolve a non-data and non-attribute bindings", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(transformInnerHTML(`<button @click="{handleNoArgsClick()}">No arguments</button>`)).toEqual(`<button @click="{handleNoArgsClick()}">No arguments</button>`);
+        }));
+    }));
+}));

package/dist/esm/debug.js

@@ -0,0 +1,3 @@
+export const debugMessages = {
+    [2000 /* noTemplateProvided */]: `The first child of the <f-template> must be a <template>, this is missing from ${name}.`,
+};

package/dist/esm/fixtures/attribute/attribute.spec.js

@@ -0,0 +1,23 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a non-binding attribute", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/attribute");
+        const customElement = page.locator("test-element");
+        const customElementInput = customElement.locator("input");
+        yield expect(customElementInput).toHaveAttribute("disabled");
+    }));
+    test("create an attribute binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/attribute");
+        const customElement = page.locator("test-element");
+        yield expect(customElement).toHaveAttribute("type", "checkbox");
+        yield expect(customElement.locator("input[type='checkbox']")).toHaveCount(1);
+        yield page.evaluate(() => {
+            var _a;
+            const customElement = document.getElementsByTagName("test-element");
+            (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.setAttribute("type", "radio");
+        });
+        yield expect(customElement).toHaveAttribute("type", "radio");
+        yield expect(customElement.locator("input[type='radio']")).toHaveCount(1);
+    }));
+}));

package/dist/esm/fixtures/attribute/main.js

@@ -0,0 +1,26 @@
+import { __decorate, __metadata } from "tslib";
+import { TemplateElement } from "@microsoft/fast-html";
+import { attr, FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.type = "radio";
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TestElement.prototype, "type", void 0);
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/binding/binding.spec.js

@@ -0,0 +1,23 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/binding");
+        const customElement = yield page.locator("test-element");
+        yield expect(yield customElement.getAttribute("text")).toEqual("Hello world");
+        yield expect(customElement).toHaveText("Hello world");
+        yield page.evaluate(() => {
+            var _a;
+            const customElement = document.getElementsByTagName("test-element");
+            (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.setAttribute("text", "Hello pluto");
+        });
+        yield expect(yield customElement.getAttribute("text")).toEqual("Hello pluto");
+        yield expect(customElement).toHaveText("Hello pluto");
+    }));
+    test("create an unescaped binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/binding");
+        const customElement = yield page.locator("test-element-unescaped");
+        yield expect(yield customElement.locator("p").count()).toEqual(1);
+        yield expect(customElement).toHaveText("Hello world");
+    }));
+}));

package/dist/esm/fixtures/binding/main.js

@@ -0,0 +1,40 @@
+import { __decorate, __metadata } from "tslib";
+import { TemplateElement } from "@microsoft/fast-html";
+import { attr, FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.text = "Hello";
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TestElement.prototype, "text", void 0);
+TestElement.define({
+    name: "test-element",
+});
+class TestElementUnescaped extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.html = `<p>Hello world</p>`;
+    }
+}
+TestElementUnescaped.define({
+    name: "test-element-unescaped",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+    "test-element-unescaped": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/children/children.spec.js

@@ -0,0 +1,37 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a children directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/children");
+        const listItemCount1 = yield page.evaluate(() => {
+            var _a;
+            const customElement = document.getElementsByTagName("test-element");
+            const listItems = (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.listItems.filter((listItem) => {
+                return listItem instanceof HTMLLIElement;
+            });
+            return listItems === null || listItems === void 0 ? void 0 : listItems.length;
+        });
+        expect(listItemCount1).toEqual(2);
+        yield page.evaluate(() => {
+            const customElement = document.getElementsByTagName("test-element");
+            customElement.item(0).list = [
+                "A",
+                "B",
+                "C"
+            ];
+        });
+        const timeout = new Promise(function (resolve) {
+            setTimeout(resolve, 100);
+        });
+        yield timeout;
+        const listItemCount2 = yield page.evaluate(() => {
+            var _a;
+            const customElement = document.getElementsByTagName("test-element");
+            const listItems = (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.listItems.filter((listItem) => {
+                return listItem instanceof HTMLLIElement;
+            });
+            return listItems === null || listItems === void 0 ? void 0 : listItems.length;
+        });
+        expect(listItemCount2).toEqual(3);
+    }));
+}));

package/dist/esm/fixtures/children/main.js

@@ -0,0 +1,31 @@
+import { __decorate, __metadata } from "tslib";
+import { TemplateElement } from "@microsoft/fast-html";
+import { FASTElement, observable } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.listItems = [];
+        this.list = ["Foo", "Bar"];
+    }
+}
+__decorate([
+    observable,
+    __metadata("design:type", Array)
+], TestElement.prototype, "listItems", void 0);
+__decorate([
+    observable,
+    __metadata("design:type", Array)
+], TestElement.prototype, "list", void 0);
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/dot-syntax/dot-syntax.spec.js

@@ -0,0 +1,9 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a object property reference using dot syntax in a binding", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        yield expect(customElement).toHaveText("bar");
+    }));
+}));

package/dist/esm/fixtures/dot-syntax/main.js

@@ -0,0 +1,23 @@
+import { TemplateElement } from "@microsoft/fast-html";
+import { FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.object = {
+            foo: "bar",
+        };
+    }
+}
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/event/event.spec.js

@@ -0,0 +1,28 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create an event attribute without arguments", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/event");
+        const customElement = yield page.locator("test-element");
+        let message;
+        yield page.on("console", msg => message = msg.text());
+        yield customElement.locator("button").nth(0).click();
+        expect(message).toEqual("no args");
+    }));
+    test("create an event attribute with an event argument", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/event");
+        const customElement = yield page.locator("test-element");
+        let message;
+        yield page.on("console", msg => message = msg.text());
+        yield customElement.locator("button").nth(1).click();
+        expect(message).toEqual("click");
+    }));
+    test("create an event attribute with an attribute argument", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/event");
+        const customElement = yield page.locator("test-element");
+        let message;
+        yield page.on("console", msg => message = msg.text());
+        yield customElement.locator("button").nth(2).click();
+        expect(message).toEqual("bar");
+    }));
+}));

package/dist/esm/fixtures/event/main.js

@@ -0,0 +1,35 @@
+import { __decorate, __metadata } from "tslib";
+import { TemplateElement } from "@microsoft/fast-html";
+import { attr, FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.foo = "";
+        this.handleNoArgsClick = () => {
+            console.log("no args");
+        };
+        this.handleEventArgClick = (e) => {
+            console.log(e.type);
+        };
+        this.handleAttributeArgClick = (foo) => {
+            console.log(foo);
+        };
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], TestElement.prototype, "foo", void 0);
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/partial/main.js

@@ -0,0 +1,38 @@
+import { TemplateElement } from "@microsoft/fast-html";
+import { FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.items = [
+            {
+                text: "Hello",
+            },
+            {
+                text: "Earth",
+                items: [
+                    {
+                        text: "Pluto",
+                        items: [
+                            {
+                                text: "Mars",
+                            },
+                        ],
+                    },
+                ],
+            },
+        ];
+    }
+}
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/partial/partial.spec.js

@@ -0,0 +1,14 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a partial", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/partial");
+        const customElement = yield page.locator("#test");
+        let customElementListItems = yield customElement.locator("li");
+        expect(yield customElementListItems.count()).toEqual(4);
+        expect(yield customElementListItems.nth(0).textContent()).toEqual("Hello");
+        expect(yield customElementListItems.nth(1).textContent()).toContain("Earth");
+        expect(yield customElementListItems.nth(2).textContent()).toContain("Pluto");
+        expect(yield customElementListItems.nth(3).textContent()).toContain("Mars");
+    }));
+}));

package/dist/esm/fixtures/ref/main.js

@@ -0,0 +1,21 @@
+import { TemplateElement } from "@microsoft/fast-html";
+import { FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.video = null;
+    }
+}
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/ref/ref.spec.js

@@ -0,0 +1,13 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a ref directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/ref");
+        const isVideo = yield page.evaluate(() => {
+            var _a;
+            const customElement = document.getElementsByTagName("test-element");
+            return ((_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.video) instanceof HTMLVideoElement;
+        });
+        expect(isVideo).toEqual(true);
+    }));
+}));

package/dist/esm/fixtures/repeat/main.js

@@ -0,0 +1,27 @@
+import { __decorate, __metadata } from "tslib";
+import { TemplateElement } from "@microsoft/fast-html";
+import { FASTElement, observable } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.list = ["Foo", "Bar"];
+        this.parent = "Bat";
+    }
+}
+__decorate([
+    observable,
+    __metadata("design:type", Array)
+], TestElement.prototype, "list", void 0);
+TestElement.define({
+    name: "test-element",
+    shadowOptions: null,
+});
+TemplateElement.options({
+    "test-element": {
+        shadowOptions: {
+            mode: "closed",
+        },
+    },
+}).define({
+    name: "f-template",
+});

package/dist/esm/fixtures/repeat/repeat.spec.js

@@ -0,0 +1,29 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a repeat directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/repeat");
+        const customElement = yield page.locator("test-element");
+        let customElementListItems = yield customElement.locator("li");
+        expect(yield customElementListItems.count()).toEqual(2);
+        expect(yield customElementListItems.nth(0).textContent()).toEqual("Foo - Bat");
+        expect(yield customElementListItems.nth(1).textContent()).toEqual("Bar - Bat");
+        yield page.evaluate(() => {
+            const customElement = document.getElementsByTagName("test-element");
+            customElement.item(0).list = [
+                "A",
+                "B",
+                "C"
+            ];
+        });
+        const timeout = new Promise(function (resolve) {
+            setTimeout(resolve, 100);
+        });
+        yield timeout;
+        customElementListItems = yield customElement.locator("li");
+        expect(yield customElementListItems.count()).toEqual(3);
+        expect(yield customElementListItems.nth(0).textContent()).toEqual("A - Bat");
+        expect(yield customElementListItems.nth(1).textContent()).toEqual("B - Bat");
+        expect(yield customElementListItems.nth(2).textContent()).toEqual("C - Bat");
+    }));
+}));