@microsoft/fast-html 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/esm/fixtures/observer-map/observer-map.spec.js

@@ -0,0 +1,174 @@
+import { __awaiter } from "tslib";
+import { test, expect } from "@playwright/test";
+test.describe("ObserverMap", () => __awaiter(void 0, void 0, void 0, function* () {
+    test.beforeEach(({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/observer-map");
+        yield page.waitForSelector("observer-map-test-element");
+    }));
+    test("should render initial users with deeply nested properties", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check that initial users are rendered
+        yield expect(page.locator(".user-card")).toHaveCount(2);
+        // Check deeply nested properties are displayed
+        yield expect(page.locator("text=Alice Johnson")).toHaveCount(3);
+        yield expect(page.locator("text=Bob Smith")).toHaveCount(2);
+        // Check nested location data
+        yield expect(page.locator("text=New York, USA")).toBeVisible();
+        yield expect(page.locator("text=London, UK")).toBeVisible();
+        // Check deeply nested preferences
+        yield expect(page.locator("text=Theme: dark")).toBeVisible();
+        yield expect(page.locator("text=Theme: light")).toBeVisible();
+    }));
+    test("should update deeply nested age property", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial age should be 28 for Alice
+        yield expect(page.locator("text=Age: 28 years old")).toBeVisible();
+        // Click the age increment button for Alice (user ID 1)
+        yield page.locator("button:has-text('Age +1')").first().click();
+        // Age should now be 29
+        yield expect(page.locator("text=Age: 29 years old")).toBeVisible();
+        yield expect(page.locator("text=Age: 28 years old")).not.toBeVisible();
+    }));
+    test("should toggle theme in deeply nested preferences", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial theme should be dark for Alice
+        yield expect(page.locator("text=Theme: dark").first()).toBeVisible();
+        // Click the toggle theme button for Alice
+        yield page.locator("button:has-text('Toggle Theme')").first().click();
+        // Theme should now be light
+        yield expect(page.locator("text=Theme: light").first()).toBeVisible();
+    }));
+    test("should update location", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial location should be New York, USA
+        yield expect(page.locator("text=New York, USA")).toBeVisible();
+        // Click the change location button for Alice
+        yield page.locator("button:has-text('Change Location')").first().click();
+        // Location should now be Tokyo, Japan
+        yield expect(page.locator("text=Tokyo, Japan")).toBeVisible();
+        yield expect(page.locator("text=New York, USA")).not.toBeVisible();
+    }));
+    test("should update notification settings", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check initial notification settings for Alice
+        yield expect(page.locator("text=Email Notifications: true").first()).toBeVisible();
+        yield expect(page.locator("text=Push Notifications: false").first()).toBeVisible();
+        yield expect(page.locator("text=Notification Frequency: daily").first()).toBeVisible();
+        // Click update notifications button
+        yield page.locator("button:has-text('Update Notifications')").first().click();
+        // Settings should be toggled
+        yield expect(page.locator("text=Email Notifications: false").first()).toBeVisible();
+        yield expect(page.locator("text=Push Notifications: true").first()).toBeVisible();
+        yield expect(page.locator("text=Notification Frequency: weekly").first()).toBeVisible();
+    }));
+    test("should add and remove categories in deeply nested arrays", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check initial categories for Alice (should include "tech")
+        yield expect(page.locator(".tag:has-text('tech')")).toHaveCount(2);
+        // Add sports category
+        yield page.locator("button:has-text('Add Category')").first().click();
+        yield expect(page.locator(".tag:has-text('sports')").first()).toBeVisible();
+        // Remove tech category
+        yield page.locator("button:has-text('Remove Tech Category')").first().click();
+        yield expect(page.locator(".tag:has-text('tech')")).toHaveCount(1);
+    }));
+    test("should increment post likes and update nested metadata", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const aliceCard = page.locator(".user-card").first();
+        const firstPost = aliceCard.locator(".post-card").first();
+        // Check initial likes (should be 25)
+        yield expect(firstPost.locator("text=25 likes")).toBeVisible();
+        // Click like button
+        yield firstPost.locator("button:has-text('Like Post')").click();
+        // Likes should increment to 26
+        yield expect(firstPost.locator("text=26 likes")).toBeVisible();
+        // Views should also increment (random amount)
+        yield expect(firstPost.locator("text=views")).toBeVisible();
+    }));
+    test("should add new posts to users", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const aliceCard = page.locator(".user-card").first();
+        // Initial post count should be 2
+        yield expect(aliceCard.locator(".post-card")).toHaveCount(2);
+        // Add new post
+        yield aliceCard.locator("button:has-text('Add New Post')").click();
+        // Should now have 3 posts
+        yield expect(aliceCard.locator(".post-card")).toHaveCount(3);
+    }));
+    test("should update the likes on a new post", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const aliceCard = page.locator(".user-card").first();
+        // Add new post first
+        yield aliceCard.locator("button:has-text('Add New Post')").click();
+        // Should now have 3 posts
+        yield expect(aliceCard.locator(".post-card")).toHaveCount(3);
+        // Get the newly added post (should be the last one)
+        const newPost = aliceCard.locator(".post-card").nth(2);
+        // Check initial likes on the new post (should be 0)
+        yield expect(newPost.locator("text=0 likes")).toBeVisible();
+        // Click like button on the new post
+        yield newPost.locator("button:has-text('Like Post')").click();
+        // Likes should increment to 1
+        yield expect(newPost.locator("text=1 likes")).toBeVisible();
+        yield expect(newPost.locator("text=0 likes")).not.toBeVisible();
+    }));
+    test("should add and remove users from the array", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initial user count should be 2
+        yield expect(page.locator(".user-card")).toHaveCount(2);
+        yield expect(page.locator("text=Total Users: 2")).toBeVisible();
+        // Add new user
+        yield page.locator("button:has-text('Add New User')").click();
+        // Should now have 3 users
+        yield expect(page.locator(".user-card")).toHaveCount(3);
+        yield expect(page.locator("text=Total Users: 3")).toBeVisible();
+        yield expect(page.locator("text=User 3")).toBeVisible();
+        // Remove a user (Alice - first remove button)
+        yield page.locator("button:has-text('Remove User')").first().click();
+        // Should be back to 2 users
+        yield expect(page.locator(".user-card")).toHaveCount(2);
+        yield expect(page.locator("text=Total Users: 2")).toBeVisible();
+    }));
+    test("should update global stats with nested metrics", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Check initial engagement stats
+        const initialDaily = yield page.locator(".stats .nested-info").nth(1).textContent();
+        // Update stats
+        yield page.locator(".stats .controls button").nth(0).click();
+        yield page.evaluate(() => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => resolve(true));
+            });
+        });
+        // Stats should be updated (values should change)
+        const updatedDaily = yield page.locator(".stats .nested-info").nth(1).textContent();
+        expect(updatedDaily).not.toBe(initialDaily);
+    }));
+    test("should handle user selection with conditional rendering", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Initially, Alice (ID 1) should be selected
+        yield expect(page.locator("text=⭐ SELECTED").first()).toBeVisible();
+        // Select Bob (user ID 2)
+        yield page.locator(".user-card").nth(1).locator("button:has-text('Select User')").click();
+        // Bob should now show as selected
+        const bobCard = page.locator(".user-card").nth(1);
+        yield expect(bobCard.locator("text=⭐ SELECTED")).toBeVisible();
+        // Alice should no longer show as selected
+        const aliceCard = page.locator(".user-card").first();
+        yield expect(aliceCard.locator("text=⭐ SELECTED")).not.toBeVisible();
+    }));
+    test("should update when a nested property has been defined", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        const undefinedText = yield page.locator(".nested-define").textContent();
+        yield expect(undefinedText).toEqual("");
+        // Define the object
+        yield page.locator("button:has-text('Define internal object')").nth(0).click();
+        yield page.evaluate(() => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => resolve(true));
+            });
+        });
+        const definedText = yield page.locator(".nested-define").textContent();
+        yield expect(definedText).toEqual("Hello world");
+    }));
+    test("should update when a nested property has been updated", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Define the object
+        yield page.locator("button:has-text('Define internal object')").nth(0).click();
+        // Update the object
+        yield page.locator("button:has-text('Update internal object')").nth(0).click();
+        yield page.evaluate(() => {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => resolve(true));
+            });
+        });
+        const updatedText = yield page.locator(".nested-define").textContent();
+        yield expect(updatedText).toEqual("Hello pluto");
+    }));
+}));

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

