@microsoft/fast-element 2.0.0-beta.9 → 2.0.1

package/dist/esm/templating/html-binding-directive.js

@@ -0,0 +1,218 @@
+import { isHydratable } from "../components/hydration.js";
+import { DOM, DOMAspect } from "../dom.js";
+import "../interfaces.js";
+import { ExecutionContext, } from "../observation/observable.js";
+import { FAST } from "../platform.js";
+import { HTMLDirective, } from "./html-directive.js";
+import { Markup } from "./markup.js";
+import { HydrationStage } from "./view.js";
+function isContentTemplate(value) {
+    return value.create !== undefined;
+}
+function updateContent(target, aspect, value, controller) {
+    // If there's no actual value, then this equates to the
+    // empty string for the purposes of content bindings.
+    if (value === null || value === undefined) {
+        value = "";
+    }
+    // If the value has a "create" method, then it's a ContentTemplate.
+    if (isContentTemplate(value)) {
+        target.textContent = "";
+        let view = target.$fastView;
+        // If there's no previous view that we might be able to
+        // reuse then create a new view from the template.
+        if (view === void 0) {
+            if (isHydratable(controller) &&
+                isHydratable(value) &&
+                controller.bindingViewBoundaries[this.targetNodeId] !== undefined &&
+                controller.hydrationStage !== HydrationStage.hydrated) {
+                const viewNodes = controller.bindingViewBoundaries[this.targetNodeId];
+                view = value.hydrate(viewNodes.first, viewNodes.last);
+            }
+            else {
+                view = value.create();
+            }
+        }
+        else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (target.$fastTemplate !== value) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
+                view = value.create();
+            }
+        }
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(controller.source, controller.context);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(controller.source, controller.context);
+        }
+    }
+    else {
+        const view = target.$fastView;
+        // If there is a view and it's currently composed into
+        // the DOM, then we need to remove it.
+        if (view !== void 0 && view.isComposed) {
+            view.isComposed = false;
+            view.remove();
+            if (view.needsBindOnly) {
+                view.needsBindOnly = false;
+            }
+            else {
+                view.unbind();
+            }
+        }
+        target.textContent = value;
+    }
+}
+function updateTokenList(target, aspect, value) {
+    var _a;
+    const lookup = `${this.id}-t`;
+    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { v: 0, cv: Object.create(null) });
+    const classVersions = state.cv;
+    let version = state.v;
+    const tokenList = target[aspect];
+    // Add the classes, tracking the version at which they were added.
+    if (value !== null && value !== undefined && value.length) {
+        const names = value.split(/\s+/);
+        for (let i = 0, ii = names.length; i < ii; ++i) {
+            const currentName = names[i];
+            if (currentName === "") {
+                continue;
+            }
+            classVersions[currentName] = version;
+            tokenList.add(currentName);
+        }
+    }
+    state.v = version + 1;
+    // If this is the first call to add classes, there's no need to remove old ones.
+    if (version === 0) {
+        return;
+    }
+    // Remove classes from the previous version.
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
+            tokenList.remove(name);
+        }
+    }
+}
+const sinkLookup = {
+    [DOMAspect.attribute]: DOM.setAttribute,
+    [DOMAspect.booleanAttribute]: DOM.setBooleanAttribute,
+    [DOMAspect.property]: (t, a, v) => (t[a] = v),
+    [DOMAspect.content]: updateContent,
+    [DOMAspect.tokenList]: updateTokenList,
+    [DOMAspect.event]: () => void 0,
+};
+/**
+ * A directive that applies bindings.
+ * @public
+ */
+export class HTMLBindingDirective {
+    /**
+     * Creates an instance of HTMLBindingDirective.
+     * @param dataBinding - The binding configuration to apply.
+     */
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = DOMAspect.content;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        return Markup.interpolation(add(this));
+    }
+    /**
+     * Creates a behavior.
+     */
+    createBehavior() {
+        var _a;
+        if (this.updateTarget === null) {
+            const sink = sinkLookup[this.aspectType];
+            const policy = (_a = this.dataBinding.policy) !== null && _a !== void 0 ? _a : this.policy;
+            if (!sink) {
+                throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            }
+            this.data = `${this.id}-d`;
+            this.updateTarget = policy.protect(this.targetTagName, this.aspectType, this.targetAspect, sink);
+        }
+        return this;
+    }
+    /** @internal */
+    bind(controller) {
+        var _a;
+        const target = controller.targets[this.targetNodeId];
+        const isHydrating = isHydratable(controller) &&
+            controller.hydrationStage &&
+            controller.hydrationStage !== HydrationStage.hydrated;
+        switch (this.aspectType) {
+            case DOMAspect.event:
+                target[this.data] = controller;
+                target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+                break;
+            case DOMAspect.content:
+                controller.onUnbind(this);
+            // intentional fall through
+            default:
+                const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
+                observer.target = target;
+                observer.controller = controller;
+                if (isHydrating &&
+                    (this.aspectType === DOMAspect.attribute ||
+                        this.aspectType === DOMAspect.booleanAttribute)) {
+                    observer.bind(controller);
+                    // Skip updating target during bind for attributes
+                    break;
+                }
+                this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+                break;
+        }
+    }
+    /** @internal */
+    unbind(controller) {
+        const target = controller.targets[this.targetNodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleEvent(event) {
+        const controller = event.currentTarget[this.data];
+        if (controller.isBound) {
+            ExecutionContext.setEvent(event);
+            const result = this.dataBinding.evaluate(controller.source, controller.context);
+            ExecutionContext.setEvent(null);
+            if (result !== true) {
+                event.preventDefault();
+            }
+        }
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+    }
+}
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });

