Only require specification of case sensitivity when diffing inside of SVGs

Author: johanneswilm

README.md

@@ -220,3 +220,5 @@ dd = new diffDOM.DiffDOM({
     caseSensitive: true,
 })
 ```
+
+**NOTE!** If there is an SVG inside of the HTML in the string, diffDOM can automatically determine that it should switch to case sensitivity. It is only if the diff happens entirely within an SVG that it is required to specify this.

browser/diffDOM.js

@@ -46,7 +46,7 @@ const parseTag = (tag: string, caseSensitive: boolean) => {
 
     let tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/)
     if (tagMatch) {
-        res.nodeName = caseSensitive ? tagMatch[1] : tagMatch[1].toUpperCase()
+        res.nodeName = (caseSensitive || tagMatch[1] === "svg") ? tagMatch[1] : tagMatch[1].toUpperCase()
         if (lookup[tagMatch[1]] || tag.charAt(tag.length - 2) === "/") {
             voidElement = true
         }
@@ -103,7 +103,7 @@ export const stringToObj = (
     let current: { type: string; node: nodeType; voidElement: boolean }
     let level = -1
     const arr: { type: string; node: nodeType; voidElement: boolean }[] = []
-    let inComponent = false
+    let inComponent = false, insideSvg = false
 
     // handle text at top level
     if (html.indexOf("<") !== 0) {
@@ -146,7 +146,10 @@ export const stringToObj = (
         }
 
         if (isOpen) {
-            current = parseTag(tag, options.caseSensitive)
+            current = parseTag(tag, options.caseSensitive || insideSvg)
+            if (current.node.nodeName==="svg") {
+                insideSvg = true
+            }
             level++
             if (
                 !current.voidElement &&
@@ -197,6 +200,9 @@ export const stringToObj = (
                 level--
                 // move current up a level to match the end tag
                 if (level > -1) {
+                    if (current.node.nodeName==="svg") {
+                        insideSvg = false
+                    }
                     current = arr[level]
                 }
             }

browser/diffDOM.js.map

@@ -4,7 +4,7 @@
 
 import { DiffDOM, nodeToObj, stringToObj } from "../dist/index"
 
-const strings = [
+const stringsIncludingSVGs = [
     `<svg height=50 width=50>
         <defs>
             <clipPath id="clipPath">
@@ -32,20 +32,28 @@ const strings = [
     </svg>`,
 ]
 
+const stringsInsideSVGs = [
+    `<defs><clipPath id="clipPath"><rect x="15" y="15" width="40" height="40" /></clipPath></defs>`,
+    `<defs></defs>`,
+
+    `<defs></defs>`,
+    `<defs><clipPath id="clipPath"><rect x="15" y="15" width="40" height="40" /></clipPath></defs>`,
+]
+
 describe("string", () => {
     it("can diff and patch case sensitive xml strings", () => {
         const dd = new DiffDOM({
             debug: true,
             diffcap: 500,
-            caseSensitive: true,
+            caseSensitive: false,
         })
 
-        for (let i = 0; i < strings.length; i += 2) {
+        for (let i = 0; i < stringsIncludingSVGs.length; i += 2) {
             const el1Outer = document.createElement("div")
             const el2Outer = document.createElement("div")
-            el1Outer.innerHTML = strings[i]
-            el2Outer.innerHTML = strings[i + 1]
-            const diffs = dd.diff(strings[i], strings[i + 1])
+            el1Outer.innerHTML = stringsIncludingSVGs[i]
+            el2Outer.innerHTML = stringsIncludingSVGs[i + 1]
+            const diffs = dd.diff(stringsIncludingSVGs[i], stringsIncludingSVGs[i + 1])
             expect(diffs).not.toHaveLength(0)
             const el1 = el1Outer.firstElementChild
             const el2 = el2Outer.firstElementChild
@@ -59,5 +67,48 @@ describe("string", () => {
                 el1a.innerHTML
             ).toEqual(el1.innerHTML)
         }
+
+        const ddCaseSensitive = new DiffDOM({
+            debug: true,
+            diffcap: 500,
+            caseSensitive: true,
+        })
+
+        for (let i = 0; i < stringsInsideSVGs.length; i += 2) {
+            const el1Outer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+            const el2Outer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+            el1Outer.innerHTML = stringsInsideSVGs[i]
+            el2Outer.innerHTML = stringsInsideSVGs[i + 1]
+            const diffsCaseSensitive = ddCaseSensitive.diff(stringsInsideSVGs[i], stringsInsideSVGs[i + 1])
+            const diffs = dd.diff(stringsInsideSVGs[i], stringsInsideSVGs[i + 1])
+            expect(diffsCaseSensitive).not.toHaveLength(0)
+            expect(diffs).not.toHaveLength(0)
+            const el1 = el1Outer.firstElementChild
+            const el2 = el2Outer.firstElementChild
+            const el1a = el1.cloneNode(true)
+            const el1b = el1.cloneNode(true)
+            ddCaseSensitive.apply(el1a, diffsCaseSensitive)
+            expect(
+                el1a.innerHTML
+            ).toEqual(el2.innerHTML)
+            // Trying to do the same without case sensitivity should not work.
+            dd.apply(el1b, diffs)
+            if (el1b.innerHTML.length || el2.innerHTML.length) {
+                expect(
+                    el1b.innerHTML
+                ).not.toEqual(el2.innerHTML)
+            }
+            ddCaseSensitive.undo(el1a, diffsCaseSensitive)
+            expect(
+                el1a.innerHTML
+            ).toEqual(el1.innerHTML)
+            // Trying to do the same without case sensitivity should not work.
+            dd.undo(el1b, diffs)
+            if (el1b.innerHTML.length || el1.innerHTML.length) {
+                expect(
+                    el1b.innerHTML
+                ).not.toEqual(el1.innerHTML)
+            }
+        }
     })
 })