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

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

@@ -1,11 +1,10 @@
-import { FASTElement } from "@microsoft/fast-element";
-export declare abstract class RenderableFASTElement extends FASTElement {
-    deferHydration: boolean;
-    needsHydration: 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,32 +1,27 @@
-import { __awaiter, __decorate, __metadata } from "tslib";
-import { attr, FASTElement, Observable } from "@microsoft/fast-element";
-export class RenderableFASTElement extends FASTElement {
-    constructor() {
-        var _a, _b;
-        super();
-        this.deferHydration = true;
-        this.needsHydration = true;
-        // If the elements template has already been defined there is no need to defer hydration.
-        if (!((_b = (_a = this.$fastController) === null || _a === void 0 ? void 0 : _a.definition) === null || _b === void 0 ? void 0 : _b.shadowOptions)) {
-            this.setAttribute("defer-hydration", "");
-            this.setAttribute("needs-hydration", "");
-        }
-        Observable.defineProperty(this.$fastController.definition, "shadowOptions");
-        Observable.getNotifier(this.$fastController.definition).subscribe({
-            handleChange: () => __awaiter(this, void 0, void 0, function* () {
-                if (this.prepare) {
-                    yield this.prepare();
-                }
+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;
-            }),
-        }, "shadowOptions");
-    }
+            }
+        }
+    };
+    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);
-__decorate([
-    attr({ mode: "boolean", attribute: "needs-hydration" }),
-    __metadata("design:type", Boolean)
-], RenderableFASTElement.prototype, "needsHydration", void 0);

package/dist/esm/components/template.js

@@ -1,5 +1,5 @@
 import { __awaiter, __decorate, __metadata } from "tslib";
-import { attr, elements, FAST, FASTElement, fastElementRegistry, HydratableElementController, ViewTemplate, } from "@microsoft/fast-element";
+import { attr, elements, FAST, FASTElement, FASTElementDefinition, fastElementRegistry, HydratableElementController, ViewTemplate, } from "@microsoft/fast-element";
 import "@microsoft/fast-element/install-hydratable-view-templates.js";
 import { getAllPartials, getExpressionChain, getNextBehavior, pathResolver, resolveWhen, transformInnerHTML, } from "./utilities.js";
 /**
@@ -38,9 +38,7 @@ class TemplateElement extends FASTElement {
     connectedCallback() {
         super.connectedCallback();
         if (this.name) {
-            this.$fastController.definition.registry
-                .whenDefined(this.name)
-                .then((value) => __awaiter(this, void 0, void 0, function* () {
+            FASTElementDefinition.registerAsync(this.name).then((value) => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b;
                 if (this.name && !!!((_a = TemplateElement.elementOptions) === null || _a === void 0 ? void 0 : _a[this.name])) {
                     TemplateElement.setOptions(this.name);
@@ -53,8 +51,7 @@ class TemplateElement extends FASTElement {
                     const { strings, values } = yield this.resolveStringsAndValues(innerHTML);
                     if (registeredFastElement) {
                         // all new elements will get the updated template
-                        registeredFastElement.template =
-                            this.resolveTemplateOrBehavior(strings, values);
+                        registeredFastElement.template = this.resolveTemplateOrBehavior(strings, values);
                         // set shadow options as defined by the f-template
                         registeredFastElement.shadowOptions =
                             (_b = TemplateElement.elementOptions[this.name]) === null || _b === void 0 ? void 0 : _b.shadowOptions;

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,9 +11,9 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "type", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

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,9 +16,9 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "list", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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,9 +8,9 @@ class TestElement extends RenderableFASTElement {
         };
     }
 }
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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,9 +23,9 @@ __decorate([
     attr,
     __metadata("design:type", String)
 ], TestElement.prototype, "foo", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

@@ -1,5 +1,5 @@
-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);
@@ -23,9 +23,9 @@ class TestElement extends FASTElement {
         ];
     }
 }
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

@@ -1,13 +1,14 @@
+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.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
-class TestElementInnerWhen extends RenderableFASTElement {
+class TestElementInnerWhen extends FASTElement {
     constructor() {
         super(...arguments);
         this.list = [
@@ -35,9 +35,9 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElementInnerWhen.prototype, "list", void 0);
-TestElementInnerWhen.define({
+RenderableFASTElement(TestElementInnerWhen).defineAsync({
     name: "test-element-inner-when",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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,9 +24,9 @@ __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "slottedBarNodes", void 0);
-TestElement.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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.define({
+RenderableFASTElement(TestElement).defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementNot).defineAsync({
     name: "test-element-not",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementEquals).defineAsync({
     name: "test-element-equals",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementNotEquals).defineAsync({
     name: "test-element-not-equals",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementGe).defineAsync({
     name: "test-element-ge",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementGt).defineAsync({
     name: "test-element-gt",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementLe).defineAsync({
     name: "test-element-le",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementLt).defineAsync({
     name: "test-element-lt",
-    shadowOptions: null,
+    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.define({
+RenderableFASTElement(TestElementOr).defineAsync({
     name: "test-element-or",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
-class TestElementAnd extends RenderableFASTElement {
+class TestElementAnd extends FASTElement {
     constructor() {
         super(...arguments);
         this.thisVar = false;
@@ -147,9 +147,9 @@ __decorate([
     attr({ attribute: "that-var", mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementAnd.prototype, "thatVar", void 0);
-TestElementAnd.define({
+RenderableFASTElement(TestElementAnd).defineAsync({
     name: "test-element-and",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",