package/dist/esm/templating/html-directive.js

@@ -1,67 +1,6 @@
-import { ExecutionContext, } from "../observation/observable.js";
-import { createTypeRegistry } from "../platform.js";
-import { Markup, nextId } from "./markup.js";
-/**
- * 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) {
-                const nodeId = factory.nodeId || (factory.nodeId = nextId());
-                factory.id || (factory.id = nextId());
-                this.addTarget(nodeId, target);
-                this.addBehavior(factory.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));
-                    }
-                }
-            },
-        };
-    },
-});
+import { DOMAspect } from "../dom.js";
+import { createTypeRegistry, makeSerializationNoop } from "../platform.js";
+import { Markup } from "./markup.js";
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -89,67 +28,6 @@ export const HTMLDirective = Object.freeze({
         registry.register(options);
         return type;
     },
-});
-/**
- * Decorator: Defines an HTMLDirective.
- * @param options - Provides options that specify the directive's application.
- * @public
- */
-export function htmlDirective(options) {
-    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
-    return function (type) {
-        HTMLDirective.define(type, options);
-    };
-}
-/**
- * Captures a binding expression along with related information and capabilities.
- *
- * @public
- */
-export class Binding {
-    /**
-     * Creates a binding.
-     * @param evaluate - Evaluates the binding.
-     * @param isVolatile - Indicates whether the binding is volatile.
-     */
-    constructor(evaluate, isVolatile = false) {
-        this.evaluate = evaluate;
-        this.isVolatile = isVolatile;
-    }
-}
-/**
- * The type of HTML aspect to target.
- * @public
- */
-export const Aspect = Object.freeze({
-    /**
-     * Not aspected.
-     */
-    none: 0,
-    /**
-     * An attribute.
-     */
-    attribute: 1,
-    /**
-     * A boolean attribute.
-     */
-    booleanAttribute: 2,
-    /**
-     * A property.
-     */
-    property: 3,
-    /**
-     * Content
-     */
-    content: 4,
-    /**
-     * A token list.
-     */
-    tokenList: 5,
-    /**
-     * An event.
-     */
-    event: 6,
     /**
      *
      * @param directive - The directive to assign the aspect to.
@@ -157,48 +35,46 @@ export const Aspect = Object.freeze({
      * @remarks
      * If a falsy value is provided, then the content aspect will be assigned.
      */
-    assign(directive, value) {
+    assignAspect(directive, value) {
         if (!value) {
-            directive.aspectType = Aspect.content;
+            directive.aspectType = DOMAspect.content;
             return;
         }
         directive.sourceAspect = value;
         switch (value[0]) {
             case ":":
                 directive.targetAspect = value.substring(1);
-                switch (directive.targetAspect) {
-                    case "innerHTML":
-                        directive.aspectType = Aspect.property;
-                        break;
-                    case "classList":
-                        directive.aspectType = Aspect.tokenList;
-                        break;
-                    default:
-                        directive.aspectType = Aspect.property;
-                        break;
-                }
+                directive.aspectType =
+                    directive.targetAspect === "classList"
+                        ? DOMAspect.tokenList
+                        : DOMAspect.property;
                 break;
             case "?":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.booleanAttribute;
+                directive.aspectType = DOMAspect.booleanAttribute;
                 break;
             case "@":
                 directive.targetAspect = value.substring(1);
-                directive.aspectType = Aspect.event;
+                directive.aspectType = DOMAspect.event;
                 break;
             default:
-                if (value === "class") {
-                    directive.targetAspect = "className";
-                    directive.aspectType = Aspect.property;
-                }
-                else {
-                    directive.targetAspect = value;
-                    directive.aspectType = Aspect.attribute;
-                }
+                directive.targetAspect = value;
+                directive.aspectType = DOMAspect.attribute;
                 break;
         }
     },
 });
+/**
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
+ * @public
+ */
+export function htmlDirective(options) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        HTMLDirective.define(type, options);
+    };
+}
 /**
  * A base class used for attribute directives that don't need internal state.
  * @public
@@ -210,10 +86,6 @@ export class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
-        /**
-         * The unique id of the factory.
-         */
-        this.id = nextId();
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -232,3 +104,4 @@ export class StatelessAttachedAttributeDirective {
         return this;
     }
 }
