Add docs explaining the build and packaging process

[paddymul]

I don't think ipyreact ships the build toolchain(sucrase, tsc ...?) along with it when it is packaged into a whl, but that itsn't clear from the docs.

What happens when a package built on top of ipyreact is packaged into a whl?

I would hope that it produces a single bundled js artifact.

[maartenbreddels]

It ships sucrase, but it’s all happening in the frontend. You can build on top of ipyreact, but no bundle in created at any point. It’s only the ipyreact bundle, and the js you put into it. You could generate a single esm/bundle with react external as well. I think esbuild can do that.

On Tue, 25 Apr 2023 at 18:43, Paddy Mullen @.***> wrote:

I don't think ipyreact ships the build toolchain(sucrase, tsc ...?) along with it when it is packaged into a whl, but that itsn't clear from the docs.

What happens when a package built on top of ipyreact is packaged into a whl?

I would hope that it produces a single bundled js artifact.

— Reply to this email directly, view it on GitHub https://github.com/widgetti/ipyreact/issues/10, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANPEPNTKQ3FLYEAATCL5GTXC75J7ANCNFSM6AAAAAAXLINYYQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- Maarten Breddels Co-Founder of Widgetti https://widgetti.io/ Your partner for Jupyter- and data-apps Tel: +31 6 2464 0838 <+31+6+24640838> [image: Twitter] https://twitter.com/maartenbreddels[image: Github] https://github.com/maartenbreddels[image: LinkedIn] https://linkedin.com/in/maartenbreddels

[maartenbreddels]

Maybe this is not fully answered yet, reopened.

[kolibril13]

I just published the first widget to pypi. https://github.com/kolibril13/jupyter-tldraw https://pypi.org/project/tldraw/

it works for me locally and on binder 🎉 can you confirm that you can also install it on your machine?

%pip install tldraw

from tldraw import TldrawWidget

import matplotlib.pyplot as plt
fig, ax = plt.subplots(figsize=(6, 2))
ax.plot([1,2], [10,20], c = "orange");
plt.close()

TldrawWidget(my_figure=fig)

Binder Screenshot:

However, in JupyterLite it throws an error :

[Open Browser Console for more detailed log - Double click to close this message]
Failed to load model class 'ReactModel' from module '@widgetti/jupyter-react'
Error: No version of module @widgetti/jupyter-react is registered
    at f.loadClass (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/134.40eaa5b8e976096d50b2.js?v=40eaa5b8e976096d50b2:1:74856)
    at f.loadModelClass (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:10729)
    at f._make_model (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:7517)
    at f.new_model (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:5137)
    at f.handle_comm_open (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/150.b0e841b75317744a7595.js?v=b0e841b75317744a7595:1:3894)
    at _handleCommOpen (https://jupyterlite.readthedocs.io/en/latest/_static/extensions/@jupyter-widgets/jupyterlab-manager/static/134.40eaa5b8e976096d50b2.js?v=40eaa5b8e976096d50b2:1:73393)
    at v._handleCommOpen (https://jupyterlite.readthedocs.io/en/latest/_static/build/6591.94ed352.js:1:28742)
    at async v._handleMessage (https://jupyterlite.readthedocs.io/en/latest/_static/build/6591.94ed352.js:1:30636)

[kolibril13]

one more observation: When I try the same thing, but upload the module and tsx file separately, it works totally fine in JupyterLite

[paddymul]

I followed the instructions and I was able to eventually get it to work.

After running %pip install tldraw I was successfully able to import tldraw.

However when executing the next cell with the widget, I recieved a JS Module error

To get the widget working, I needed to

1. click kernel -> restart and clear all outputs
2. click "save" (the notebook)
3. reload the webpage in the browser
4. execute the widget cell.

I have dealt with the same workflow in a lot of my dev work so I expected it. Fixing this is really outside of the scope of IPYReact, but here are some suggestions for a better UX

1. A better Jupyter level "couldn't find js module" error message suggesting reloading the notebook.
2. Could IPYReact trap a JSError in python and display the better error message itself? the IPYReact python code was properly added
3. Tweaks to the %pip magics when it comes to jupyter widgets.