compile.oak

#!/usr/bin/env oak

{
	println: println
	map: map
	append: append
} := import('std')
{
	join: join
} := import('str')
fs := import('fs')
fmt := import('fmt')
cli := import('cli')
path := import('path')
md := import('md')

Cli := cli.parse()
Cli.args := [Cli.verb] |> append(Cli.args)

[srcPath, destPath] := Cli.args

// Exit early if incorrect usage
if srcPath = ? | destPath = ? -> {
	println('Usage: ./compile.oak <source.md> <dest.html>')
	exit(1)
}

fn nblog(xs...) println('[notebook]', xs...)

// highlightOak syntax-highlightings an Oak code snippet. Under the hood, this
// calls out to the `oak cat` command to accomplish this. Note that this
// function is synchronous, while `compileOakToJS` below is not.
fn highlightOak(panelIndex, prog) {
	evt := exec(Cli.exe, ['cat', '--html', '--stdin'], prog)
	if evt.type {
		:error -> {
			nblog('Could not syntax-highlight panel ', panelIndex)
			prog
		}
		_ -> evt.stdout
	}
}

// compileOakToJS compiles an Oak program into JavaScript, internally calling
// out to `oak build --web` under the hood. Note that this function is
// asynchronous and returns the result in a callback, in contrast to
// `highlightOak` above, which is synchronous and blocking.
fn compileOakToJS(prog, withJS) {
	buildArgs := ['build'
		'--entry', '/tmp/in.oak'
		'--output', '/tmp/out.js'
		'--web']
	with fs.writeFile('/tmp/in.oak', prog) fn(res) if res {
		? -> withJS(?)
		_ -> with exec(Cli.exe, buildArgs, '') fn(evt) if {
			evt.type = :error -> withJS(?)
			evt.status != 0 -> {
				nblog(evt.stdout)
				withJS(?)
			}
			_ -> with fs.readFile('/tmp/out.js') fn(jsProg) if jsProg {
				? -> withJS(?)
				_ -> withJS(jsProg)
			}
		}
	}
}

with fs.readFile(path.resolve(srcPath)) fn(file) if file {
	? -> nblog('Could not read file', srcPath)
	_ -> {
		runners := [] // calls to initialize each panel
		snippets := [] // panel definitions

		content := md.parse(file) |> map(fn(block, i) if {
			// syntax-highlight Oak code snippets
			block.tag = :pre & block.children.(0).lang = 'oak' -> {
				block.children.(0).children.0 := {
					tag: :rawHTML
					children: [highlightOak(i, block.children.(0).children.0)]
				}
				block
			}
			// compile panel definition snippets out of the document, and
			// replace them with panel placeholder <div>s
			block.tag = :pre & block.children.(0).lang = 'notebook' -> {
				runners << 'panel_{{0}}()' |> fmt.format(i)
				snippets << 'fn panel_{{0}} { nb := Notebook({{ 0 }}), {{1}}, nb.register(display), nb.display() }' |>
					fmt.format(i, block.children.(0).children.0)
				{
					tag: :rawHTML
					children: ['<div class="oak-notebook-panel panel-{{ 0 }}"></div>' |> fmt.format(i)]
				}
			}
			_ -> block
		}) |> md.compile()

		// the final Oak script to be included in the page includes a "prelude"
		// with the Oak Notebook runtime, definitions of all the panels, and
		// calls to initialize each panel
		panelProg := [
			Prelude
			snippets |> join(',')
			runners |> join(',')
		] |> join(',')

		// compile and save the notebook HTML page
		with compileOakToJS(panelProg) fn(script) if script {
			? -> nblog('Could not compile script')
			_ -> with fs.writeFile(
				path.resolve(destPath)
				Template |> fmt.format({
					content: content
					script: script
				})
			) fn(res) if res {
				? -> nblog('Could not save file!')
				_ -> nblog('Saved.')
			}
		}
	}
}

