chore(all): add latest build artifacts

README.md

@@ -1,12 +1,13 @@
 # aurelia-templating
 
 [![npm Version](https://img.shields.io/npm/v/aurelia-templating.svg)](https://www.npmjs.com/package/aurelia-templating)
+[![ZenHub](https://raw.githubusercontent.com/ZenHubIO/support/master/zenhub-badge.png)](https://zenhub.io)
 [![Join the chat at https://gitter.im/aurelia/discuss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aurelia/discuss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![CircleCI](https://circleci.com/gh/aurelia/templating.svg?style=shield)](https://circleci.com/gh/aurelia/templating)
 
 This library is part of the [Aurelia](http://www.aurelia.io/) platform and contains an extensible HTML templating engine supporting databinding, custom elements, attached behaviors and more.
 
-> To keep up to date on [Aurelia](http://www.aurelia.io/), please visit and subscribe to [the official blog](http://blog.aurelia.io/) and [our email list](http://eepurl.com/ces50j). We also invite you to [follow us on twitter](https://twitter.com/aureliaeffect). If you have questions look around our [Discourse forums](https://discourse.aurelia.io/), chat in our [community on Gitter](https://gitter.im/aurelia/discuss) or use [stack overflow](http://stackoverflow.com/search?q=aurelia). Documentation can be found [in our developer hub](http://aurelia.io/docs).
+> To keep up to date on [Aurelia](http://www.aurelia.io/), please visit and subscribe to [the official blog](http://blog.aurelia.io/) and [our email list](http://eepurl.com/ces50j). We also invite you to [follow us on twitter](https://twitter.com/aureliaeffect). If you have questions look around our [Discourse forums](https://discourse.aurelia.io/), chat in our [community on Gitter](https://gitter.im/aurelia/discuss) or use [stack overflow](http://stackoverflow.com/search?q=aurelia). Documentation can be found [in our developer hub](http://aurelia.io/docs). If you would like to have deeper insight into our development process, please install the [ZenHub](https://zenhub.io) Chrome or Firefox Extension and visit any of our repository's boards.
 
 ## Platform Support
 

dist/amd/aurelia-templating.js

@@ -4616,6 +4616,7 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
   function onChildChange(mutations, observer) {
     var binders = observer.binders;
     var bindersLength = binders.length;
+
     var groupedMutations = new Map();
 
     for (var _i10 = 0, _ii9 = mutations.length; _i10 < _ii9; ++_i10) {
@@ -4628,6 +4629,7 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
         if (_node.nodeType === 1) {
           for (var k = 0; k < bindersLength; ++k) {
             var binder = binders[k];
+
             if (binder.onRemove(_node)) {
               trackMutation(groupedMutations, binder, record);
             }
@@ -4640,6 +4642,7 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
         if (_node2.nodeType === 1) {
           for (var _k = 0; _k < bindersLength; ++_k) {
             var _binder = binders[_k];
+
             if (_binder.onAdd(_node2)) {
               trackMutation(groupedMutations, _binder, record);
             }
@@ -4648,9 +4651,9 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
       }
     }
 
-    groupedMutations.forEach(function (value, key) {
-      if (key.changeHandler !== null) {
-        key.viewModel[key.changeHandler](value);
+    groupedMutations.forEach(function (mutationRecords, binder) {
+      if (binder.isBound && binder.changeHandler !== null) {
+        binder.viewModel[binder.changeHandler](mutationRecords);
       }
     });
   }
@@ -4660,6 +4663,7 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
 
 
       this.selector = selector;
+
       this.viewHost = viewHost;
       this.property = property;
       this.viewModel = viewModel;
@@ -4673,6 +4677,8 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
       } else {
         this.contentView = null;
       }
+      this.source = null;
+      this.isBound = false;
     }
 
     ChildObserverBinder.prototype.matches = function matches(element) {
@@ -4703,6 +4709,14 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
     };
 
     ChildObserverBinder.prototype.bind = function bind(source) {
+      if (this.isBound) {
+        if (this.source === source) {
+          return;
+        }
+        this.source = source;
+      }
+      this.isBound = true;
+
       var viewHost = this.viewHost;
       var viewModel = this.viewModel;
       var observer = viewHost.__childObserver__;
@@ -4777,7 +4791,14 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
           return true;
         }
 
-        return false;
+        var currentValue = this.viewModel[this.property];
+        if (currentValue === _value2) {
+          this.viewModel[this.property] = null;
+
+          if (this.isBound && this.changeHandler !== null) {
+            this.viewModel[this.changeHandler](_value2);
+          }
+        }
       }
 
       return false;
@@ -4812,7 +4833,7 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
 
         this.viewModel[this.property] = _value3;
 
-        if (this.changeHandler !== null) {
+        if (this.isBound && this.changeHandler !== null) {
           this.viewModel[this.changeHandler](_value3);
         }
       }
@@ -4821,10 +4842,28 @@ define(['exports', 'aurelia-logging', 'aurelia-metadata', 'aurelia-pal', 'aureli
     };
 
     ChildObserverBinder.prototype.unbind = function unbind() {
-      if (this.viewHost.__childObserver__) {
-        this.viewHost.__childObserver__.disconnect();
-        this.viewHost.__childObserver__ = null;
-        this.viewModel[this.property] = null;
+      if (!this.isBound) {
+        return;
+      }
+      this.isBound = false;
+      this.source = null;
+      var childObserver = this.viewHost.__childObserver__;
+      if (childObserver) {
+        var binders = childObserver.binders;
+        if (binders && binders.length) {
+          var idx = binders.indexOf(this);
+          if (idx !== -1) {
+            binders.splice(idx, 1);
+          }
+          if (binders.length === 0) {
+            childObserver.disconnect();
+            this.viewHost.__childObserver__ = null;
+          }
+        }
+
+        if (this.usesShadowDOM) {
+          this.viewModel[this.property] = null;
+        }
       }
     };
 

dist/aurelia-templating.js

@@ -5881,6 +5881,25 @@ export function child(selectorOrConfig: string | Object): any {
   return createChildObserverDecorator(selectorOrConfig, false);
 }
 
+/**
+ * @internal
+ * @typedef MutationObserverBinder
+ * @property {ChildObserverBinder[]} binders
+ *
+ * @internal
+ * @typedef {MutationObserverBinder & MutationObserver} BindableMutationObserver
+ *
+ * @internal
+ * @typedef HasChildObserver
+ * @property {BindableMutationObserver} __childObserver__
+ *
+ * @internal
+ * @typedef {Element & HasChildObserver} BindableMutationObserverHost
+ */
+
+/**
+ * Child observer binder factory
+ */
 class ChildObserver {
   constructor(config) {
     this.name = config.name;
@@ -5896,6 +5915,11 @@ class ChildObserver {
 
 const noMutations = [];
 
+/**
+ * @param {Map<ChildObserverBinder, MutationRecord[]>} groupedMutations
+ * @param {ChildObserverBinder} binder
+ * @param {MutationRecord} record
+ */
 function trackMutation(groupedMutations, binder, record) {
   let mutations = groupedMutations.get(binder);
 
@@ -5907,9 +5931,14 @@ function trackMutation(groupedMutations, binder, record) {
   mutations.push(record);
 }
 
+/**
+ * @param {MutationRecord[]} mutations
+ * @param {BindableMutationObserver} observer
+ */
 function onChildChange(mutations, observer) {
   let binders = observer.binders;
   let bindersLength = binders.length;
+  /**@type {Map<ChildObserverBinder, MutationRecord[]>} */
   let groupedMutations = new Map();
 
   for (let i = 0, ii = mutations.length; i < ii; ++i) {
@@ -5922,6 +5951,9 @@ function onChildChange(mutations, observer) {
       if (node.nodeType === 1) {
         for (let k = 0; k < bindersLength; ++k) {
           let binder = binders[k];
+          // only track mutation when binder signals so
+          // for @children scenarios where it should only call change handler
+          // after retrieving all value of the children
           if (binder.onRemove(node)) {
             trackMutation(groupedMutations, binder, record);
           }
@@ -5934,6 +5966,9 @@ function onChildChange(mutations, observer) {
       if (node.nodeType === 1) {
         for (let k = 0; k < bindersLength; ++k) {
           let binder = binders[k];
+          // only track mutation when binder signals so
+          // for @children scenarios where it should only call change handler
+          // after retrieving all value of the children
           if (binder.onAdd(node)) {
             trackMutation(groupedMutations, binder, record);
           }
@@ -5942,16 +5977,32 @@ function onChildChange(mutations, observer) {
     }
   }
 
-  groupedMutations.forEach((value, key) => {
-    if (key.changeHandler !== null) {
-      key.viewModel[key.changeHandler](value);
+  groupedMutations.forEach((mutationRecords, binder) => {
+    if (binder.isBound && binder.changeHandler !== null) {
+      // invoking with mutation records as new value doesn't make it very useful,
+      // and kind of error prone.
+      // Probably should change it to the value array
+      // though it is a breaking change. Consider changing this
+      binder.viewModel[binder.changeHandler](mutationRecords);
     }
   });
 }
 
 class ChildObserverBinder {
+  /**
+   * @param {string} selector the CSS selector used to filter the content of a host
+   * @param {Element} viewHost the host where this observer belongs to
+   * @param {string} property the property name of the view model where the aggregated result of this observer should assign to
+   * @param {object} viewModel the view model that this observer is associated with
+   * @param {Controller} controller the corresponding Controller of the view model
+   * @param {string} changeHandler the name of the change handler to invoke when the content of the view host change
+   * @param {boolean} all indicates whether it should try to match all children of the view host or not
+   */
   constructor(selector, viewHost, property, viewModel, controller, changeHandler, all) {
     this.selector = selector;
+    /**
+     * @type {Element & HasChildObserver}
+     */
     this.viewHost = viewHost;
     this.property = property;
     this.viewModel = viewModel;
@@ -5965,6 +6016,8 @@ class ChildObserverBinder {
     } else {
       this.contentView = null;
     }
+    this.source = null;
+    this.isBound = false;
   }
 
   matches(element) {
@@ -5995,6 +6048,14 @@ class ChildObserverBinder {
   }
 
   bind(source) {
+    if (this.isBound) {
+      if (this.source === source) {
+        return;
+      }
+      this.source = source;
+    }
+    this.isBound = true;
+
     let viewHost = this.viewHost;
     let viewModel = this.viewModel;
     let observer = viewHost.__childObserver__;
@@ -6060,6 +6121,10 @@ class ChildObserverBinder {
     if (this.matches(element)) {
       let value = element.au && element.au.controller ? element.au.controller.viewModel : element;
 
+      // for @children scenario
+      // when it is selecting all child element
+      // the callback needs to happen AFTER mapping all of the child value
+      // so returning true as a mean to register a value to be added later
       if (this.all) {
         let items = (this.viewModel[this.property] || (this.viewModel[this.property] = []));
         let index = items.indexOf(value);
@@ -6071,7 +6136,17 @@ class ChildObserverBinder {
         return true;
       }
 
-      return false;
+      // for @child scenario
+      const currentValue = this.viewModel[this.property];
+      if (currentValue === value) {
+        this.viewModel[this.property] = null;
+
+        // when it is a single child observation
+        // it is safe to trigger change handler immediately
+        if (this.isBound && this.changeHandler !== null) {
+          this.viewModel[this.changeHandler](value);
+        }
+      }
     }
 
     return false;
@@ -6081,6 +6156,10 @@ class ChildObserverBinder {
     if (this.matches(element)) {
       let value = element.au && element.au.controller ? element.au.controller.viewModel : element;
 
+      // for @children scenario
+      // when it is selecting all child element
+      // the callback needs to happen AFTER mapping all of the child value
+      // so returning true as a mean to register a value to be added later
       if (this.all) {
         let items = (this.viewModel[this.property] || (this.viewModel[this.property] = []));
 
@@ -6104,9 +6183,16 @@ class ChildObserverBinder {
         return true;
       }
 
+      // for @child scenario
+      // in multiple child scenario
+      // it will keep reassigning value to the property
+      // until the last matched element
+      // this is unexpected but not easy to determine otherwise
       this.viewModel[this.property] = value;
 
-      if (this.changeHandler !== null) {
+      // when it is a single child observation
+      // it is safe to trigger change handler immediately
+      if (this.isBound && this.changeHandler !== null) {
         this.viewModel[this.changeHandler](value);
       }
     }
@@ -6115,10 +6201,29 @@ class ChildObserverBinder {
   }
 
   unbind() {
-    if (this.viewHost.__childObserver__) {
-      this.viewHost.__childObserver__.disconnect();
-      this.viewHost.__childObserver__ = null;
-      this.viewModel[this.property] = null;
+    if (!this.isBound) {
+      return;
+    }
+    this.isBound = false;
+    this.source = null;
+    let childObserver = this.viewHost.__childObserver__;
+    if (childObserver) {
+      let binders = childObserver.binders;
+      if (binders && binders.length) {
+        let idx = binders.indexOf(this);
+        if (idx !== -1) {
+          binders.splice(idx, 1);
+        }
+        if (binders.length === 0) {
+          childObserver.disconnect();
+          this.viewHost.__childObserver__ = null;
+        }
+      }
+      // when using shadowDOM, the bound property is populated during bind
+      // so it's safe to unassign it
+      if (this.usesShadowDOM) {
+        this.viewModel[this.property] = null;
+      }
     }
   }
 }