dioxus-widget 0.0.2

No project description provided

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

1. You create a custom Dioxus element in Rust, using the custom-elements crate. See src/main.rs for how to do that.
2. Run wasm-pack build --debug --target web such that your custom elements are put into a bunch of js and wasm files in some directory (probably YOUR_RUST_PACKAGE_ROOT/pkg).
3. pip install dioxus_widget
4. 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 at YOUR_RUST_PACKAGE_ROOT/pkg/YOUR_RUST_PACKAGE_NAME.js .
5. 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>.

6. dioxus_web.close() run this to remove temporary html files, only run this after you're done looking at your widgets.

Q&A

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 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 might add them if you pay me.

Why so many globals in the python package?

I don't want to burden the end user with keeping track of any state.
The cost of that is that the dioxus_widget.init function cannot be called twice. You get to load 1 package, and that package should contain all the dioxus components you'd want to invoke later.
To me, this is obviously flawed, but for my personal purposes it will do. This facet might (breakingly) change later.

What is the status of this repo?

This repo is a personal tool that is, right now, in active use. If you see that this repo stopped getting commits, I possibly stopped using it.
Because it's a personal tool, I won't be shy about introducing breaking changes, and the documentation might get outdated quickly.

Thus far it's pretty small though, and I don't see it bulking anytime soon, so if you make sure to note which commit you're using and don't mind checking the python and rust source code in case of trouble, you should be able to use this well.

And, it need barely be said, but the more you pay me the more pleasant this repo becomes for you.