@microsoft/fast-html 1.0.0-alpha.6 → 1.0.0-alpha.8

package/README.md

@@ -47,7 +47,15 @@ Example:
 
 ### Syntax
 
-All bindings use a handlebars syntax.
+All bindings use a handlebars-like syntax.
+
+Some bindings are only relevant to the browser, such as for click handlers or other pieces of dynamic interaction. As such, their bindings use single curly braces `{}`, this is to prevent an intial SSR (Server Side Rendering) or other build time rendering technologies from needing to interpret them.
+
+If a binding is relevant to both client and the back end rendering engine, it will use `{{}}` or `{{{}}}` depending on what type of data injection is being done.
+
+Browser-only bindings:
+- Event bindings
+- Attribute directives
 
 #### Content binding
 
@@ -60,45 +68,47 @@ All bindings use a handlebars syntax.
 Event bindings must include the `()` as well as being preceeded by `@` in keeping with `@microsoft/fast-element` tagged template `html` syntax.
 
 ```html
-<button @click="{{handleClick()}}"></button>
+<button @click="{handleClick()}"></button>
 ```
 
 In addition you may include an event or attribute or observable, events are denoted with `e` as a reserved letter.
 
 Event:
 ```html
-<button @click="{{handleClick(e)}}"></button>
+<button @click="{handleClick(e)}"></button>
 ```
 
 Attribute/Observable:
 ```html
-<button @click="{{handleClick(foo)}}"></button>
+<button @click="{handleClick(foo)}"></button>
 ```
 
 #### Directives
 
 Directives are assumed to be either an attribute directive or a directive that also serves a template. Both are prepended by `f-`. The logic of these directives and what their use cases are is explained in the [FAST html documentation](https://fast.design/docs/getting-started/html-directives).
 
+Attribute directives are part of [client side binding](#syntax) and therefore use the `{}` syntax.
+
 Attribute directives include:
 - **slotted**
 
     Example:
     ```html
-    <slot f-slotted="{{slottedNodes}}"></slot>
+    <slot f-slotted="{slottedNodes}"></slot>
     ```
 
 - **children**
 
     Example:
     ```html
-    <ul f-children="{{listItems}}"><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul>
+    <ul f-children="{listItems}"><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul>
     ```
 
 - **ref**
 
     Example:
     ```html
-    <video f-ref="{{video}}"></video>
+    <video f-ref="{video}"></video>
     ```
 
 Template directives include:
@@ -152,6 +162,15 @@ Where the right operand can be either a reference to a value (string e.g. `{{foo
     <f-apply partial="test" value="{{items}}"></f-apply>
     ```
 
+#### Unescaped HTML
+
+You can add unescaped HTML using triple braces, this will create an additional `div` element as the HTML needs an element to bind to. Where possible it is advisable to not use unescaped HTML and instead use other binding techniques as well as partials.
+
+Example:
+```html
+{{{html}}}
+```
+
 ### Writing Components
 
 When writing components with the intention of using the declarative HTML syntax, it is imperative that components are written with styling and rendering of the component to be less reliant on any JavaScript state management. An example of this is relying on `elementInterals` state to style a component.

package/dist/dts/components/utilities.d.ts

@@ -1,6 +1,7 @@
 type BehaviorType = "dataBinding" | "templateDirective";
 type TemplateDirective = "when" | "repeat" | "apply";
 export type AttributeDirective = "children" | "slotted" | "ref";
+type DataBindingBindingType = "client" | "default" | "unescaped";
 interface BehaviorConfig {
     type: BehaviorType;
 }
@@ -18,6 +19,7 @@ export interface AttributeDirectiveBindingBehaviorConfig extends BaseDataBinding
 export type DataBindingBehaviorConfig = ContentDataBindingBehaviorConfig | AttributeDataBindingBehaviorConfig | AttributeDirectiveBindingBehaviorConfig;
 export interface BaseDataBindingBehaviorConfig extends BehaviorConfig {
     type: "dataBinding";
+    bindingType: DataBindingBindingType;
     openingStartIndex: number;
     openingEndIndex: number;
     closingStartIndex: number;
@@ -99,4 +101,11 @@ interface OperatorConfig {
  * @returns Operator
  */
 export declare function getOperator(value: string): OperatorConfig;
+/**
+ * This is the transform utility for rationalizing declarative HTML syntax
+ * with bindings in the ViewTemplate
+ * @param innerHTML The innerHTML to transform
+ * @param index The index to start the current slice of HTML to evaluate
+ */
+export declare function transformInnerHTML(innerHTML: string, index?: number): string;
 export {};

package/dist/esm/components/template.js

@@ -1,7 +1,12 @@
 import { __awaiter, __decorate, __metadata } from "tslib";
-import { attr, FAST, FASTElement, fastElementRegistry, ViewTemplate, } from "@microsoft/fast-element";
+import { attr, DOMAspect, FAST, FASTElement, fastElementRegistry, ViewTemplate, } from "@microsoft/fast-element";
 import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
-import { getAllPartials, getNextBehavior, getOperator, pathResolver, } from "./utilities.js";
+import { getAllPartials, getNextBehavior, getOperator, pathResolver, transformInnerHTML, } from "./utilities.js";
+function allow(tagName, aspect, aspectName, sink) {
+    return (target, name, value, ...rest) => {
+        sink(target, name, value, ...rest);
+    };
+}
 /**
  * The <f-template> custom element that will provide view logic to the element
  */
@@ -19,8 +24,9 @@ class TemplateElement extends FASTElement {
                 const registeredFastElement = fastElementRegistry.getByType(value);
                 const template = this.getElementsByTagName("template").item(0);
                 if (template) {
-                    yield this.resolveAllPartials(this.innerHTML);
-                    const { strings, values } = yield this.resolveStringsAndValues(this.innerHTML);
+                    const innerHTML = yield transformInnerHTML(this.innerHTML);
+                    yield this.resolveAllPartials(innerHTML);
+                    const { strings, values } = yield this.resolveStringsAndValues(innerHTML);
                     if (registeredFastElement) {
                         // all new elements will get the updated template
                         registeredFastElement.template =
@@ -56,7 +62,15 @@ class TemplateElement extends FASTElement {
      * @param values - The interpreted values.
      */
     resolveTemplateOrBehavior(strings, values) {
-        return ViewTemplate.create(strings, values, DOMPolicy.create());
+        return ViewTemplate.create(strings, values, DOMPolicy.create({
+            guards: {
+                aspects: {
+                    [DOMAspect.property]: {
+                        innerHTML: allow,
+                    },
+                },
+            },
+        }));
     }
     /**
      * Resolve a template directive

package/dist/esm/components/utilities.js

@@ -1,9 +1,17 @@
-const openBinding = "{{";
-const closeBinding = "}}";
+const openClientSideBinding = "{";
+const closeClientSideBinding = "}";
+const openContentBinding = "{{";
+const closeContentBinding = "}}";
+const openUnescapedBinding = "{{{";
+const closeUnescapedBinding = "}}}";
 const openTagStart = "<f-";
 const tagEnd = ">";
 const closeTagStart = "</f-";
 const attributeDirectivePrefix = "f-";
+const startInnerHTMLDiv = `<div :innerHTML="{{`;
+const startInnerHTMLDivLength = startInnerHTMLDiv.length;
+const endInnerHTMLDiv = `}}"></div>`;
+const endInnerHTMLDivLength = endInnerHTMLDiv.length;
 /**
  * Get the index of the next matching tag
  * @param openingTagStartSlice - The slice starting from the opening tag
@@ -131,20 +139,57 @@ function getAttributeDirectiveDataBindingConfig(innerHTML, config) {
 function getContentDataBindingConfig(config) {
     return Object.assign(Object.assign({}, config), { subtype: "content" });
 }
+function getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML) {
+    // {{{}}} binding
+    const openingUnescapedStartIndex = innerHTML.indexOf(openUnescapedBinding);
+    const closingUnescapedStartIndex = innerHTML.indexOf(closeUnescapedBinding);
+    // {{}} binding
+    const openingContentStartIndex = innerHTML.indexOf(openContentBinding);
+    const closingContentStartIndex = innerHTML.indexOf(closeContentBinding);
+    // {} binding
+    const openingClientStartIndex = innerHTML.indexOf(openClientSideBinding);
+    const closingClientStartIndex = innerHTML.indexOf(closeClientSideBinding);
+    if (openingUnescapedStartIndex !== -1 &&
+        openingUnescapedStartIndex <= openingContentStartIndex &&
+        openingUnescapedStartIndex <= openingClientStartIndex) {
+        // is unescaped {{{}}}
+        return {
+            openingStartIndex: openingUnescapedStartIndex,
+            closingStartIndex: closingUnescapedStartIndex,
+            bindingType: "unescaped",
+        };
+    }
+    else if (openingContentStartIndex !== -1 &&
+        openingContentStartIndex <= openingClientStartIndex) {
+        // is default {{}}
+        return {
+            openingStartIndex: openingContentStartIndex,
+            closingStartIndex: closingContentStartIndex,
+            bindingType: "default",
+        };
+    }
+    // is client {}
+    return {
+        openingStartIndex: openingClientStartIndex,
+        closingStartIndex: closingClientStartIndex,
+        bindingType: "client",
+    };
+}
 /**
  * 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 { openingStartIndex, closingStartIndex, bindingType } = getIndexAndBindingTypeOfNextDataBindingBehavior(innerHTML);
+    const bindingLength = bindingType === "client" ? 1 : bindingType === "default" ? 2 : 3;
     const partialConfig = {
         type: "dataBinding",
+        bindingType,
         openingStartIndex,
-        openingEndIndex: openingStartIndex + 2,
+        openingEndIndex: openingStartIndex + bindingLength,
         closingStartIndex,
-        closingEndIndex: closingStartIndex + 2,
+        closingEndIndex: closingStartIndex + bindingLength,
     };
     return isAttributeDirective(innerHTML, openingStartIndex)
         ? getAttributeDirectiveDataBindingConfig(innerHTML, partialConfig)
@@ -158,7 +203,7 @@ function getNextDataBindingBehavior(innerHTML) {
  * @returns DataBindingBehaviorConfig | DirectiveBehaviorConfig | null - A configuration object or null
  */
 export function getNextBehavior(innerHTML) {
-    const dataBindingOpen = innerHTML.indexOf(openBinding);
+    const dataBindingOpen = innerHTML.indexOf(openClientSideBinding); // client side binding will capture all bindings starting with "{"
     const directiveBindingOpen = innerHTML.indexOf(openTagStart);
     if (dataBindingOpen === -1 && directiveBindingOpen === -1) {
         return null;
@@ -294,3 +339,32 @@ export function getOperator(value) {
         rightIsValue: null,
     };
 }
+/**
+ * This is the transform utility for rationalizing declarative HTML syntax
+ * with bindings in the ViewTemplate
+ * @param innerHTML The innerHTML to transform
+ * @param index The index to start the current slice of HTML to evaluate
+ */
+export function transformInnerHTML(innerHTML, index = 0) {
+    const sliceToEvaluate = innerHTML.slice(index);
+    const nextBinding = getNextBehavior(sliceToEvaluate);
+    let transformedInnerHTML = innerHTML;
+    if (nextBinding && nextBinding.type === "dataBinding") {
+        if (nextBinding.bindingType === "unescaped") {
+            transformedInnerHTML = `${innerHTML.slice(0, index)}${sliceToEvaluate.slice(0, nextBinding.openingStartIndex)}${startInnerHTMLDiv}${sliceToEvaluate.slice(nextBinding.openingStartIndex + 3, nextBinding.closingStartIndex)}${endInnerHTMLDiv}${sliceToEvaluate.slice(nextBinding.closingStartIndex + 3)}`;
+            return transformInnerHTML(transformedInnerHTML, index +
+                startInnerHTMLDivLength +
+                endInnerHTMLDivLength +
+                nextBinding.closingStartIndex -
+                3);
+        }
+        else if (nextBinding.bindingType === "client") {
+            return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingEndIndex);
+        }
+        return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingStartIndex - 2);
+    }
+    else if (nextBinding) {
+        return transformInnerHTML(transformedInnerHTML, index + nextBinding.closingTagEndIndex);
+    }
+    return transformedInnerHTML;
+}

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

@@ -1,6 +1,6 @@
 import { __awaiter } from "tslib";
 import { expect, test } from "@playwright/test";
-import { getNextBehavior, getAllPartials, getIndexOfNextMatchingTag, pathResolver } from "./utilities.js";
+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* () {
@@ -8,6 +8,7 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
             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);
@@ -21,21 +22,23 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
             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 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(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);
+            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* () {
@@ -69,37 +72,40 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
     }));
     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 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(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);
+            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 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(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);
+            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 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(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);
+            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* () {
@@ -160,4 +166,21 @@ test.describe("utilities", () => __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 a 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 a 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/fixtures/binding/binding.spec.js

@@ -14,4 +14,10 @@ test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* ()
         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

@@ -14,6 +14,15 @@ __decorate([
 TestElement.define({
     name: "test-element",
 });
+class TestElementUnescaped extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.html = `<p>Hello world</p>`;
+    }
+}
+TestElementUnescaped.define({
+    name: "test-element-unescaped",
+});
 TemplateElement.define({
     name: "f-template",
 });

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

@@ -20,6 +20,10 @@ test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* ()
                 "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");

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

@@ -16,7 +16,10 @@ test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* ()
                 "C"
             ];
         });
-        yield expect(customElement).toHaveJSProperty("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");