Possibility to refer file-system from js-land ?

[pnsvk]

Sorry, if its obvious, but I am not able to figure out, how I could load js-libraries from my filesystem (not CDN, but offline from my local-disk) in "_esm" script-base.

Can you please let me know how to do it ?

[manzt]

anywidget only supports a single local JavaScript entrypoint for _esm, and I'm not sure if we'll ever be able to support importing other ESM modules natively from the file system (within _esm). For example,

import { foo } from './bar.js';

export function render(view) {
  foo();
}

will not work. This is a technical limitation due to the way anywidget needs to load _esm in the front end.

In order to support local js libraries (not from a CDN), you'll need to bundle your source code into a single ES Module and load it in anywidget. We have have a section in our documentation on this subject, but it's a little out of date.

I would recommend using esbuild. You can install it globally with npm or as a standalone executable.

esbuild --bundle --format=esm --outfile=bundle.js input.js

This command will generate bundle.js ,

// bar.js
function foo() {
  console.log("hello");
}

// input.js
function render(view) {
  foo();
}
export {
  render
};

which you should load in your Python code as a string as _esm.

You can also run esbuild in "watch" mode and have it re-generate bundle.js on file changes:

esbuild --bundle --format=esm --outfile=bundle.js input.js --watch

[pnsvk]

thank you for the input.. the documentation recommends Vite, but esbuild seems more approachable. Can I stick with esbuild itself ? not caring what Vite is capable of.

Also, can you please let me know if there are any plans of improving debuggability of the js-in-string _esm var ? - wish there was some jupyter-plugin to actually even support js-syntax-highlighting in the multi-line strings..

For now, I am living with enclosing all my js-code in try-catch blocks to capture issues.

[manzt]

Can I stick with esbuild itself ? not caring what Vite is capable of.

Yes, sorry this isn't clear in the documentation. They should be updated as a mentioned above. I agree that esbuild is much more approachable and "just works" without all the configuration. The Vite setup enables an improved developer experience IMO, but at the cost of adding complexity to the project.

Also, can you please let me know if there are any plans of improving debuggability of the js-in-string _esm var ? - wish there was some jupyter-plugin to actually even support js-syntax-highlighting in the multi-line strings..

I'm afraid this isn't something we can easily handle on our end, as it would require adding language support within strings in Jupyter. We use the JS-in-Python-strings in our demos to show that you can write your JS anywhere, but as the JS grows in complexity I recommend moving the code to a separate file.

You can then read the JS source as a string in your Python code during development and develop totally within JupyterLab.

However, if you really want editor support to prevent syntax errors in JS, I recommend using VS Code to edit the JavaScript code (since it comes with more than just JS syntax highlighting and language support).

We have some ideas in the works for improving the developer experience for separate files (e.g., auto-reloading on change).

[pnsvk]

thank you so much.. you have been amazing with all the elaborated answers to user-queries. Yes, I've been using vs-code but never thought of using jupyter-tabs to use it like code-editor. Love this tip.
Excited to see what's coming next.

[manzt]

btw, v0.2 adds the ability to use a pathlib.Path for _esm or _css, and during development anywidget will watch for changes to these files and update the front-end automatically. So you can start:

esbuild --bundle --format=esm --outfile=bundle.js input.js --watch

and use:

class Counter(anywidget.AnyWidget):
    _esm = pathlib.Path("bundle.js") # no read_text()
    counst = traitlets.Int().tag(sync=True)

in your Python code, and anywidget will reload bundle.js module without you needing to refresh the page.

You can learn more in the announcement.