refactor(@angular-devkit/build-angular): use parse5 version 6 to augment index

Author: alan-agius4

package.json

@@ -177,8 +177,9 @@
     "open": "7.0.3",
     "ora": "^4.0.2",
     "pacote": "11.1.4",
-    "parse5": "4.0.0",
+    "parse5": "6.0.1",
     "parse5-html-rewriting-stream": "6.0.1",
+    "parse5-htmlparser2-tree-adapter": "6.0.1",
     "pidtree": "^0.5.0",
     "pidusage": "^2.0.17",
     "pnp-webpack-plugin": "1.6.4",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -147,6 +147,7 @@ ts_library(
         "@npm//minimatch",
         "@npm//open",
         "@npm//parse5",
+        "@npm//parse5-htmlparser2-tree-adapter",
         "@npm//pnp-webpack-plugin",
         "@npm//postcss",
         "@npm//postcss-import",

packages/angular_devkit/build_angular/package.json

@@ -40,7 +40,8 @@
     "mini-css-extract-plugin": "0.9.0",
     "minimatch": "3.0.4",
     "open": "7.1.0",
-    "parse5": "4.0.0",
+    "parse5": "6.0.1",
+    "parse5-htmlparser2-tree-adapter": "6.0.1",
     "pnp-webpack-plugin": "1.6.4",
     "postcss": "7.0.32",
     "postcss-import": "12.0.1",

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts

@@ -10,6 +10,7 @@ import { createHash } from 'crypto';
 import { RawSource, ReplaceSource } from 'webpack-sources';
 
 const parse5 = require('parse5');
+const treeAdapter = require('parse5-htmlparser2-tree-adapter');
 
 export type LoadOutputFileFunctionType = (file: string) => Promise<string>;
 
@@ -90,53 +91,27 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
   }
 
   // Find the head and body elements
-  const treeAdapter = parse5.treeAdapters.default;
-  const document = parse5.parse(params.inputContent, { treeAdapter, locationInfo: true });
-  let headElement;
-  let bodyElement;
-  let htmlElement;
-  for (const docChild of document.childNodes) {
-    if (docChild.tagName === 'html') {
-      htmlElement = docChild;
-      for (const htmlChild of docChild.childNodes) {
-        if (htmlChild.tagName === 'head') {
-          headElement = htmlChild;
-        } else if (htmlChild.tagName === 'body') {
-          bodyElement = htmlChild;
-        }
-      }
-    }
-  }
+  const document = parse5.parse(params.inputContent, {
+    treeAdapter,
+    sourceCodeLocationInfo: true,
+   });
+
+  // tslint:disable: no-any
+  const htmlElement = document.children.find((c: any) => c.name === 'html');
+  const headElement = htmlElement.children.find((c: any) => c.name === 'head');
+  const bodyElement = htmlElement.children.find((c: any) => c.name === 'body');
+  // tslint:enable: no-any
 
   if (!headElement || !bodyElement) {
     throw new Error('Missing head and/or body elements');
   }
 
-  // Determine script insertion point
-  let scriptInsertionPoint;
-  if (bodyElement.__location && bodyElement.__location.endTag) {
-    scriptInsertionPoint = bodyElement.__location.endTag.startOffset;
-  } else {
-    // Less accurate fallback
-    // parse5 4.x does not provide locations if malformed html is present
-    scriptInsertionPoint = params.inputContent.indexOf('</body>');
-  }
-
-  let styleInsertionPoint;
-  if (headElement.__location && headElement.__location.endTag) {
-    styleInsertionPoint = headElement.__location.endTag.startOffset;
-  } else {
-    // Less accurate fallback
-    // parse5 4.x does not provide locations if malformed html is present
-    styleInsertionPoint = params.inputContent.indexOf('</head>');
-  }
-
   // Inject into the html
   const indexSource = new ReplaceSource(new RawSource(params.inputContent), params.input);
 
-  let scriptElements = '';
+  const scriptsElements = treeAdapter.createDocumentFragment();
   for (const script of scripts) {
-    const attrs: { name: string; value: string | null }[] = [
+    const attrs: { name: string; value: string }[] = [
       { name: 'src', value: (params.deployUrl || '') + script },
     ];
 
@@ -156,69 +131,55 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
 
       if (isNoModuleType && !isModuleType) {
         attrs.push(
-          { name: 'nomodule', value: null },
-          { name: 'defer', value: null },
+          { name: 'nomodule', value: '' },
+          { name: 'defer', value: '' },
         );
       } else if (isModuleType && !isNoModuleType) {
         attrs.push({ name: 'type', value: 'module' });
       } else {
-        attrs.push({ name: 'defer', value: null });
+        attrs.push({ name: 'defer', value: '' });
       }
     } else {
-      attrs.push({ name: 'defer', value: null });
+      attrs.push({ name: 'defer', value: '' });
     }
 
     if (params.sri) {
       const content = await loadOutputFile(script);
-      attrs.push(..._generateSriAttributes(content));
+      attrs.push(_generateSriAttributes(content));
     }
 
-    const attributes = attrs
-      .map(attr => (attr.value === null ? attr.name : `${attr.name}="${attr.value}"`))
-      .join(' ');
-    scriptElements += `<script ${attributes}></script>`;
+    const baseElement = treeAdapter.createElement('script', undefined, attrs);
+    treeAdapter.setTemplateContent(scriptsElements, baseElement);
   }
 
