yippee.fun
Precise DOM morphing
morphing
typescript
dom
Clean up files
joel.drapper.me
-5
terser-config.json
-5
terser-config.json
-54
test_debug.js
-54
test_debug.js
···
1
-
import { morph } from "./src/morphlex.js"
2
-
3
-
function dom(html) {
4
-
const tmp = document.createElement("div")
5
-
tmp.innerHTML = html.trim()
6
-
return tmp.firstChild
7
-
}
8
-
9
-
const from = dom(`
10
-
<ul>
11
-
<li>Item 1</li>
12
-
<li>Item 2</li>
13
-
<li>Item 3</li>
14
-
</ul>
15
-
`)
16
-
17
-
const to = dom(`
18
-
<ul>
19
-
<li>Item 2</li>
20
-
<li>Item 3</li>
21
-
</ul>
22
-
`)
23
-
24
-
console.log("From before:", from.outerHTML)
25
-
console.log("To:", to.outerHTML)
26
-
27
-
const observer = new MutationObserver((records) => {
28
-
console.log("Mutations:", records.length)
29
-
records.forEach((r, i) => {
30
-
console.log(` ${i}: type=${r.type}`)
31
-
if (r.type === "childList") {
32
-
console.log(` added: ${r.addedNodes.length}, removed: ${r.removedNodes.length}`)
33
-
r.removedNodes.forEach(n => console.log(` removed: ${n.nodeName} ${n.textContent?.trim()}`))
34
-
}
35
-
})
36
-
})
37
-
38
-
observer.observe(from, { childList: true, subtree: true })
39
-
40
-
morph(from, to)
41
-
42
-
const pending = observer.takeRecords()
43
-
console.log("Pending mutations:", pending.length)
44
-
pending.forEach((r, i) => {
45
-
console.log(` ${i}: type=${r.type}`)
46
-
if (r.type === "childList") {
47
-
console.log(` added: ${r.addedNodes.length}, removed: ${r.removedNodes.length}`)
48
-
r.removedNodes.forEach(n => console.log(` removed: ${n.nodeName} ${n.textContent?.trim()}`))
49
-
}
50
-
})
51
-
52
-
observer.disconnect()
53
-
54
-
console.log("From after:", from.outerHTML)
···
-39
test_trace.js
-39
test_trace.js
···
1
-
import { morph } from "./src/morphlex.js"
2
-
import { JSDOM } from "jsdom"
3
-
4
-
const dom = new JSDOM()
5
-
global.document = dom.window.document
6
-
global.Element = dom.window.Element
7
-
global.HTMLInputElement = dom.window.HTMLInputElement
8
-
global.DOMParser = dom.window.DOMParser
9
-
global.Node = dom.window.Node
10
-
11
-
function domEl(html) {
12
-
const tmp = document.createElement("div")
13
-
tmp.innerHTML = html.trim()
14
-
return tmp.firstChild
15
-
}
16
-
17
-
const a = domEl(`<div>
18
-
<input type="text" value="wrong">
19
-
<input type="checkbox" value="right">
20
-
</div>`)
21
-
22
-
const b = domEl(`<div>
23
-
<input type="checkbox" value="new">
24
-
</div>`)
25
-
26
-
const textInput = a.children[0]
27
-
const checkboxInput = a.children[1]
28
-
29
-
console.log("Before morph:")
30
-
console.log("textInput:", textInput.outerHTML)
31
-
console.log("checkboxInput:", checkboxInput.outerHTML)
32
-
33
-
morph(a, b)
34
-
35
-
console.log("\nAfter morph:")
36
-
console.log("a.children.length:", a.children.length)
37
-
console.log("a.children[0]:", a.children[0].outerHTML)
38
-
console.log("a.children[0] === textInput:", a.children[0] === textInput)
39
-
console.log("a.children[0] === checkboxInput:", a.children[0] === checkboxInput)
···