Precise DOM morphing
morphing
typescript
dom
Simplify dirty tracking
Depend on the native browser support for this.
+8
-9
+6
-7
src/morphlex.ts
+6
-7
src/morphlex.ts
···
391
391
}
392
392
393
393
#visitAttributes(from: Element, to: Element): void {
394
-
const wasDirty = from.hasAttribute("morphlex-dirty")
395
-
if (wasDirty) {
394
+
if (from.hasAttribute("morphlex-dirty")) {
396
395
from.removeAttribute("morphlex-dirty")
397
396
}
398
397
···
400
399
for (const { name, value } of to.attributes) {
401
400
if (name === "value") {
402
401
if (isInputElement(from) && from.value !== value) {
403
-
if (from !== this.#skipValuePropertyUpdateFor && (!this.#options.preserveChanges || !wasDirty)) {
402
+
if (from !== this.#skipValuePropertyUpdateFor && !this.#options.preserveChanges) {
404
403
from.value = value
405
404
}
406
405
}
···
408
407
409
408
if (name === "selected") {
410
409
if (isOptionElement(from) && !from.selected) {
411
-
if (!this.#options.preserveChanges || !wasDirty) {
410
+
if (!this.#options.preserveChanges) {
412
411
from.selected = true
413
412
}
414
413
}
···
416
415
417
416
if (name === "checked") {
418
417
if (isInputElement(from) && !from.checked) {
419
-
if (!this.#options.preserveChanges || !wasDirty) {
418
+
if (!this.#options.preserveChanges) {
420
419
from.checked = true
421
420
}
422
421
}
···
435
434
if (!to.hasAttribute(name)) {
436
435
if (name === "selected") {
437
436
if (isOptionElement(from) && from.selected) {
438
-
if (!this.#options.preserveChanges || !wasDirty) {
437
+
if (!this.#options.preserveChanges) {
439
438
from.selected = false
440
439
}
441
440
}
···
443
442
444
443
if (name === "checked") {
445
444
if (isInputElement(from) && from.checked) {
446
-
if (!this.#options.preserveChanges || !wasDirty) {
445
+
if (!this.#options.preserveChanges) {
447
446
from.checked = false
448
447
}
449
448
}
+2
-2
test/new/inputs.browser.test.ts
+2
-2
test/new/inputs.browser.test.ts
···
73
73
expect(second.getAttribute("value")).toBe("a")
74
74
})
75
75
76
-
test("morphing updates default while dirty and updates value once clean again", () => {
76
+
test("morphing updates default while dirty and keeps value dirty", () => {
77
77
const input = dom(`<input type="text" value="a">`) as HTMLInputElement
78
78
79
79
input.value = "b"
···
89
89
expect(input.defaultValue).toBe("c")
90
90
91
91
morph(input, dom(`<input type="text" value="d">`), { preserveChanges: true })
92
-
expect(input.value).toBe("d")
92
+
expect(input.value).toBe("c")
93
93
expect(input.defaultValue).toBe("d")
94
94
})
95
95
})