+27 -1

src/morphlex.ts

reviewed

··· 72 72 element.setAttribute("morphlex-dirty", "") 73 73 } 74 74 } 75 75 + 76 76 + for (const element of node.querySelectorAll("textarea")) { 77 77 + if (element.value !== element.defaultValue) { 78 78 + element.setAttribute("morphlex-dirty", "") 79 79 + } 80 80 + } 75 81 } 76 82 77 83 function parseString(string: string): DocumentFragment { ··· 167 173 this.visitAttributes(pair) 168 174 } 169 175 170 170 - if (from.hasChildNodes() || to.hasChildNodes()) { 176 176 + if (isTextAreaElement(from) && isTextAreaElement(to)) { 177 177 + this.visitTextArea(pair as PairOfMatchingElements<HTMLTextAreaElement>) 178 178 + } else if (from.hasChildNodes() || to.hasChildNodes()) { 171 179 this.visitChildNodes(pair) 172 180 } 173 181 } ··· 252 260 } 253 261 } 254 262 } 263 263 + } 264 264 + 265 265 + private visitTextArea([from, to]: PairOfMatchingElements<HTMLTextAreaElement>): void { 266 266 + const newTextContent = to.textContent || "" 267 267 + const isModified = from.value !== from.defaultValue 268 268 + 269 269 + // Update text content (which updates defaultValue) 270 270 + if (from.textContent !== newTextContent) { 271 271 + from.textContent = newTextContent 272 272 + } 273 273 + 274 274 + if (this.options.preserveModified && isModified) return 275 275 + 276 276 + from.value = from.defaultValue 255 277 } 256 278 257 279 visitChildNodes([from, to]: PairOfMatchingElements<Element>): void { ··· 509 531 510 532 function isOptionElement(element: Element): element is HTMLOptionElement { 511 533 return element.localName === "option" 534 534 + } 535 535 + 536 536 + function isTextAreaElement(element: Element): element is HTMLTextAreaElement { 537 537 + return element.localName === "textarea" 512 538 } 513 539 514 540 function isParentNode(node: Node): node is ParentNode {

+193

test/inputs.browser.test.ts

reviewed

··· 1 1 + import { test, expect, describe } from "vitest" 2 2 + import { morph } from "../src/morphlex" 3 3 + 4 4 + function parseHTML(html: string): HTMLElement { 5 5 + const tmp = document.createElement("div") 6 6 + tmp.innerHTML = html.trim() 7 7 + return tmp.firstChild as HTMLElement 8 8 + } 9 9 + 10 10 + describe("text input", () => { 11 11 + test("morphing a modified value with preserveModified enabled", () => { 12 12 + const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 13 13 + const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 14 14 + 15 15 + a.value = "c" 16 16 + morph(a, b, { preserveModified: true }) 17 17 + 18 18 + expect(a.outerHTML).toBe(`<input type="text" value="b">`) 19 19 + expect(a.value).toBe("c") 20 20 + }) 21 21 + 22 22 + test("morphing a modified value preserveModified disabled", () => { 23 23 + const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 24 24 + const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 25 25 + 26 26 + a.value = "c" 27 27 + morph(a, b, { preserveModified: false }) 28 28 + 29 29 + expect(a.outerHTML).toBe(`<input type="text" value="b">`) 30 30 + expect(a.value).toBe("b") 31 31 + }) 32 32 + 33 33 + test("morphing an unmodified value with preserveModified enabled", () => { 34 34 + const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 35 35 + const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 36 36 + 37 37 + morph(a, b, { preserveModified: true }) 38 38 + 39 39 + expect(a.outerHTML).toBe(`<input type="text" value="b">`) 40 40 + expect(a.value).toBe("b") 41 41 + }) 42 42 + }) 43 43 + 44 44 + describe("checkbox", () => { 45 45 + test("morphing a modified checkbox checked with preserveModified enabled", () => { 46 46 + const a = parseHTML(`<input type="checkbox">`) as HTMLInputElement 47 47 + const b = parseHTML(`<input type="checkbox" checked>`) as HTMLInputElement 48 48 + 49 49 + a.checked = true 50 50 + morph(a, b, { preserveModified: true }) 51 51 + 52 52 + expect(a.hasAttribute("checked")).toBe(true) 53 53 + expect(a.checked).toBe(true) 54 54 + }) 55 55 + 56 56 + test("morphing a modified checkbox checked with preserveModified disabled", () => { 57 57 + const a = parseHTML(`<input type="checkbox">`) as HTMLInputElement 58 58 + const b = parseHTML(`<input type="checkbox" checked>`) as HTMLInputElement 59 59 + 60 60 + a.checked = true 61 61 + morph(a, b, { preserveModified: false }) 62 62 + 63 63 + expect(a.hasAttribute("checked")).toBe(true) 64 64 + expect(a.checked).toBe(true) 65 65 + }) 66 66 + 67 67 + test("morphing an unmodified checkbox with preserveModified enabled", () => { 68 68 + const a = parseHTML(`<input type="checkbox">`) as HTMLInputElement 69 69 + const b = parseHTML(`<input type="checkbox" checked>`) as HTMLInputElement 70 70 + 71 71 + morph(a, b, { preserveModified: true }) 72 72 + 73 73 + expect(a.hasAttribute("checked")).toBe(true) 74 74 + expect(a.checked).toBe(true) 75 75 + }) 76 76 + 77 77 + test("morphing a modified checkbox unchecked with preserveModified enabled", () => { 78 78 + const a = parseHTML(`<input type="checkbox" checked>`) as HTMLInputElement 79 79 + const b = parseHTML(`<input type="checkbox">`) as HTMLInputElement 80 80 + 81 81 + a.checked = false 82 82 + morph(a, b, { preserveModified: true }) 83 83 + 84 84 + expect(a.hasAttribute("checked")).toBe(false) 85 85 + expect(a.checked).toBe(false) 86 86 + }) 87 87 + 88 88 + test("morphing a modified checkbox unchecked with preserveModified disabled", () => { 89 89 + const a = parseHTML(`<input type="checkbox" checked>`) as HTMLInputElement 90 90 + const b = parseHTML(`<input type="checkbox">`) as HTMLInputElement 91 91 + 92 92 + a.checked = false 93 93 + morph(a, b, { preserveModified: false }) 94 94 + 95 95 + expect(a.hasAttribute("checked")).toBe(false) 96 96 + expect(a.checked).toBe(false) 97 97 + }) 98 98 + }) 99 99 + 100 100 + describe("select", () => { 101 101 + test("morphing a modified select option with preserveModified enabled", () => { 102 102 + const a = parseHTML(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement 103 103 + const b = parseHTML(`<select><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement 104 104 + 105 105 + a.value = "b" 106 106 + morph(a, b, { preserveModified: true }) 107 107 + 108 108 + expect(a.options[1].hasAttribute("selected")).toBe(true) 109 109 + expect(a.value).toBe("b") 110 110 + expect(a.options[1].selected).toBe(true) 111 111 + }) 112 112 + 113 113 + test("morphing a modified select option with preserveModified disabled", () => { 114 114 + const a = parseHTML(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement 115 115 + const b = parseHTML(`<select><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement 116 116 + 117 117 + a.value = "b" 118 118 + morph(a, b, { preserveModified: false }) 119 119 + 120 120 + expect(a.options[1].hasAttribute("selected")).toBe(true) 121 121 + expect(a.value).toBe("b") 122 122 + expect(a.options[1].selected).toBe(true) 123 123 + }) 124 124 + 125 125 + test("morphing an unmodified select option with preserveModified enabled", () => { 126 126 + const a = parseHTML(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement 127 127 + const b = parseHTML(`<select><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement 128 128 + 129 129 + morph(a, b, { preserveModified: true }) 130 130 + 131 131 + expect(a.options[1].hasAttribute("selected")).toBe(true) 132 132 + expect(a.value).toBe("b") 133 133 + expect(a.options[1].selected).toBe(true) 134 134 + }) 135 135 + 136 136 + test("morphing a modified select option back to default with preserveModified enabled", () => { 137 137 + const a = parseHTML(`<select><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement 138 138 + const b = parseHTML(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement 139 139 + 140 140 + a.value = "a" 141 141 + morph(a, b, { preserveModified: true }) 142 142 + 143 143 + expect(a.options[1].hasAttribute("selected")).toBe(false) 144 144 + expect(a.value).toBe("a") 145 145 + expect(a.options[0].selected).toBe(true) 146 146 + }) 147 147 + 148 148 + test("morphing a modified select option back to default with preserveModified disabled", () => { 149 149 + const a = parseHTML(`<select><option value="a">A</option><option value="b" selected>B</option></select>`) as HTMLSelectElement 150 150 + const b = parseHTML(`<select><option value="a">A</option><option value="b">B</option></select>`) as HTMLSelectElement 151 151 + 152 152 + a.value = "a" 153 153 + morph(a, b, { preserveModified: false }) 154 154 + 155 155 + expect(a.options[1].hasAttribute("selected")).toBe(false) 156 156 + expect(a.value).toBe("a") 157 157 + expect(a.options[0].selected).toBe(true) 158 158 + }) 159 159 + }) 160 160 + 161 161 + describe("textarea", () => { 162 162 + test("morphing a modified textarea value with preserveModified enabled", () => { 163 163 + const a = parseHTML(`<textarea>a</textarea>`) as HTMLTextAreaElement 164 164 + const b = parseHTML(`<textarea>b</textarea>`) as HTMLTextAreaElement 165 165 + 166 166 + a.value = "c" 167 167 + morph(a, b, { preserveModified: true }) 168 168 + 169 169 + expect(a.textContent).toBe("b") 170 170 + expect(a.value).toBe("c") 171 171 + }) 172 172 + 173 173 + test("morphing a modified textarea value with preserveModified disabled", () => { 174 174 + const a = parseHTML(`<textarea>a</textarea>`) as HTMLTextAreaElement 175 175 + const b = parseHTML(`<textarea>b</textarea>`) as HTMLTextAreaElement 176 176 + 177 177 + a.value = "c" 178 178 + morph(a, b, { preserveModified: false }) 179 179 + 180 180 + expect(a.textContent).toBe("b") 181 181 + expect(a.value).toBe("b") 182 182 + }) 183 183 + 184 184 + test("morphing an unmodified textarea value with preserveModified enabled", () => { 185 185 + const a = parseHTML(`<textarea>a</textarea>`) as HTMLTextAreaElement 186 186 + const b = parseHTML(`<textarea>b</textarea>`) as HTMLTextAreaElement 187 187 + 188 188 + morph(a, b, { preserveModified: true }) 189 189 + 190 190 + expect(a.textContent).toBe("b") 191 191 + expect(a.value).toBe("b") 192 192 + }) 193 193 + })

-40

test/new.browser.test.ts

reviewed

··· 1 1 - import { test, expect } from "vitest" 2 2 - import { morph } from "../src/morphlex" 3 3 - 4 4 - function parseHTML(html: string): HTMLElement { 5 5 - const tmp = document.createElement("div") 6 6 - tmp.innerHTML = html.trim() 7 7 - return tmp.firstChild as HTMLElement 8 8 - } 9 9 - 10 10 - test("morphing a modified input value with preserveModified enabled", () => { 11 11 - const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 12 12 - const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 13 13 - 14 14 - a.value = "new" 15 15 - morph(a, b, { preserveModified: true }) 16 16 - 17 17 - expect(a.outerHTML).toBe(`<input type="text" value="b">`) 18 18 - expect(a.value).toBe("new") 19 19 - }) 20 20 - 21 21 - test("morphing a modified input value preserveModified disabled", () => { 22 22 - const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 23 23 - const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 24 24 - 25 25 - a.value = "new" 26 26 - morph(a, b, { preserveModified: false }) 27 27 - 28 28 - expect(a.outerHTML).toBe(`<input type="text" value="b">`) 29 29 - expect(a.value).toBe("b") 30 30 - }) 31 31 - 32 32 - test("morphing an unmodified input value with preserveModified enabled", () => { 33 33 - const a = parseHTML(`<input type="text" value="a">`) as HTMLInputElement 34 34 - const b = parseHTML(`<input type="text" value="b">`) as HTMLInputElement 35 35 - 36 36 - morph(a, b, { preserveModified: true }) 37 37 - 38 38 - expect(a.outerHTML).toBe(`<input type="text" value="b">`) 39 39 - expect(a.value).toBe("b") 40 40 - })