asg017 / atom-observable Goto Github PK

Right now, this just uses the defaultResolver of the unofficial compiler, meaning it imports from observablehq.com notebook directly.

But, it would be cool to support local notebooks that are in your file system. For example, you could have:

$ ls
main.notebook.js other.notebook.js

Then, in main.notebook.js:

import {test} from "./other.notebook.js"

test should now have the test variable from the local other.notebook.js.

This would involve creating a new resolve function and passing it into the Compile constructor. The defaultResolver is a good example to work off of.

Maybe it should be a setting too - since maybe this is a security concern?

It would be great to render tables with the same style!

I just defaulted to Ctrl+Alt+O (since ao == atom observable), but I'm sure something else may make more sense. Does it work with Cmd on macs? I haven't tested that yet

Adding syntax highlighting for Observable syntax would be really helpful - for the extra keywords (viewof, mutable), cell/block syntax, etc

I'm not too familiar with how this works, though :/

Since this is running on atom, we could set up a background server that can provide data/API's to the observable runtime to enhance these notebooks.

For example, imagine a env builtin variable that looks up environmental variables, like:

token = env`API_TOKEN`

data = fetch(`https://some.server.com/data?token=${token}`)

Or maybe, a way to directly access files from the filesystem - like:

data = d3.csvParse(await fs(`/home/user/projects/weather/data.csv`))

Or maybe, re-write require to require js modules from the local filesystem (like a node_modules directory)

I'd love to hear suggestions for what are some other cool default variables that could exist!

I haven't investigated this much, but there seems to be some default styling from Atom that also affects the injected iframe. For example, the markdown just looks a little off - wrong font, sizing, max-width compared to observablehq.com. We do have inspector css in the iframe, but maybe there's more CSS we have to add, or some atom-specific styling we have to turn on/off?