2f:Tc1f,/** * */ function withRuntime(callback, { invalidation, runtime: runtimeInstance, identifier = () => DOM.uid("cell").id.replace(/-/g, "_"), Cell = Symbol.for("Cell"), } = {}) { const runtime = runtimeInstance ?? new Runtime(); if(!runtimeInstance) invalidation?.then(() => runtime.dispose()); const module = runtime.module(); const names = new WeakMap(); return callback({$name, $cell, $value, $values, $inspect, $raw, $state, $render}); /** * Returns a placeholder Node and replaces it with the resolved Node. * * @param {Promise | Node} d * @returns {Node} */ function placeholder(d) { if(!(d instanceof Promise)) return d; const node = document.createComment(""); d.then(d => { if(!node.parentElement) return; if(!(d instanceof Node)) d = document.createTextNode(String(d)); node.parentElement.replaceChild(d, node); }); return node; } /** * Returns a cell's name. * * @param {Cell | string} d * @returns {string} */ function $name(d) { if(typeof d === "string") return d; if(!names.has(d)) names.set(d, identifier()); return names.get(d); } /** * Returns a cell's last value. * * @param {Cell | string} d * @returns {Promise} */ function $value(d) { return module.value(String(d)); } /** * Subscribes to a view's values. * * @param {Cell | string} cell * @returns */ function $values(cell) { return $cell([String(cell)], view => Generators.input(view)); } /** * Defines a new cell. */ function $cell(...args) { const inputs = args.length < 2 ? [] : args[0]; const fn = args.length < 2 ? args[0] : args[1]; const v = module.variable(); const name = $name(v); v.define($name(v), inputs.map($name), fn); return Object.defineProperties(v, { [Cell]: { value: true }, toString: { value: () => name } }); } /** * Returns Inspector output for a cell. * * @param {Cell | string} cell * @returns {HTMLSpanElement} */ function $inspect(cell) { const wrap = htl.html``; module.variable(new Inspector(wrap)).define([String(cell)], d => d); return wrap; } /** * * * @param {Cell | string} cell * @returns {HTMLSpanElement} */ function $raw(cell) { const wrap = htl.html``; const update = d => wrap.replaceChildren(d); module.variable({fulfilled: update, rejected: update}).define([String(cell)], d => d); return wrap; } /** * * @param strings * @param values * @returns {HTMLElement} */ function $render(strings, ...values) { const resolve = d => d[Cell] ? $inspect(d) : d; const map = d => d instanceof Promise ? placeholder(d.then(resolve)) : resolve(d); return htl.html(strings, ...values.map(map)); } /** * @typeParam T * @param {T} initial * @returns {[Cell, (newState: T) => T]} */ function $state(initial) { const cell = $cell(initial); return [cell, d => cell.define(String(cell), d)]; } }30:[] 2d:{"title":"Runtime Wrapper for Authoring","cells":[{"id":215,"value":"# Runtime Wrapper for Authoring","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"\nAn alternative API for Observable's Runtime with a focus on authoring cells. For yet another take see [Dynamic Notebook Imports](https://observablehq.com/@mootari/lazy).\n\nI'm publishing this notebook as-is because it's been sitting in my backlog for so long that I forgot why I had created it in the first place. If you find it useful be sure to let me know!\n\n*Note: Any similarities with Svelte's Runes are coincidental.*","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"---\n## Examples","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"A basic example. Each interpolated value gets rendered using Observable's Inspector.","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"withRuntime(async({$cell, $values, $value, $inspect, $raw, $state, $render}) => {\n const foo = $cell(Inputs.text({value: \"foo\", submit: true}));\n const bar = $cell(Inputs.text({value: \"bar\"}));\n const barName = String(bar);\n \n return $render`

Inputs:

${ foo }
${ bar }

Values:

${ $cell([$values(foo)], d => document.createTextNode(d)) }
${ $values(barName) }
${ $cell([foo, bar].map($values), (...d) => d) }

${ value }

\n ${ view1 }\n ${ view2 }\n ${ $values(view2) }\n

Val: ${ $value(view2).then(d => d.value) }

\n ${($cell(async function*() {\n while(true) { yield new Date().toLocaleString(); await Promises.tick(1000); }\n }))}\n `;\n}, {invalidation})","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"Runtime = (await import(\"https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/+esm\")).Runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"Inspector = (await import(\"https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/+esm\")).Inspector","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}