-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
morph.html
68 lines (59 loc) · 2.18 KB
/
morph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<script src="./packages/morph/dist/cdn.js" defer></script>
<script src="./packages/alpinejs/dist/cdn.js" defer></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.0.0/dist/cdn.min.js" defer></script> -->
<div id="before">
<!-- Before markup goes here: -->
<ul>
<li data-key="1">foo<input></li>
</ul>
</div>
<div id="after" style="display: none;">
<!-- After markup goes here: -->
<ul>
<li data-key="2">bar<input></li>
<li data-key="3">baz<input></li>
<li data-key="1">foo<input></li>
</ul>
</div>
<div id="b"></div>
<div style="display: flex;">
<pre id="log-from"></pre>
<pre id="log-to"></pre>
<ul id="log-message"></ul>
</div>
<div style="position: absolute; bottom: 0; left: 0; padding: 1rem; width: 100vw; background: gray; box-sizing: border-box;">
<button onclick="start()">Start</button>
<button onclick="next()">Next Step</button>
</div>
<script>
function start() {
Alpine.morph.log((message, from, to) => {
console.log(message, from, to)
document.querySelector('#log-from').innerHTML = escape(from.outerHTML)
document.querySelector('#log-to').innerHTML = escape(to.outerHTML)
let li = document.createElement('li')
li.textContent = message
message && document.querySelector('#log-message').appendChild(li)
})
Alpine.morph(
document.querySelector('#before').firstElementChild,
document.querySelector('#after').firstElementChild.outerHTML,
{ debug: true, key(el) { return el.dataset.key } }
)
}
function next() {
Alpine.morph.step()
setTimeout(() => window.dispatchEvent(new CustomEvent('refresh', { bubbles: true })))
}
function escape(unsafe) {
return unsafe
.replace(/\n/g, "⬎\n")
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
</script>
</html>