-  indexSource.insert(scriptInsertionPoint, scriptElements);
+  indexSource.insert(
+    // parse5 does not provide locations if malformed html is present
+    bodyElement.sourceCodeLocation?.endTag?.startOffset || params.inputContent.indexOf('</body>'),
+    parse5.serialize(scriptsElements, { treeAdapter }).replace(/\=""/g, ''),
+  );
 
   // Adjust base href if specified
   if (typeof params.baseHref == 'string') {
-    let baseElement;
-    for (const headChild of headElement.childNodes) {
-      if (headChild.tagName === 'base') {
-        baseElement = headChild;
-      }
-    }
-
+    // tslint:disable-next-line: no-any
+    let baseElement = headElement.children.find((t: any) => t.name === 'base');
     const baseFragment = treeAdapter.createDocumentFragment();
 
     if (!baseElement) {
       baseElement = treeAdapter.createElement('base', undefined, [
         { name: 'href', value: params.baseHref },
       ]);
 
-      treeAdapter.appendChild(baseFragment, baseElement);
+      treeAdapter.setTemplateContent(baseFragment, baseElement);
       indexSource.insert(
-        headElement.__location.startTag.endOffset,
+        headElement.sourceCodeLocation.startTag.endOffset,
         parse5.serialize(baseFragment, { treeAdapter }),
       );
     } else {
-      let hrefAttribute;
-      for (const attribute of baseElement.attrs) {
-        if (attribute.name === 'href') {
-          hrefAttribute = attribute;
-        }
-      }
-      if (hrefAttribute) {
-        hrefAttribute.value = params.baseHref;
-      } else {
-        baseElement.attrs.push({ name: 'href', value: params.baseHref });
-      }
-
-      treeAdapter.appendChild(baseFragment, baseElement);
+      baseElement.attribs['href'] = params.baseHref;
+      treeAdapter.setTemplateContent(baseFragment, baseElement);
       indexSource.replace(
-        baseElement.__location.startOffset,
-        baseElement.__location.endOffset,
+        baseElement.sourceCodeLocation.startOffset,
+        baseElement.sourceCodeLocation.endOffset,
         parse5.serialize(baseFragment, { treeAdapter }),
       );
     }
@@ -237,38 +198,31 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
 
     if (params.sri) {
       const content = await loadOutputFile(stylesheet);
-      attrs.push(..._generateSriAttributes(content));
+      attrs.push(_generateSriAttributes(content));
     }
 
     const element = treeAdapter.createElement('link', undefined, attrs);
-    treeAdapter.appendChild(styleElements, element);
+    treeAdapter.setTemplateContent(styleElements, element);
   }
 
-  indexSource.insert(styleInsertionPoint, parse5.serialize(styleElements, { treeAdapter }));
+  indexSource.insert(
+    // parse5 does not provide locations if malformed html is present
+    headElement.sourceCodeLocation?.endTag?.startOffset || params.inputContent.indexOf('</head>'),
+    parse5.serialize(styleElements, { treeAdapter }),
+  );
 
   // Adjust document locale if specified
   if (typeof params.lang == 'string') {
-
     const htmlFragment = treeAdapter.createDocumentFragment();
+    htmlElement.attribs['lang'] = params.lang;
 
-    let langAttribute;
-    for (const attribute of htmlElement.attrs) {
-      if (attribute.name === 'lang') {
-        langAttribute = attribute;
-      }
-    }
-    if (langAttribute) {
-      langAttribute.value = params.lang;
-    } else {
-      htmlElement.attrs.push({ name: 'lang', value: params.lang });
-    }
     // we want only openning tag
-    htmlElement.childNodes = [];
+    htmlElement.children = [];
 
-    treeAdapter.appendChild(htmlFragment, htmlElement);
+    treeAdapter.setTemplateContent(htmlFragment, htmlElement);
     indexSource.replace(
-      htmlElement.__location.startTag.startOffset,
-      htmlElement.__location.startTag.endOffset - 1,
+      htmlElement.sourceCodeLocation.startTag.startOffset,
+      htmlElement.sourceCodeLocation.startTag.endOffset - 1,
       parse5.serialize(htmlFragment, { treeAdapter }).replace('</html>', ''),
     );
   }
@@ -282,5 +236,5 @@ function _generateSriAttributes(content: string) {
     .update(content, 'utf8')
     .digest('base64');
 
-  return [{ name: 'integrity', value: `${algo}-${hash}` }];
+  return { name: 'integrity', value: `${algo}-${hash}` };
 }

yarn.lock

@@ -9479,33 +9479,35 @@ [email protected]:
     parse5 "^6.0.1"
     parse5-sax-parser "^6.0.1"
 
+[email protected]:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
 parse5-sax-parser@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-sax-parser/-/parse5-sax-parser-6.0.1.tgz#98b4d366b5b266a7cd90b4b58906667af882daba"
   integrity sha512-kXX+5S81lgESA0LsDuGjAlBybImAChYRMT+/uKCEXFBFOeEhS52qUCydGhU3qLRD8D9DVjaUo821WK7DM4iCeg==
   dependencies:
     parse5 "^6.0.1"
 
-[email protected]:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
-
 [email protected]:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
   integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
 
+[email protected], parse5@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
 parse5@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
-parse5@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
 [email protected]:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"