@microsoft/fast-html 1.0.0-alpha.3 → 1.0.0-alpha.5

package/README.md

@@ -95,8 +95,21 @@ Template directives include:
     Example:
     ```html
     <f-when value="{{show}}">Hello world</f-when>
+    <f-when value="{{!show}}">Goodbye world</f-when>
     ```
 
+The following operators can also be used:
+- `==`
+- `!=`
+- `>=`
+- `>`
+- `<=`
+- `<`
+- `||`
+- `&&`
+
+Where the right operand can be either a reference to a value (string e.g. `{{foo == 'bar'}}`, boolean e.g. `{{foo == true}}`, number e.g. `{{foo == 3}}`) or another binding value.
+
 - **repeat**
 
     Example:
@@ -104,6 +117,13 @@ Template directives include:
     <ul><f-repeat value="{{item in list}}"><li>{{item}}</li></f-repeat></ul>
     ```
 
+    Should you need to refer to the parent element (not the individual item in the list), you can use `../`. This will map to what `html` tag template literal uses, `c.parent`.
+
+    Example:
+    ```html
+    <ul><f-repeat value="{{item in list}}"><li>{{item}} - {{../title}}</li></f-repeat></ul>
+    ```
+
 - **partial & apply**
 
     These directives are new to the declarative HTML model and allow for the ability to declare a `partial` directive containing a template partial which can then be referenced by an `apply` directive.

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

@@ -71,5 +71,32 @@ export declare function getAllPartials(innerHTML: string, offset?: number, parti
  * @param self - Where the first item in the path path refers to the item itself (used by repeat).
  * @returns A function to access the value from a given path.
  */
-export declare function pathResolver(path: string, self?: boolean): (accessibleObject: any) => any;
+export declare function pathResolver(path: string, self?: boolean): (accessibleObject: any, context: any) => any;
+/**
+ * Available operators include:
+ *
+ * - access (no operator)
+ * - not (!)
+ * - equals (==)
+ * - not equal (!=)
+ * - greater than or equal (>=)
+ * - greater than (>)
+ * - less than or equal (<=)
+ * - less than (<)
+ * - or (||)
+ * - and (&&) and the HTML character entity (&amp;&amp;)
+ */
+type Operator = "access" | "!" | "==" | "!=" | ">=" | ">" | "<=" | "<" | "||" | "&&" | "&amp;&amp;";
+interface OperatorConfig {
+    operator: Operator;
+    left: string;
+    right: string | boolean | number | null;
+    rightIsValue: boolean | null;
+}
+/**
+ * Get the operator used.
+ * @param value the binded value
+ * @returns Operator
+ */
+export declare function getOperator(value: string): OperatorConfig;
 export {};

package/dist/esm/components/template.js

@@ -1,7 +1,7 @@
 import { __awaiter, __decorate, __metadata } from "tslib";
 import { attr, FAST, FASTElement, fastElementRegistry, ViewTemplate, } from "@microsoft/fast-element";
 import { DOMPolicy } from "@microsoft/fast-element/dom-policy.js";
-import { getAllPartials, getNextBehavior, pathResolver, } from "./utilities.js";
+import { getAllPartials, getNextBehavior, getOperator, pathResolver, } from "./utilities.js";
 /**
  * The <f-template> custom element that will provide view logic to the element
  */
@@ -72,7 +72,63 @@ class TemplateElement extends FASTElement {
                     {
                         const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex));
                         const { when } = yield import("@microsoft/fast-element");
-                        externalValues.push(when(x => pathResolver(behaviorConfig.value, self)(x), this.resolveTemplateOrBehavior(strings, values)));
+                        const { operator, left, right, rightIsValue } = getOperator(behaviorConfig.value);
+                        let whenLogic = (x, c) => pathResolver(left, self)(x, c);
+                        switch (operator) {
+                            case "!":
+                                whenLogic = (x, c) => !pathResolver(left, self)(x, c);
+                                break;
+                            case "==":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) ==
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "!=":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) !=
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "&&":
+                            case "&amp;&amp;":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) &&
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "||":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) ||
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case ">=":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) >=
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case ">":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) >
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "<=":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) <=
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                            case "<":
+                                whenLogic = (x, c) => pathResolver(left, self)(x, c) <
+                                    (rightIsValue
+                                        ? right
+                                        : pathResolver(right, self)(x, c));
+                                break;
+                        }
+                        externalValues.push(when(whenLogic, this.resolveTemplateOrBehavior(strings, values)));
                     }
                     break;
                 case "repeat":
@@ -80,7 +136,7 @@ class TemplateElement extends FASTElement {
                         const valueAttr = behaviorConfig.value.split(" "); // syntax {{x in y}}
                         const { strings, values } = yield this.resolveStringsAndValues(innerHTML.slice(behaviorConfig.openingTagEndIndex, behaviorConfig.closingTagStartIndex), true);
                         const { repeat } = yield import("@microsoft/fast-element");
-                        externalValues.push(repeat(x => pathResolver(valueAttr[2], self)(x), this.resolveTemplateOrBehavior(strings, values)));
+                        externalValues.push(repeat((x, c) => pathResolver(valueAttr[2], self)(x, c), this.resolveTemplateOrBehavior(strings, values)));
                     }
                     break;
                 case "apply": {
@@ -92,7 +148,7 @@ class TemplateElement extends FASTElement {
                     })) === null || _a === void 0 ? void 0 : _a.split('"')[1];
                     if (partial) {
                         const { when } = yield import("@microsoft/fast-element");
-                        externalValues.push(when(x => pathResolver(behaviorConfig.value, self)(x), () => this.partials[partial]));
+                        externalValues.push(when((x, c) => pathResolver(behaviorConfig.value, self)(x, c), () => this.partials[partial]));
                     }
                 }
             }
@@ -143,7 +199,7 @@ class TemplateElement extends FASTElement {
                     {
                         strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
                         const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                        const binding = (x) => pathResolver(propName, self)(x);
+                        const binding = (x, c) => pathResolver(propName, self)(x, c);
                         values.push(binding);
                         yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);
                     }
@@ -152,12 +208,12 @@ class TemplateElement extends FASTElement {
                     strings.push(innerHTML.slice(0, behaviorConfig.openingStartIndex));
                     if (behaviorConfig.aspect === "@") {
                         const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex - 2);
-                        const binding = (x) => pathResolver(propName, self)(x)();
+                        const binding = (x, c) => pathResolver(propName, self)(x, c)();
                         values.push(binding);
                     }
                     else {
                         const propName = innerHTML.slice(behaviorConfig.openingEndIndex, behaviorConfig.closingStartIndex);
-                        const binding = (x) => pathResolver(propName, self)(x);
+                        const binding = (x, c) => pathResolver(propName, self)(x, c);
                         values.push(binding);
                     }
                     yield this.resolveInnerHTML(innerHTML.slice(behaviorConfig.closingEndIndex, innerHTML.length), strings, values, self);

package/dist/esm/components/utilities.js

@@ -56,7 +56,8 @@ export function getIndexOfNextMatchingTag(openingTagStartSlice, openingTag, clos
 function getNextDirectiveBehavior(innerHTML) {
     const openingTagStartIndex = innerHTML.indexOf(openTagStart);
     const openingTagStartSlice = innerHTML.slice(openingTagStartIndex);
-    const openingTagEndIndex = openingTagStartSlice.indexOf(tagEnd) + openingTagStartIndex + 1;
+    const openingTagEndIndex = // account for f-when which may include >= or > as operators, but will always include a condition attr
+     openingTagStartSlice.indexOf(`"${tagEnd}`) + openingTagStartIndex + 2;
     const directiveTag = innerHTML
         .slice(openingTagStartIndex + 3, openingTagEndIndex - 1)
         .split(" ")[0];
