♻️ Use NodeList.forEach (ampproject#38004)

Since we no longer support IE, we can take advantage of [`NodeList.forEach`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach). This replaces niche techniques: - `Array.prototype.forEach.call` - `iterateCursor`
henel677 · Apr 4, 2022 · f24834d · f24834d
1 parent 993fd47
commit f24834d
Show file tree

Hide file tree

Showing 24 changed files with 73 additions and 110 deletions.
diff --git a/extensions/amp-bind/0.1/bind-impl.js b/extensions/amp-bind/0.1/bind-impl.js
@@ -3,7 +3,6 @@ import {AmpEvents_Enum} from '#core/constants/amp-events';
 import {Deferred} from '#core/data-structures/promise';
 import {Signals} from '#core/data-structures/signals';
 import {isAmp4Email} from '#core/document/format';
-import {iterateCursor} from '#core/dom';
 import {whenUpgradedToCustomElement} from '#core/dom/amp-element-helpers';
 import {escapeCssSelectorIdent} from '#core/dom/css-selectors';
 import {closestAncestorElementBySelector} from '#core/dom/query';
@@ -705,7 +704,7 @@ export class Bind {
     // created elements. Should do what <amp-state> does.
     const elements = this.ampdoc.getBody().querySelectorAll('AMP-BIND-MACRO');
     const macros = /** @type {!Array<!BindMacroDef>} */ ([]);
-    iterateCursor(elements, (element) => {
+    elements.forEach((element) => {
       const argumentNames = (element.getAttribute('arguments') || '')
         .split(',')
         .map((s) => s.trim());

diff --git a/extensions/amp-date-picker/0.1/amp-date-picker.js b/extensions/amp-date-picker/0.1/amp-date-picker.js
@@ -3,7 +3,7 @@ import {AmpEvents_Enum} from '#core/constants/amp-events';
 import {Keys_Enum} from '#core/constants/key-codes';
 import {FiniteStateMachine} from '#core/data-structures/finite-state-machine';
 import {Deferred} from '#core/data-structures/promise';
-import {isRTL, iterateCursor, tryFocus} from '#core/dom';
+import {isRTL, tryFocus} from '#core/dom';
 import {escapeCssSelectorIdent} from '#core/dom/css-selectors';
 import {Layout_Enum, isLayoutSizeDefined} from '#core/dom/layout';
 import {
@@ -1310,7 +1310,7 @@ export class AmpDatePicker extends AMP.BaseElement {
    */
   parseElementTemplates_(templates) {
     const parsed = [];
-    iterateCursor(templates, (template) =>
+    templates.forEach((template) =>
       parsed.push(this.parseElementTemplate_(template))
     );
     return parsed;

diff --git a/extensions/amp-form/0.1/amp-form-textarea.js b/extensions/amp-form/0.1/amp-form-textarea.js
@@ -1,5 +1,5 @@
 import {AmpEvents_Enum} from '#core/constants/amp-events';
-import {iterateCursor, removeElement} from '#core/dom';
+import {removeElement} from '#core/dom';
 import {computedStyle, px, setStyle} from '#core/dom/style';
 import {toArray} from '#core/types/array';
 import {throttle} from '#core/types/function';
@@ -170,10 +170,10 @@ export function getHasOverflow(element) {
 
 /**
  * Attempt to resize all textarea elements
- * @param {!IArrayLike<!Element>} elements
+ * @param {!NodeList} elements
  */
 function resizeTextareaElements(elements) {
-  iterateCursor(elements, (element) => {
+  elements.forEach((element) => {
     if (
       element.tagName != 'TEXTAREA' ||
       !element.hasAttribute(AMP_FORM_TEXTAREA_EXPAND_ATTR)

diff --git a/extensions/amp-form/0.1/amp-form.js b/extensions/amp-form/0.1/amp-form.js
@@ -523,15 +523,15 @@ export class AmpForm {
     const validityElements = this.form_.querySelectorAll(
       '.user-valid, .user-invalid'
     );
-    iterateCursor(validityElements, (element) => {
+    validityElements.forEach((element) => {
       element.classList.remove('user-valid');
       element.classList.remove('user-invalid');
     });
 
     const messageElements = this.form_.querySelectorAll(
       '.visible[validation-for]'
     );
-    iterateCursor(messageElements, (element) => {
+    messageElements.forEach((element) => {
       element.classList.remove('visible');
     });
 
@@ -1401,7 +1401,7 @@ export class AmpForm {
         maybeFillField(field, key);
       } else if (formControls.length) {
         const fields = /** @type {!NodeList} */ (formControls);
-        iterateCursor(fields, (field) => maybeFillField(field, key));
+        fields.forEach((field) => maybeFillField(field, key));
       }
     });
   }
@@ -1434,7 +1434,7 @@ export class AmpForm {
  */
 function checkUserValidityOnSubmission(form) {
   const elements = form.querySelectorAll('input,select,textarea,fieldset');
-  iterateCursor(elements, (element) => checkUserValidity(element));
+  elements.forEach((element) => checkUserValidity(element));
   return checkUserValidity(form);
 }
 
@@ -1477,7 +1477,7 @@ function removeValidityStateClasses(form) {
     const elements = form.querySelectorAll(
       `.${escapeCssSelectorIdent(validityState)}`
     );
-    iterateCursor(elements, (element) => {
+    elements.forEach((element) => {
       dev().assertElement(element).classList.remove(validityState);
     });
   }
@@ -1620,16 +1620,15 @@ export class AmpFormService {
 
   /**
    * Install submission handler on all forms in the document.
-   * @param {?IArrayLike<T>} forms
-   * @template T
+   * @param {NodeList} forms
    * @private
    */
   installSubmissionHandlers_(forms) {
     if (!forms) {
       return;
     }
 
-    iterateCursor(forms, (form, index) => {
+    forms.forEach((form, index) => {
       const existingAmpForm = formOrNullForElement(form);
       if (!existingAmpForm) {
         new AmpForm(form, `amp-form-${index}`);

diff --git a/extensions/amp-fx-collection/0.1/amp-fx-collection.js b/extensions/amp-fx-collection/0.1/amp-fx-collection.js
@@ -1,5 +1,4 @@
 import {AmpEvents_Enum} from '#core/constants/amp-events';
-import {iterateCursor} from '#core/dom';
 import {tryCallback} from '#core/error';
 
 import {listen} from '#utils/event-helper';
@@ -49,7 +48,7 @@ export class AmpFxCollection {
    */
   scan_() {
     const elements = this.ampdoc_.getRootNode().querySelectorAll('[amp-fx]');
-    iterateCursor(elements, (element) => {
+    elements.forEach((element) => {
       if (this.seen_.includes(element)) {
         return;
       }

diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery-slide.js
@@ -1,6 +1,5 @@
 import {Layout_Enum} from '#core/dom/layout';
 import {htmlFor} from '#core/dom/static-template';
-import {toArray} from '#core/types/array';
 
 import {isExperimentOn} from '#experiments';
 
@@ -85,23 +84,17 @@ export class AmpInlineGallerySlide extends AMP.BaseElement {
     const attributionSlot = dom.querySelector(
       '.i-amphtml-inline-gallery-slide-persistent-slot'
     );
-    const childNodesArray = toArray(this.element.childNodes);
 
-    childNodesArray
-      .filter((n) => {
-        return n.hasAttribute && n.getAttribute('slot') === 'caption';
-      })
-      .forEach((node) => captionSlot.appendChild(node));
-    childNodesArray
-      .filter((n) => {
-        return !n.hasAttribute || !n.hasAttribute('slot');
-      })
-      .forEach((node) => contentSlot.appendChild(node));
-    childNodesArray
-      .filter((n) => {
-        return n.hasAttribute && n.getAttribute('slot') === 'attribution';
-      })
-      .forEach((node) => attributionSlot.appendChild(node));
+    this.element.childNodes.forEach((node) => {
+      const slot = node.getAttribute?.('slot');
+      if (slot === 'caption') {
+        captionSlot.appendChild(node);
+      } else if (slot === 'attribution') {
+        attributionSlot.appendChild(node);
+      } else if (slot == null) {
+        contentSlot.appendChild(node);
+      }
+    });
 
     this.element.appendChild(dom);
   }

diff --git a/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js b/extensions/amp-inline-gallery/0.1/amp-inline-gallery.js
@@ -1,4 +1,3 @@
-import {iterateCursor} from '#core/dom';
 import {Layout_Enum} from '#core/dom/layout';
 import {scopedQuerySelector, scopedQuerySelectorAll} from '#core/dom/query';
 import {toArray} from '#core/types/array';
@@ -92,14 +91,14 @@ class AmpInlineGallery extends AMP.BaseElement {
    * @private
    */
   updateProgress_(total, index, offset, slides) {
-    iterateCursor(
-      scopedQuerySelectorAll(this.element, CHILDREN_FOR_PROGRESS_SELECTOR),
-      (el) => {
-        el.getImpl().then((pagination) => {
-          pagination.updateProgress(total, index, offset, slides);
-        });
-      }
-    );
+    scopedQuerySelectorAll(
+      this.element,
+      CHILDREN_FOR_PROGRESS_SELECTOR
+    ).forEach((el) => {
+      el.getImpl().then((pagination) => {
+        pagination.updateProgress(total, index, offset, slides);
+      });
+    });
   }
 
   /**
@@ -137,14 +136,11 @@ class AmpInlineGallery extends AMP.BaseElement {
     const detail = getDetail(event);
     const index = detail['index'];
 
-    iterateCursor(
-      scopedQuerySelectorAll(this.element, CAROUSEL_SELECTOR),
-      (el) => {
-        el.getImpl().then((carousel) => {
-          carousel.goToSlide(index, {smoothScroll: true});
-        });
-      }
-    );
+    scopedQuerySelectorAll(this.element, CAROUSEL_SELECTOR).forEach((el) => {
+      el.getImpl().then((carousel) => {
+        carousel.goToSlide(index, {smoothScroll: true});
+      });
+    });
   }
 }
 

diff --git a/extensions/amp-inputmask/0.1/amp-inputmask.js b/extensions/amp-inputmask/0.1/amp-inputmask.js
@@ -1,5 +1,4 @@
 import {AmpEvents_Enum} from '#core/constants/amp-events';
-import {iterateCursor} from '#core/dom';
 
 import {listen} from '#utils/event-helper';
 
@@ -33,7 +32,7 @@ export class AmpInputmaskService {
     const maskElements = this.ampdoc
       .getRootNode()
       .querySelectorAll('input[mask]');
-    iterateCursor(maskElements, (element) => {
+    maskElements.forEach((element) => {
       if (TextMask.isMasked(element)) {
         return;
       }

diff --git a/extensions/amp-lightbox-gallery/0.1/service/lightbox-manager-impl.js b/extensions/amp-lightbox-gallery/0.1/service/lightbox-manager-impl.js
@@ -1,6 +1,5 @@
 import {AmpEvents_Enum} from '#core/constants/amp-events';
 import {CommonSignals_Enum} from '#core/constants/common-signals';
-import {iterateCursor} from '#core/dom';
 import {
   childElement,
   childElementByAttr,
@@ -153,7 +152,7 @@ export class LightboxManager {
         .getRootNode()
         .querySelectorAll('[lightbox],[data-lightbox]');
       const processLightboxElement = this.processLightboxElement_.bind(this);
-      iterateCursor(matches, processLightboxElement);
+      matches.forEach(processLightboxElement);
     });
   }
 

diff --git a/extensions/amp-link-rewriter/0.1/scope.js b/extensions/amp-link-rewriter/0.1/scope.js
@@ -1,4 +1,3 @@
-import {iterateCursor} from '#core/dom';
 import {closestAncestorElementBySelector} from '#core/dom/query';
 
 /**
@@ -18,7 +17,7 @@ export function getScopeElements(ampDoc, configOpts) {
     selection = doc.querySelectorAll(cssSelector);
   }
 
-  iterateCursor(selection, (element) => {
+  selection.forEach((element) => {
     if (hasAttributeValues(element, configOpts)) {
       filteredSelection.push(element);
     }

diff --git a/extensions/amp-mustache/0.1/amp-mustache.js b/extensions/amp-mustache/0.1/amp-mustache.js
@@ -1,4 +1,4 @@
-import {iterateCursor, templateContentClone} from '#core/dom';
+import {templateContentClone} from '#core/dom';
 
 import {user} from '#utils/log';
 
@@ -85,7 +85,7 @@ export class AmpMustache extends BaseTemplate {
    */
   processNestedTemplates_(content) {
     const templates = content.querySelectorAll('template');
-    iterateCursor(templates, (nestedTemplate, index) => {
+    templates.forEach((nestedTemplate, index) => {
       const nestedTemplateKey = `__AMP_NESTED_TEMPLATE_${index}`;
       this.nestedTemplates_[nestedTemplateKey] =
         nestedTemplate./*OK*/ outerHTML;

diff --git a/extensions/amp-mustache/0.2/amp-mustache.js b/extensions/amp-mustache/0.2/amp-mustache.js
@@ -1,4 +1,4 @@
-import {iterateCursor, templateContentClone} from '#core/dom';
+import {templateContentClone} from '#core/dom';
 
 import {Purifier} from '#purifier';
 
@@ -88,7 +88,7 @@ export class AmpMustache extends BaseTemplate {
    */
   processNestedTemplates_(content) {
     const templates = content.querySelectorAll('template');
-    iterateCursor(templates, (template, index) => {
+    templates.forEach((template, index) => {
       const key = `__AMP_NESTED_TEMPLATE_${index}`;
 
       // Store the nested template markup, keyed by index.

diff --git a/extensions/amp-story-auto-ads/0.1/story-ad-ui.js b/extensions/amp-story-auto-ads/0.1/story-ad-ui.js
@@ -1,4 +1,4 @@
-import {createElementWithAttributes, iterateCursor} from '#core/dom';
+import {createElementWithAttributes} from '#core/dom';
 import {map} from '#core/types/object';
 import {getWin} from '#core/window';
 
@@ -77,7 +77,7 @@ export function getStoryAdMetaTags(doc) {
  */
 export function getStoryAdMetadataFromDoc(metaTags) {
   const vars = map();
-  iterateCursor(metaTags, (tag) => {
+  metaTags.forEach((tag) => {
     const {content, name} = tag;
     if (name.startsWith(CTA_META_PREFIX)) {
       const key = name.split('amp-')[1];
@@ -98,7 +98,7 @@ export function getStoryAdMetadataFromDoc(metaTags) {
  */
 export function getStoryAdMacroTags(metaTags) {
   const result = map();
-  iterateCursor(metaTags, (tag) => {
+  metaTags.forEach((tag) => {
     const {content, name} = tag;
     // If the meta tag name is not alphanumerical, we would ignore it.
     if (/^[a-zA-Z0-9\-_]+$/.test(name)) {

diff --git a/extensions/amp-story/1.0/amp-story-grid-layer.js b/extensions/amp-story/1.0/amp-story-grid-layer.js
@@ -103,7 +103,7 @@ export class AmpStoryGridLayer extends AmpStoryBaseLayer {
       SUPPORTED_CSS_GRID_ATTRIBUTES_SELECTOR
     );
 
-    Array.prototype.forEach.call(elementsToUpgradeStyles, (element) => {
+    elementsToUpgradeStyles.forEach((element) => {
       this.setCssGridStyles_(element);
     });
   }

diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -10,7 +10,6 @@
  */
 import {CommonSignals_Enum} from '#core/constants/common-signals';
 import {Deferred} from '#core/data-structures/promise';
-import {iterateCursor} from '#core/dom';
 import {whenUpgradedToCustomElement} from '#core/dom/amp-element-helpers';
 import * as Preact from '#core/dom/jsx';
 import {Layout_Enum} from '#core/dom/layout';
@@ -389,7 +388,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    * play videos from an inactive page.
    */
   delegateVideoAutoplay() {
-    iterateCursor(this.element.querySelectorAll('amp-video'), delegateAutoplay);
+    this.element.querySelectorAll('amp-video').forEach(delegateAutoplay);
   }
 
   /** @private */
@@ -413,7 +412,7 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   markMediaElementsWithPreload_() {
     const mediaSet = this.element.querySelectorAll('amp-audio, amp-video');
-    Array.prototype.forEach.call(mediaSet, (mediaItem) => {
+    mediaSet.forEach((mediaItem) => {
       mediaItem.setAttribute('preload', 'auto');
     });
   }
@@ -738,18 +737,15 @@ export class AmpStoryPage extends AMP.BaseElement {
       );
     const mediaSet = [];
 
-    iterateCursor(scopedQuerySelectorAll(this.element, selector), (el) =>
+    scopedQuerySelectorAll(this.element, selector).forEach((el) =>
       mediaSet.push(el)
     );
 
     if (fie) {
-      iterateCursor(
-        scopedQuerySelectorAll(
-          fie.win.document.body,
-          selector.replace(/amp-story-grid-layer/g, '')
-        ),
-        (el) => mediaSet.push(el)
-      );
+      scopedQuerySelectorAll(
+        fie.win.document.body,
+        selector.replace(/amp-story-grid-layer/g, '')
+      ).forEach((el) => mediaSet.push(el));
     }
 
     return mediaSet;
@@ -1420,7 +1416,7 @@ export class AmpStoryPage extends AMP.BaseElement {
       }
     }
 
-    Array.prototype.forEach.call(videoEls, (videoEl) => {
+    videoEls.forEach((videoEl) => {
       this.unlisteners_.push(
         listen(videoEl, 'playing', () =>
           this.debounceToggleLoadingSpinner_(false)

diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
@@ -2439,7 +2439,7 @@ export class AmpStory extends AMP.BaseElement {
         'amp-story-cta-layer a'
       );
 
-      Array.prototype.forEach.call(ctaAnchorEls, (ctaAnchorEl) => {
+      ctaAnchorEls.forEach((ctaAnchorEl) => {
         ctaAnchorEl.setAttribute('data-vars-story-page-id', pageId);
         ctaAnchorEl.setAttribute('data-vars-story-page-index', pageIndex);
       });