Add a cookiecutter based tutorial to build a custom widget

[jtpio]

Fixes #2731

The idea is to update the tutorial so it uses the TypeScript cookiecutter to bootstrap the widget.

For now we can probably keep the content and narration of the original tutorial (email widget, screenshot in #2731 (comment)), and we might want to iterate on it more later.

Structure and narration inspired by: https://jupyterlab.readthedocs.io/en/latest/developer/extension_tutorial.html

Screenshot:

TODO

• Add doc for the cookiecutter based setup
• Update the instructions so they match the cookiecutter structure ("modify this files with the following content")
• Post a screenshot of the rendered page
• Add screenshot

[jtpio]

This should now cover the content of the previous tutorial and be ready for review.

[ianhi]

Definitely a helpful read. I left a few comments on some things that might be nice to mention.

Also: I think it would be great to have a screenshot of the finished product right at the top as a hook to capture interest. The widget architecture screenshot is useful but it is not the most inviting start to the tutorial.

[jtpio]

I think it would be great to have a screenshot of the finished product right at the top as a hook to capture interest

Good idea, added that to the todo list 👍

[MicaelJarniac]

There are references to Widget Custom.ipynb on other files (#3061). At least one of those references includes a specific anchor (#DOMWidget,-ValueWidget-and-Widget), which may need updating.

[jtpio]

Thanks @MicaelJarniac for the pointer.

Adding the PR to the 8.0 milestone since the previous notebook-based tutorial was removed in #2677

[jtpio]

Add a screenshot for the end result:

[jtpio]

@ianhi I've pushed a couple of changes based on the comments above, thanks!

Ideally we will enable the read the docs autobuild for pull requests soon: #2921

So the tutorial can be reviewed more easily.

[jtpio]

Also, we will want to update the tutorial for JupyterLab 3.0 too, when changes are backported from the 7.x branch to master.

This can probably be tracked and done in a separate PR.

[ianhi]

I'm going to close and re-open to try to pick up the RTD build on PRs

[ianhi]

This is looking great! I left a comments on a few small things which can mostly done in subsequent PRs. I think the only things that really need addressing are contents of some of the code blocks. Following along I found that I was misled into deleting things, or never ended up defining a necessary variable a few times.

Other than that a great read, I learned a few things along the way :)

[ianhi]

Can we specify which ones can't be synced? Maybe just with an asterisk after them in the bulleted list?

[jtpio]

We can probably go through the list and check them all with a call to json.dumps() to know which ones are serializable.

[jtpio]

Thanks @ianhi for the comments, I pushed changes to the branch which should be available on the RTD preview now too: https://ipywidgets--2919.org.readthedocs.build/en/2919/examples/Widget%20Custom.html

[jtpio]

We could probably iterate more on this tutorial in separate PRs, to cover the following points:

• Update instructions to JupyterLab 3.0
• List non JSON serializable trait types

[ianhi]

This is fantastic 🎉 thanks!

We could probably iterate more on this tutorial in separate PRs, to cover the following points:

👍