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

package/dist/esm/components/utilities.js

@@ -0,0 +1,229 @@
+const openBinding = "{{";
+const closeBinding = "}}";
+const openTagStart = "<f-";
+const tagEnd = ">";
+const closeTagStart = "</f-";
+const attributeDirectivePrefix = "f-";
+/**
+ * Get the index of the next matching tag
+ * @param openingTagStartSlice - The slice starting from the opening tag
+ * @param openingTag - The opening tag string
+ * @param closingTag - The closing tag
+ * @param openingTagStartIndex - The opening tag start index derived from the innerHTML
+ * @returns index
+ */
+export function getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex) {
+    let tagCount = 1;
+    let matchingCloseTagIndex = -1;
+    const openingTagLength = openingTag.length;
+    const closingTagLength = closingTag.length;
+    let nextSlice = openingTagStartSlice.slice(openingTagLength);
+    let nextOpenTag = nextSlice.indexOf(openingTag);
+    let nextCloseTag = nextSlice.indexOf(closingTag);
+    let tagOffset = openingTagStartIndex + openingTagLength;
+    do {
+        // if a closing tag has been found for the last open tag, decrement the tag count
+        if (nextOpenTag > nextCloseTag || nextOpenTag === -1) {
+            tagCount--;
+            if (tagCount === 0) {
+                matchingCloseTagIndex = nextCloseTag + tagOffset;
+                break;
+            }
+            tagOffset += nextCloseTag + closingTagLength;
+            nextSlice = nextSlice.slice(nextCloseTag + closingTagLength);
+            nextOpenTag = nextSlice.indexOf(openingTag);
+            nextCloseTag = nextSlice.indexOf(closingTag);
+        }
+        else if (nextOpenTag !== -1) {
+            tagCount++;
+            tagOffset += nextOpenTag + openingTagLength;
+            nextSlice = nextSlice.slice(nextOpenTag + openingTagLength);
+            nextOpenTag = nextSlice.indexOf(openingTag);
+            nextCloseTag = nextSlice.indexOf(closingTag);
+        }
+        if (tagCount === 0) {
+            matchingCloseTagIndex = nextCloseTag + tagOffset;
+            break;
+        }
+    } while (tagCount > 0);
+    return matchingCloseTagIndex;
+}
+/**
+ * Get the next directive
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DirectiveBehaviorConfig - A configuration object
+ */
+function getNextDirectiveBehavior(innerHTML) {
+    const openingTagStartIndex = innerHTML.indexOf(openTagStart);
+    const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
+    const openingTagEndIndex = openingTagStartSlice.indexOf(tagEnd) + openingTagStartIndex + 1;
+    const directiveTag = innerHTML
+        .slice(openingTagStartIndex + 3, openingTagEndIndex - 1)
+        .split(" ")[0];
+    const directiveValue = getNextDataBindingBehavior(innerHTML);
+    const openingTag = `${openTagStart}${directiveTag}`;
+    const closingTag = `${closeTagStart}${directiveTag}${tagEnd}`;
+    const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex);
+    return {
+        type: "templateDirective",
+        name: directiveTag,
+        value: innerHTML.slice(directiveValue.openingEndIndex, directiveValue.closingStartIndex),
+        openingTagStartIndex,
+        openingTagEndIndex,
+        closingTagStartIndex: matchingCloseTagIndex,
+        closingTagEndIndex: matchingCloseTagIndex + closingTag.length,
+    };
+}
+/**
+ * Determine if this binding is an attribute binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param openingStartIndex - The index of the binding opening marker
+ * @returns boolean
+ */
+function isAttribute(innerHTML, openingStartIndex) {
+    return innerHTML.slice(openingStartIndex - 2, openingStartIndex - 1) === "=";
+}
+/**
+ * Determine if this binding is an attribute directive binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param openingStartIndex - The index of the binding opening marker
+ * @returns boolean
+ */
+function isAttributeDirective(innerHTML, openingStartIndex) {
+    const splitHTML = innerHTML.slice(0, openingStartIndex - 2).split(" ");
+    return splitHTML[splitHTML.length - 1].startsWith(attributeDirectivePrefix);
+}
+/**
+ * Get the attribute binding config
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param config - The base configuration of the binding
+ * @returns AttributeDataBindingBehaviorConfig
+ */
+function getAttributeDataBindingConfig(innerHTML, config) {
+    const splitInnerHTML = innerHTML.slice(0, config.openingStartIndex).split(" ");
+    const firstCharOfAttribute = splitInnerHTML[splitInnerHTML.length - 1][0];
+    const aspect = firstCharOfAttribute === "?" ||
+        firstCharOfAttribute === "@" ||
+        firstCharOfAttribute === ":"
+        ? firstCharOfAttribute
+        : null;
+    return Object.assign(Object.assign({}, config), { subtype: "attribute", aspect });
+}
+/**
+ * Get the attribute directive binding config
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param config - The base configuration of the binding
+ * @returns AttributeDirectiveBindingBehaviorConfig
+ */
+function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
+    const splitInnerHTML = innerHTML.slice(0, config.openingStartIndex).split(" ");
+    const lastItem = splitInnerHTML[splitInnerHTML.length - 1];
+    const equals = lastItem.indexOf("=");
+    const name = lastItem.slice(2, equals);
+    return Object.assign(Object.assign({}, config), { subtype: "attributeDirective", name: name });
+}
+/**
+ * Get the content data binding config
+ * @param config - The base configuration of the binding
+ * @returns ContentDataBindingBehaviorConfig
+ */
+function getContentDataBindingConfig(config) {
+    return Object.assign(Object.assign({}, config), { subtype: "content" });
+}
+/**
+ * Get the next data binding
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DataBindingBehaviorConfig - A configuration object
+ */
+function getNextDataBindingBehavior(innerHTML) {
+    const openingStartIndex = innerHTML.indexOf(openBinding);
+    const closingStartIndex = innerHTML.indexOf(closeBinding);
+    const partialConfig = {
+        type: "dataBinding",
+        openingStartIndex,
+        openingEndIndex: openingStartIndex + 2,
+        closingStartIndex,
+        closingEndIndex: closingStartIndex + 2,
+    };
+    return isAttributeDirective(innerHTML, openingStartIndex)
+        ? getAttributeDirectiveDataBindingConfig(innerHTML, partialConfig)
+        : isAttribute(innerHTML, openingStartIndex)
+            ? getAttributeDataBindingConfig(innerHTML, partialConfig)
+            : getContentDataBindingConfig(partialConfig);
+}
+/**
+ * Get the next behavior
+ * @param innerHTML - The innerHTML string to evaluate
+ * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
+ */
+export function getNextBehavior(innerHTML) {
+    const dataBindingOpen = innerHTML.indexOf(openBinding);
+    const directiveBindingOpen = innerHTML.indexOf(openTagStart);
+    if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
+        return null;
+    }
+    if (directiveBindingOpen !== -1 && dataBindingOpen > directiveBindingOpen) {
+        return getNextDirectiveBehavior(innerHTML);
+    }
+    return getNextDataBindingBehavior(innerHTML);
+}
+/**
+ * Gets all the partials with their IDs
+ * @param innerHTML - The innerHTML string to evaluate
+ * @param offset - The index offset from the innerHTML
+ * @param partials - The partials found
+ * @returns {[key: string]: PartialTemplateConfig}
+ */
+export function getAllPartials(innerHTML, offset = 0, partials = {}) {
+    const openingTag = `${openTagStart}partial`;
+    const openingTagStartIndex = innerHTML.indexOf(openingTag);
+    if (openingTagStartIndex >= 0) {
+        const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
+        const closingTag = `${closeTagStart}partial${tagEnd}`;
+        const closingTagLength = closingTag.length;
+        const matchingCloseTagIndex = getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, closingTag, openingTagStartIndex) + closingTagLength;
+        const startId = openingTagStartIndex + ' id="'.length + openingTag.length;
+        const endId = innerHTML.slice(startId).indexOf('"') + startId;
+        const id = innerHTML.slice(startId, endId);
+        const openingTagEndIndex = openingTagStartSlice.indexOf(">") + 1 + openingTagStartIndex;
+        const closingTagStartIndex = matchingCloseTagIndex - closingTagLength;
+        partials[id] = {
+            innerHTML: innerHTML.slice(openingTagEndIndex, closingTagStartIndex),
+            startIndex: openingTagEndIndex + offset,
+            endIndex: closingTagStartIndex + offset,
+        };
+        offset += matchingCloseTagIndex;
+        return getAllPartials(innerHTML.slice(matchingCloseTagIndex), offset, partials);
+    }
+    return partials;
+}
+/**
+ * Create a function to resolve a value from an object using a path with dot syntax.
+ * e.g. "foo.bar"
+ * @param path - The dot syntax path to an objects property.
+ * @param self - Where the first item in the path path refers to the item itself (used by repeat).
+ * @returns A function to access the value from a given path.
+ */
+export function pathResolver(path, self = false) {
+    let splitPath = path.split(".");
+    if (self) {
+        if (splitPath.length > 1) {
+            splitPath = splitPath.slice(1);
+        }
+        else {
+            return (accessibleObject) => {
+                return accessibleObject;
+            };
+        }
+    }
+    if (splitPath.length === 1) {
+        return (accessibleObject) => {
+            return accessibleObject === null || accessibleObject === void 0 ? void 0 : accessibleObject[splitPath[0]];
+        };
+    }
+    return (accessibleObject) => {
+        return splitPath.reduce((previousAccessors, pathItem) => {
+            return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
+        }, accessibleObject);
+    };
+}

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

