feat (localize-tools): upgrade parse5 to 7.x (#4168)

* feat (localize-tools): upgrade parse5 to 7.x This just upgrades the parse5 dependency to 7.x which ships its own typescript types amongst various other improvements. The SSR package has also been updated to import types from the parse5 root as the deep path isn't exported in parse5's `package.json`. Co-authored-by: Augustine Kim <augustinekim@google.com>
lit · Aug 31, 2023 · 444599e · 444599e
1 parent f15fbfb
commit 444599e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 20 deletions.
diff --git a/.changeset/thin-apricots-help.md b/.changeset/thin-apricots-help.md
@@ -0,0 +1,6 @@
+---
+'@lit/localize-tools': patch
+'@lit-labs/ssr': patch
+---
+
+Upgrade parse5 to 7.x in localize-tools and import from root of parse5 where possible
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/labs/ssr/package.json b/packages/labs/ssr/package.json
@@ -195,7 +195,6 @@
     "@types/koa-cors": "*",
     "@types/koa-mount": "^4.0.2",
     "@types/koa-static": "^4.0.1",
-    "@types/parse5": "^6.0.1",
     "@types/resolve": "^1.20.2",
     "@webcomponents/template-shadowroot": "^0.1.0",
     "command-line-args": "^5.1.1",

diff --git a/packages/labs/ssr/src/lib/util/parse5-utils.ts b/packages/labs/ssr/src/lib/util/parse5-utils.ts
@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {Node, Element} from 'parse5/dist/tree-adapters/default.js';
+import {DefaultTreeAdapterMap} from 'parse5';
 import {traverse, replaceWith, isElementNode} from '@parse5/tools';
 
-export function removeFakeRootElements(node: Node) {
-  const fakeRootElements: Element[] = [];
+export function removeFakeRootElements(node: DefaultTreeAdapterMap['node']) {
+  const fakeRootElements: DefaultTreeAdapterMap['element'][] = [];
 
   traverse(node, {
     'pre:node': (node) => {

diff --git a/packages/localize-tools/package.json b/packages/localize-tools/package.json
@@ -137,7 +137,7 @@
     "jsonschema": "^1.4.0",
     "lit": "^2.7.0",
     "minimist": "^1.2.5",
-    "parse5": "^6.0.1",
+    "parse5": "^7.1.1",
     "source-map-support": "^0.5.19",
     "typescript": "^4.7.4"
   },
@@ -146,7 +146,6 @@
     "@lit/ts-transformers": "^1.1.0",
     "@types/fs-extra": "^9.0.1",
     "@types/minimist": "^1.2.0",
-    "@types/parse5": "^6.0.1",
     "@types/prettier": "^2.0.1",
     "rimraf": "^3.0.2",
     "@lit-internal/tests": "0.0.0",

diff --git a/packages/localize-tools/src/program-analysis.ts b/packages/localize-tools/src/program-analysis.ts
@@ -514,13 +514,15 @@ function replaceHtmlWithPlaceholders(
 ): Array<string | Omit<Placeholder, 'index'>> {
   const components: Array<string | Omit<Placeholder, 'index'>> = [];
 
-  const traverse = (node: parse5.ChildNode): void => {
+  const traverse = (node: parse5.DefaultTreeAdapterMap['childNode']): void => {
     if (node.nodeName === '#text') {
-      const text = (node as parse5.TextNode).value;
+      const text = (node as parse5.DefaultTreeAdapterMap['textNode']).value;
       components.push(text);
     } else if (node.nodeName === '#comment') {
       components.push({
-        untranslatable: serializeComment(node as parse5.CommentNode),
+        untranslatable: serializeComment(
+          node as parse5.DefaultTreeAdapterMap['commentNode']
+        ),
       });
     } else {
       const {open, close} = serializeOpenCloseTags(node);
@@ -549,12 +551,19 @@ function replaceHtmlWithPlaceholders(
  *
  *   <b class="red">foo</b> --> {open: '<b class="red">, close: '</b>'}
  */
-function serializeOpenCloseTags(node: parse5.ChildNode): {
+function serializeOpenCloseTags(
+  node: parse5.DefaultTreeAdapterMap['childNode']
+): {
   open: string;
   close: string;
 } {
-  const withoutChildren: parse5.ChildNode = {...node, childNodes: []};
-  const fakeParent = {childNodes: [withoutChildren]} as parse5.Node;
+  const withoutChildren: parse5.DefaultTreeAdapterMap['childNode'] = {
+    ...node,
+    childNodes: [],
+  };
+  const fakeParent = {
+    childNodes: [withoutChildren],
+  } as parse5.DefaultTreeAdapterMap['parentNode'];
   const serialized = parse5.serialize(fakeParent);
   const lastLt = serialized.lastIndexOf('<');
   const open = serialized.slice(0, lastLt);
@@ -569,8 +578,12 @@ function serializeOpenCloseTags(node: parse5.ChildNode): {
  *
  *   {data: "foo"} --> "<!-- foo -->"
  */
-function serializeComment(comment: parse5.CommentNode): string {
-  return parse5.serialize({childNodes: [comment]} as parse5.Node);
+function serializeComment(
+  comment: parse5.DefaultTreeAdapterMap['commentNode']
+): string {
+  return parse5.serialize({
+    childNodes: [comment],
+  } as parse5.DefaultTreeAdapterMap['parentNode']);
 }
 
 /**