using jupyterlab components

[artttt]

Hi,
Can i use anywidget to interact with jupyter lab components?

Ive been trying the following as my starting point, but my hunch is this isn't possible or the wrong way to go about it.
(3.6.1 is the notebook version i'm currently using)

import anywidget
class ExampleWidget(anywidget.AnyWidget):
    # anywidget, required #
    _esm = """
    import { JupyterFrontEnd, JupyterFrontEndPlugin } from "https://esm.sh/@jupyterlab/[email protected]";

    """
ExampleWidget()

i get this error

Failed to create view for 'AnyView' from module 'anywidget' with model 'AnyModel' from module 'anywidget'
SyntaxError: The requested module '/v132/[email protected]/es2022/crypto-browserify.mjs' does not provide an export named 'webcrypto'

It would be great to have a simple example of using anywidget to interact with Jupyter itself. I think that is something others will find useful.

Thanks.

[manzt]

Hi there. Yes, you just need to add the ?bundle query param since @jupyterlab/application isn't properly packaged for npm as ESM. I recommend reading the https://esm.sh/ documentation to learn more about their API if you plan to use dependencies from that CDN. (Although I'm not sure how this module interacts with the juptyer front end).

import anywidget
class ExampleWidget(anywidget.AnyWidget):
    # anywidget, required #
    _esm = """
    import * as jlab from "https://esm.sh/@jupyterlab/[email protected]?bundle";
    export function render() {
      console.log(jlab);
    }
    """
ExampleWidget()

I'd like to keep the issues in this repo related to anywidget and not debugging JS modules that aren't related to the project if possible!

[artttt]

Thanks for the help.

Sorry that the question wasn't closely enough related to the project. I did hesitate to ask the question but ultimately I thought there wasn't anywhere else better to ask about how to interact with jupyter from anywidget.

Anywidget has made it very easy for a jupyter user to experiment in making widgets and many could be python not js users so i think it likely there will be quite a few issues posted that are only peripherally related to anywidget.

If you are looking for ideas for further examples to include in the documentation I think one that works with the jupyter interface would be interesting.
Thanks again.

[manzt]

Sorry that the question wasn't closely enough related to the project. I did hesitate to ask the question but ultimately I thought there wasn't anywhere else better to ask about how to interact with jupyter from anywidget.

No need to apologize at all! I'm sorry if I was short in my response. This thread (and others) led me to open Discussions for such queries in the future. Thanks for giving anywidget a try.

Anywidget has made it very easy for a jupyter user to experiment in making widgets and many could be python not js users so i think it likely there will be quite a few issues posted that are only peripherally related to anywidget.

Totally agree!

If you are looking for ideas for further examples to include in the documentation I think one that works with the jupyter interface would be interesting.

I've never tried this type of integration. Do you have any examples you could share?

[artttt]

Im one of those python not js users so don't have an example of my own just yet.

A couple of projects that i'm aware of that do this type of integration are:
https://github.com/jtpio/ipylab
https://github.com/timkpaine/jupyterlab_commands
https://github.com/jupyter-server/jupyter-resource-usage

and there are examples in the jupyterlab repo.
https://github.com/jupyterlab/extension-examples/tree/main