代码拉取完成，页面将自动刷新
<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/[email protected]/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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手