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

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, getIndexOfNextMatchingTag, pathResolver, transformInnerHTML, getExpressionChain, extractPathsFromChainedExpression, } 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,60 +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);
-        }));
-    }));
-    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);
+            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("getIndexOfNextMatchingTag", () => __awaiter(void 0, void 0, void 0, function* () {
@@ -145,16 +128,235 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
     }));
     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");
+            expect(pathResolver("foo", null, 0, {})({ 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");
+            expect(pathResolver("foo.bar.bat", null, 0, {})({ 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");
+            expect(pathResolver("foo", "foo", 0, {})("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");
+            expect(pathResolver("foo.bar.bat", "foo", 0, {})({ bar: { bat: "baz" } }, {})).toEqual("baz");
+        }));
+        test("should resolve a path with context", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("foo", "parent", 1, {})({}, { 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>`);
+        }));
+    }));
+    test.describe("getExpressionChain", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should resolve a truthy value", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(getExpressionChain("foo")).toEqual({
+                expression: {
+                    operator: "access",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: null,
+                    rightIsValue: null,
+                }
+            });
+        }));
+        test("should resolve a falsy value", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(getExpressionChain("!foo")).toEqual({
+                expression: {
+                    operator: "!",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: null,
+                    rightIsValue: null,
+                }
+            });
+        }));
+        test("should resolve a path not equal to string value", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(getExpressionChain("foo != 'test'")).toEqual({
+                expression: {
+                    operator: "!=",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: "test",
+                    rightIsValue: true,
+                }
+            });
+        }));
+        test("should resolve a path not equal to boolean value", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(getExpressionChain("foo != false")).toEqual({
+                expression: {
+                    operator: "!=",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: false,
+                    rightIsValue: true,
+                }
+            });
+        }));
+        test("should resolve a path not equal to numerical value", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(getExpressionChain("foo != 5")).toEqual({
+                expression: {
+                    operator: "!=",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: 5,
+                    rightIsValue: true,
+                }
+            });
+        }));
+        test("should resolve chained expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(getExpressionChain("foo != 'bat' && bar == 'baz'")).toEqual({
+                expression: {
+                    operator: "!=",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: "bat",
+                    rightIsValue: true,
+                },
+                next: {
+                    operator: "&&",
+                    expression: {
+                        operator: "==",
+                        left: "bar",
+                        leftIsValue: false,
+                        right: "baz",
+                        rightIsValue: true,
+                    }
+                }
+            });
+            expect(getExpressionChain("foo && bar")).toEqual({
+                expression: {
+                    operator: "access",
+                    left: "foo",
+                    leftIsValue: false,
+                    right: null,
+                    rightIsValue: null,
+                },
+                next: {
+                    operator: "&&",
+                    expression: {
+                        operator: "access",
+                        left: "bar",
+                        leftIsValue: false,
+                        right: null,
+                        rightIsValue: null,
+                    }
+                }
+            });
+        }));
+    }));
+    test.describe("extractPathsFromChainedExpression", () => __awaiter(void 0, void 0, void 0, function* () {
+        test("should extract paths from simple access expression", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user")).toBe(true);
+        }));
+        test("should extract paths from dot notation expression", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.name");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.name")).toBe(true);
+        }));
+        test("should extract paths from comparison with literal values", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.age > 18");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.age")).toBe(true);
+        }));
+        test("should extract paths from comparison between two properties", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.age >= admin.minAge");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("user.age")).toBe(true);
+            expect(paths.has("admin.minAge")).toBe(true);
+        }));
+        test("should extract paths from chained AND expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("isActive && user.name");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("isActive")).toBe(true);
+            expect(paths.has("user.name")).toBe(true);
+        }));
+        test("should extract paths from chained OR expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.isAdmin || permissions.canEdit");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("user.isAdmin")).toBe(true);
+            expect(paths.has("permissions.canEdit")).toBe(true);
+        }));
+        test("should extract paths from complex chained expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.age > 18 && user.status == 'active' || admin.override");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(3);
+            expect(paths.has("user.age")).toBe(true);
+            expect(paths.has("user.status")).toBe(true);
+            expect(paths.has("admin.override")).toBe(true);
+        }));
+        test("should extract paths from NOT expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("!user.isDisabled");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.isDisabled")).toBe(true);
+        }));
+        test("should handle expressions with only literal values", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("5 > 3");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(0);
+        }));
+        test("should handle mixed literal and property expressions", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("count > 0 && status == 'ready'");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("count")).toBe(true);
+            expect(paths.has("status")).toBe(true);
+        }));
+        test("should deduplicate identical paths", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("user.name && user.name != 'anonymous'");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("user.name")).toBe(true);
+        }));
+        test("should handle HTML entity operators", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("isValid &amp;&amp; data.ready");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(2);
+            expect(paths.has("isValid")).toBe(true);
+            expect(paths.has("data.ready")).toBe(true);
+        }));
+        test("should handle deeply nested property paths", () => __awaiter(void 0, void 0, void 0, function* () {
+            const expressionChain = getExpressionChain("app.user.profile.settings.theme");
+            expect(expressionChain).toBeDefined();
+            const paths = extractPathsFromChainedExpression(expressionChain);
+            expect(paths.size).toEqual(1);
+            expect(paths.has("app.user.profile.settings.theme")).toBe(true);
         }));
     }));
 }));

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 import { attr, FASTElement } from "@microsoft/fast-element";
 class TestElement extends FASTElement {
     constructor() {
@@ -11,8 +11,9 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "type", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 import { attr, FASTElement } from "@microsoft/fast-element";
 class TestElement extends FASTElement {
     constructor() {
@@ -11,8 +11,19 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "text", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
+    templateOptions: "defer-and-hydrate",
+});
+class TestElementUnescaped extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.html = `<p>Hello world</p>`;
+    }
+}
+RenderableFASTElement(TestElementUnescaped).defineAsync({
+    name: "test-element-unescaped",
+    templateOptions: "defer-and-hydrate",
 });
 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/children/main.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import { TemplateElement } from "@microsoft/fast-html";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 import { FASTElement, observable } from "@microsoft/fast-element";
 class TestElement extends FASTElement {
     constructor() {
@@ -16,8 +16,9 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "list", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

@@ -1,9 +1,116 @@
 import { __awaiter } from "tslib";
 import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
+test.describe("f-template dot-syntax bindings", () => __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");
+        yield expect(customElement.locator("span").nth(0)).toHaveText("bar");
+    }));
+    test("should display initial property values correctly", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        // Check initial values
+        yield expect(customElement.locator("span").nth(0)).toHaveText("bar");
+        yield expect(customElement.locator("span").nth(1)).toHaveText("");
+        yield expect(customElement.locator("span").nth(2)).toHaveText("FOO");
+    }));
+    test("should update object.b when 'Set b' button is clicked", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setBButton = customElement.locator("button").nth(0);
+        const bSpan = customElement.locator("span").nth(0);
+        // Verify initial state
+        yield expect(bSpan).toHaveText("bar");
+        // Click the "Set b" button
+        yield setBButton.click();
+        // Verify the value updated
+        yield expect(bSpan).toHaveText("Hello");
+    }));
+    test("should update object.a.b1 when 'Set a.b1' button is clicked", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setAB1Button = customElement.locator("button").nth(1);
+        const ab1Span = customElement.locator("span").nth(1);
+        // Verify initial state (should be empty/undefined)
+        yield expect(ab1Span).toHaveText("");
+        // Click the "Set a.b1" button
+        yield setAB1Button.click();
+        // Verify the value updated
+        yield expect(ab1Span).toHaveText("World");
+    }));
+    test("should update object.a.b2.c when 'Set a.b2.c' button is clicked", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setAB2CButton = customElement.locator("button").nth(2);
+        const ab2cSpan = customElement.locator("span").nth(2);
+        // Click the "Set a.b2.c" button
+        yield setAB2CButton.click();
+        // Verify the value updated
+        yield expect(ab2cSpan).toHaveText("Pluto");
+    }));
+    test("should handle multiple property updates independently", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setBButton = customElement.locator("button").nth(0);
+        const setAB1Button = customElement.locator("button").nth(1);
+        const setAB2CButton = customElement.locator("button").nth(2);
+        const bSpan = customElement.locator("span").nth(0);
+        const ab1Span = customElement.locator("span").nth(1);
+        const ab2cSpan = customElement.locator("span").nth(2);
+        // Update multiple properties
+        yield setBButton.click();
+        yield setAB1Button.click();
+        yield setAB2CButton.click();
+        // Verify all values are updated correctly
+        yield expect(bSpan).toHaveText("Hello");
+        yield expect(ab1Span).toHaveText("World");
+        yield expect(ab2cSpan).toHaveText("Pluto");
+    }));
+    test("should maintain property values after multiple clicks", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setBButton = customElement.locator("button").nth(0);
+        const bSpan = customElement.locator("span").nth(0);
+        // Click multiple times to ensure consistency
+        yield setBButton.click();
+        yield expect(bSpan).toHaveText("Hello");
+        yield setBButton.click();
+        yield expect(bSpan).toHaveText("Hello"); // Should remain the same
+        yield setBButton.click();
+        yield expect(bSpan).toHaveText("Hello"); // Should still be the same
+    }));
+    test("should update nested properties correctly", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setAB1Button = customElement.locator("button").nth(1);
+        const setAB2CButton = customElement.locator("button").nth(2);
+        const ab1Span = customElement.locator("span").nth(1);
+        const ab2cSpan = customElement.locator("span").nth(2);
+        // Test nested property updates
+        yield setAB1Button.click();
+        yield expect(ab1Span).toHaveText("World");
+        yield setAB2CButton.click();
+        yield expect(ab2cSpan).toHaveText("Pluto");
+        // Verify both nested properties coexist
+        yield expect(ab1Span).toHaveText("World");
+        yield expect(ab2cSpan).toHaveText("Pluto");
+    }));
+    test("should have correct button labels", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        // Verify button labels
+        yield expect(customElement.locator("button").nth(0)).toHaveText("Set b");
+        yield expect(customElement.locator("button").nth(1)).toHaveText("Set a.b1");
+        yield expect(customElement.locator("button").nth(2)).toHaveText("Set a.b2.c");
+    }));
+    test("should reflect property changes in DOM immediately", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/dot-syntax");
+        const customElement = yield page.locator("test-element");
+        const setBButton = customElement.locator("button").nth(0);
+        const bSpan = customElement.locator("span").nth(0);
+        // Verify immediate DOM update without additional waiting
+        yield setBButton.click();
+        // Should update immediately due to reactive system
+        yield expect(bSpan).toHaveText("Hello", { timeout: 1000 });
     }));
 }));

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

@@ -1,16 +1,42 @@
-import { TemplateElement } from "@microsoft/fast-html";
 import { FASTElement } from "@microsoft/fast-element";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
 class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.object = {
-            foo: "bar",
+            b: "bar",
+            a: {
+                b2: {
+                    c: "FOO",
+                },
+            },
+        };
+        this.handleBClick = () => {
+            this.object.b = "Hello";
+        };
+        this.handleAB1Click = () => {
+            if (this.object.a) {
+                this.object.a.b1 = "World";
+            }
+            else {
+                this.object.a = {
+                    b1: "World",
+                };
+            }
+        };
+        this.handleAB2CClick = () => {
+            this.object.a.b2.c = "Pluto";
         };
     }
 }
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
+    templateOptions: "defer-and-hydrate",
 });
-TemplateElement.define({
+TemplateElement.options({
+    "test-element": {
+        observerMap: "all",
+    },
+}).define({
     name: "f-template",
 });