Clearer Documentation on Workflow

[akloster]

trafficstars

I'd like to develop a javascript-heavy widget extension for the jupyter notebook. I managed to install the example widget and it seems to be working. However, I can't seem to make changes to the typescript source code take effect. I tested it using multiple console.log instructions, and also verified the source code loaded in the browser is not showing the changes.

I would appreciate some help how to setup a workflow for extension development. So far, the readme is missing the "npm install" (I think, maybe it's not necessary?). I also tried npm scripts watch and build.

Thank you for your time!

[vidartf]

Good point. I think we could add a "Contributing" part, either as a separate .md file, or as a section in the README. If you are developing for classic notebook, there are two ways to update the source of a local developer install of the source:

1. Install the extension as a symlink to your development build dir: jupyter nbextension install --sys-prefix --overwrite --symlink --py <python package name>.

2. CPython on Windows still has poor support for symlinks, so if you are working on Windows, you can either symlink the directory manually, or run jupyter nbextension install --sys-prefix --overwrite --py <python package name> every time.

How to symlink manually on Windows:

Run the symlink command in 1. above. The command should give you the paths it is trying to symlink before failing (Symlinking: <A> -> <B>). Run the symlink command manually (e.g. mklink /D <A> <B>, google mklink for details for your Windows version / env).

[jtpio]

The development instructions were recently slightly updated: https://github.com/jupyter-widgets/widget-ts-cookiecutter/tree/master/%7B%7Bcookiecutter.github_project_name%7D%7D#development-installation

There is also now a new custom widget tutorial in the latest docs for ipywidgets: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html

@akloster do you think these two resources still need some iterations? Or are they enough to get going for now? Thanks!

[yGuy]

I basically ran into the same issues. I followed the guide for the development instructions, but it seems the watcher is only updating the files in the nbextension whereas the documentation seems to favor using jupyter lab which uses labextension which does not get updated when the code changes. So basically the watch and reload cycle is not working.

Can someone confirm? Using "jupyter lab" and "webpack watch" does not work for me. Seems I always have to reinstall.

[ianhi]

Hi @yGuy you're right that the watch command for jlab is not working. I think it got accidentally deleted from package.json when this repo was updated to jlab3. If you add "watch:labextension": "jupyter labextension watch ." to the scripts section of package.json then it should work as the documentation intends.

PR adding that here: https://github.com/jupyter-widgets/widget-ts-cookiecutter/pull/99