@microsoft/fast-element 1.10.2 → 2.0.0-beta.3

package/dist/esm/templating/compiler.js

@@ -1,186 +1,270 @@
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
-import { HTMLBindingDirective } from "./binding.js";
-let sharedContext = null;
+import { isString } from "../interfaces.js";
+import { FAST } from "../platform.js";
+import { Parser } from "./markup.js";
+import { bind, oneTime } from "./binding.js";
+import { Aspect } from "./html-directive.js";
+import { HTMLView } from "./view.js";
+const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
+const descriptorCache = {};
+// used to prevent creating lots of objects just to track node and index while compiling
+const next = {
+    index: 0,
+    node: null,
+};
 class CompilationContext {
-    addFactory(factory) {
-        factory.targetIndex = this.targetIndex;
-        this.behaviorFactories.push(factory);
+    constructor(fragment, directives) {
+        this.fragment = fragment;
+        this.directives = directives;
+        this.proto = null;
+        this.nodeIds = new Set();
+        this.descriptors = {};
+        this.factories = [];
     }
-    captureContentBinding(directive) {
-        directive.targetAtContent();
-        this.addFactory(directive);
-    }
-    reset() {
-        this.behaviorFactories = [];
-        this.targetIndex = -1;
-    }
-    release() {
-        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
-        sharedContext = this;
-    }
-    static borrow(directives) {
-        const shareable = sharedContext || new CompilationContext();
-        shareable.directives = directives;
-        shareable.reset();
-        sharedContext = null;
-        return shareable;
-    }
-}
-function createAggregateBinding(parts) {
-    if (parts.length === 1) {
-        return parts[0];
+    addFactory(factory, parentId, nodeId, targetIndex) {
+        if (!this.nodeIds.has(nodeId)) {
+            this.nodeIds.add(nodeId);
+            this.addTargetDescriptor(parentId, nodeId, targetIndex);
+        }
+        factory.nodeId = nodeId;
+        this.factories.push(factory);
     }
-    let targetName;
-    const partCount = parts.length;
-    const finalParts = parts.map((x) => {
-        if (typeof x === "string") {
-            return () => x;
-        }
-        targetName = x.targetName || targetName;
-        return x.binding;
-    });
-    const binding = (scope, context) => {
-        let output = "";
-        for (let i = 0; i < partCount; ++i) {
-            output += finalParts[i](scope, context);
-        }
-        return output;
-    };
-    const directive = new HTMLBindingDirective(binding);
-    directive.targetName = targetName;
-    return directive;
-}
-const interpolationEndLength = _interpolationEnd.length;
-function parseContent(context, value) {
-    const valueParts = value.split(_interpolationStart);
-    if (valueParts.length === 1) {
-        return null;
+    freeze() {
+        this.proto = Object.create(null, this.descriptors);
+        return this;
     }
-    const bindingParts = [];
-    for (let i = 0, ii = valueParts.length; i < ii; ++i) {
-        const current = valueParts[i];
-        const index = current.indexOf(_interpolationEnd);
-        let literal;
-        if (index === -1) {
-            literal = current;
+    addTargetDescriptor(parentId, targetId, targetIndex) {
+        const descriptors = this.descriptors;
+        if (targetId === "r" || // root
+            targetId === "h" || // host
+            descriptors[targetId]) {
+            return;
         }
-        else {
-            const directiveIndex = parseInt(current.substring(0, index));
-            bindingParts.push(context.directives[directiveIndex]);
-            literal = current.substring(index + interpolationEndLength);
+        if (!descriptors[parentId]) {
+            const index = parentId.lastIndexOf(".");
+            const grandparentId = parentId.substring(0, index);
+            const childIndex = parseInt(parentId.substring(index + 1));
+            this.addTargetDescriptor(grandparentId, parentId, childIndex);
         }
-        if (literal !== "") {
-            bindingParts.push(literal);
+        let descriptor = descriptorCache[targetId];
+        if (!descriptor) {
+            const field = `_${targetId}`;
+            descriptorCache[targetId] = descriptor = {
+                get() {
+                    var _a;
+                    return ((_a = this[field]) !== null && _a !== void 0 ? _a : (this[field] = this[parentId].childNodes[targetIndex]));
+                },
+            };
         }
+        descriptors[targetId] = descriptor;
+    }
+    createView(hostBindingTarget) {
+        const fragment = this.fragment.cloneNode(true);
+        const targets = Object.create(this.proto);
+        targets.r = fragment;
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : fragment;
+        for (const id of this.nodeIds) {
+            targets[id]; // trigger locator
+        }
+        return new HTMLView(fragment, this.factories, targets);
     }
-    return bindingParts;
 }
-function compileAttributes(context, node, includeBasicValues = false) {
+function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBasicValues = false) {
     const attributes = node.attributes;
+    const directives = context.directives;
     for (let i = 0, ii = attributes.length; i < ii; ++i) {
         const attr = attributes[i];
         const attrValue = attr.value;
-        const parseResult = parseContent(context, attrValue);
+        const parseResult = Parser.parse(attrValue, directives);
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = new HTMLBindingDirective(() => attrValue);
-                result.targetName = attr.name;
+                result = bind(() => attrValue, oneTime);
+                Aspect.assign(result, attr.name);
             }
         }
         else {
-            result = createAggregateBinding(parseResult);
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            result = Compiler.aggregate(parseResult);
         }
         if (result !== null) {
             node.removeAttributeNode(attr);
             i--;
             ii--;
-            context.addFactory(result);
+            context.addFactory(result, parentId, nodeId, nodeIndex);
         }
     }
 }
-function compileContent(context, node, walker) {
-    const parseResult = parseContent(context, node.textContent);
-    if (parseResult !== null) {
-        let lastNode = node;
-        for (let i = 0, ii = parseResult.length; i < ii; ++i) {
-            const currentPart = parseResult[i];
-            const currentNode = i === 0
-                ? node
-                : lastNode.parentNode.insertBefore(document.createTextNode(""), lastNode.nextSibling);
-            if (typeof currentPart === "string") {
-                currentNode.textContent = currentPart;
-            }
-            else {
-                currentNode.textContent = " ";
-                context.captureContentBinding(currentPart);
-            }
-            lastNode = currentNode;
-            context.targetIndex++;
-            if (currentNode !== node) {
-                walker.nextNode();
-            }
+function compileContent(context, node, parentId, nodeId, nodeIndex) {
+    const parseResult = Parser.parse(node.textContent, context.directives);
+    if (parseResult === null) {
+        next.node = node.nextSibling;
+        next.index = nodeIndex + 1;
+        return next;
+    }
+    let currentNode;
+    let lastNode = (currentNode = node);
+    for (let i = 0, ii = parseResult.length; i < ii; ++i) {
+        const currentPart = parseResult[i];
+        if (i !== 0) {
+            nodeIndex++;
+            nodeId = targetIdFrom(parentId, nodeIndex);
+            currentNode = lastNode.parentNode.insertBefore(document.createTextNode(""), lastNode.nextSibling);
+        }
+        if (isString(currentPart)) {
+            currentNode.textContent = currentPart;
+        }
+        else {
+            currentNode.textContent = " ";
+            Aspect.assign(currentPart);
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
         }
-        context.targetIndex--;
+        lastNode = currentNode;
     }
+    next.index = nodeIndex + 1;
+    next.node = lastNode.nextSibling;
+    return next;
 }
+function compileChildren(context, parent, parentId) {
+    let nodeIndex = 0;
+    let childNode = parent.firstChild;
+    while (childNode) {
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        const result = compileNode(context, parentId, childNode, nodeIndex);
+        childNode = result.node;
+        nodeIndex = result.index;
+    }
+}
+function compileNode(context, parentId, node, nodeIndex) {
+    const nodeId = targetIdFrom(parentId, nodeIndex);
+    switch (node.nodeType) {
+        case 1: // element node
+            compileAttributes(context, parentId, node, nodeId, nodeIndex);
+            compileChildren(context, node, nodeId);
+            break;
+        case 3: // text node
+            return compileContent(context, node, parentId, nodeId, nodeIndex);
+        case 8: // comment
+            const parts = Parser.parse(node.data, context.directives);
+            if (parts !== null) {
+                context.addFactory(
+                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+                Compiler.aggregate(parts), parentId, nodeId, nodeIndex);
+            }
+            break;
+    }
+    next.index = nodeIndex + 1;
+    next.node = node.nextSibling;
+    return next;
+}
+function isMarker(node, directives) {
+    return (node &&
+        node.nodeType == 8 &&
+        Parser.parse(node.data, directives) !== null);
+}
+const templateTag = "TEMPLATE";
+const policyOptions = { createHTML: html => html };
+let htmlPolicy = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
+    : policyOptions;
+const fastHTMLPolicy = htmlPolicy;
 /**
- * Compiles a template and associated directives into a raw compilation
- * result which include a cloneable DocumentFragment and factories capable
- * of attaching runtime behavior to nodes within the fragment.
- * @param template - The template to compile.
- * @param directives - The directives referenced by the template.
- * @remarks
- * The template that is provided for compilation is altered in-place
- * and cannot be compiled again. If the original template must be preserved,
- * it is recommended that you clone the original and pass the clone to this API.
+ * Common APIs related to compilation.
  * @public
  */
-export function compileTemplate(template, directives) {
-    const fragment = template.content;
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
-    document.adoptNode(fragment);
-    const context = CompilationContext.borrow(directives);
-    compileAttributes(context, template, true);
-    const hostBehaviorFactories = context.behaviorFactories;
-    context.reset();
-    const walker = DOM.createTemplateWalker(fragment);
-    let node;
-    while ((node = walker.nextNode())) {
-        context.targetIndex++;
-        switch (node.nodeType) {
-            case 1: // element node
-                compileAttributes(context, node);
-                break;
-            case 3: // text node
-                compileContent(context, node, walker);
-                break;
-            case 8: // comment
-                if (DOM.isMarker(node)) {
-                    context.addFactory(directives[DOM.extractDirectiveIndexFromMarker(node)]);
-                }
+export const Compiler = {
+    /**
+     * Sets the HTML trusted types policy used by the compiler.
+     * @param policy - The policy to set for HTML.
+     * @remarks
+     * This API can only be called once, for security reasons. It should be
+     * called by the application developer at the start of their program.
+     */
+    setHTMLPolicy(policy) {
+        if (htmlPolicy !== fastHTMLPolicy) {
+            throw FAST.error(1201 /* Message.onlySetHTMLPolicyOnce */);
         }
-    }
-    let targetOffset = 0;
-    if (
-    // If the first node in a fragment is a marker, that means it's an unstable first node,
-    // because something like a when, repeat, etc. could add nodes before the marker.
-    // To mitigate this, we insert a stable first node. However, if we insert a node,
-    // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-    DOM.isMarker(fragment.firstChild) ||
-        // Or if there is only one node and a directive, it means the template's content
-        // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
-        // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-        (fragment.childNodes.length === 1 && directives.length)) {
-        fragment.insertBefore(document.createComment(""), fragment.firstChild);
-        targetOffset = -1;
-    }
-    const viewBehaviorFactories = context.behaviorFactories;
-    context.release();
-    return {
-        fragment,
-        viewBehaviorFactories,
-        hostBehaviorFactories,
-        targetOffset,
-    };
-}
+        htmlPolicy = policy;
+    },
+    /**
+     * Compiles a template and associated directives into a compilation
+     * result which can be used to create views.
+     * @param html - The html string or template element to compile.
+     * @param directives - The directives referenced by the template.
+     * @remarks
+     * The template that is provided for compilation is altered in-place
+     * and cannot be compiled again. If the original template must be preserved,
+     * it is recommended that you clone the original and pass the clone to this API.
+     * @public
+     */
+    compile(html, directives) {
+        let template;
+        if (isString(html)) {
+            template = document.createElement(templateTag);
+            template.innerHTML = htmlPolicy.createHTML(html);
+            const fec = template.content.firstElementChild;
+            if (fec !== null && fec.tagName === templateTag) {
+                template = fec;
+            }
+        }
+        else {
+            template = html;
+        }
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
+        const fragment = document.adoptNode(template.content);
+        const context = new CompilationContext(fragment, directives);
+        compileAttributes(context, "", template, /* host */ "h", 0, true);
+        if (
+        // If the first node in a fragment is a marker, that means it's an unstable first node,
+        // because something like a when, repeat, etc. could add nodes before the marker.
+        // To mitigate this, we insert a stable first node. However, if we insert a node,
+        // that will alter the result of the TreeWalker. So, we also need to offset the target index.
+        isMarker(fragment.firstChild, directives) ||
+            // Or if there is only one node and a directive, it means the template's content
+            // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
+            // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
+            (fragment.childNodes.length === 1 && Object.keys(directives).length > 0)) {
+            fragment.insertBefore(document.createComment(""), fragment.firstChild);
+        }
+        compileChildren(context, fragment, /* root */ "r");
+        next.node = null; // prevent leaks
+        return context.freeze();
+    },
+    /**
+     * Sets the default compilation strategy that will be used by the ViewTemplate whenever
+     * it needs to compile a view preprocessed with the html template function.
+     * @param strategy - The compilation strategy to use when compiling templates.
+     */
+    setDefaultStrategy(strategy) {
+        this.compile = strategy;
+    },
+    /**
+     * Aggregates an array of strings and directives into a single directive.
+     * @param parts - A heterogeneous array of static strings interspersed with
+     * directives.
+     * @returns A single inline directive that aggregates the behavior of all the parts.
+     */
+    aggregate(parts) {
+        if (parts.length === 1) {
+            return parts[0];
+        }
+        let sourceAspect;
+        const partCount = parts.length;
+        const finalParts = parts.map((x) => {
+            if (isString(x)) {
+                return () => x;
+            }
+            sourceAspect = x.sourceAspect || sourceAspect;
+            return x.binding;
+        });
+        const binding = (scope, context) => {
+            let output = "";
+            for (let i = 0; i < partCount; ++i) {
+                output += finalParts[i](scope, context);
+            }
+            return output;
+        };
+        const directive = bind(binding);
+        Aspect.assign(directive, sourceAspect);
+        return directive;
+    },
+};

package/dist/esm/templating/dom.js

@@ -0,0 +1,49 @@
+import { Updates } from "../observation/update-queue.js";
+/**
+ * Common DOM APIs.
+ * @public
+ */
+export const DOM = Object.freeze({
+    /**
+     * @deprecated
+     * Use Updates.enqueue().
+     */
+    queueUpdate: Updates.enqueue,
+    /**
+     * @deprecated
+     * Use Updates.next()
+     */
+    nextUpdate: Updates.next,
+    /**
+     * @deprecated
+     * Use Updates.process()
+     */
+    processUpdates: Updates.process,
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element, attributeName, value) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});

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

@@ -1,64 +1,152 @@
-import { DOM } from "../dom.js";
+import { createTypeRegistry } from "../platform.js";
+import { Markup } from "./markup.js";
+const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public
  */
-export class HTMLDirective {
-    constructor() {
-        /**
-         * The index of the DOM node to which the created behavior will apply.
-         */
-        this.targetIndex = 0;
-    }
-}
+export const HTMLDirective = Object.freeze({
+    /**
+     * Gets the directive definition associated with the instance.
+     * @param instance - The directive instance to retrieve the definition for.
+     */
+    getForInstance: registry.getForInstance,
+    /**
+     * Gets the directive definition associated with the specified type.
+     * @param type - The directive type to retrieve the definition for.
+     */
+    getByType: registry.getByType,
+    /**
+     * Defines an HTMLDirective based on the options.
+     * @param type - The type to define as a directive.
+     * @param options - Options that specify the directive's application.
+     */
+    define(type, options) {
+        options = options || {};
+        options.type = type;
+        registry.register(options);
+        return type;
+    },
+});
 /**
- * A {@link HTMLDirective} that targets a named attribute or property on a node.
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
  * @public
  */
-export class TargetedHTMLDirective extends HTMLDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Creates a placeholder string based on the directive's index within the template.
-         * @param index - The index of the directive within the template.
-         */
-        this.createPlaceholder = DOM.createInterpolationPlaceholder;
-    }
+export function htmlDirective(options) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        HTMLDirective.define(type, options);
+    };
 }
 /**
- * A directive that attaches special behavior to an element via a custom attribute.
+ * The type of HTML aspect to target.
  * @public
  */
-export class AttachedBehaviorHTMLDirective extends HTMLDirective {
+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 name - The name of the behavior; used as a custom attribute on the element.
-     * @param behavior - The behavior to instantiate and attach to the element.
-     * @param options - Options to pass to the behavior during creation.
+     * @param directive - The directive to assign the aspect to.
+     * @param value - The value to base the aspect determination on.
+     * @remarks
+     * If a falsy value is provided, then the content aspect will be assigned.
+     */
+    assign(directive, value) {
+        if (!value) {
+            directive.aspectType = Aspect.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;
+                }
+                break;
+            case "?":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.booleanAttribute;
+                break;
+            case "@":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.event;
+                break;
+            default:
+                if (value === "class") {
+                    directive.targetAspect = "className";
+                    directive.aspectType = Aspect.property;
+                }
+                else {
+                    directive.targetAspect = value;
+                    directive.aspectType = Aspect.attribute;
+                }
+                break;
+        }
+    },
+});
+/**
+ * A base class used for attribute directives that don't need internal state.
+ * @public
+ */
+export class StatelessAttachedAttributeDirective {
+    /**
+     * Creates an instance of RefDirective.
+     * @param options - The options to use in configuring the directive.
      */
-    constructor(name, behavior, options) {
-        super();
-        this.name = name;
-        this.behavior = behavior;
+    constructor(options) {
         this.options = options;
     }
     /**
-     * Creates a placeholder string based on the directive's index within the template.
-     * @param index - The index of the directive within the template.
-     * @remarks
-     * Creates a custom attribute placeholder.
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
      */
-    createPlaceholder(index) {
-        return DOM.createCustomAttributePlaceholder(this.name, index);
+    createBehavior(targets) {
+        return this;
     }
     /**
-     * Creates a behavior for the provided target node.
-     * @param target - The node instance to create the behavior for.
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
      * @remarks
-     * Creates an instance of the `behavior` type this directive was constructed with
-     * and passes the target and options to that `behavior`'s constructor.
+     * Creates a custom attribute placeholder.
      */
-    createBehavior(target) {
-        return new this.behavior(target, this.options);
+    createHTML(add) {
+        return Markup.attribute(add(this));
     }
 }