fix: some text parsing exceptions caused by comment node

qq15725 · Mar 5, 2023 · c2e7df8 · c2e7df8 · vercel · Mar 5, 2023
1 parent a48cb89
commit c2e7df8
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -11,16 +11,18 @@
     body, html {
       margin: 0;
     }
+
+    #root {
+      display: inline-flex;
+      font-size: .875rem;
+      font-family: "Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+      line-height: 1.5;
+    }
   </style>
 </head>
 <body>
   <div>
-    <div id="root" style="text-align: center;">
-      <h1>egami</h1>
-      <h1>→</h1>
-      <h1>image</h1>
-      <video src='/docs/movie.mp4' controls autoPlay></video>
-    </div>
+    <div id="root">前缀 <!---->after</div>
   </div>
 
   <script type="module" async>

diff --git a/src/clone-node.ts b/src/clone-node.ts
@@ -2,6 +2,7 @@ import { copyPseudoContent } from './copy-pseudo-content'
 import { copyInputValue } from './copy-input-value'
 import { copyCssStyles } from './copy-css-styles'
 import {
+  isCommentNode,
   isElementNode,
   isHTMLElementNode,
   isSVGElementNode,
@@ -38,6 +39,7 @@ async function cloneChildNodes<T extends Node>(
   ) ?? node.firstChild
 
   for (let child = firstChild; child; child = child.nextSibling) {
+    if (isCommentNode(child)) continue
     if (
       isElementNode(child)
       && isSlotElement(child)

diff --git a/src/utils.ts b/src/utils.ts
@@ -21,6 +21,7 @@ export const isElementNode = (node: Node): node is Element => node.nodeType ===
 export const isSVGElementNode = (node: Element): node is SVGElement => typeof (node as SVGElement).className === 'object'
 export const isSVGImageElementNode = (node: Element): node is SVGImageElement => isSVGElementNode(node) && node.tagName === 'IMAGE'
 export const isHTMLElementNode = (node: Node): node is HTMLElement => isElementNode(node) && typeof (node as HTMLElement).style !== 'undefined' && !isSVGElementNode(node)
+export const isCommentNode = (node: Node): node is Text => node.nodeType === 8 // Node.COMMENT_NODE
 export const isTextNode = (node: Node): node is Text => node.nodeType === 3 // Node.TEXT_NODE
 export const isImageElement = (node: Element): node is HTMLImageElement => node.tagName === 'IMG'
 export const isVideoElement = (node: Element): node is HTMLVideoElement => node.tagName === 'VIDEO'

diff --git a/test/fixtures/dom.comment.html b/test/fixtures/dom.comment.html
@@ -0,0 +1,14 @@
+<style>
+  #root {
+    display: inline-flex;
+    font-size: .875rem;
+    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+    line-height: 1.5;
+  }
+</style>
+
+<template>
+  <div id="root">前缀 <!---->after</div>
+</template>
+
+<skip-expect />
diff --git a/test/fixtures/dom.comment.png b/test/fixtures/dom.comment.png
diff --git a/test/fixtures/dom.video.html b/test/fixtures/dom.video.html
@@ -1,6 +1,6 @@
 <template>
   <video controls width="250" poster="__BASE_URL__/image.png">
-    <source src="__BASE_URL__/video.mp4" type="video/mp4">
+    <source type="video/mp4">
     Sorry, your browser doesn't support embedded videos.
   </video>
 </template>