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

package/dist/esm/observation/observable.js

@@ -272,72 +272,124 @@ const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
         },
     };
 });
-class DefaultExecutionContext {
+/**
+ * Provides additional contextual information available to behaviors and expressions.
+ * @public
+ */
+export class ExecutionContext {
     constructor(parentSource = null, parentContext = null) {
+        /**
+         * The index of the current item within a repeat context.
+         */
         this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
         this.length = 0;
         this.parent = parentSource;
         this.parentContext = parentContext;
     }
+    /**
+     * The current event within an event handler.
+     */
     get event() {
         return contextEvent.get();
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
     get isEven() {
         return this.index % 2 === 0;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
     get isOdd() {
         return this.index % 2 !== 0;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
     get isFirst() {
         return this.index === 0;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
     get isInMiddle() {
         return !this.isFirst && !this.isLast;
     }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
     get isLast() {
         return this.index === this.length - 1;
     }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
     eventDetail() {
         return this.event.detail;
     }
+    /**
+     * Returns the typed event target of the event.
+     */
     eventTarget() {
         return this.event.target;
     }
+    /**
+     * Updates the position/size on a context associated with a list item.
+     * @param index - The new index of the item.
+     * @param length - The new length of the list.
+     */
     updatePosition(index, length) {
         this.index = index;
         this.length = length;
     }
+    /**
+     * Creates a new execution context descendent from the current context.
+     * @param source - The source for the context if different than the parent.
+     * @returns A child execution context.
+     */
     createChildContext(parentSource) {
-        return new DefaultExecutionContext(parentSource, this);
+        return new ExecutionContext(parentSource, this);
     }
+    /**
+     * Creates a new execution context descent suitable for use in list rendering.
+     * @param item - The list item to serve as the source.
+     * @param index - The index of the item in the list.
+     * @param length - The length of the list.
+     */
     createItemContext(index, length) {
         const childContext = Object.create(this);
         childContext.index = index;
         childContext.length = length;
         return childContext;
     }
-}
-Observable.defineProperty(DefaultExecutionContext.prototype, "index");
-Observable.defineProperty(DefaultExecutionContext.prototype, "length");
-/**
- * The common execution context APIs.
- * @public
- */
-export const ExecutionContext = Object.freeze({
-    default: new DefaultExecutionContext(),
     /**
      * Sets the event for the current execution context.
      * @param event - The event to set.
      * @internal
      */
-    setEvent(event) {
+    static setEvent(event) {
         contextEvent.set(event);
-    },
+    }
     /**
      * Creates a new root execution context.
      * @returns A new execution context.
      */
-    create() {
-        return new DefaultExecutionContext();
-    },
-});
+    static create() {
+        return new ExecutionContext();
+    }
+}
+/**
+ * The default execution context.
+ */
+ExecutionContext.default = new ExecutionContext();
+Observable.defineProperty(ExecutionContext.prototype, "index");
+Observable.defineProperty(ExecutionContext.prototype, "length");

package/dist/esm/templating/binding-signal.js

@@ -0,0 +1,84 @@
+import { isString } from "../interfaces.js";
+import { BindingMode, UpdateBinding } from "./binding.js";
+const signals = Object.create(null);
+/**
+ * A binding behavior for signal bindings.
+ * @public
+ */
+export class SignalBinding extends UpdateBinding {
+    constructor() {
+        super(...arguments);
+        this.handlerProperty = `${this.directive.id}-h`;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        const signal = this.getSignal(source, context);
+        const handler = (target[this.handlerProperty] = () => {
+            this.updateTarget(target, directive.targetAspect, directive.binding(source, context), source, context);
+        });
+        handler();
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found)
+                ? found.push(handler)
+                : (signals[signal] = [found, handler]);
+        }
+        else {
+            signals[signal] = handler;
+        }
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        const signal = this.getSignal(source, context);
+        const found = signals[signal];
+        if (found && Array.isArray(found)) {
+            const directive = this.directive;
+            const target = targets[directive.nodeId];
+            const handler = target[this.handlerProperty];
+            const index = found.indexOf(handler);
+            if (index !== -1) {
+                found.splice(index, 1);
+            }
+        }
+        else {
+            signals[signal] = void 0;
+        }
+    }
+    getSignal(source, context) {
+        const options = this.directive.options;
+        return isString(options) ? options : options(source, context);
+    }
+    /**
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
+     */
+    static send(signal) {
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found) ? found.forEach(x => x()) : found();
+        }
+    }
+}
+const signalMode = BindingMode.define(SignalBinding);
+/**
+ * Creates a signal binding configuration with the supplied options.
+ * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @returns A binding configuration.
+ * @public
+ */
+export const signal = (options) => {
+    return { mode: signalMode, options };
+};

package/dist/esm/templating/binding-two-way.js

@@ -0,0 +1,76 @@
+import { BindingConfig, BindingMode, ChangeBinding, } from "./binding.js";
+let twoWaySettings = {
+    determineChangeEvent() {
+        return "change";
+    },
+};
+/**
+ * A binding behavior for bindings that update in two directions.
+ * @public
+ */
+export class TwoWayBinding extends ChangeBinding {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        var _a;
+        super.bind(source, context, targets);
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        if (!this.changeEvent) {
+            this.changeEvent =
+                (_a = directive.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(directive, target);
+        }
+        target.addEventListener(this.changeEvent, this);
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        super.unbind(source, context, targets);
+        targets[this.directive.nodeId].removeEventListener(this.changeEvent, this);
+    }
+    /** @internal */
+    handleEvent(event) {
+        const directive = this.directive;
+        const target = event.currentTarget;
+        let value;
+        switch (directive.aspectType) {
+            case 1:
+                value = target.getAttribute(directive.targetAspect);
+                break;
+            case 2:
+                value = target.hasAttribute(directive.targetAspect);
+                break;
+            case 4:
+                value = target.innerText;
+                break;
+            default:
+                value = target[directive.targetAspect];
+                break;
+        }
+        const observer = this.getObserver(target);
+        const last = observer.last; // using internal API!!!
+        last.propertySource[last.propertyName] = directive.options.fromView(value);
+    }
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    static configure(settings) {
+        twoWaySettings = settings;
+    }
+}
+/**
+ * The default twoWay binding configuration.
+ * @public
+ */
+export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
+    fromView: v => v,
+});

