Merge pull request #128 from contentstack/EB-1850

Eb 1850
contentstack · May 20, 2024 · a07f560 · a07f560
2 parents ebd942e + ec7c921
commit a07f560
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/src/compare.ts b/src/compare.ts
@@ -1,5 +1,6 @@
 import postRobot from "post-robot";
 import { loadCompareGlobalStyle } from "./styles/compare";
+import { registerCompareElement } from "./utils/compare";
 
 const voidElements = new Set([
     "area",
@@ -19,14 +20,19 @@ const voidElements = new Set([
     "wbr",
 ]);
 
+const LEAF_CSLP_SELECTOR = "[data-cslp]:not(:has([data-cslp]))";
+
 export function handleWebCompare() {
     loadCompareGlobalStyle();
+    registerCompareElement();
     postRobot.on("send-current-base-route", async () => {
         return { url: window.location.href.split("?")[0] };
     });
 
     postRobot.on("send-cslp-data", async () => {
-        const elements = Array.from(document.querySelectorAll("[data-cslp]"));
+        const elements = Array.from(
+            document.querySelectorAll(LEAF_CSLP_SELECTOR)
+        );
         const map: Record<string, string> = {};
         for (const element of elements) {
             const cslp = element.getAttribute("data-cslp")!;
@@ -59,7 +65,9 @@ export function handleWebCompare() {
     postRobot.on("diff-value", async ({ data }) => {
         const { diff, type } = data;
         const operation = type === "base" ? "removed" : "added";
-        const elements = Array.from(document.querySelectorAll("[data-cslp]"));
+        const elements = Array.from(
+            document.querySelectorAll(LEAF_CSLP_SELECTOR)
+        );
         for (const element of elements) {
             const path = element.getAttribute("data-cslp")!;
             if (!diff[path]) continue;

diff --git a/src/styles/compare.ts b/src/styles/compare.ts
@@ -3,24 +3,26 @@ import { glob } from "goober";
 export const loadCompareGlobalStyle = () => {
     const css = glob;
     css`
-        .cs-compare--added {
-            background: rgba(0, 122, 82, 0.2);
-            border-bottom: 2px solid rgba(0, 122, 82);
-        }
+        cs-compare {
+            &.cs-compare--added {
+                background: rgba(0, 122, 82, 0.2);
+                border-bottom: 2px solid rgba(0, 122, 82);
+            }
 
-        .cs-compare--removed {
-            background: rgba(214, 36, 0, 0.2);
-            text-decoration: line-through 2px solid rgba(214, 36, 0, 1);
-        }
+            &.cs-compare--removed {
+                background: rgba(214, 36, 0, 0.2);
+                text-decoration: line-through 2px solid rgba(214, 36, 0, 1);
+            }
 
-        .cs-compare__void--added {
-            background: rgba(0, 122, 82, 0.2);
-            outline: 2px solid rgba(0, 122, 82);
-        }
+            &.cs-compare__void--added {
+                background: rgba(0, 122, 82, 0.2);
+                outline: 2px solid rgba(0, 122, 82);
+            }
 
-        .cs-compare__void--removed {
-            background: rgba(214, 36, 0, 0.2);
-            outline: 2px solid rgba(214, 36, 0, 1);
+            &.cs-compare__void--removed {
+                background: rgba(214, 36, 0, 0.2);
+                outline: 2px solid rgba(214, 36, 0, 1);
+            }
         }
     `;
 };
diff --git a/src/utils/compare.ts b/src/utils/compare.ts
@@ -0,0 +1,13 @@
+const DIFF_WRAPPER = "cs-compare";
+
+export function registerCompareElement() {
+    class Compare extends HTMLSpanElement {
+        constructor() {
+            super();
+        }
+    }
+
+    if (!customElements.get(DIFF_WRAPPER)) {
+        customElements.define(DIFF_WRAPPER, Compare);
+    }
+}