@@ -185,7 +186,7 @@ export function getAllPartials(innerHTML, offset = 0, partials = {}) {
         const startId = openingTagStartIndex + ' id="'.length + openingTag.length;
         const endId = innerHTML.slice(startId).indexOf('"') + startId;
         const id = innerHTML.slice(startId, endId);
-        const openingTagEndIndex = openingTagStartSlice.indexOf(">") + 1 + openingTagStartIndex;
+        const openingTagEndIndex = openingTagStartSlice.indexOf(tagEnd) + 1 + openingTagStartIndex;
         const closingTagStartIndex = matchingCloseTagIndex - closingTagLength;
         partials[id] = {
             innerHTML: innerHTML.slice(openingTagEndIndex, closingTagStartIndex),
@@ -206,7 +207,8 @@ export function getAllPartials(innerHTML, offset = 0, partials = {}) {
  */
 export function pathResolver(path, self = false) {
     let splitPath = path.split(".");
-    if (self) {
+    const usesContext = path.startsWith("../");
+    if (self && !usesContext) {
         if (splitPath.length > 1) {
             splitPath = splitPath.slice(1);
         }
@@ -216,14 +218,79 @@ export function pathResolver(path, self = false) {
             };
         }
     }
-    if (splitPath.length === 1) {
+    if (splitPath.length === 1 && !usesContext) {
         return (accessibleObject) => {
             return accessibleObject === null || accessibleObject === void 0 ? void 0 : accessibleObject[splitPath[0]];
         };
     }
-    return (accessibleObject) => {
+    return (accessibleObject, context) => {
+        if (usesContext) {
+            splitPath = [];
+            path.split("../").forEach(pathItem => {
+                if (pathItem === "") {
+                    splitPath.unshift("parent");
+                }
+                else {
+                    splitPath.push(...pathItem.split("."));
+                }
+            });
+            return splitPath.reduce((previousAccessors, pathItem) => {
+                return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
+            }, context);
+        }
         return splitPath.reduce((previousAccessors, pathItem) => {
             return previousAccessors === null || previousAccessors === void 0 ? void 0 : previousAccessors[pathItem];
         }, accessibleObject);
     };
 }
+/**
+ * Determine if the operand is a value (boolean, number, string) or an accessor.
+ * @param operand
+ */
+function isOperandValue(operand) {
+    try {
+        const value = JSON.parse(operand);
+        return {
+            value,
+            isValue: true,
+        };
+    }
+    catch (e) {
+        return {
+            value: operand,
+            isValue: false,
+        };
+    }
+}
+/**
+ * Get the operator used.
+ * @param value the binded value
+ * @returns Operator
+ */
+export function getOperator(value) {
+    if (value[0] === "!") {
+        return {
+            operator: "!",
+            left: value.slice(1),
+            right: null,
+            rightIsValue: null,
+        };
+    }
+    const split = value.split(" ");
+    if (split.length === 3) {
+        const operator = split[1];
+        const { value, isValue } = isOperandValue(split[2]);
+        return {
+            operator,
+            left: split[0],
+            right: isValue ? value : split[2],
+            rightIsValue: isValue,
+        };
+    }
+    return {
+        operator: "access",
+        left: value,
+        right: null,
+        rightIsValue: null,
+    };
+}

package/dist/esm/components/utilities.spec.js

@@ -145,16 +145,19 @@ test.describe("utilities", () => __awaiter(void 0, void 0, void 0, function* ()
     }));
     test.describe("pathResolver", () => __awaiter(void 0, void 0, void 0, function* () {
         test("should resolve a path with no nesting", () => __awaiter(void 0, void 0, void 0, function* () {
-            expect(pathResolver("foo")({ foo: "bar" })).toEqual("bar");
+            expect(pathResolver("foo")({ foo: "bar" }, {})).toEqual("bar");
         }));
         test("should resolve a path with nesting", () => __awaiter(void 0, void 0, void 0, function* () {
-            expect(pathResolver("foo.bar.bat")({ foo: { bar: { bat: "baz" } } })).toEqual("baz");
+            expect(pathResolver("foo.bar.bat")({ foo: { bar: { bat: "baz" } } }, {})).toEqual("baz");
         }));
         test("should resolve a path with no nesting and self reference", () => __awaiter(void 0, void 0, void 0, function* () {
-            expect(pathResolver("foo", true)("bar")).toEqual("bar");
+            expect(pathResolver("foo", true)("bar", {})).toEqual("bar");
         }));
         test("should resolve a path with nesting and self reference", () => __awaiter(void 0, void 0, void 0, function* () {
-            expect(pathResolver("foo.bar.bat", true)({ bar: { bat: "baz" } })).toEqual("baz");
+            expect(pathResolver("foo.bar.bat", true)({ bar: { bat: "baz" } }, {})).toEqual("baz");
+        }));
+        test("should resolve a path with context", () => __awaiter(void 0, void 0, void 0, function* () {
+            expect(pathResolver("../foo")({}, { parent: { foo: "bar" } })).toEqual("bar");
         }));
     }));
 }));

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

@@ -5,6 +5,7 @@ class TestElement extends FASTElement {
     constructor() {
         super(...arguments);
         this.list = ["Foo", "Bar"];
+        this.parent = "Bat";
     }
 }
 __decorate([

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

@@ -6,8 +6,8 @@ test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* ()
         const customElement = yield page.locator("test-element");
         let customElementListItems = yield customElement.locator("li");
         expect(yield customElementListItems.count()).toEqual(2);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("Foo");
-        expect(yield customElementListItems.nth(1).textContent()).toEqual("Bar");
+        expect(yield customElementListItems.nth(0).textContent()).toEqual("Foo - Bat");
+        expect(yield customElementListItems.nth(1).textContent()).toEqual("Bar - Bat");
         yield page.evaluate(() => {
             const customElement = document.getElementsByTagName("test-element");
             customElement.item(0).list = [
@@ -19,8 +19,8 @@ test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* ()
         yield expect(customElement).toHaveJSProperty("list", ["A", "B", "C"]);
         customElementListItems = yield customElement.locator("li");
         expect(yield customElementListItems.count()).toEqual(3);
-        expect(yield customElementListItems.nth(0).textContent()).toEqual("A");
-        expect(yield customElementListItems.nth(1).textContent()).toEqual("B");
-        expect(yield customElementListItems.nth(2).textContent()).toEqual("C");
+        expect(yield customElementListItems.nth(0).textContent()).toEqual("A - Bat");
+        expect(yield customElementListItems.nth(1).textContent()).toEqual("B - Bat");
+        expect(yield customElementListItems.nth(2).textContent()).toEqual("C - Bat");
     }));
 }));

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

