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

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

@@ -1,10 +1,10 @@
-import { FASTElement } from "@microsoft/fast-element";
-export declare abstract class RenderableFASTElement extends FASTElement {
-    deferHydration: boolean;
-    constructor();
-    /**
-     * A user defined function for determining if the element is ready to be hydrated.
-     * This function will get called if it has been defined after the template is connected.
-     */
-    private prepare;
-}
+import { type Constructable, type FASTElement } from "@microsoft/fast-element";
+/**
+ * A mixin function that extends a base class with additional functionality for
+ * rendering and hydration.
+ *
+ * @param BaseCtor - The base class to extend.
+ * @returns A new class that extends the provided base class with additional functionality for rendering and hydration.
+ * @public
+ */
+export declare function RenderableFASTElement<T extends Constructable<FASTElement>>(BaseCtor: T): T;

package/dist/esm/components/element.js

@@ -1,20 +1,27 @@
-import { __decorate, __metadata } from "tslib";
-import { attr, FASTElement } from "@microsoft/fast-element";
-export class RenderableFASTElement extends FASTElement {
-    constructor() {
-        super();
-        this.deferHydration = true;
-        if (this.prepare) {
-            this.prepare().then(() => {
+import { attr } from "@microsoft/fast-element";
+/**
+ * A mixin function that extends a base class with additional functionality for
+ * rendering and hydration.
+ *
+ * @param BaseCtor - The base class to extend.
+ * @returns A new class that extends the provided base class with additional functionality for rendering and hydration.
+ * @public
+ */
+export function RenderableFASTElement(BaseCtor) {
+    const C = class extends BaseCtor {
+        constructor(...args) {
+            super(...args);
+            this.deferHydration = true;
+            if (this.prepare) {
+                this.prepare().then(() => {
+                    this.deferHydration = false;
+                });
+            }
+            else {
                 this.deferHydration = false;
-            });
+            }
         }
-        else {
-            this.deferHydration = false;
-        }
-    }
+    };
+    attr({ mode: "boolean", attribute: "defer-hydration" })(C.prototype, "deferHydration");
+    return C;
 }
-__decorate([
-    attr({ mode: "boolean", attribute: "defer-hydration" }),
-    __metadata("design:type", Boolean)
-], RenderableFASTElement.prototype, "deferHydration", void 0);

package/dist/esm/fixtures/attribute/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.type = "radio";
@@ -11,7 +11,7 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "type", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

package/dist/esm/fixtures/binding/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.text = "Hello";
@@ -11,17 +11,17 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "text", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });
-class TestElementUnescaped extends RenderableFASTElement {
+class TestElementUnescaped extends FASTElement {
     constructor() {
         super(...arguments);
         this.html = `<p>Hello world</p>`;
     }
 }
-TestElementUnescaped.defineAsync({
+RenderableFASTElement(TestElementUnescaped).defineAsync({
     name: "test-element-unescaped",
     templateOptions: "defer-and-hydrate",
 });

package/dist/esm/fixtures/children/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.listItems = [];
@@ -16,7 +16,7 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "list", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

package/dist/esm/fixtures/dot-syntax/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.object = {
@@ -7,7 +8,7 @@ class TestElement extends RenderableFASTElement {
         };
     }
 }
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

package/dist/esm/fixtures/event/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.foo = "";
@@ -23,7 +23,7 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "foo", void 0);
-TestElement.defineAsync({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
     templateOptions: "defer-and-hydrate",
 });

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",
 });