rameshvarun / blog-cells Goto Github PK

Theoretically It should be possible to run notebooks from the Internet Archive, but this seems to have issues. At the very least, we should ensure that cells display properly.

One issue is #4 - to fix it I switched to inline Blob workers, but those aren't correctly handled in Wombat.

When a new output line appears, we should auto-scroll to the bottom.

Already implemented here: https://blog.varunramesh.net/posts/simple-python-tips/

Allow top level await, mainly for things like installing packages through micropip. Ideally this would happen automatically, but worst-case let the user mark a specific cell as an async cell.

I would like to run: let name = "Danny"

And then have my code in the main document check what value name is.

Preferable as a property bag or something on the blog-cell itself, as there will be multiple on the page.

Brings me to the second feature request; can the blog-cell emit a Event, so I now calculation was done.

It would be great if you could simply import the scripts from a CDN, but by default, this doesn't seem to be possible since workers from remote domains can't be loaded without explicit CSP headers (which many people can't control).

There are maybe some workarounds but if there's a chance browsers could break them in the future, the best thing to do is make it easy for people to download the JS / CSS into their own site's folder.

Right now, we only support languages where the compiler/interpreter itself can run in WASM. For many languages, this will never be well supported (even if it's possible to hack it together).

We can support a wider variety of languages by emulating a RISC-V, linux-based machine. This should work particularly well for C, C++, and Rust, and allow code to use I/O, threading, and more that wouldn't be possible in pure WASM.

To keep machine images small, we should create minimal linux images using buildroot/busybox.

Example: https://bellard.org/jslinux/vm.html?cpu=riscv64&url=buildroot-riscv64.cfg&mem=256

x86 emulation could also be used (example: https://supabase.com/blog/postgres-wasm), but due to the complexity of the ISA, most x86 emulators only emulate a portion of the spec.

You should be able to define your own Kernel in a script tag and use it. Something like this:

<!-- Import Blog Cells -->
<script type="module" src="blog-cells.js" />

<!-- Define Kernel -->
<script>
class CustomKernel extends BlogCells.Kernel {
  async run(code, onOutput) {
    ...
  }
}

BlogCells.registerKernel("custom", () => new CustomKernel());
</script>

<!-- Create Cell -->
<script type="text/notebook-cell" data-kernel="custom">
code_in_a_custom_language()
</script>

The first step is to simply support type annotations that are unchecked (should be pretty easy with Babel). The next step (more complex) is to actually typecheck.

It should be possible but may require some parsing + creation of .d.ts files.

Make micropip available to Python cells.

Right now, with Javascript disabled, the code simply doesn't show at all. We should handle this better. Maybe let people create code cells in <pre> tags and transform them in-place into cells?

In looking at the demo page I see:

  data-autorun=true
  data-hidden=true

added to the script tag. Are there more?

There are three ways to get rid of the $ requirement, but all have trade-offs.

1. Install exports onto globalThis. This could clobber built-ins and break things For example, if someone writes the code export const postMessage = () => {}, the worker won't be able communicate with the main page anymore.
2. Auto-destructure values from $, eg add "const a = $.a" to the prelude. However this would make values early bound, whereas we want them to be late bound (lookup on use).
3. Use Babel to transpile unbound globals, eg "console.log(a) -> console.log($.a)". However, it means that newer JS syntax can't be used in a notebook without upgrading it's Babel version.

Already implemented 3 in 283d100, but removed since I didn't have time to fully test.

Currently there are no stack traces. Possibly use https://github.com/stacktracejs/stacktrace.js/ to parse errors and format them so that they make sense to user.

We don't need to import font-awesome for just a few icons.

Awesome work. It will be even more awesome if it supports C#.