refact: mutation plugin

src/main.ts

@@ -5,6 +5,7 @@ import { Counters } from './components/counters'
 import { Footer } from './components/footer'
 import { Header } from './components/header'
 import { Todo } from './components/todo'
+import { highlightDomChanges } from './mutation-plugin'
 import './style.css'
 
 const app = document.body;
@@ -24,56 +25,5 @@ app.appendChild(main)
 app.appendChild(Footer())
 
 AddCounter.script()
-function highlightDomChanges(targetNode: HTMLElement, config = { childList: true, subtree: true, attributes: true, characterData: true }) {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      // Element that was affected by the mutation
-      let changedElement = mutation.target;
-
-      // Style properties for highlight effects
-      const highlightStyles = {
-        added: "2px solid #4CAF50", // green border for added elements
-        removed: "2px solid #F44336", // red border for removed elements
-        attributeChanged: "2px solid #FFEB3B", // yellow border for attribute changes
-        textChanged: "2px dashed #FF9800" // blue dashed border for text changes
-      };
-
-      const HIGHLIGHT_DURATION = 3000; // 3 seconds
-
-      // Detect and highlight the specific type of mutation
-      if (mutation.type === "childList") {
-        mutation.addedNodes.forEach((node) => {
-          if (node.nodeType === Node.ELEMENT_NODE) {
-            (node as HTMLElement).style.border = highlightStyles.added;
-            setTimeout(() => { (node as HTMLElement).style.border = ""; }, HIGHLIGHT_DURATION);
-          }
-        });
-
-        mutation.removedNodes.forEach((node) => {
-          if (node.nodeType === Node.ELEMENT_NODE) {
-            (node as HTMLElement).style.border = highlightStyles.removed;
-            setTimeout(() => { (node as HTMLElement).style.border = ""; }, HIGHLIGHT_DURATION);
-          }
-        });
-      } else if (mutation.type === "attributes") {
-        if (changedElement === document.body) return;
-        (changedElement as HTMLElement).style.border = highlightStyles.attributeChanged;
-        setTimeout(() => { (changedElement as HTMLElement).style.border = ""; }, HIGHLIGHT_DURATION);
-      } else if (mutation.type === "characterData" && mutation.target.nodeType === Node.TEXT_NODE) {
-        (changedElement.parentElement as HTMLElement).style.border = highlightStyles.textChanged;
-        setTimeout(() => { (changedElement.parentElement as HTMLElement).style.border = ""; }, HIGHLIGHT_DURATION);
-      }
-    });
-  });
-
-  // Start observing the target node with the specified configurations
-  observer.observe(targetNode, config);
-
-  // To disconnect the observer, use: observer.disconnect();
-  return observer;
-}
-
-// Usage example
-// Start observing changes on the entire document body
-highlightDomChanges(document.body);
 
+highlightDomChanges(app)

src/mutation-plugin.ts

@@ -0,0 +1,45 @@
+
+export function highlightDomChanges(targetNode: HTMLElement, config = { childList: true, subtree: true, attributes: true, characterData: true }) {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      // Element that was affected by the mutation
+      let changedElement = mutation.target.cloneNode(true);
+      // add dataset
+      // (mutation.target as HTMLElement).dataset.highlight = 'true';
+
+      // Style properties for highlight effects
+      const highlightStyles = {
+        added: "2px solid #F44336", // green border for added elements
+        removed: "2px solid #F44336", // red border for removed elements
+        attributeChanged: "2px solid #FFEB3B", // yellow border for attribute changes
+        textChanged: "2px dashed #FF9800" // blue dashed border for text changes
+      };
+
+      // Detect and highlight the specific type of mutation
+      if (mutation.type === "childList") {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            (node as HTMLElement).style.border = highlightStyles.added;
+          }
+        });
+
+        mutation.removedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            (node as HTMLElement).style.border = highlightStyles.removed;
+          }
+        });
+      } else if (mutation.type === "attributes") {
+        if (changedElement === document.body) return;
+        (changedElement as HTMLElement).style.border = highlightStyles.attributeChanged;
+      } else if (mutation.type === "characterData" && mutation.target.nodeType === Node.TEXT_NODE) {
+        (changedElement.parentElement as HTMLElement).style.border = highlightStyles.textChanged;
+      }
+    });
+  });
+
+  // Start observing the target node with the specified configurations
+  observer.observe(targetNode, config);
+
+  // To disconnect the observer, use: observer.disconnect();
+  return observer;
+}