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

package/README.md

@@ -147,6 +147,8 @@ Attribute directives include:
     Example:
     ```html
     <slot f-slotted="{slottedNodes}"></slot>
+    <slot f-slotted="{slottedNodes filter elements()}"></slot>
+    <slot f-slotted="{slottedNodes filter elements(div, p)}"></slot>
     ```
 
 - **children**
@@ -257,4 +259,4 @@ If your template includes JavaScript specific logic that does not conform to tho
 
 ## Acknowledgements
 
-This project has been heavily inspired by [Handlebars](https://handlebarsjs.com/) and [Vue.js](https://vuejs.org/).
+This project has been heavily inspired by [Handlebars](https://handlebarsjs.com/) and [Vue.js](https://vuejs.org/).

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

@@ -1,6 +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;
 }

package/dist/esm/components/element.js

@@ -1,25 +1,20 @@
 import { __decorate, __metadata } from "tslib";
-import { attr, FASTElement, Observable } from "@microsoft/fast-element";
+import { attr, FASTElement } from "@microsoft/fast-element";
 export class RenderableFASTElement extends FASTElement {
     constructor() {
         super();
         this.deferHydration = true;
-        this.needsHydration = true;
-        this.setAttribute("defer-hydration", "");
-        this.setAttribute("needs-hydration", "");
-        Observable.defineProperty(this.$fastController.definition, "shadowOptions");
-        Observable.getNotifier(this.$fastController.definition).subscribe({
-            handleChange: () => {
+        if (this.prepare) {
+            this.prepare().then(() => {
                 this.deferHydration = false;
-            },
-        }, "shadowOptions");
+            });
+        }
+        else {
+            this.deferHydration = false;
+        }
     }
 }
 __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, 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;
@@ -151,7 +148,20 @@ class TemplateElement extends FASTElement {
                 case "slotted":
                     {
                         const { slotted } = yield import("@microsoft/fast-element");
-                        externalValues.push(slotted(propName));
+                        const parts = propName.trim().split(" filter ");
+                        const slottedOption = {
+                            property: parts[0],
+                        };
+                        if (parts[1]) {
+                            if (parts[1].startsWith("elements(")) {
+                                let params = parts[1].replace("elements(", "");
+                                params = params.substring(0, params.lastIndexOf(")"));
+                                Object.assign(slottedOption, {
+                                    filter: elements(params || undefined),
+                                });
+                            }
+                        }
+                        externalValues.push(slotted(slottedOption));
                     }
                     break;
                 case "ref":

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,9 +5,9 @@ class TestElement extends RenderableFASTElement {
         this.video = null;
     }
 }
-TestElement.define({
+TestElement.defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

@@ -3,11 +3,7 @@ import { expect, test } from "@playwright/test";
 test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
     test("create a ref directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
         yield page.goto("/ref");
-        const isVideo = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            return ((_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.video) instanceof HTMLVideoElement;
-        });
-        expect(isVideo).toEqual(true);
+        const element = page.locator("test-element");
+        yield expect(element).toHaveJSProperty("video.nodeName", "VIDEO");
     }));
 }));

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

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

