amp-list: [src] mutation must be in mutate context

extensions/amp-list/0.1/amp-list.js

@@ -60,7 +60,7 @@ export class AmpList extends AMP.BaseElement {
     /**
      * Latest fetched items to render and the promise resolver and rejecter
      * to be invoked on render success or fail, respectively.
-     * @private {?{items:!Array, resolver:!Function, rejecter:!Function}}
+     * @private {?{items:!Array, resolver:!Function, rejecter:!Function, mutate:boolean}}
      */
     this.renderItems_ = null;
 
@@ -125,35 +125,34 @@ export class AmpList extends AMP.BaseElement {
   /** @override */
   layoutCallback() {
     this.layoutCompleted_ = true;
-
     return this.fetchList_();
   }
 
   /** @override */
   mutatedAttributesCallback(mutations) {
     const src = mutations['src'];
     const state = mutations['state'];
-
     if (src !== undefined) {
       const typeOfSrc = typeof src;
       if (typeOfSrc === 'string') {
         // Defer to fetch in layoutCallback() before first layout.
         if (this.layoutCompleted_) {
-          this.fetchList_();
+          return this.fetchList_(/* mutate */ true);
         }
       } else if (typeOfSrc === 'object') {
-        const items = isArray(src) ? src : [src];
-        this.scheduleRender_(items);
         // Remove the 'src' now that local data is used to render the list.
         this.element.setAttribute('src', '');
+        const items = isArray(src) ? src : [src];
+        return this.scheduleRender_(items, /* mutate */ true);
       } else {
         this.user().error(TAG, 'Unexpected "src" type: ' + src);
       }
     } else if (state !== undefined) {
-      const items = isArray(state) ? state : [state];
-      this.scheduleRender_(items);
       user().error(TAG, '[state] is deprecated, please use [src] instead.');
+      const items = isArray(state) ? state : [state];
+      return this.scheduleRender_(items, /* mutate */ true);
     }
+    return Promise.resolve();
   }
 
   /**
@@ -190,10 +189,11 @@ export class AmpList extends AMP.BaseElement {
   /**
    * Request list data from `src` and return a promise that resolves when
    * the list has been populated with rendered list items.
+   * @param {boolean} mutate If true, performs DOM changes in a mutate context.
    * @return {!Promise}
    * @private
    */
-  fetchList_() {
+  fetchList_(mutate = false) {
     if (!this.element.getAttribute('src')) {
       return Promise.resolve();
     }
@@ -222,7 +222,7 @@ export class AmpList extends AMP.BaseElement {
       if (maxLen < items.length) {
         items = items.slice(0, maxLen);
       }
-      return this.scheduleRender_(items);
+      return this.scheduleRender_(items, mutate);
     }, error => {
       throw user().createError('Error fetching amp-list', error);
     }).then(() => {
@@ -246,18 +246,19 @@ export class AmpList extends AMP.BaseElement {
   /**
    * Schedules a fetch result to be rendered in the near future.
    * @param {!Array} items
+   * @param {boolean} mutate If true, performs DOM changes in a mutate context.
    * @return {!Promise}
    * @private
    */
-  scheduleRender_(items) {
+  scheduleRender_(items, mutate = false) {
     const deferred = new Deferred();
     const {promise, resolve: resolver, reject: rejecter} = deferred;
 
     // If there's nothing currently being rendered, schedule a render pass.
     if (!this.renderItems_) {
       this.renderPass_.schedule();
     }
-    this.renderItems_ = {items, resolver, rejecter};
+    this.renderItems_ = {items, resolver, rejecter, mutate};
     return promise;
   }
 
@@ -277,15 +278,16 @@ export class AmpList extends AMP.BaseElement {
         this.renderItems_ = null;
       }
     };
-    this.templates_.findAndRenderTemplateArray(this.element, current.items)
+    const {items, resolver, rejecter, mutate} = current;
+    this.templates_.findAndRenderTemplateArray(this.element, items)
         .then(elements => this.updateBindingsForElements_(elements))
-        .then(elements => this.rendered_(elements))
+        .then(elements => this.render_(elements, mutate))
         .then(/* onFulfilled */ () => {
           scheduleNextPass();
-          current.resolver();
+          resolver();
         }, /* onRejected */ () => {
           scheduleNextPass();
-          current.rejecter();
+          rejecter();
         });
   }
 
@@ -331,29 +333,36 @@ export class AmpList extends AMP.BaseElement {
 
   /**
    * @param {!Array<!Element>} elements
+   * @param {boolean} mutate If true, performs DOM changes in a mutate context.
    * @private
    */
-  rendered_(elements) {
-    removeChildren(dev().assertElement(this.container_));
-    elements.forEach(element => {
-      if (!element.hasAttribute('role')) {
-        element.setAttribute('role', 'listitem');
-      }
-      this.container_.appendChild(element);
-    });
-
-    const event = createCustomEvent(this.win,
-        AmpEvents.DOM_UPDATE, /* detail */ null, {bubbles: true});
-    this.container_.dispatchEvent(event);
+  render_(elements, mutate) {
+    const render = () => {
+      removeChildren(dev().assertElement(this.container_));
+      elements.forEach(element => {
+        if (!element.hasAttribute('role')) {
+          element.setAttribute('role', 'listitem');
+        }
+        this.container_.appendChild(element);
+      });
+      const event = createCustomEvent(this.win,
+          AmpEvents.DOM_UPDATE, /* detail */ null, {bubbles: true});
+      this.container_.dispatchEvent(event);
+      // Change height if needed.
+      this.getVsync().measure(() => {
+        const scrollHeight = this.container_./*OK*/scrollHeight;
+        const height = this.element./*OK*/offsetHeight;
+        if (scrollHeight > height) {
+          this.attemptChangeHeight(scrollHeight).catch(() => {});
+        }
+      });
+    };
 
-    // Change height if needed.
-    this.getVsync().measure(() => {
-      const scrollHeight = this.container_./*OK*/scrollHeight;
-      const height = this.element./*OK*/offsetHeight;
-      if (scrollHeight > height) {
-        this.attemptChangeHeight(scrollHeight).catch(() => {});
-      }
-    });
+    if (mutate) {
+      this.mutateElement(render, this.container_);
+    } else {
+      render();
+    }
   }
 
   /**