No project description provided
Project description
Jupyter and Dioxus
This repo contains:
- The python package
dioxus_widget
, which can open custom elements made with dioxus in an jupyter notebook. - An example rust project that creates custom elements with Dioxus.
- A demo for presenting custom elements from dioxus in a jupyter notebook.
Run the Demo
git clone https://github.com/JJJHolscher/jupyter-and-dioxus
cd jupyter-and-dioxus
cargo install wasm-pack
wasm-pack build --target web
python -m venv .venv
. .venv/bin/activate
pip install jupyterlab
cd doc
jupyter lab
Your browser opens jupyter lab, you open demo.ipynb
and you run all.
You should now get a screenshot like this:
Which means the demo worked.
Workflow
- You create a custom Dioxus element in Rust, using the
custom-elements
crate. Seesrc/main.rs
for how to do that. - Run
wasm-pack build --debug --target web
such that your custom elements is put into a bunch of js and wasm files in some directory (probablyYOUR_RUST_PACKAGE_ROOT/pkg
). pip install dioxus_widget
import dioxus_widget; dioxus_widget.init(JS_PATH)
a server will launch. JS_PATH is the javascript file you'd normally import in the html module script for loading in the wasm. It's usually found atYOUR_RUST_PACKAGE_ROOT/pkg/YOUR_RUST_PACKAGE_NAME.js
.dioxus_widget.show(CUSTOM_ELEMENT_TAG, INNER_HTML)
tadaa, now you get an iframe into a document with <custom_element_tag>inner_html</custom_element_tag>
.
dioxus_web.close()
run this to remove temporary html files, only run this after you're done looking at your widgets.
Q&A
Why use the custom-elements crate and not just directly mount dioxus on elements with a particular id?
This way, in the future (not now), you can also the element from markdown with relatively elegant syntax. What you're asking is definitely doable though, and I might add that if that proves extra beneficial.
Why is the dioxus element inside an iframe?
Some bug in dioxus_web
disallowed the instantiation of multiple dioxus elements in a single document. Once this is patched, I'll drop the iframes and you can then also access the element from markdown.
This will make this library far more convenient, since dioxus_widget
won't need to launch a server anymore or create temporary files.
What is that doc/_quarto.yml?
Quarto allows you to convert markdown(-like) files into a website (or book, or article). The rad thing is that Quarto runs any code cells in the markdown. At some point I will also test whether the dioxus widgets work in quarto-generated files.
Does my notebook file need to be on the same device as the wasm and javascript that was generated by dioxus?
Yea, though not really.
I made this library assuming you have the files locally so out of the box you won't be able to link to remote files when calling dioxus_widget.init
.
But it would be simpler if the dioxus-generated files are served from an already-existing separate server.
There's a decent chance I'll implement this simple change at some point, though for my personal use I won't need to now.
Will you support custom elements that were made by different front-end libraries, like Yew or React?
Probably not since I don't plan to use other libraries. If I do, then they'll probably become included here.
Also I will probably add them if you pay me.
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for dioxus_widget-0.0.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 24ab59cf27e9d179bad8a52157f075cb4046c2797fb8ca11c9c56e3ebfc02f53 |
|
MD5 | fe4d969ea695a12f462ac5b0ce1da79f |
|
BLAKE2b-256 | 822ed524e2bb961750624d567e96fcc83193230cb0e331b38a97bb5271009062 |