@@ -5,18 +5,28 @@ class TestElement extends RenderableFASTElement {
     constructor() {
         super(...arguments);
         this.slottedNodes = [];
+        this.slottedFooNodes = [];
+        this.slottedBarNodes = [];
     }
-    slottedNodesChanged() {
-        this.classList.add(`class-${this.slottedNodes.length}`);
+    slottedFooNodesChanged() {
+        this.classList.add(`class-${this.slottedFooNodes.length}`);
     }
 }
 __decorate([
     observable,
     __metadata("design:type", Array)
 ], TestElement.prototype, "slottedNodes", void 0);
-TestElement.define({
+__decorate([
+    observable,
+    __metadata("design:type", Array)
+], TestElement.prototype, "slottedFooNodes", void 0);
+__decorate([
+    observable,
+    __metadata("design:type", Array)
+], TestElement.prototype, "slottedBarNodes", void 0);
+TestElement.defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",

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

@@ -1,25 +1,24 @@
 import { __awaiter } from "tslib";
 import { expect, test } from "@playwright/test";
-test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* () {
-    test("create a slotted directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+test.describe("f-template", () => {
+    let element;
+    test.beforeEach(({ page }) => __awaiter(void 0, void 0, void 0, function* () {
         yield page.goto("/slotted");
-        const classCount1 = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            return (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.classList.length;
-        });
-        expect(classCount1).toEqual(2);
-        yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
+        element = page.locator("test-element");
+    }));
+    test("create a slotted directive", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield expect(element).toHaveJSProperty("classList.length", 2);
+        yield element.evaluate((node) => {
             const newElement = document.createElement("button");
-            (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.append(newElement);
-        });
-        const classCount2 = yield page.evaluate(() => {
-            var _a;
-            const customElement = document.getElementsByTagName("test-element");
-            return (_a = customElement.item(0)) === null || _a === void 0 ? void 0 : _a.classList.length;
+            newElement.slot = "foo";
+            node.append(newElement);
         });
-        expect(classCount2).toEqual(3);
+        yield expect(element).toHaveJSProperty("classList.length", 3);
+    }));
+    test("slotted nodes are filtered by elements()", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield expect(element).toHaveJSProperty("slottedNodes.length", 1);
+    }));
+    test("slotted nodes are filtered by elements() with query", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield expect(element).toHaveJSProperty("slottedBarNodes.length", 1);
     }));
-}));
+});

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

@@ -11,9 +11,9 @@ __decorate([
     attr({ mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElement.prototype, "show", void 0);
-TestElement.define({
+TestElement.defineAsync({
     name: "test-element",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementNot extends RenderableFASTElement {
     constructor() {
@@ -25,9 +25,9 @@ __decorate([
     attr({ mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementNot.prototype, "hide", void 0);
-TestElementNot.define({
+TestElementNot.defineAsync({
     name: "test-element-not",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementEquals extends RenderableFASTElement {
     constructor() {
@@ -39,9 +39,9 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementEquals.prototype, "varA", void 0);
-TestElementEquals.define({
+TestElementEquals.defineAsync({
     name: "test-element-equals",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementNotEquals extends RenderableFASTElement {
     constructor() {
@@ -53,9 +53,9 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementNotEquals.prototype, "varA", void 0);
-TestElementNotEquals.define({
+TestElementNotEquals.defineAsync({
     name: "test-element-not-equals",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementGe extends RenderableFASTElement {
     constructor() {
@@ -67,9 +67,9 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementGe.prototype, "varA", void 0);
-TestElementGe.define({
+TestElementGe.defineAsync({
     name: "test-element-ge",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementGt extends RenderableFASTElement {
     constructor() {
@@ -81,9 +81,9 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementGt.prototype, "varA", void 0);
-TestElementGt.define({
+TestElementGt.defineAsync({
     name: "test-element-gt",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementLe extends RenderableFASTElement {
     constructor() {
@@ -95,9 +95,9 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementLe.prototype, "varA", void 0);
-TestElementLe.define({
+TestElementLe.defineAsync({
     name: "test-element-le",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementLt extends RenderableFASTElement {
     constructor() {
@@ -109,9 +109,9 @@ __decorate([
     attr({ attribute: "var-a" }),
     __metadata("design:type", Number)
 ], TestElementLt.prototype, "varA", void 0);
-TestElementLt.define({
+TestElementLt.defineAsync({
     name: "test-element-lt",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementOr extends RenderableFASTElement {
     constructor() {
@@ -128,9 +128,9 @@ __decorate([
     attr({ attribute: "that-var", mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementOr.prototype, "thatVar", void 0);
-TestElementOr.define({
+TestElementOr.defineAsync({
     name: "test-element-or",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 class TestElementAnd extends RenderableFASTElement {
     constructor() {
@@ -147,9 +147,9 @@ __decorate([
     attr({ attribute: "that-var", mode: "boolean" }),
     __metadata("design:type", Boolean)
 ], TestElementAnd.prototype, "thatVar", void 0);
-TestElementAnd.define({
+TestElementAnd.defineAsync({
     name: "test-element-and",
-    shadowOptions: null,
+    templateOptions: "defer-and-hydrate",
 });
 TemplateElement.define({
     name: "f-template",