@@ -1,5 +1,6 @@
+import { FASTElement } from "@microsoft/fast-element";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-class TestElement extends RenderableFASTElement {
+class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.items = [
@@ -22,7 +23,7 @@ class TestElement extends RenderableFASTElement {
         ];
     }
 }
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

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

@@ -1,11 +1,12 @@
+import { FASTElement } from "@microsoft/fast-element";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-class TestElement extends RenderableFASTElement {
+class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.video = null;
     }
 }
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { observable } from "@microsoft/fast-element";
-class TestElement extends RenderableFASTElement {
+import { FASTElement, observable } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.list = ["Foo", "Bar"];
@@ -12,11 +12,11 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "list", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementInnerWhen extends RenderableFASTElement {
+class TestElementInnerWhen extends FASTElement {
     constructor() {
         super(...arguments);
         this.list = [
@@ -35,7 +35,7 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElementInnerWhen.prototype, "list", void 0);
-TestElementInnerWhen.defineAsync({
+RenderableFASTElement(TestElementInnerWhen).defineAsync({
     name: "test-element-inner-when",
     templateOptions: "defer-and-hydrate",
 });

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { observable } from "@microsoft/fast-element";
-class TestElement extends RenderableFASTElement {
+import { FASTElement, observable } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.slottedNodes = [];
@@ -24,7 +24,7 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "slottedBarNodes", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { attr } from "@microsoft/fast-element";
-class TestElement extends RenderableFASTElement {
+import { attr, FASTElement } from "@microsoft/fast-element";
+class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.show = false;
@@ -11,11 +11,11 @@ __decorate([
     attr({ mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElement.prototype, "show", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementNot extends RenderableFASTElement {
+class TestElementNot extends FASTElement {
     constructor() {
         super(...arguments);
         this.hide = false;
@@ -25,11 +25,11 @@ __decorate([
     attr({ mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementNot.prototype, "hide", void 0);
-TestElementNot.defineAsync({
+RenderableFASTElement(TestElementNot).defineAsync({
     name: "test-element-not",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementEquals extends RenderableFASTElement {
+class TestElementEquals extends FASTElement {
     constructor() {
         super(...arguments);
         this.varA = 0;
@@ -39,11 +39,11 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementEquals.prototype, "varA", void 0);
-TestElementEquals.defineAsync({
+RenderableFASTElement(TestElementEquals).defineAsync({
     name: "test-element-equals",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementNotEquals extends RenderableFASTElement {
+class TestElementNotEquals extends FASTElement {
     constructor() {
         super(...arguments);
         this.varA = 0;
@@ -53,11 +53,11 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementNotEquals.prototype, "varA", void 0);
-TestElementNotEquals.defineAsync({
+RenderableFASTElement(TestElementNotEquals).defineAsync({
     name: "test-element-not-equals",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementGe extends RenderableFASTElement {
+class TestElementGe extends FASTElement {
     constructor() {
         super(...arguments);
         this.varA = 0;
@@ -67,11 +67,11 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementGe.prototype, "varA", void 0);
-TestElementGe.defineAsync({
+RenderableFASTElement(TestElementGe).defineAsync({
     name: "test-element-ge",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementGt extends RenderableFASTElement {
+class TestElementGt extends FASTElement {
     constructor() {
         super(...arguments);
         this.varA = 0;
@@ -81,11 +81,11 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementGt.prototype, "varA", void 0);
-TestElementGt.defineAsync({
+RenderableFASTElement(TestElementGt).defineAsync({
     name: "test-element-gt",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementLe extends RenderableFASTElement {
+class TestElementLe extends FASTElement {
     constructor() {
         super(...arguments);
         this.varA = 0;
@@ -95,11 +95,11 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementLe.prototype, "varA", void 0);
-TestElementLe.defineAsync({
+RenderableFASTElement(TestElementLe).defineAsync({
     name: "test-element-le",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementLt extends RenderableFASTElement {
+class TestElementLt extends FASTElement {
     constructor() {
         super(...arguments);
         this.varA = 0;
@@ -109,11 +109,11 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementLt.prototype, "varA", void 0);
-TestElementLt.defineAsync({
+RenderableFASTElement(TestElementLt).defineAsync({
     name: "test-element-lt",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementOr extends RenderableFASTElement {
+class TestElementOr extends FASTElement {
     constructor() {
         super(...arguments);
         this.thisVar = false;
@@ -128,11 +128,11 @@ __decorate([
     attr({ attribute: "that-var", mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementOr.prototype, "thatVar", void 0);
-TestElementOr.defineAsync({
+RenderableFASTElement(TestElementOr).defineAsync({
     name: "test-element-or",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementAnd extends RenderableFASTElement {
+class TestElementAnd extends FASTElement {
     constructor() {
         super(...arguments);
         this.thisVar = false;
@@ -147,7 +147,7 @@ __decorate([
     attr({ attribute: "that-var", mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementAnd.prototype, "thatVar", void 0);
-TestElementAnd.defineAsync({
+RenderableFASTElement(TestElementAnd).defineAsync({
     name: "test-element-and",
     templateOptions: "defer-and-hydrate",
 });

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 import { FAST } from "@microsoft/fast-element";
 import { debugMessages } from "./debug.js";
 FAST.addMessages(debugMessages);
-export { RenderableFASTElement, TemplateElement } from "./components/index.js";
+export { RenderableFASTElement, TemplateElement, ObserverMap, } from "./components/index.js";