30:T5d5,viewof exampleRender = render(({setValue, currentValue, addEventListener}) => { let value = '' const cont = html`

` const input = html`` const ball = html`` 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`

${input}

${ball}

`) cont.onchange = (e) => { setValue(e.target.value) } return cont }, '#FF6611')31:Tb78,render = async (fn, defaultValue) => { const config = {} let { } = config const settings = { onBeforeRender: () => {} } const rid = Math.floor(Math.random() * 1000 * 1000).toString(36) const container = html`

` const wrapper = html`

` 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; }32:[] 2e:{"title":"Utils","cells":[{"id":0,"value":"md`# Utils\n\n## Observable Utilities\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"renderDocumentation = md`\n## Render\n\nRendering function to easily set element value to be used with \\`viewof\\`. \n\nRender function accepts two argument - the function that should be rendered and updated, and the second argument for the default value. The passed function should expect to receive one argument containing several properties:\n\n\\`setValue\\` - function to set the current value\n\n\\`currentValue\\` - the value previously set\n\nThe function is expected to return a DOM node to be rendered.\n\n### Example:\n\nValue: \\`${exampleRender}\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"exampleRender","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`# Source`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"diffDOM = import('https://unpkg.com/diff-dom@4.1.6/src/index.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"import { style } from '@elisk/styles'","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"style`\n@import url(\"https://fonts.googleapis.com/css?family=Public+Sans&display=swap\");\nbody {\n font-family: \"Public Sans\", sans-serif;\n p, h1, h2, h3, h4, h5 {\n opacity: 0.88;\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}