processLine = (term, ln) => {
term.writeln(`You just typed: ${ln}`)
}
terminal = {
if (!xtermCSS.isConnected) document.body.appendChild(xtermCSS)
const dom = DOM.element('div')
const term = new Terminal({
rows: 16, cols: 72,
cursorBlink: true,
cursorStyle: 'block',
})
const [rl, doReadLine] = makeRL(term, '$ ', processLine)
term.loadAddon(rl)
term.open(dom)
const doReadLineLoop = () => doReadLine().then(() => sleep(50)).then(doReadLineLoop)
doReadLineLoop()
term.dom = dom
return term
}
makeRL = (term, prompt, handler) => {
const rl = new terminalReadline()
const doReadLine = () => rl.read(prompt).then(ln => handler(term, ln))
return [rl, doReadLine]
}
sleep = t => new Promise(r => setTimeout(r, t))
Terminal = (await import('https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm')).Terminal
terminalReadline = (await import('https://cdn.jsdelivr.net/npm/xterm-readline/+esm')).Readline
xtermCSS = {
const req = await fetch('https://unpkg.com/@xterm/xterm@5.4.0-beta.1/css/xterm.css')
const text = await req.text()
const el = DOM.element('style')
el.textContent = text + `.xterm { width: fit-content }`
return el
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