@@ -0,0 +1,160 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+import { getNextBehavior, getAllPartials, getIndexOfNextMatchingTag, pathResolver } 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.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.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.openingStartIndex).toEqual(15);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.openingEndIndex).toEqual(17);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingStartIndex).toEqual(30);
+            expect(templateResult === null || templateResult === void 0 ? void 0 : templateResult.closingEndIndex).toEqual(32);
+        }));
+    }));
+    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.openingStartIndex).toEqual(16);
+            expect(result === null || result === void 0 ? void 0 : result.openingEndIndex).toEqual(18);
+            expect(result === null || result === void 0 ? void 0 : result.closingStartIndex).toEqual(22);
+            expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(24);
+        }));
+        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.openingStartIndex).toEqual(17);
+            expect(result === null || result === void 0 ? void 0 : result.openingEndIndex).toEqual(19);
+            expect(result === null || result === void 0 ? void 0 : result.closingStartIndex).toEqual(31);
+            expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(33);
+        }));
+        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.openingStartIndex).toEqual(14);
+            expect(result === null || result === void 0 ? void 0 : result.openingEndIndex).toEqual(16);
+            expect(result === null || result === void 0 ? void 0 : result.closingStartIndex).toEqual(21);
+            expect(result === null || result === void 0 ? void 0 : result.closingEndIndex).toEqual(23);
+        }));
+    }));
+    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");
+        }));
+    }));
+}));

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,19 @@
+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",
+});
+TemplateElement.define({
+    name: "f-template",
+});

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

@@ -0,0 +1,17 @@
+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");
+    }));
+}));

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

@@ -0,0 +1,19 @@
+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",
+});
+TemplateElement.define({
+    name: "f-template",
+});

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

@@ -0,0 +1,33 @@
+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 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,24 @@
+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",
+});
+TemplateElement.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,16 @@
+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",
+});
+TemplateElement.define({
+    name: "f-template",
+});

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

@@ -0,0 +1,12 @@
+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", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/event");
+        const customElement = yield page.locator("test-element");
+        let msgCount = 0;
+        yield page.on("console", msg => msgCount++);
+        yield customElement.locator("button").click();
+        expect(msgCount).toEqual(1);
+    }));
+}));

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

@@ -0,0 +1,16 @@
+import { TemplateElement } from "@microsoft/fast-html";
+import { FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.handleClick = () => {
+            console.log("click!");
+        };
+    }
+}
+TestElement.define({
+    name: "test-element",
+});
+TemplateElement.define({
+    name: "f-template",
+});

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

@@ -0,0 +1,31 @@
+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",
+});
+TemplateElement.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");
+    }));
+}));