Precise DOM morphing
morphing
typescript
dom
1import { morph } from "./src/morphlex.js"
2
3function dom(html) {
4 const tmp = document.createElement("div")
5 tmp.innerHTML = html.trim()
6 return tmp.firstChild
7}
8
9const from = dom(`
10 <ul>
11 <li>Item 1</li>
12 <li>Item 2</li>
13 <li>Item 3</li>
14 </ul>
15`)
16
17const to = dom(`
18 <ul>
19 <li>Item 2</li>
20 <li>Item 3</li>
21 </ul>
22`)
23
24console.log("From before:", from.outerHTML)
25console.log("To:", to.outerHTML)
26
27const 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
38observer.observe(from, { childList: true, subtree: true })
39
40morph(from, to)
41
42const pending = observer.takeRecords()
43console.log("Pending mutations:", pending.length)
44pending.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
52observer.disconnect()
53
54console.log("From after:", from.outerHTML)