@microsoft/fast-element 1.10.0 → 2.0.0-beta.1

package/dist/esm/templating/template.js

@@ -1,86 +1,33 @@
-import { DOM } from "../dom.js";
-import { defaultExecutionContext } from "../observation/observable.js";
-import { compileTemplate } from "./compiler.js";
-import { HTMLView } from "./view.js";
-import { HTMLDirective, TargetedHTMLDirective, } from "./html-directive.js";
-import { HTMLBindingDirective } from "./binding.js";
+import { isFunction, isString } from "../interfaces.js";
+import { ExecutionContext, } from "../observation/observable.js";
+import { bind, oneTime } from "./binding.js";
+import { Compiler } from "./compiler.js";
+import { Aspect, HTMLDirective, } from "./html-directive.js";
+import { nextId } from "./markup.js";
 /**
  * A template capable of creating HTMLView instances or rendering directly to DOM.
  * @public
  */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 export class ViewTemplate {
     /**
      * Creates an instance of ViewTemplate.
      * @param html - The html representing what this template will instantiate, including placeholders for directives.
-     * @param directives - The directives that will be connected to placeholders in the html.
+     * @param factories - The directives that will be connected to placeholders in the html.
      */
-    constructor(html, directives) {
-        this.behaviorCount = 0;
-        this.hasHostBehaviors = false;
-        this.fragment = null;
-        this.targetOffset = 0;
-        this.viewBehaviorFactories = null;
-        this.hostBehaviorFactories = null;
+    constructor(html, factories) {
+        this.result = null;
         this.html = html;
-        this.directives = directives;
+        this.factories = factories;
     }
     /**
      * Creates an HTMLView instance based on this template definition.
      * @param hostBindingTarget - The element that host behaviors will be bound to.
      */
     create(hostBindingTarget) {
-        if (this.fragment === null) {
-            let template;
-            const html = this.html;
-            if (typeof html === "string") {
-                template = document.createElement("template");
-                template.innerHTML = DOM.createHTML(html);
-                const fec = template.content.firstElementChild;
-                if (fec !== null && fec.tagName === "TEMPLATE") {
-                    template = fec;
-                }
-            }
-            else {
-                template = html;
-            }
-            const result = compileTemplate(template, this.directives);
-            this.fragment = result.fragment;
-            this.viewBehaviorFactories = result.viewBehaviorFactories;
-            this.hostBehaviorFactories = result.hostBehaviorFactories;
-            this.targetOffset = result.targetOffset;
-            this.behaviorCount =
-                this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
-            this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;
-        }
-        const fragment = this.fragment.cloneNode(true);
-        const viewFactories = this.viewBehaviorFactories;
-        const behaviors = new Array(this.behaviorCount);
-        const walker = DOM.createTemplateWalker(fragment);
-        let behaviorIndex = 0;
-        let targetIndex = this.targetOffset;
-        let node = walker.nextNode();
-        for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {
-            const factory = viewFactories[behaviorIndex];
-            const factoryIndex = factory.targetIndex;
-            while (node !== null) {
-                if (targetIndex === factoryIndex) {
-                    behaviors[behaviorIndex] = factory.createBehavior(node);
-                    break;
-                }
-                else {
-                    node = walker.nextNode();
-                    targetIndex++;
-                }
-            }
+        if (this.result === null) {
+            this.result = Compiler.compile(this.html, this.factories);
         }
-        if (this.hasHostBehaviors) {
-            const hostFactories = this.hostBehaviorFactories;
-            for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
-                behaviors[behaviorIndex] = hostFactories[i].createBehavior(hostBindingTarget);
-            }
-        }
-        return new HTMLView(fragment, behaviors);
+        return this.result.createView(hostBindingTarget);
     }
     /**
      * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -89,15 +36,9 @@ export class ViewTemplate {
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source, host, hostBindingTarget) {
-        if (typeof host === "string") {
-            host = document.getElementById(host);
-        }
-        if (hostBindingTarget === void 0) {
-            hostBindingTarget = host;
-        }
-        const view = this.create(hostBindingTarget);
-        view.bind(source, defaultExecutionContext);
+    render(source, host, hostBindingTarget, context) {
+        const view = this.create(hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : host);
+        view.bind(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
         view.appendTo(host);
         return view;
     }
@@ -106,8 +47,15 @@ export class ViewTemplate {
 const lastAttributeNameRegex = 
 /* eslint-disable-next-line no-control-regex */
 /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
+function createAspectedHTML(value, prevString, add) {
+    const match = lastAttributeNameRegex.exec(prevString);
+    if (match !== null) {
+        Aspect.assign(value, match[2]);
+    }
+    return value.createHTML(add);
+}
 /**
- * Transforms a template literal string into a renderable ViewTemplate.
+ * Transforms a template literal string into a ViewTemplate.
  * @param strings - The string fragments that are interpolated with the values.
  * @param values - The values that are interpolated with the string fragments.
  * @remarks
@@ -116,36 +64,64 @@ const lastAttributeNameRegex =
  * @public
  */
 export function html(strings, ...values) {
-    const directives = [];
     let html = "";
+    const factories = Object.create(null);
+    const add = (factory) => {
+        var _a;
+        const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
+        factories[id] = factory;
+        return id;
+    };
     for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
         const currentString = strings[i];
-        let value = values[i];
+        const currentValue = values[i];
+        let definition;
         html += currentString;
-        if (value instanceof ViewTemplate) {
-            const template = value;
-            value = () => template;
+        if (isFunction(currentValue)) {
+            html += createAspectedHTML(bind(currentValue), currentString, add);
         }
-        if (typeof value === "function") {
-            value = new HTMLBindingDirective(value);
-        }
-        if (value instanceof TargetedHTMLDirective) {
+        else if (isString(currentValue)) {
             const match = lastAttributeNameRegex.exec(currentString);
             if (match !== null) {
-                value.targetName = match[2];
+                const directive = bind(() => currentValue, oneTime);
+                Aspect.assign(directive, match[2]);
+                html += directive.createHTML(add);
+            }
+            else {
+                html += currentValue;
             }
         }
-        if (value instanceof HTMLDirective) {
-            // Since not all values are directives, we can't use i
-            // as the index for the placeholder. Instead, we need to
-            // use directives.length to get the next index.
-            html += value.createPlaceholder(directives.length);
-            directives.push(value);
+        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
+            html += createAspectedHTML(bind(() => currentValue, oneTime), currentString, add);
         }
         else {
-            html += value;
+            if (definition.aspected) {
+                html += createAspectedHTML(currentValue, currentString, add);
+            }
+            else {
+                html += currentValue.createHTML(add);
+            }
         }
     }
-    html += strings[strings.length - 1];
-    return new ViewTemplate(html, directives);
+    return new ViewTemplate(html + strings[strings.length - 1], factories);
 }
+/**
+ * Transforms a template literal string into a ChildViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+export const child = html;
+/**
+ * Transforms a template literal string into an ItemViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+export const item = html;

package/dist/esm/templating/view.js

@@ -1,6 +1,14 @@
-// A singleton Range instance used to efficiently remove ranges of DOM nodes.
-// See the implementation of HTMLView below for further details.
-const range = document.createRange();
+function removeNodeSequence(firstNode, lastNode) {
+    const parent = firstNode.parentNode;
+    let current = firstNode;
+    let next;
+    while (current !== lastNode) {
+        next = current.nextSibling;
+        parent.removeChild(current);
+        current = next;
+    }
+    parent.removeChild(lastNode);
+}
 /**
  * The standard View implementation, which also implements ElementView and SyntheticView.
  * @public
@@ -11,9 +19,11 @@ export class HTMLView {
      * @param fragment - The html fragment that contains the nodes for this view.
      * @param behaviors - The behaviors to be applied to this view.
      */
-    constructor(fragment, behaviors) {
+    constructor(fragment, factories, targets) {
         this.fragment = fragment;
-        this.behaviors = behaviors;
+        this.factories = factories;
+        this.targets = targets;
+        this.behaviors = null;
         /**
          * The data that the view is bound to.
          */
@@ -74,21 +84,8 @@ export class HTMLView {
      * Once a view has been disposed, it cannot be inserted or bound again.
      */
     dispose() {
-        const parent = this.firstChild.parentNode;
-        const end = this.lastChild;
-        let current = this.firstChild;
-        let next;
-        while (current !== end) {
-            next = current.nextSibling;
-            parent.removeChild(current);
-            current = next;
-        }
-        parent.removeChild(end);
-        const behaviors = this.behaviors;
-        const oldSource = this.source;
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource);
-        }
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
     }
     /**
      * Binds a view's behaviors to its binding source.
@@ -96,25 +93,33 @@ export class HTMLView {
      * @param context - The execution context to run the behaviors within.
      */
     bind(source, context) {
-        const behaviors = this.behaviors;
-        if (this.source === source) {
+        let behaviors = this.behaviors;
+        const oldSource = this.source;
+        if (oldSource === source) {
             return;
         }
-        else if (this.source !== null) {
-            const oldSource = this.source;
-            this.source = source;
-            this.context = context;
+        this.source = source;
+        this.context = context;
+        const targets = this.targets;
+        if (oldSource !== null) {
             for (let i = 0, ii = behaviors.length; i < ii; ++i) {
                 const current = behaviors[i];
-                current.unbind(oldSource);
-                current.bind(source, context);
+                current.unbind(oldSource, context, targets);
+                current.bind(source, context, targets);
+            }
+        }
+        else if (behaviors === null) {
+            this.behaviors = behaviors = new Array(this.factories.length);
+            const factories = this.factories;
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const behavior = factories[i].createBehavior(targets);
+                behavior.bind(source, context, targets);
+                behaviors[i] = behavior;
             }
         }
         else {
-            this.source = source;
-            this.context = context;
             for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(source, context);
+                behaviors[i].bind(source, context, targets);
             }
         }
     }
@@ -122,15 +127,18 @@ export class HTMLView {
      * Unbinds a view's behaviors from its binding source.
      */
     unbind() {
-        if (this.source === null) {
+        const oldSource = this.source;
+        if (oldSource === null) {
             return;
         }
+        const targets = this.targets;
+        const context = this.context;
         const behaviors = this.behaviors;
-        const oldSource = this.source;
         for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource);
+            behaviors[i].unbind(oldSource, context, targets);
         }
         this.source = null;
+        this.context = null;
     }
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.
@@ -140,16 +148,9 @@ export class HTMLView {
         if (views.length === 0) {
             return;
         }
-        range.setStartBefore(views[0].firstChild);
-        range.setEndAfter(views[views.length - 1].lastChild);
-        range.deleteContents();
+        removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
         for (let i = 0, ii = views.length; i < ii; ++i) {
-            const view = views[i];
-            const behaviors = view.behaviors;
-            const oldSource = view.source;
-            for (let j = 0, jj = behaviors.length; j < jj; ++j) {
-                behaviors[j].unbind(oldSource);
-            }
+            views[i].unbind();
         }
     }
 }

package/dist/esm/templating/when.js

@@ -1,3 +1,4 @@
+import { isFunction } from "../interfaces.js";
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param binding - The condition to test for rendering.
@@ -6,7 +7,7 @@
  * @public
  */
 export function when(binding, templateOrTemplateBinding) {
-    const getTemplate = typeof templateOrTemplateBinding === "function"
+    const getTemplate = isFunction(templateOrTemplateBinding)
         ? templateOrTemplateBinding
         : () => templateOrTemplateBinding;
     return (source, context) => binding(source, context) ? getTemplate(source, context) : null;

package/dist/esm/utilities.js

@@ -0,0 +1,139 @@
+import { ArrayObserver } from "./index.debug.js";
+import { isFunction } from "./interfaces.js";
+import { Observable } from "./observation/observable.js";
+function shouldTraverse(value, traversed) {
+    return (value !== null &&
+        value !== void 0 &&
+        typeof value === "object" &&
+        !traversed.has(value));
+}
+function traverseObject(object, deep, visitor, data, traversed) {
+    if (!shouldTraverse(object, traversed)) {
+        return;
+    }
+    traversed.add(object);
+    if (Array.isArray(object)) {
+        visitor.visitArray(object, data);
+        for (const item of object) {
+            traverseObject(item, deep, visitor, data, traversed);
+        }
+    }
+    else {
+        visitor.visitObject(object, data);
+        for (const key in object) {
+            const value = object[key];
+            visitor.visitProperty(object, key, value, data);
+            if (deep) {
+                traverseObject(value, deep, visitor, data, traversed);
+            }
+        }
+    }
+}
+const noop = () => void 0;
+const observed = new WeakSet();
+const makeObserverVisitor = {
+    visitObject: noop,
+    visitArray: noop,
+    visitProperty(object, propertyName, value) {
+        Reflect.defineProperty(object, propertyName, {
+            enumerable: true,
+            get() {
+                Observable.track(object, propertyName);
+                return value;
+            },
+            set(newValue) {
+                if (value !== newValue) {
+                    value = newValue;
+                    Observable.notify(object, propertyName);
+                }
+            },
+        });
+    },
+};
+function watchObject(object, data) {
+    const notifier = Observable.getNotifier(object);
+    notifier.subscribe(data.subscriber);
+    data.notifiers.push(notifier);
+}
+const watchVisitor = {
+    visitProperty: noop,
+    visitObject: watchObject,
+    visitArray: watchObject,
+};
+/**
+ * Converts a plain object to an observable object.
+ * @param object - The object to make observable.
+ * @param deep - Indicates whether or not to deeply convert the oject.
+ * @returns The converted object.
+ * @beta
+ */
+export function makeObservable(object, deep = false) {
+    traverseObject(object, deep, makeObserverVisitor, void 0, observed);
+    return object;
+}
+/**
+ * Deeply subscribes to changes in existing observable objects.
+ * @param object - The observable object to watch.
+ * @param subscriber - The handler to call when changes are made to the object.
+ * @returns A disposable that can be used to unsubscribe from change updates.
+ * @beta
+ */
+export function watch(object, subscriber) {
+    const data = {
+        notifiers: [],
+        subscriber: isFunction(subscriber) ? { handleChange: subscriber } : subscriber,
+    };
+    ArrayObserver.enable();
+    traverseObject(object, true, watchVisitor, data, new Set());
+    return {
+        dispose() {
+            for (const n of data.notifiers) {
+                n.unsubscribe(data.subscriber);
+            }
+        },
+    };
+}
+/**
+ * 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
+ * element of the shadow root. Otherwise it will return the parent node or null if
+ * no parent node exists.
+ * @param element - The element for which to retrieve the composed parent
+ *
+ * @public
+ */
+export function composedParent(element) {
+    const parentNode = element.parentElement;
+    if (parentNode) {
+        return parentNode;
+    }
+    else {
+        const rootNode = element.getRootNode();
+        if (rootNode.host instanceof HTMLElement) {
+            // this is shadow-root
+            return rootNode.host;
+        }
+    }
+    return null;
+}
+/**
+ * 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
+ * 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.
+ *
+ * @public
+ */
+export function composedContains(reference, test) {
+    let current = test;
+    while (current !== null) {
+        if (current === reference) {
+            return true;
+        }
+        current = composedParent(current);
+    }
+    return false;
+}