yippee.fun
Precise DOM morphing
morphing
typescript
dom
Remove unused file
joel.drapper.me
-51
test-mutations.html
-51
test-mutations.html
···
1
-
<!DOCTYPE html>
2
-
<html>
3
-
<body>
4
-
<div id="test"></div>
5
-
<script type="module">
6
-
import { morph } from './dist/morphlex.min.js';
7
-
8
-
const observer = new MutationObserver((mutations) => {
9
-
console.log(`Total mutations: ${mutations.length}`);
10
-
mutations.forEach((m, i) => {
11
-
console.log(`Mutation ${i}: type=${m.type}, added=${m.addedNodes.length}, removed=${m.removedNodes.length}`);
12
-
});
13
-
});
14
-
15
-
const from = document.createElement('ul');
16
-
for (let i = 1; i <= 5; i++) {
17
-
const li = document.createElement('li');
18
-
li.textContent = `Item ${i}`;
19
-
from.appendChild(li);
20
-
}
21
-
22
-
const to = document.createElement('ul');
23
-
for (let i = 5; i >= 1; i--) {
24
-
const li = document.createElement('li');
25
-
li.textContent = `Item ${i}`;
26
-
to.appendChild(li);
27
-
}
28
-
29
-
document.getElementById('test').appendChild(from);
30
-
31
-
observer.observe(from, {
32
-
childList: true,
33
-
attributes: true,
34
-
characterData: true,
35
-
subtree: true
36
-
});
37
-
38
-
console.log('Before morph:');
39
-
console.log(Array.from(from.children).map(li => li.textContent));
40
-
41
-
morph(from, to);
42
-
43
-
console.log('After morph:');
44
-
console.log(Array.from(from.children).map(li => li.textContent));
45
-
46
-
setTimeout(() => {
47
-
observer.disconnect();
48
-
}, 100);
49
-
</script>
50
-
</body>
51
-
</html>