Skip to content

Instantly share code, notes, and snippets.

@pmuellr
Created January 4, 2020 07:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pmuellr/d371f639ae4977039e93e88de947926c to your computer and use it in GitHub Desktop.
Save pmuellr/d371f639ae4977039e93e88de947926c to your computer and use it in GitHub Desktop.
ObservableHQ runtime example
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./node_modules/@observablehq/inspector/dist/inspector.css">
<body>
<script type="module">
import { Runtime, Inspector } from "./node_modules/@observablehq/runtime/dist/runtime.js";
const runtime = new Runtime()
const inspector = Inspector.into(document.body)
const mod = runtime.module(define, inspector)
function define(runtime, observer) {
const mod = runtime.module()
variables(mod, observer, [
radiusView,
radius,
graphic,
])
}
function radiusView(html) {
return html`<input type=range min=1 max=100 step=1 value=40>`
}
function radius(Generators, radiusView) { return Generators.input(radiusView) }
function graphic(html, radius) {
return html`
<svg width=100 height=100>
<circle cx=40 cy=40 r=${radius} fill=green style="opacity: 0.25;" />
<circle cx=50 cy=50 r=${radius} fill=red style="opacity: 0.25;" />
<circle cx=60 cy=60 r=${radius} fill=blue style="opacity: 0.25;" />
</svg>
`
}
function variables(mod, observer, fns) {
for (const fn of fns) {
variable(mod, observer, fn)
}
}
function variable(mod, observer, fn) {
const fnName = fn.name
const params = getFnParams(fn)
const variable = mod.variable(observer(fnName))
variable.define(fnName, params, fn)
}
function getFnParams(fn) {
const fnString = `${fn}`.replace(/\n/g, ' ')
const params = fnString
.match(/.*?\((.*?)\)/)[1]
.split(/,/g)
.map(param => param.trim())
if (params.length === 1 && params[0] === '') {
return []
}
return params
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment