[Suggestion] Provide magics for authoring JS/CSS in separate cells (with better syntax highlighting/etc)?

[fperez]

trafficstars

Thanks folks for the great project! This seems like a wonderful advance for the Jupyter widgets ecosystem, I only discovered it recently.

I had one small suggestion - I'm not very fond of the workflow of bundling JS/CSS inside strings when authoring classes, as in general writing code inside strings loses syntax highlighting, natural indentation, etc.

I wonder if you'd consider providing a couple of magics that could allow for a workflow such as:

In this (mock-up) example I used globally named variables (cw_esm, cw_css) that would be injected into the namespace, but they could also be cached somewhere else, that's a later design decision.

Anyhow, just an idea - I'll play more with the library regardless, thanks again for your contribution to the Jupyter ecosystem!

[manzt]

Thanks for your suggestion and for giving anywidget a try!

We appreciate the feedback and understand the pain points with embedding JS/CSS as strings. I'm also not particularly fond of editing inline strings, but the solution at the moment is to move JS/CSS into separate files when the inline strings are sufficiently complex. This has two main benefits:

• syntax highlighting / ability to edit front-end code with other editors (likely with richer language features)
• enabling anywidget's hot module replacement. During development, we listen for changes to JS/CSS and apply changes, without reseting notebook state or re-executing cells

I haven't had the chance to explore magics yet (so thanks for your initial work!), and I see their appeal of improving single-file prototypes for their portability. Will have a look and might ping you if I come up with something. Thanks again!

[fperez]

👍 to moving those to separate files - for larger projects it's 💯 the right thing to do. But for early adopters/lightweight experimentation, there's a lot of appeal to the "all in one" experience of playing in a notebook with just a few cells, and seeing the results right there.

I'm happy to provide more input on the magics if you need them, it's a fairly powerful system - creating custom magics is documented here, and a full list of the built-ins here.

If you want to look at a more complex project that makes extensive use of magics for illustration, JupySQL is a good one - they have magics with syntax support as well as communication with the Python user's namespace.

Thanks again, looking forward to using anywidgets in the future!

[manzt]

@fperez I'm almost done with implementing this feature (#594). However, the syntax highlighting is still python based for the code cells (also I noticed with your example). Is it possible for a custom cell magic to set the front-end cell syntax highlighting?

[fperez]

Is it possible for a custom cell magic to set the front-end cell syntax highlighting?

@manzt - I'm sorry that I'm not 100% sure about how easy this is to do and whether it requires fully writing a jupyterlab frontend extension. I suggest taking a look at how the jupysql plugin works, but you might also want to ask on our Discourse where someone more up to date with the details may help. I'm super supportive of this, but sadly these days I don't have time to keep up with the latest and greatest of our APIs and features, so I'm afraid of giving you inaccurate advice.

[manzt]

Thanks for the response. I merged the current magic implementation and it will be available in the next release. Need to find the time to write docs and maybe a video/blog post.

I will look into a custom front-end extension for syntax highlighting as well.

[fperez]

Awesome, looking forward to using it, thanks for the great work!

[nvictus]

Thanks for the great suggestion @fperez!

[manzt]

Released in v0.9.12! I'm going to close this issue for now. Hoping to get some nicer syntax highlighting in a follow up.