Add caseSensitive configuration option, solves #128

Author: johanneswilm

README.md

@@ -202,10 +202,21 @@ dd = new diffDOM.DiffDOM({
 #### Disable value diff detection
 
 For forms that have been filled out by a user in ways that have changed which value is associated with an input field or which options are checked/selected without
-the DOM having been updated, the values are diffed. For use cases in which no changes have been made to any of the form values, one may choose to skip diffing the values. To do this, hand `false` as a third configuration option to diffDOM:
+the DOM having been updated, the values are diffed. For use cases in which no changes have been made to any of the form values, one may choose to skip diffing the values. To do this, set `valueDiffing` to `false` as a configuration option to diffDOM:
 
 ```js
 dd = new diffDOM.DiffDOM({
     valueDiffing: false,
 })
 ```
+
+#### Interprete strings as case caseSensitive
+
+Strings of HTML can normally be interpreted case-insensitively as HTML tags don't differentiate between uppercase and lowercase. However, in the case of XML (SVGs, XHTML) there is a difference and this should be enabled. To do this, set `caseSensitive` to `true` as a configuration option to diffDOM:
+
+
+```js
+dd = new diffDOM.DiffDOM({
+    caseSensitive: true,
+})
+```

browser/diffDOM.js

@@ -105,6 +105,7 @@ interface DiffDOMOptions {
     maxDepth: number | false // False or a numeral. If set to a numeral, limits the level of depth that the the diff mechanism looks for differences. If false, goes through the entire tree.
     maxChildCount: number // False or a numeral. If set to a numeral, only does a simplified form of diffing of contents so that the number of diffs cannot be higher than the number of child nodes.
     valueDiffing: boolean // Whether to take into consideration the values of forms that differ from auto assigned values (when a user fills out a form).
+    caseSensitive: boolean // Whether to preserve the case of an input string. Important when including CML (XHTML, SVG, etc.)  
     // syntax: textDiff: function (node, currentValue, expectedValue, newValue)
     textDiff: (
         node: textNodeType | Text | Comment,

browser/diffDOM.js.map

@@ -36,7 +36,7 @@ const lookup = {
     wbr: true,
 }
 
-const parseTag = (tag: string) => {
+const parseTag = (tag: string, caseSensitive: boolean) => {
     const res = {
         nodeName: "",
         attributes: {},
@@ -46,7 +46,7 @@ const parseTag = (tag: string) => {
 
     let tagMatch = tag.match(/<\/?([^\s]+?)[/\s>]/)
     if (tagMatch) {
-        res.nodeName = tagMatch[1]
+        res.nodeName = caseSensitive ? tagMatch[1] : tagMatch[1].toUpperCase()
         if (lookup[tagMatch[1]] || tag.charAt(tag.length - 2) === "/") {
             voidElement = true
         }
@@ -97,7 +97,7 @@ const parseTag = (tag: string) => {
 
 export const stringToObj = (
     html: string,
-    options: DiffDOMOptionsPartial = { valueDiffing: true }
+    options: DiffDOMOptionsPartial = { valueDiffing: true, caseSensitive: false }
 ) => {
     const result: nodeType[] = []
     let current: { type: string; node: nodeType; voidElement: boolean }
@@ -128,7 +128,7 @@ export const stringToObj = (
         const nextChar = html.charAt(start)
 
         if (isComment) {
-            const comment = parseTag(tag).node
+            const comment = parseTag(tag, options.caseSensitive).node
 
             // if we're at root, push new base node
             if (level < 0) {
@@ -146,7 +146,7 @@ export const stringToObj = (
         }
 
         if (isOpen) {
-            current = parseTag(tag)
+            current = parseTag(tag, options.caseSensitive)
             level++
             if (
                 !current.voidElement &&
@@ -188,9 +188,11 @@ export const stringToObj = (
         if (!isOpen || current.voidElement) {
             if (
                 level > -1 &&
-                (current.voidElement ||
-                    current.node.nodeName.toUpperCase() ===
-                        tag.slice(2, -1).toUpperCase())
+                (
+                    current.voidElement ||
+                    (options.caseSensitive && current.node.nodeName === tag.slice(2, -1)) ||
+                    (!options.caseSensitive && current.node.nodeName.toUpperCase() === tag.slice(2, -1).toUpperCase())
+                )
             ) {
                 level--
                 // move current up a level to match the end tag

src/diffDOM/types.ts

@@ -0,0 +1,63 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { DiffDOM, nodeToObj, stringToObj } from "../dist/index"
+
+const strings = [
+    `<svg height=50 width=50>
+        <defs>
+            <clipPath id="clipPath">
+                <rect x="15" y="15" width="40" height="40" />
+            </clipPath>
+        </defs>
+
+        <circle cx=25 cy=25 r=20
+            style="fill: #0000ff; clip-path: url(#clipPath);"
+        />
+    </svg>`,
+    `<svg></svg>`,
+
+    `<svg></svg>`,
+    `<svg height=50 width=50>
+        <defs>
+            <clipPath id="clipPath">
+                <rect x="15" y="15" width="40" height="40" />
+            </clipPath>
+        </defs>
+
+        <circle cx=25 cy=25 r=20
+            style="fill: #0000ff; clip-path: url(#clipPath);"
+        />
+    </svg>`,
+]
+
+describe("string", () => {
+    it("can diff and patch case sensitive xml strings", () => {
+        const dd = new DiffDOM({
+            debug: true,
+            diffcap: 500,
+            caseSensitive: true,
+        })
+
+        for (let i = 0; i < strings.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])
+            expect(diffs).not.toHaveLength(0)
+            const el1 = el1Outer.firstElementChild
+            const el2 = el2Outer.firstElementChild
+            const el1a = el1.cloneNode(true)
+            dd.apply(el1a, diffs)
+            expect(
+                el1a.innerHTML
+            ).toEqual(el2.innerHTML)
+            dd.undo(el1a, diffs)
+            expect(
+                el1a.innerHTML
+            ).toEqual(el1.innerHTML)
+        }
+    })
+})