fix textarea diffing, fixes #119

Author: johanneswilm

browser/diffDOM.js

@@ -49,6 +49,7 @@
         "prettier": "^2.7.1",
         "rollup": "^3.10.0",
         "rollup-plugin-dts": "^5.1.1",
+        "tslib": "^2.5.0",
         "updates": "^13.1.13"
     }
 }

browser/diffDOM.js.map

@@ -90,6 +90,9 @@ export function applyDiff(
                 diff[options._const.oldValue] as string,
                 diff[options._const.newValue] as string
             )
+            if (node.parentNode instanceof HTMLTextAreaElement) {
+                node.parentNode.value = diff[options._const.newValue] as string
+            }
             break
         case options._const.modifyValue:
             if (!node || typeof node.value === "undefined") {
@@ -168,12 +171,17 @@ export function applyDiff(
             )
             break
         }
-        case options._const.removeTextElement:
+        case options._const.removeTextElement: {
             if (!node || node.nodeType !== 3) {
                 return false
             }
-            node.parentNode.removeChild(node)
+            const parentNode = node.parentNode
+            parentNode.removeChild(node)
+            if (parentNode instanceof HTMLTextAreaElement) {
+                parentNode.value = ""
+            }
             break
+        }
         case options._const.addTextElement: {
             const parentRoute = route.slice()
             const c: number = parentRoute.splice(parentRoute.length - 1, 1)[0]
@@ -185,6 +193,9 @@ export function applyDiff(
                 return false
             }
             node.insertBefore(newNode, node.childNodes[c] || null)
+            if (node.parentNode instanceof HTMLTextAreaElement) {
+                node.parentNode.value = diff[options._const.value] as string
+            }
             break
         }
         default:

package.json

@@ -101,6 +101,9 @@ function applyVirtualDiff(
             break
         case options._const.modifyTextElement:
             node.data = diff[options._const.newValue]
+            if (parentNode.nodeName === "TEXTAREA") {
+                parentNode.value = diff[options._const.newValue]
+            }
             break
         case options._const.modifyValue:
             node.value = diff[options._const.newValue]

src/diffDOM/dom/apply.ts

@@ -18,16 +18,17 @@ export function nodeToObj(
                     (objNode.attributes[attribute.name] = attribute.value)
             )
         }
-        if (aNode instanceof HTMLTextAreaElement) {
-            objNode.value = aNode.value
-        } else if (aNode.childNodes && aNode.childNodes.length > 0) {
+        if (aNode.childNodes && aNode.childNodes.length > 0) {
             objNode.childNodes = []
             const nodeArray = Array.prototype.slice.call(aNode.childNodes)
             nodeArray.forEach((childNode) =>
                 objNode.childNodes.push(nodeToObj(childNode, options))
             )
         }
         if (options.valueDiffing) {
+            if (aNode instanceof HTMLTextAreaElement) {
+                objNode.value = aNode.value
+            }
             if (
                 aNode instanceof HTMLInputElement &&
                 ["radio", "checkbox"].includes(aNode.type.toLowerCase()) &&

src/diffDOM/virtual/apply.ts

@@ -1,12 +1,10 @@
-import { nodeType } from "../types"
+import { DiffDOMOptionsPartial, nodeType } from "../types"
 
 // from html-parse-stringify (MIT)
 
 const tagRE =
     /<\s*\/*[a-zA-Z:_][a-zA-Z0-9:_\-.]*\s*(?:"[^"]*"['"]*|'[^']*'['"]*|[^'"/>])*\/*\s*>|<!--(?:.|\n|\r)*?-->/g
 
-// re-used obj for quick lookups of components
-const empty = Object.create ? Object.create(null) : {}
 const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g
 
 function unescape(string: string) {
@@ -97,7 +95,10 @@ const parseTag = (tag: string) => {
     }
 }
 
-export const stringToObj = (html: string, options = { components: empty }) => {
+export const stringToObj = (
+    html: string,
+    options: DiffDOMOptionsPartial = { valueDiffing: true }
+) => {
     const result: nodeType[] = []
     let current: { type: string; node: nodeType; voidElement: boolean }
     let level = -1
@@ -147,13 +148,6 @@ export const stringToObj = (html: string, options = { components: empty }) => {
         if (isOpen) {
             current = parseTag(tag)
             level++
-            if (
-                current.type === "tag" &&
-                options.components[current.node.nodeName]
-            ) {
-                current.type = "component"
-                inComponent = true
-            }
             if (
                 !current.voidElement &&
                 !inComponent &&
@@ -163,10 +157,19 @@ export const stringToObj = (html: string, options = { components: empty }) => {
                 if (!current.node.childNodes) {
                     current.node.childNodes = []
                 }
+                const data = unescape(
+                    html.slice(start, html.indexOf("<", start))
+                )
                 current.node.childNodes.push({
                     nodeName: "#text",
-                    data: unescape(html.slice(start, html.indexOf("<", start))),
+                    data,
                 })
+                if (
+                    options.valueDiffing &&
+                    current.node.nodeName === "TEXTAREA"
+                ) {
+                    current.node.value = data
+                }
             }
             // if we're at root, push new base node
             if (level === 0 && current.node.nodeName) {

src/diffDOM/virtual/fromDOM.ts

@@ -67,14 +67,16 @@ describe("form", () => {
         expect(diff4).toHaveLength(1)
 
         const diff5 = dd.diff(first, second)
-        expect(diff5).toHaveLength(1)
+        expect(diff5).toHaveLength(2)
 
-        second.innerText = "Some text"
+        second.innerHTML = "Some text"
         const diff6 = dd.diff(first, second)
         dd.apply(first, diff6)
+        expect(first.innerHTML).toBe(second.innerHTML)
         const diff7 = dd.diff(first, third)
         dd.apply(first, diff7)
         expect(first.value).toBe(third.value)
+        expect(first.innerHTML).toBe(third.innerHTML)
     })
 
     it("can diff input type = text", () => {