+makeSerializationNoop(StatelessAttachedAttributeDirective);

package/dist/esm/templating/install-hydratable-view-templates.js

@@ -0,0 +1,17 @@
+import { Hydratable } from "../components/hydration.js";
+import { ViewTemplate } from "./template.js";
+import { HydrationView } from "./view.js";
+// Configure ViewTemplate to be hydratable by attaching a symbol identifier
+// and a hydrate method. Augmenting the hydration features is done by
+// property assignment instead of class extension to better allow the
+// hydration feature to be tree-shaken.
+Object.defineProperties(ViewTemplate.prototype, {
+    [Hydratable]: { value: Hydratable, enumerable: false, configurable: false },
+    hydrate: {
+        value: function (firstChild, lastChild, hostBindingTarget) {
+            return new HydrationView(firstChild, lastChild, this, hostBindingTarget);
+        },
+        enumerable: true,
+        configurable: false,
+    },
+});

package/dist/esm/templating/node-observation.js

@@ -16,9 +16,15 @@ export const elements = (selector) => selector
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export class NodeObservationDirective extends StatelessAttachedAttributeDirective {
-    constructor() {
-        super(...arguments);
-        this.sourceProperty = `${this.id}-s`;
+    /**
+     * The unique id of the factory.
+     */
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value;
+        this._controllerProperty = `${value}-c`;
     }
     /**
      * Bind this behavior to the source.
@@ -27,8 +33,8 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @param targets - The targets that behaviors in a view can attach to.
      */
     bind(controller) {
-        const target = controller.targets[this.nodeId];
-        target[this.sourceProperty] = controller.source;
+        const target = controller.targets[this.targetNodeId];
+        target[this._controllerProperty] = controller;
         this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
         controller.onUnbind(this);
@@ -40,10 +46,10 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @param targets - The targets that behaviors in a view can attach to.
      */
     unbind(controller) {
-        const target = controller.targets[this.nodeId];
+        const target = controller.targets[this.targetNodeId];
         this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
-        target[this.sourceProperty] = null;
+        target[this._controllerProperty] = null;
     }
     /**
      * Gets the data source for the target.
@@ -51,7 +57,7 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @returns The source.
      */
     getSource(target) {
-        return target[this.sourceProperty];
+        return target[this._controllerProperty].source;
     }
     /**
      * Updates the source property with the computed nodes.

package/dist/esm/templating/ref.js

@@ -9,7 +9,7 @@ export class RefDirective extends StatelessAttachedAttributeDirective {
      * @param controller - The view controller that manages the lifecycle of this behavior.
      */
     bind(controller) {
-        controller.source[this.options] = controller.targets[this.nodeId];
+        controller.source[this.options] = controller.targets[this.targetNodeId];
     }
 }
 HTMLDirective.define(RefDirective);

package/dist/esm/templating/render.bench.js

@@ -0,0 +1,56 @@
+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, css, FASTElement, html, oneTime, repeat } from "../index.js";
+import { data } from "../__test__/utilities.js";
+const xItemTemplate = html `
+    <div @click="${x => x.onClick}" class="item">${x => x.value}</div>
+`;
+const styles = css `
+    .item {
+        display: flex;
+    }
+`;
+class XItem extends FASTElement {
+    onClick(e) {
+        console.log(e.type);
+    }
+}
+__decorate([
+    attr,
+    __metadata("design:type", Object)
+], XItem.prototype, "value", void 0);
+XItem.define({
+    name: "x-item",
+    template: xItemTemplate,
+    styles,
+});
+const xAppTemplate = html `
+    <div id="test-container">
+        ${repeat(x => x.items, html `
+                <x-item :value="${oneTime((x) => x.label)}"></x-item>
+            `)}
+    </div>
+`;
+class XApp extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.items = data;
+    }
+}
+XApp.define({
+    name: "x-app",
+    template: xAppTemplate,
+});
+const itemRenderer = () => {
+    const testRender = document.createElement("x-app");
+    return testRender;
+};
+export default itemRenderer;
+export { tests } from "@tensile-perf/web-components";