viewof exampleRender = render(({setValue, currentValue, addEventListener}) => {
let value = ''
const cont = html`<div><input type='text' value="${currentValue}" /></div>`
const input = html`<input type='color' value="${currentValue}" />`
const ball = html`<span style="display: inline-block; background: ${currentValue}; transition: all 220ms ease-in; width: 25px; height: 25px; border-radius: 80%;" />`
input.oninput = (e) => {
setValue(e.target.value)
value = e.target.value
}
cont.addEventListener('keyup', (e) => {
const r = ((Math.floor(Math.random() * 10000000) % 125) + 125).toString(16)
const g = ((Math.floor(Math.random() * 10000000) % 80)).toString(16)
const b = ((Math.floor(Math.random() * 10000000) % 80)).toString(16)
setValue(`#${r.length === 1 ? '0' + r : r}${g.length === 1 ? '0' + g : g}${b.length === 1 ? '0' + b : b}`)
e.preventDefault()
e.stopPropagation()
})
// Document event listener
addEventListener('keyup', e => {
const r = ((Math.floor(Math.random() * 10000000) % 80)).toString(16)
const g = ((Math.floor(Math.random() * 10000000) % 80)).toString(16)
const b = ((Math.floor(Math.random() * 10000000) % 125) + 125).toString(16)
setValue(`#${r.length === 1 ? '0' + r : r}${g.length === 1 ? '0' + g : g}${b.length === 1 ? '0' + b : b}`)
})
cont.append(html`<div>${input}</div><div>${ball}</div><div>`)
cont.onchange = (e) => {
setValue(e.target.value)
}
return cont
}, '#FF6611')
exampleRender
render = async (fn, defaultValue) => {
const config = {}
let {
} = config
const settings = {
onBeforeRender: () => {}
}
const rid = Math.floor(Math.random() * 1000 * 1000).toString(36)
const container = html`<div />`
const wrapper = html`<div id="render-${rid}" />`
const meta = {
mounted: false,
listeners: []
}
const props = {
isDestroyed: () => {
if (!meta.mounted) return false
const exists = document.getElementById(`render-${rid}`)
return !exists
},
currentValue: defaultValue,
setValue: (value, harshRefresh = false) => {
container.value = value
container.dispatchEvent(new CustomEvent("input", { bubbles: true }));
props.currentValue = value
render(harshRefresh)
},
onBeforeRender: fn => {
settings.onBeforeRender = fn
},
addEventListener: (name, fn) => {
const listener = (event) => fn(event)
document.addEventListener(name, listener)
const unsub = () => {
document.removeEventListener(name, listener)
meta.listeners = [ ...(meta.listeners || []).filter(([lname, lfn]) => lfn !== listener)]
document.render_listeners[rid] = (document.render_listeners[rid] || []).filter(u => u !== unsub)
if (!document.render_listeners[rid].length)
delete document.render_listeners[rid]
}
meta.listeners.push([name, listener, unsub])
if (!document.render_listeners) {
document.render_listeners = {}
}
if (!document.render_listeners[rid]) {
document.render_listeners[rid] = []
}
document.render_listeners[rid].push(unsub)
return unsub
}
}
const clearListeners = () => {
if (document.render_listeners) {
Object.keys(document.render_listeners).map((id) => {
const listeners = document.render_listeners[id]
const re = document.querySelector(`#render-${id}`)
if (!re) {
listeners.map(unsub => {
if (unsub && typeof unsub === 'function') unsub()
})
}
})
}
}
const render = async (harsh = false) => {
if (typeof settings.onBeforeRender === 'function') {
settings.onBeforeRender()
}
(meta.listeners || []).map(([name, fn, unsub]) => unsub())
if (props.isDestroyed()) return;
const result = await fn(props)
if (wrapper.children.length && !harsh) {
const dd = new diffDOM.DiffDOM()
const diff = dd.diff(wrapper.children[0], result);
dd.apply(wrapper.children[0], diff);
} else {
while (wrapper.childNodes.length) {
wrapper.removeChild(wrapper.lastChild)
}
wrapper.append(...(Array.isArray(result) ? result : [result]))
}
}
clearListeners()
render()
container.append(wrapper)
if (defaultValue) {
container.value = defaultValue
}
meta.mounted = true
return container;
}
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.
