@microsoft/fast-element 2.0.0-beta.8 → 2.0.0

package/dist/esm/templating/when-switch.bench.js

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { attr, FASTElement, html, nullableNumberConverter, when } from "../index.js";
+const emotionalTemplates = {
+    depressed: html `
+        <div>
+            <span>I'm so depressed :O</span>
+        </div>
+    `,
+    sad: html `
+        <div>
+            <span>I'm so sad :(</span>
+        </div>
+    `,
+    happy: html `
+        <div>
+            <span>I'm so happy :)</span>
+        </div>
+    `,
+    ecstatic: html `
+        <div>
+            <span>I'm so ecstatic :D</span>
+        </div>
+    `,
+    indifferent: html `
+        <div>
+            <span>I'm indifferent :|</span>
+        </div>
+    `,
+};
+class TestWhen extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+    }
+}
+__decorate([
+    attr({
+        mode: "fromView",
+        converter: nullableNumberConverter,
+    }),
+    __metadata("design:type", Number)
+], TestWhen.prototype, "value", void 0);
+TestWhen.define({
+    name: "test-when",
+    template: html `
+        <button @click="${x => x.update(true)}">Click Me</button>
+        ${when(x => x.value <= 1, emotionalTemplates.depressed)}
+        ${when(x => x.value === 2 || x.value === 3, emotionalTemplates.sad)}
+        ${when(x => x.value === 4 || x.value === 5, emotionalTemplates.indifferent)}
+        ${when(x => x.value >= 6 && x.value < 9, emotionalTemplates.happy)}
+        ${when(x => x.value === 9 || x.value === 10, emotionalTemplates.ecstatic)}
+    `,
+});
+const itemRenderer = () => {
+    const testWhen = document.createElement("test-when");
+    testWhen.click();
+    return testWhen;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";

package/dist/esm/templating/when.js

@@ -1,15 +1,22 @@
 import { isFunction } from "../interfaces.js";
+const noTemplate = () => null;
+function normalizeBinding(value) {
+    return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export function when(condition, templateOrTemplateBinding) {
+export function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
     const dataBinding = isFunction(condition) ? condition : () => condition;
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+    const templateBinding = normalizeBinding(templateOrTemplateBinding);
+    const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+    return (source, context) => dataBinding(source, context)
+        ? templateBinding(source, context)
+        : elseBinding(source, context);
 }

package/dist/esm/testing/fakes.js

@@ -1,4 +1,5 @@
-import { ExecutionContext } from "../index.js";
+import { noop } from "../interfaces.js";
+import { ExecutionContext } from "../observation/observable.js";
 export const Fake = Object.freeze({
     executionContext(parent, parentContext) {
         return {
@@ -73,4 +74,34 @@ export const Fake = Object.freeze({
             },
         };
     },
+    viewController(targets = {}, ...behaviors) {
+        const unbindables = new Set();
+        return {
+            isBound: false,
+            context: null,
+            onUnbind(object) {
+                unbindables.add(object);
+            },
+            source: null,
+            targets,
+            toJSON: noop,
+            bind(source, context = Fake.executionContext()) {
+                if (this.isBound) {
+                    return;
+                }
+                this.source = source;
+                this.context = context;
+                behaviors.forEach(x => x.bind(this));
+                this.isBound = true;
+            },
+            unbind() {
+                if (this.isBound) {
+                    unbindables.forEach(x => x.unbind(this));
+                    this.source = null;
+                    this.context = null;
+                    this.isBound = false;
+                }
+            },
+        };
+    },
 });

package/dist/esm/testing/fixture.js

@@ -46,7 +46,7 @@ export function fixture(templateNameOrType, options = {}) {
         }
         if (typeof templateNameOrType === "string") {
             const html = `<${templateNameOrType}></${templateNameOrType}>`;
-            templateNameOrType = new ViewTemplate(html, {});
+            templateNameOrType = new ViewTemplate(html);
         }
         const view = templateNameOrType.create();
         const element = findElement(view);

package/dist/esm/utilities.js

@@ -1,3 +1,6 @@
+import { DOM } from "./dom.js";
+import { ExecutionContext } from "./observation/observable.js";
+import { nextId } from "./templating/markup.js";
 /**
  * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
  * When the parent of a node is a shadow-root, it will return the host
@@ -25,7 +28,7 @@ export function composedParent(element) {
  * Determines if the reference element contains the test element in a "composed" DOM tree that
  * ignores shadow DOM boundaries.
  *
- * Returns true of the test element is a descendent of the reference, or exist in
+ * Returns true of the test element is a descendent of the reference, or exists in
  * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
  * @param reference - The element to test for containment against.
  * @param test - The element being tested for containment.
@@ -42,3 +45,96 @@ export function composedContains(reference, test) {
     }
     return false;
 }
+/**
+ * An extension of MutationObserver that supports unobserving nodes.
+ * @internal
+ */
+export class UnobservableMutationObserver extends MutationObserver {
+    /**
+     * Creates an instance of UnobservableMutationObserver.
+     * @param callback - The callback to invoke when observed nodes are changed.
+     */
+    constructor(callback) {
+        function handler(mutations) {
+            this.callback.call(null, mutations.filter(record => this.observedNodes.has(record.target)));
+        }
+        super(handler);
+        this.callback = callback;
+        this.observedNodes = new Set();
+    }
+    observe(target, options) {
+        this.observedNodes.add(target);
+        super.observe(target, options);
+    }
+    unobserve(target) {
+        this.observedNodes.delete(target);
+        if (this.observedNodes.size < 1) {
+            this.disconnect();
+        }
+    }
+}
+/**
+ * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+ * control ViewBehaviors.
+ * @public
+ */
+export const ViewBehaviorOrchestrator = Object.freeze({
+    /**
+     * Creates a ViewBehaviorOrchestrator.
+     * @param source - The source to to associate behaviors with.
+     * @returns A ViewBehaviorOrchestrator.
+     */
+    create(source) {
+        const behaviors = [];
+        const targets = {};
+        let unbindables = null;
+        let isConnected = false;
+        return {
+            source,
+            context: ExecutionContext.default,
+            targets,
+            get isBound() {
+                return isConnected;
+            },
+            addBehaviorFactory(factory, target) {
+                var _a, _b, _c, _d;
+                const compiled = factory;
+                compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
+                compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
+                compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
+                compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
+                this.addTarget(compiled.targetNodeId, target);
+                this.addBehavior(compiled.createBehavior());
+            },
+            addTarget(nodeId, target) {
+                targets[nodeId] = target;
+            },
+            addBehavior(behavior) {
+                behaviors.push(behavior);
+                if (isConnected) {
+                    behavior.bind(this);
+                }
+            },
+            onUnbind(unbindable) {
+                if (unbindables === null) {
+                    unbindables = [];
+                }
+                unbindables.push(unbindable);
+            },
+            connectedCallback(controller) {
+                if (!isConnected) {
+                    isConnected = true;
+                    behaviors.forEach(x => x.bind(this));
+                }
+            },
+            disconnectedCallback(controller) {
+                if (isConnected) {
+                    isConnected = false;
+                    if (unbindables !== null) {
+                        unbindables.forEach(x => x.unbind(this));
+                    }
+                }
+            },
+        };
+    },
+});