re translate when text changed

public/content.html

@@ -17,40 +17,45 @@
     </style>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-        (() => {
+        // (() => {
-          var shadow = document.querySelector("#shadow1");
+        //   var shadow = document.querySelector("#shadow1");
-          var root = shadow.attachShadow({ mode: "open" });
+        //   var root = shadow.attachShadow({ mode: "open" });
-          var newLine = document.createElement("p");
+        //   var newLine = document.createElement("p");
-          newLine.innerText = "new line";
+        //   newLine.innerText = "new line";
-          root.appendChild(newLine);
+        //   root.appendChild(newLine);
-        })();
+        // })();
+
+        // setTimeout(function () {
+        //   var shadow = document.querySelector("#shadow2");
+        //   var root = shadow.attachShadow({ mode: "open" });
+        // }, 1000);
+
+        // setTimeout(() => {
+        //   var newLine = document.createElement("p");
+        //   newLine.innerText = "new line";
+        //   var shadow = document.querySelector("#shadow2");
+        //   shadow.shadowRoot.appendChild(newLine);
+        // }, 2000);
+
+        // setTimeout(() => {
+        //   var newLine = document.createElement("div");
+        //   newLine.innerHTML = "<p>second line</p><p>third line</p>";
+        //   var shadow = document.querySelector("#shadow2");
+        //   shadow.shadowRoot.appendChild(newLine);
+        // }, 3000);
+
+        // setTimeout(function () {
+        //   var el = document.querySelector("h2");
+        //   el.innerText = "hello world";
+
+        //   var title = document.querySelector("#addtitle");
+        //   title.innerHTML =
+        //     "<div><p>second title</p><ul><li>second title</li><li><p>second title</p></li></ul></div>";
+        // }, 1000);
 
         setTimeout(function () {
-          var shadow = document.querySelector("#shadow2");
+          var el = document.querySelector("h2>p>span");
-          var root = shadow.attachShadow({ mode: "open" });
-        }, 1000);
-
-        setTimeout(() => {
-          var newLine = document.createElement("p");
-          newLine.innerText = "new line";
-          var shadow = document.querySelector("#shadow2");
-          shadow.shadowRoot.appendChild(newLine);
-        }, 2000);
-
-        setTimeout(() => {
-          var newLine = document.createElement("div");
-          newLine.innerHTML = "<p>second line</p><p>third line</p>";
-          var shadow = document.querySelector("#shadow2");
-          shadow.shadowRoot.appendChild(newLine);
-        }, 3000);
-
-        setTimeout(function () {
-          var el = document.querySelector("h2");
           el.innerText = "hello world";
-
-          var title = document.querySelector("#addtitle");
-          title.innerHTML =
-            "<div><p>second title</p><ul><li>second title</li><li><p>second title</p></li></ul></div>";
         }, 1000);
       });
     </script>
@@ -60,7 +65,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root">
       <h2>
-        <p>React is a JavaScript library for building user interfaces.</p>
+        <p><span>React is a JavaScript library for building user interfaces.</span></p>
       </h2>
       <div id="addtitle"></div>
       <h2>Shadow 1</h2>

src/libs/translator.js

@@ -37,7 +37,7 @@ export class Translator {
     "iframe",
   ];
   _rootNodes = new Set();
-  _tranNodes = new Set();
+  _tranNodes = new Map();
 
   // 显示
   _interseObserver = new IntersectionObserver(
@@ -182,7 +182,9 @@ export class Translator {
                 this._rootNodes.add(outNode.shadowRoot);
                 this._queryFilter(inSelector, outNode.shadowRoot).forEach(
                   (item) => {
-                    this._tranNodes.add(item);
+                    if (!this._tranNodes.has(item)) {
+                      this._tranNodes.set(item, "");
+                    }
                   }
                 );
               }
@@ -190,7 +192,9 @@ export class Translator {
           }
         } else {
           this._queryFilter(selector, rootNode).forEach((item) => {
-            this._tranNodes.add(item);
+            if (!this._tranNodes.has(item)) {
+              this._tranNodes.set(item, "");
+            }
           });
         }
       });
@@ -209,7 +213,7 @@ export class Translator {
       });
     });
 
-    this._tranNodes.forEach((node) => {
+    this._tranNodes.forEach((_, node) => {
       // 监听节点显示
       this._interseObserver.observe(node);
     });
@@ -223,7 +227,7 @@ export class Translator {
     this._interseObserver.disconnect();
 
     // 移除已插入元素
-    this._tranNodes.forEach((node) => {
+    this._tranNodes.forEach((_, node) => {
       node.querySelector(APP_LCNAME)?.remove();
     });
 
@@ -242,22 +246,37 @@ export class Translator {
   }, 500);
 
   _render = (el) => {
+    let traEl = el.querySelector(APP_LCNAME);
+
     // 已翻译
-    if (el.querySelector(APP_LCNAME)) {
+    if (traEl) {
-      return;
+      const preText = this._tranNodes.get(el);
+      const curText = el.innerText.trim();
+      // const traText = traEl.innerText.trim();
+
+      // todo
+      // 1. traText when loading
+      // 2. replace startsWith
+      if (curText.startsWith(preText)) {
+        return;
+      }
+
+      traEl.remove();
     }
 
-    // 太长或太短
     const q = el.innerText.trim();
+    this._tranNodes.set(el, q);
+
+    // 太长或太短
     if (!q || q.length < this._minLength || q.length > this._maxLength) {
       return;
     }
 
     // console.log("---> ", q);
 
-    const span = document.createElement(APP_LCNAME);
+    traEl = document.createElement(APP_LCNAME);
-    span.style.visibility = "visible";
+    traEl.style.visibility = "visible";
-    el.appendChild(span);
+    el.appendChild(traEl);
     el.style.cssText +=
       "-webkit-line-clamp: unset; max-height: none; height: auto;";
     if (el.parentElement) {
@@ -265,7 +284,7 @@ export class Translator {
         "-webkit-line-clamp: unset; max-height: none; height: auto;";
     }
 
-    const root = createRoot(span);
+    const root = createRoot(traEl);
     root.render(<Content q={q} translator={this} />);
   };
 }