Importing an npm module into a notebook?

[kolibril13]

hi @rgbkrk,
I was wondering: the docs say https://docs.deno.com/runtime/manual/tools/jupyter

How can I do this import from npm?
E.g. I'd like to import this module: https://www.npmjs.com/package/@niivue/niivue

I've already made a python widget from niivue that using anywidget, but would be interesting to see that working in a deno kernel as well:

294898453-08c3d466-1ca1-44cf-a57d-9e2203c3d335.mov

this tweet mentioned a few months ago that something like this might be possible

https://twitter.com/KyleRayKelley/status/1708319670535877070

is there an example somewhere that you can point me to?
Thanks a lot!

[bartlomieju]

You can import it like so:

import niivue from "npm:@niivue/niivue";

[kolibril13]

thanks for the feedback!
I've tried

but that does not work.
Example from here:
https://github.com/niivue/niivue/blob/main/DEVELOP.md#load-a-volume
When I run the same code using vite+react, it does work:

any ideas? :)

[bartlomieju]

This is probably because Deno has window and devicePixelRatio is not supported. Feel free to open an issue in Deno repo?

[rgbkrk]

I'd need to play with niivue to know for sure, but I think this relates to denoland/deno#20592. We need to support comms in order to have bidirectional communication with a widget like this and the package needs to be rendered on the client, not on the Deno side.

An initial prototype way to use anywidget in Deno is in https://deno.land/x/anywidget@0.0.5

[manzt]

For clarity, Jupyter Widgets connect a Jupyter front-end (VSCode, browser) with objects in the Jupyter kernel (Python, R, Deno, ...). The Deno integration implements a kernel. However, JS libraries that are intended to run in client (i.e., most interactive visualization libraries that use Canvas API or WebGL) still need to run in the client (unless Deno implements these WebAPIs like @bartlomieju mentioned, but such implementations probably wouldn't be what is desired in this context of an interactive Jupyter notebooks). The Deno kernel lets you bridge client/kernel more conveniently because it's the same language/stack, but you need to be mindful of what packages are meant to run where.

You could take your existing client bundle (static/widget.js) for your Python ipyniivue example, and expose it to the Deno kernel with https://deno.land/x/anywidget@0.0.5 like @rgbkrk mentioned. FWIW, I think there is a lot of room to improve the ergonomics of making Deno-based Jupyter widgets, building upon the rich full-stack frameworks available in the Deno ecosystem (e.g. widgets are kind of like "islands" in fresh https://deno.com/blog/intro-to-islands).