@@ -14,6 +14,133 @@ __decorate([
 TestElement.define({
     name: "test-element",
 });
+class TestElementNot extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.hide = false;
+    }
+}
+__decorate([
+    attr({ mode: "boolean" }),
+    __metadata("design:type", Boolean)
+], TestElementNot.prototype, "hide", void 0);
+TestElementNot.define({
+    name: "test-element-not",
+});
+class TestElementEquals extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.varA = 0;
+    }
+}
+__decorate([
+    attr({ attribute: "var-a" }),
+    __metadata("design:type", Number)
+], TestElementEquals.prototype, "varA", void 0);
+TestElementEquals.define({
+    name: "test-element-equals",
+});
+class TestElementNotEquals extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.varA = 0;
+    }
+}
+__decorate([
+    attr({ attribute: "var-a" }),
+    __metadata("design:type", Number)
+], TestElementNotEquals.prototype, "varA", void 0);
+TestElementNotEquals.define({
+    name: "test-element-not-equals",
+});
+class TestElementGe extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.varA = 0;
+    }
+}
+__decorate([
+    attr({ attribute: "var-a" }),
+    __metadata("design:type", Number)
+], TestElementGe.prototype, "varA", void 0);
+TestElementGe.define({
+    name: "test-element-ge",
+});
+class TestElementGt extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.varA = 0;
+    }
+}
+__decorate([
+    attr({ attribute: "var-a" }),
+    __metadata("design:type", Number)
+], TestElementGt.prototype, "varA", void 0);
+TestElementGt.define({
+    name: "test-element-gt",
+});
+class TestElementLe extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.varA = 0;
+    }
+}
+__decorate([
+    attr({ attribute: "var-a" }),
+    __metadata("design:type", Number)
+], TestElementLe.prototype, "varA", void 0);
+TestElementLe.define({
+    name: "test-element-le",
+});
+class TestElementLt extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.varA = 0;
+    }
+}
+__decorate([
+    attr({ attribute: "var-a" }),
+    __metadata("design:type", Number)
+], TestElementLt.prototype, "varA", void 0);
+TestElementLt.define({
+    name: "test-element-lt",
+});
+class TestElementOr extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.thisVar = false;
+        this.thatVar = false;
+    }
+}
+__decorate([
+    attr({ attribute: "this-var", mode: "boolean" }),
+    __metadata("design:type", Boolean)
+], TestElementOr.prototype, "thisVar", void 0);
+__decorate([
+    attr({ attribute: "that-var", mode: "boolean" }),
+    __metadata("design:type", Boolean)
+], TestElementOr.prototype, "thatVar", void 0);
+TestElementOr.define({
+    name: "test-element-or",
+});
+class TestElementAnd extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.thisVar = false;
+        this.thatVar = false;
+    }
+}
+__decorate([
+    attr({ attribute: "this-var", mode: "boolean" }),
+    __metadata("design:type", Boolean)
+], TestElementAnd.prototype, "thisVar", void 0);
+__decorate([
+    attr({ attribute: "that-var", mode: "boolean" }),
+    __metadata("design:type", Boolean)
+], TestElementAnd.prototype, "thatVar", void 0);
+TestElementAnd.define({
+    name: "test-element-and",
+});
 TemplateElement.define({
     name: "f-template",
 });

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

