@microsoft/fast-html 1.0.0-alpha.29 → 1.0.0-alpha.30

package/dist/esm/fixtures/lifecycle-callbacks/main.js

@@ -0,0 +1,126 @@
+import { __awaiter, __decorate, __metadata } from "tslib";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
+import { attr, FASTElement, observable } from "@microsoft/fast-element";
+// Track lifecycle callbacks for testing
+export const lifecycleEvents = [];
+// Track hydration complete
+export let hydrationCompleteEmitted = false;
+// Configure lifecycle callbacks
+TemplateElement.config({
+    elementDidRegister(name) {
+        lifecycleEvents.push({ callback: "elementDidRegister", name });
+    },
+    templateWillUpdate(name) {
+        lifecycleEvents.push({ callback: "templateWillUpdate", name });
+    },
+    templateDidUpdate(name) {
+        lifecycleEvents.push({ callback: "templateDidUpdate", name });
+    },
+    elementDidDefine(name) {
+        lifecycleEvents.push({ callback: "elementDidDefine", name });
+    },
+    elementWillHydrate(name) {
+        lifecycleEvents.push({ callback: "elementWillHydrate", name });
+    },
+    elementDidHydrate(name) {
+        lifecycleEvents.push({ callback: "elementDidHydrate", name });
+    },
+    hydrationComplete() {
+        lifecycleEvents.push({ callback: "hydrationComplete" });
+        hydrationCompleteEmitted = true;
+    },
+});
+// Simple element with basic property
+class SimpleElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.message = "Hello";
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], SimpleElement.prototype, "message", void 0);
+RenderableFASTElement(SimpleElement).defineAsync({
+    name: "simple-element",
+    templateOptions: "defer-and-hydrate",
+});
+// Complex element with multiple properties and methods
+class ComplexElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.title = "Complex";
+        this.count = 0;
+        this.items = [];
+    }
+    increment() {
+        this.count++;
+    }
+    addItem(item) {
+        this.items = [...this.items, item];
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], ComplexElement.prototype, "title", void 0);
+__decorate([
+    observable,
+    __metadata("design:type", Number)
+], ComplexElement.prototype, "count", void 0);
+__decorate([
+    observable,
+    __metadata("design:type", Array)
+], ComplexElement.prototype, "items", void 0);
+RenderableFASTElement(ComplexElement).defineAsync({
+    name: "complex-element",
+    templateOptions: "defer-and-hydrate",
+});
+// Nested element
+class NestedElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.label = "Nested";
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], NestedElement.prototype, "label", void 0);
+RenderableFASTElement(NestedElement).defineAsync({
+    name: "nested-element",
+    templateOptions: "defer-and-hydrate",
+});
+// Element with deferred hydration
+class DeferredElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.status = "pending";
+    }
+    prepare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Simulate async work
+            yield new Promise(resolve => setTimeout(resolve, 100));
+            this.status = "ready";
+        });
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", String)
+], DeferredElement.prototype, "status", void 0);
+RenderableFASTElement(DeferredElement).defineAsync({
+    name: "deferred-element",
+    templateOptions: "defer-and-hydrate",
+});
+// Define templates
+TemplateElement.options({
+    "complex-element": {
+        observerMap: "all",
+    },
+}).define({
+    name: "f-template",
+});
+// Make lifecycleEvents available globally for testing
+window.lifecycleEvents = lifecycleEvents;
+window.getHydrationCompleteStatus = () => hydrationCompleteEmitted;