package/dist/esm/templating/binding.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import "../interfaces.js";
 import { ExecutionContext, Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { DOM } from "./dom.js";
@@ -215,78 +215,6 @@ export class OneTimeBinding extends UpdateBinding {
         this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
     }
 }
-const signals = Object.create(null);
-/**
- * A binding behavior for signal bindings.
- * @public
- */
-export class SignalBinding extends UpdateBinding {
-    constructor() {
-        super(...arguments);
-        this.handlerProperty = `${this.directive.id}-h`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        const signal = this.getSignal(source, context);
-        const handler = (target[this.handlerProperty] = () => {
-            this.updateTarget(target, directive.targetAspect, directive.binding(source, context), source, context);
-        });
-        handler();
-        const found = signals[signal];
-        if (found) {
-            Array.isArray(found)
-                ? found.push(handler)
-                : (signals[signal] = [found, handler]);
-        }
-        else {
-            signals[signal] = handler;
-        }
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const signal = this.getSignal(source, context);
-        const found = signals[signal];
-        if (found && Array.isArray(found)) {
-            const directive = this.directive;
-            const target = targets[directive.nodeId];
-            const handler = target[this.handlerProperty];
-            const index = found.indexOf(handler);
-            if (index !== -1) {
-                found.splice(index, 1);
-            }
-        }
-        else {
-            signals[signal] = void 0;
-        }
-    }
-    getSignal(source, context) {
-        const options = this.directive.options;
-        return isString(options) ? options : options(source, context);
-    }
-    /**
-     * Sends the specified signal to signaled bindings.
-     * @param signal - The signal to send.
-     * @public
-     */
-    static send(signal) {
-        const found = signals[signal];
-        if (found) {
-            Array.isArray(found) ? found.forEach(x => x()) : found();
-        }
-    }
-}
 /**
  * A binding behavior for bindings that change.
  * @public
@@ -407,86 +335,11 @@ export class EventBinding {
         }
     }
 }
-let twoWaySettings = {
-    determineChangeEvent() {
-        return "change";
-    },
-};
-/**
- * A binding behavior for bindings that update in two directions.
- * @public
- */
-export class TwoWayBinding extends ChangeBinding {
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        var _a;
-        super.bind(source, context, targets);
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        if (!this.changeEvent) {
-            this.changeEvent =
-                (_a = directive.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(directive, target);
-        }
-        target.addEventListener(this.changeEvent, this);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        super.unbind(source, context, targets);
-        targets[this.directive.nodeId].removeEventListener(this.changeEvent, this);
-    }
-    /** @internal */
-    handleEvent(event) {
-        const directive = this.directive;
-        const target = event.currentTarget;
-        let value;
-        switch (directive.aspectType) {
-            case 1:
-                value = target.getAttribute(directive.targetAspect);
-                break;
-            case 2:
-                value = target.hasAttribute(directive.targetAspect);
-                break;
-            case 4:
-                value = target.innerText;
-                break;
-            default:
-                value = target[directive.targetAspect];
-                break;
-        }
-        const observer = this.getObserver(target);
-        const last = observer.last; // using internal API!!!
-        last.propertySource[last.propertyName] = directive.options.fromView(value);
-    }
-    /**
-     * Configures two-way binding.
-     * @param settings - The settings to use for the two-way binding system.
-     */
-    static configure(settings) {
-        twoWaySettings = settings;
-    }
-}
 /**
  * The default onChange binding configuration.
  * @public
  */
 export const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
-/**
- * The default twoWay binding configuration.
- * @public
- */
-export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
-    fromView: v => v,
-});
 /**
  * The default onTime binding configuration.
  * @public
@@ -494,16 +347,6 @@ export const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
 export const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
     once: true,
 });
-const signalMode = BindingMode.define(SignalBinding);
-/**
- * Creates a signal binding configuration with the supplied options.
- * @param options - The signal name or a binding to use to retrieve the signal name.
- * @returns A binding configuration.
- * @public
- */
-export const signal = (options) => {
-    return { mode: signalMode, options };
-};
 /**
  * A directive that applies bindings.
  * @public

package/dist/esm/templating/repeat.js

@@ -159,7 +159,7 @@ export class RepeatBehavior {
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
-        if (itemsLength === 0 || templateChanged) {
+        if (itemsLength === 0 || templateChanged || !this.options.recycle) {
             // all views need to be removed
             HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
@@ -237,6 +237,14 @@ export class RepeatDirective {
     }
 }
 HTMLDirective.define(RepeatDirective);
+/**
+ * A directive that enables list rendering.
+ * @param itemsBinding - The array to render.
+ * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
 export function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
     const templateBinding = isFunction(templateOrTemplateBinding)
         ? templateOrTemplateBinding

package/dist/esm/templating/template.js

@@ -1,5 +1,5 @@
 import { isFunction, isString } from "../interfaces.js";
-import { ExecutionContext, } from "../observation/observable.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";
@@ -105,23 +105,3 @@ export function html(strings, ...values) {
     }
     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;