import { Runtime, Inspector } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/@nxrix/name.js?v=4";
new Runtime().module(define, Inspector.into("main"));
It works, but elements that have viewof still show the inspect element for their value.
I tried hiding them with CSS, but that broke some other things.
this renders properly, you have to handle viewof, mutable and imports all as special cases.
You have to group variables into cells. This notebook does it
My notes on how things works are here
Its definitely not complete!
Notebook Kit Notebooks 2.0 have potential for a cleaner model for the JS part, but then imports are a bit weird currently so that potential is not banked yet and I am stuck on Notebook 1.0 for a while (I have a Notebook 2.0 decompiler in my stash though!)
The issue is that Inspector.into("main") attaches an inspector to every named cell, including the value half of each viewof. Instead of using the blanket into, provide a custom observer function that returns an inspector only for the cells you actually want to render, and returns something no-op (or nothing) for the viewof value cells. That way you skip them at the source rather than fighting it with CSS afterward. The runtime’s observer API gives you the cell name so you can filter on it.
That’s a much cleaner fix than the CSS hacks I was layering on. Swapping the blanket Inspector.into("main") for a custom observer that filters by cell name lets me return an inspector only for the cells I actually want and a no-op for the viewof value halves, so I skip them at the source instead of hiding them after render. Makes sense that into was blanket-attaching to every named cell including those value halves. The observer API handing me the cell name is exactly the hook I needed. Rewriting it that way now, thanks.