Prelude := '// oak notebook
std := import(\'std\')
str := import(\'str\')
math := import(\'math\')
sort := import(\'sort\')
fmt := import(\'fmt\')
datetime := import(\'datetime\')
debug := import(\'debug\')
md := import(\'md\')

// global display in case display is not defined locally in a panel
display := ?

_AllNotebooks := []

CustomWidget := {
	customWidgets := []
	{
		widgets: fn() customWidgets
		define: fn define(name, f) {
			customWidgets << {
				name: string(name)
				f: f
			}
			_AllNotebooks |> with std.each() fn(nb) {
				nb.(string(name)) := fn(args...) f(nb, args...)
			}
		}
	}
}

fn Notebook(i) {
	el := document.querySelector(\'.oak-notebook-panel.panel-\' + string(i))
	displayEl := el
	displayHostEl := {
		displayEl := document.createElement(\'div\')
		displayEl.className := \'oak-notebook-display\'
		displayEl
	}
	displayOutputs := fn {}

	fn _wrapInLabel(labelName, inputEl) {
		labelText := document.createElement(\'div\')
		labelText.className := \'labelText\'
		labelText.textContent := labelName

		labelEl := document.createElement(\'label\')
		labelEl.appendChild(labelText)
		labelEl.appendChild(inputEl)

		labelEl
	}

	fn _input(type, labelName, value, attrs) {
		inputEl := document.createElement(if type {
			:textarea -> \'textarea\'
			_ -> \'input\'
		})
		if type != :textarea -> {
			inputEl.setAttribute(\'type\', string(type))
		}
		inputEl.value := value
		attrs |> std.default({}) |> std.entries() |> with std.each() fn(entry) {
			[attr, val] := entry
			if val != ? -> inputEl.setAttribute(attr, val)
		}
		with inputEl.addEventListener(\'input\') fn {
			display()
		}

		labelEl := _wrapInLabel(labelName, inputEl)
		labelEl.classList.add(\'type-\' + string(type))
		el.appendChild(labelEl)
		inputEl
	}

	fn number(labelName, value, min, max, step) {
		_input(:number, labelName, value, {
			min: min
			max: max
			step: step
		})
	}

	fn scrubbable(fmtSpec, value, min, max, step) {
		step := step |> std.default(1)
		fmtSpec := fmtSpec |> std.default([\'\', \'\'])

		inputEl := document.createElement(\'span\')
		inputEl.className := \'oak-notebook-scrubbable\'
		inputEl.tabIndex := 0
		inputEl.textContent := value

		resetButton := document.createElement(\'button\')
		resetButton.classList.add(\'resetButton\')
		resetButton.textContent := \'reset\'
		with resetButton.addEventListener(\'click\') fn {
			value <- initialValue
			renderValue()
		}

		fn clientX(evt) if evt.touches {
			? -> evt.clientX
			_ -> evt.touches.(0).clientX
		}

		fn clipByStep(n) {
			min + int((n + step / 2 - min) / step) * step
		}

		initialValue := value
		startX := ?
		startValue := ?
		scrubObj := { value: value }
		fn renderValue {
			inputEl.textContent := string(value)
			scrubObj.value := value
			if {
				value = initialValue & formatParagraph.contains(resetButton) ->
					formatParagraph.removeChild(resetButton)
				value != initialValue & !formatParagraph.contains(resetButton) ->
					formatParagraph.appendChild(resetButton)
			}
			display()
		}
		with inputEl.addEventListener(\'keydown\') fn(evt) if evt.key {
			\'ArrowUp\', \'ArrowRight\' -> {
				evt.preventDefault()
				value <- math.clamp(value + step, min, max)
				renderValue()
			}
			\'ArrowDown\', \'ArrowLeft\' -> {
				evt.preventDefault()
				value <- math.clamp(value - step, min, max)
				renderValue()
			}
		}
		[
			[\'mousedown\', \'mouseup\', \'mousemove\']
			[\'touchstart\', \'touchend\', \'touchmove\']
		] |> with std.each() fn(events) {
			[begin, end, move] := events

			fn handleMove(evt) {
				evt.preventDefault()

				value <- clipByStep(
					startValue + (clientX(evt) - startX) |>
						math.scale(0, math.min(window.innerWidth, 20 * (max - min) / step), 0, max - min)
				) |> math.clamp(min, max)
				renderValue()
			}

			with inputEl.addEventListener(begin) fn(evt) {
				evt.preventDefault()
				startX <- clientX(evt)
				startValue <- value
				document.body.classList.add(\'scrubbing\')
				document.body.addEventListener(move, handleMove)
				with document.body.addEventListener(end) fn {
					evt.preventDefault()
					document.body.classList.remove(\'scrubbing\')
					document.body.removeEventListener(move, handleMove)
				}
			}
		}

		formatParagraph := document.createElement(\'p\')
		[before, after] := fmtSpec |> std.map(fn(text) document.createTextNode(text))
		formatParagraph.appendChild(before)
		formatParagraph.appendChild(inputEl)
		formatParagraph.appendChild(after)

		el.appendChild(formatParagraph)

		scrubObj
	}

	fn checkbox(labelName) {
		_input(:checkbox, labelName)
	}

	fn text(labelName, value) {
		_input(:text, labelName, value)
	}

	fn prose(labelName, value) {
		_input(:textarea, labelName, value)
	}

	fn select(labelName, options) {
		fn createOption(value) {
			opt := document.createElement(\'option\')
			opt.value := value
			opt.textContent := value
		}
		selectEl := document.createElement(\'select\')
		selectEl.append(options |> std.map(createOption)...)
		with selectEl.addEventListener(\'change\') fn [
			display()
		]
		el.appendChild(_wrapInLabel(labelName, selectEl))
		selectEl
	}

	fn button(value) {
		buttonObj := {
			clicks: []
		}
		b := document.createElement(\'button\')
		b.classList.add(\'button\')
		b.textContent := value
		with b.addEventListener(\'click\') fn {
			buttonObj.clicks << time()
			display()
		}
		el.appendChild(b)
		buttonObj
	}

	fn label(s...) {
		html(s |> std.map(string) |> str.join(\' \') |> md.transform())
	}

	fn table(entries) if type(entries.0) {
		:null, :object -> {
			columns := {} |> std.merge(entries...) |> keys()

			tb := document.createElement(\'table\')
			header := document.createElement(\'tr\')
			tb.appendChild(header)
			columns |> with std.each() fn(col) {
				th := document.createElement(\'th\')
				th.textContent := col
				header.appendChild(th)
			}
			entries |> with std.each() fn(entry) {
				tr := document.createElement(\'tr\')
				columns |> with std.each() fn(col) {
					td := document.createElement(\'td\')
					val := entry.(col)
					td.textContent := if type(val) {
						:null -> \'\'
						:int, :float, :string -> string(val)
						_ -> debug.inspect(val)
					}
					tr.appendChild(td)
				}
				tb.appendChild(tr)
			}

			tbContainer := document.createElement(\'div\')
			tbContainer.classList.add(\'table-container\')
			tbContainer.appendChild(tb)
			displayEl.appendChild(tbContainer)
		}
		_ -> table(entries |> std.map(fn(x) { value: x }))
	}

	fn plot(f, domain, range) {
		// TODO: use canvas
	}

	fn html(innerHTML) {
		template := document.createElement(\'template\')
		template.innerHTML := String(innerHTML)
		displayEl.appendChild(template.content)
	}

	fn register(display) {
		if display != ? -> displayOutputs <- display
	}

	fn display {
		with requestAnimationFrame() fn {
			displayEl <- displayHostEl
			if !el.contains(displayEl) -> el.appendChild(displayEl)
			displayEl.textContent := \'\'
			evt := try(displayOutputs)
			if evt.type = :error -> std.println(\'Error:\', evt.error)
			displayEl <- el
		}
	}

	nb := {
		number: number
		checkbox: checkbox
		scrubbable: scrubbable
		prose: prose
		text: text
		button: button
		select: select

		label: label
		table: table
		plot: plot
		html: html

		register: register
		display: display
	}
	with CustomWidget.widgets() |> std.each() fn(widget) {
		nb.(widget.name) := fn(args...) widget.f(nb, args...)
	}
	_AllNotebooks << nb
	nb
}'

Template := '<!doctype html>
<meta charset="utf-8">
<title>Oak Notebook</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://oaklang.org/css/main.css">
<link rel="stylesheet" href="https://oaklang.org/css/lib.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<!-- Facebook Open Graph tags -->
<meta property="og:url" content="https://thesephist.github.io/x-oak-notebook" />
<meta property="og:title" content="Oak Notebook Demo" />
<meta property="og:description" content="An experimental tool for writing dynamic documents using Markdown and Oak that embed interactive explorable visualizations" />
<meta property="og:image" content="https://thesephist.github.io/x-oak-notebook/img/oak-cover.png" />

<!-- Twitter Card (large image card) tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@thesephist">
<meta name="twitter:title" content="Oak Notebook Demo">
<meta name="twitter:description" content="An experimental tool for writing dynamic documents using Markdown and Oak that embed interactive explorable visualizations" />
<meta name="twitter:image" content="https://thesephist.github.io/x-oak-notebook/img/oak-cover.png" />

<!-- KaTeX -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js" integrity="sha384-0fdwu/T/EQMsQlrHCCHoH10pkPLlKA1jL5dFyUOvB3lfeT2540/2g6YgSi2BL14p" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
	onload="renderMathInElement(document.body);"></script>
<style>
	body.scrubbing {
		cursor: ew-resize !important;
	}
	main article {
		margin-bottom: 5em;
	}
	.oak-notebook-panel {
		padding: 1.5em;
		margin: 1.5em 0;
		border-left: 3px solid var(--hover-bg);
		box-sizing: border-box;
	}
	.oak-notebook-display {
		margin-top: 1em;
		overflow: hidden;
	}
	.oak-notebook-scrubbable {
		text-decoration: underline;
		text-decoration-color: var(--underline-bg);
		text-underline-offset: 1px;
		text-decoration-thickness: 2px;
		transition: text-decoration-color .2s;
		cursor: ew-resize;
	}
	.oak-notebook-scrubbable:hover {
		text-decoration-color: var(--secondary-text);
	}
	.oak-notebook-panel .resetButton {
		font-size: calc(1em - 4px);
		color: var(--secondary-text);
		cursor: pointer;
		border: 0;
		margin: 0;
		margin-left: 4px;
		outline: 0;
		background: transparent;
	}
	.oak-notebook-panel .resetButton:hover,
	.oak-notebook-panel .resetButton:focus {
		text-decoration: underline;
	}
	.oak-notebook-panel label {
		display: block;
		margin: 1em 0;
		width: 100%;
		max-width: 64ch;
	}
	.oak-notebook-panel .labelText {
		margin-bottom: 4px;
		font-size: calc(1em - 2px);
		color: var(--secondary-text);
	}
	.oak-notebook-panel textarea,
	.oak-notebook-panel input[type="text"],
	.oak-notebook-panel input[type="number"],
	.oak-notebook-panel select,
	.oak-notebook-panel .button {
		border: 0;
		margin: 0;
		outline: 0;
		padding: .6em 1em;
		border-radius: 6px;
		font-size: 1em;
		color: var(--primary-text);
		background: var(--hover-bg);
		transition: background .2s;
		box-sizing: border-box;
	}
	.oak-notebook-panel textarea,
	.oak-notebook-panel input[type="text"],
	.oak-notebook-panel input[type="number"] {
		width: 100%;
		line-height: 1.5em;
		font-family: var(--font-sans);
	}
	.oak-notebook-panel select {
		cursor: pointer;
	}
	.oak-notebook-panel textarea:focus,
	.oak-notebook-panel input:focus,
	.oak-notebook-panel select:focus {
		background: var(--active-bg);
	}
	.oak-notebook-panel textarea {
		resize: vertical;
		min-height: 6em;
	}
	.oak-notebook-panel .button {
		color: var(--primary-bg);
		background: var(--primary-text);
		cursor: pointer;
		transition: background .2s;
	}
	.oak-notebook-panel .button:hover {
		background: var(--secondary-text);
	}
	.oak-notebook-panel .type-checkbox .labelText {
		display: inline;
	}
	.oak-notebook-panel .type-checkbox input {
		width: auto;
		margin-left: 1ch;
		transform: translate(0, 1px);
		cursor: pointer;
	}
	.oak-notebook-panel .table-container {
		margin: 1em 0;
		max-width: 100%;
		overflow-x: auto;
	}
	.oak-notebook-panel table {
		width: 100%;
		max-width: 64ch;
		border: 1px solid var(--secondary-text);
		border-collapse: collapse;
	}
	.oak-notebook-panel th {
		background: var(--secondary-bg);
	}
	.oak-notebook-panel th,
	.oak-notebook-panel td {
		border: 2px solid var(--active-bg);
		border-collapse: collapse;
		padding: .6em 1em;
	}
	.oak-notebook-panel table td:not(:first-child) {
		text-align: right;
	}
	.katex-display {
		overflow-x: auto;
		padding: 0.5em;
		max-width: 96ch;
		width: calc(100vw - 3rem);
	}
	.oak-notebook-panel > *:first-child,
	.oak-notebook-display > *:first-child {
		margin-top: 0;
	}
	.oak-notebook-panel > *:last-child,
	.oak-notebook-display > *:last-child {
		margin-bottom: 0;
	}
	.oak-notebook-display:empty {
		margin-bottom: -1em;
	}
	@media only screen and (max-width: 820px) {
		.oak-notebook-panel table {
			font-size: calc(1em - 2px);
		}
	}
</style>
<main aria-role="main">
	<article class="overlay notebook">
		{{ content }}
	</article>
</main>
<script>
	{{ script }}
</script>
'