Public
Edited
May 24, 2023
createRoot = () => {
const root = document.createElement("div")
root.style = `
font-family: var(--monospace), monospace;
font-size: 14px;
line-height: 21px;
font-weight: 400;
white-space: break-spaces;
word-break: break-word;
overflow-wrap: anywhere;
`
return root
}
{
const render = lines => {
return snabbdom.h("div", null, lines.map((line, index) => {
return snabbdom.h("div", { key: cyrb53(line, line.length ? 0 : index).toString() }, line + "\n")
}))
}
const root0 = createRoot()
const tree0 = snabbdom.h("div")
const dom0 = snabbdom.patch(root0, tree0)
const tree1 = render(lines.v1)
const dom1 = snabbdom.patch(root0, tree1)
const tree2 = render(lines.v2)
const dom2 = snabbdom.patch(tree1, tree2)
const tree3 = render(lines.v1)
const dom3 = snabbdom.patch(tree2, tree3)
return root0
}
{
const render = lines => {
return vdom.h("div", null, lines.map((line, index) => {
return vdom.h("div", { key: cyrb53(line, line.length ? 0 : index).toString() }, line + "\n")
}))
}
const root0 = createRoot()
const tree0 = vdom.h("div")
const dom0 = vdom.create(tree0)
root0.appendChild(dom0)
const tree1 = render(lines.v1)
const dom1 = vdom.patch(dom0, vdom.diff(tree0, tree1))
const tree2 = render(lines.v2)
const dom2 = vdom.patch(dom0, vdom.diff(tree1, tree2))
const tree3 = render(lines.v1)
const dom3 = vdom.patch(dom0, vdom.diff(tree2, tree3))
return root0
}
lines = ({
v1: ["foo", "", "bar", "", "baz"],
v2: ["foo", "", "", "bar", "", "baz"],
})
vdom = import("https://cdn.skypack.dev/virtual-dom@2.1.1")
snabbdom = import("snabbdom").then(module => ({
...module,
patch: module.init([]),
}))
cyrb53 = (str, seed = 0) => {
let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;
for(let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i);
h1 = Math.imul(h1 ^ ch, 2654435761);
h2 = Math.imul(h2 ^ ch, 1597334677);
}
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
};
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
