Created
January 4, 2020 07:43
-
-
Save pmuellr/d371f639ae4977039e93e88de947926c to your computer and use it in GitHub Desktop.
ObservableHQ runtime example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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