@@ -1,7 +1,7 @@
 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 when directive", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+    test("create a when directive for a boolean: true", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
         yield page.goto("/when");
         const customElementShow = yield page.locator("#show");
         const customElementHide = yield page.locator("#hide");
@@ -16,4 +16,67 @@ test.describe("f-template", () => __awaiter(void 0, void 0, void 0, function* ()
         yield expect(customElementShow).not.toHaveText("Hello world");
         yield expect(customElementHide).toHaveText("Hello world");
     }));
+    test("create a when directive for a boolean: false", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#show-not");
+        const customElementHide = yield page.locator("#hide-not");
+        yield expect(customElementShow).toHaveText("Hello world");
+        yield expect(customElementHide).not.toHaveText("Hello world");
+    }));
+    test("create a when directive value uses equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#equals-true");
+        const customElementHide = yield page.locator("#equals-false");
+        yield expect(customElementShow).toHaveText("Equals 3");
+        yield expect(customElementHide).not.toHaveText("Equals 3");
+    }));
+    test("create a when directive value uses not equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#not-equals-true");
+        const customElementHide = yield page.locator("#not-equals-false");
+        yield expect(customElementShow).toHaveText("Not equals 3");
+        yield expect(customElementHide).not.toHaveText("Not equals 3");
+    }));
+    test("create a when directive value uses greater than or equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#ge-true");
+        const customElementHide = yield page.locator("#ge-false");
+        yield expect(customElementShow).toHaveText("Two and Over");
+        yield expect(customElementHide).not.toHaveText("Two and Over");
+    }));
+    test("create a when directive value uses greater than", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#gt-true");
+        const customElementHide = yield page.locator("#gt-false");
+        yield expect(customElementShow).toHaveText("Over two");
+        yield expect(customElementHide).not.toHaveText("Over two");
+    }));
+    test("create a when directive value uses less than or equals", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#le-true");
+        const customElementHide = yield page.locator("#le-false");
+        yield expect(customElementShow).toHaveText("Two and Under");
+        yield expect(customElementHide).not.toHaveText("Two and Under");
+    }));
+    test("create a when directive value uses less than", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#lt-true");
+        const customElementHide = yield page.locator("#lt-false");
+        yield expect(customElementShow).toHaveText("Under two");
+        yield expect(customElementHide).not.toHaveText("Under two");
+    }));
+    test("create a when directive value uses or", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#or-true");
+        const customElementHide = yield page.locator("#or-false");
+        yield expect(customElementShow).toHaveText("This or That");
+        yield expect(customElementHide).not.toHaveText("This or That");
+    }));
+    test("create a when directive value uses and", ({ page }) => __awaiter(void 0, void 0, void 0, function* () {
+        yield page.goto("/when");
+        const customElementShow = yield page.locator("#and-true");
+        const customElementHide = yield page.locator("#and-false");
+        yield expect(customElementShow).toHaveText("This and That");
+        yield expect(customElementHide).not.toHaveText("This and That");
+    }));
 }));