I've built a single file notebook export format in...
# devlog-together
t
I've built a single file notebook export format in Observable userspace. Convert an Observable notebook into a single file. Self-replicating notebooks. You don't even need a local webserver to run them, they work in a
file://
context. You can put them on a webserver if you want. This is complement the userspace notebook source editor. I still have some more work on this to consider it fully working (e.g. FileAttachment support), but today I finally reached the milestone that the exporter can export an operational version of itself.
k
So the video is showing you repeatedly clicking the button to download an html file, then click on the html file to open the download, then click on the button in the html file to download again? This is amazing! I think it's worthy of a whole domain name and everything. You've unified the worldviews and values of classic Tiddlywiki with modern Javascript. And the single html file weighs in at just 130KB! Awesome. Can I view this as a new packaging format for Javascript to compete with Webpack and whatnot (I don't even know the right words to use here)? I mean, can you import arbitrary npm libraries into Observable?
t
yes, exactly, its a whole self-hosting fully recursive thing. I love observable because its got the partial recompilation reactive and non-linear execution aspect too, so I would say its a new execution paradigm thrown in too. And when the live editor is added too, then its a full programming environment.. and if I start snapshotting the state of variables too, we get to an image like smalltalk. But the exciting point is we can add whatever features we want in userspace. We do not need to beg Observable to add features (and they won't anyway), there is a path to adding them ourselves. Yes Observable can import from the npm ecosystem if bundled a certain way, but those are dynamic imports, so they would not work offline. Actually this doesn't work offline either because some of the Observable dependancies like the Inputs library are also pulled in via UMD which is not so easily intercepted like ES modules. For now its not offline-first, but it does annoy me as those CDN downloads are what's preventing me getting to single digit millis startup time and fully working offline. I could fix this with a service worker, but then doesn't work with
file://
origins, and I think the simplicity of the single file double click ``file://`` execution wins. Maybe there is another way 🤔 Anyway, for me the MVP is • reliable exporting to a single file • bundled userspace editor so you can continue editing within the notebook in the replicas If those two things are in place then we can decouple from Observable and the other stuff like notebook state serialization and trying to make it offline-first can come later. First those two before I get too excited though. Still quite a lot of stuff to iron out.
It loads so fast I had to make it load faster, also the fact it did not work offline was annoying me. I've added the ability to bundle Observable FileAttachments to support images, but this also unblocked me to include static JS libraries, and then eventually supplying Observable's builtins as file attachments, but gzip compressed. So the final result is it expands to 300kb, but all dependancies are gzipped inside the page.. no CDN fetches or DNS stalls => sub 100ms loading time! For comparison the same notebook takes 3 seconds to load on Observable. I think the core tech is done, now I switch to ironing out some remaining warts like some of the cells get unnecessarily reordered.
j
As someone who tried to serialize an ObservableHQ notebook for work over the course of a year, but wasn't resourced to pull it off, this tooling is immensely impressive. I'd use it in a GitHub Enterprise deployment and be otherwise serverless.
t
well exactly! Shoot it straight in a bucket.