From 85990c3213ca37d1e5c415f368eec3102d59e510 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Thu, 26 Sep 2019 22:43:32 +0300
Subject: [PATCH] fix(docs-infra): correctly run on IE11 (#32871)

Since 007282d2b, [TocService][1] uses [forEach()][2] to iterate over a
`NodeList`. This breaks in IE11, which does not support
`NodeList#forEach()`.

This commit wraps the returned `NodeList` in a regular `Array` to have
access to array methods (such as `forEach()`).

Fixes #32832

[1]: https://github.com/angular/angular/blob/fbad4ff65/aio/src/app/shared/toc.service.ts#L68
[2]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

PR Close #32871
---
 aio/src/app/shared/toc.service.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/aio/src/app/shared/toc.service.ts b/aio/src/app/shared/toc.service.ts
index 0518d4768f..3ef5d522bd 100644
--- a/aio/src/app/shared/toc.service.ts
+++ b/aio/src/app/shared/toc.service.ts
@@ -65,10 +65,10 @@ export class TocService {
     div.innerHTML = heading.innerHTML;
 
     // Remove any `.github-links` or `.header-link` elements (along with their content).
-    div.querySelectorAll('.github-links, .header-link').forEach(removeNode);
+    querySelectorAll(div, '.github-links, .header-link').forEach(removeNode);
 
     // Remove any remaining `a` elements (but keep their content).
-    div.querySelectorAll('a').forEach(anchorLink => {
+    querySelectorAll(div, 'a').forEach(anchorLink => {
       // We want to keep the content of this anchor, so move it into its parent.
       const parent = anchorLink.parentNode!;
       while (anchorLink.childNodes.length) {
@@ -88,10 +88,11 @@ export class TocService {
   }
 
   private findTocHeadings(docElement: Element): HTMLHeadingElement[] {
-    const headings = docElement.querySelectorAll('h1,h2,h3');
+    // const headings = querySelectorAll(docElement, 'h1,h2,h3');
+    const headings = querySelectorAll<HTMLHeadingElement>(docElement, 'h1,h2,h3');
     const skipNoTocHeadings = (heading: HTMLHeadingElement) => !/(?:no-toc|notoc)/i.test(heading.className);
 
-    return Array.prototype.filter.call(headings, skipNoTocHeadings);
+    return headings.filter(skipNoTocHeadings);
   }
 
   private resetScrollSpyInfo() {
@@ -127,6 +128,16 @@ export class TocService {
 }
 
 // Helpers
+function querySelectorAll<K extends keyof HTMLElementTagNameMap>(parent: Element, selector: K): HTMLElementTagNameMap[K][];
+function querySelectorAll<K extends keyof SVGElementTagNameMap>(parent: Element, selector: K): SVGElementTagNameMap[K][];
+function querySelectorAll<E extends Element = Element>(parent: Element, selector: string): E[];
+function querySelectorAll(parent: Element, selector: string) {
+  // Wrap the `NodeList` as a regular `Array` to have access to array methods.
+  // NOTE: IE11 does not even support some methods of `NodeList`, such as
+  //       [NodeList#forEach()](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach).
+  return Array.from(parent.querySelectorAll(selector));
+}
+
 function removeNode(node: Node): void {
   if (node.parentNode !== null) {
     // We cannot use `Node.remove()` because of IE11.