This cookiecutter example for general jupyter extension

[Naman-ntc]

Hi,
I am fairly new to js development and these questions might be trivial. I am trying to build a React-based jupyter extension.

However, the standard notebook extension tutorials follow the AMD module syntax and I can't use my react components since they are written in ES6 format. I believe I can follow the webpack scripts used in this cookie-cutter for converting my react app into the required AMD format.

1.) Do you think this is a good idea and whether it will work? It would be great if you can suggest changes to this approach or if you know of any other approach.
2.) extension.js & index.js seem to be written as commonjs. Will the webpack scripts work out of box in for es6 react components?

[rmorshea]

I'm not really a JS expert either, but using webpack to transpile to the desired target platform is a really common practice.

As a general rule though for this repo, the less you modify the internals and scripts the better (especially since you're just starting out). As soon as you leave the beaten path, it will be much harder for maintainers to help debug any issues you may encounter.

[ianhi]

Hi @Naman-ntc are you trying to build a widget (works in jupyter notebook + jupyterlab) or a jupyter notebook or jupyterlab specific extension?

Widgets from this repo will only work if you have an active python kernel, while extensions can work without an active kernel. If you are making a pure jlab extension then you can use the sibling cookiecutter: https://github.com/jupyterlab/extension-examples/tree/master/react-widget

There is also a repo of examples for that cookiecutter including one that uses react which you may find helpful: https://github.com/jupyterlab/extension-examples/tree/master/react-widget

[Naman-ntc]

Hi @ianhi,
What is difference between a widget and extension? From my understanding a widget is an extension + python binding.

To answer your question -- I was thinking of building a javascript extension but now I will reconsider

[ianhi]

I think it's easiest to think of widgets as subset of extensions. Behind the scenes the leverage the extension system to create an display themselves, but they can only be created by the user by calling some python. Whereas extensions would always be available in the JLab interface whether or not you are working in a notebook. So for example jupyterlab-git is an extension: https://github.com/jupyterlab/jupyterlab-git#jupyterlab-git

but jupyterlab-sidecar is a widget: https://github.com/jupyter-widgets/jupyterlab-sidecar#usage

Which of these seems more like what you want will decide which cookiecutter you should use.

[Naman-ntc]

Yeah that makes sense.
So this cookiecutter allows widgets across both jupyter notebook and jupyter lab? The extension cookiecutters doesn't seem to be providing such functionality right?

[ianhi]

Yeah, the cookiecutter/ipywidgets do some things behind the scenes to allow them to behave as either a notebook extension or a jupyterlab extension. But in general extensions will only work for one frontend as they have different APIs

[Naman-ntc]

I see. Thanks alot

[Naman-ntc]

Just a note to users trying to add react to widgets --

• I used jsx files for all react components (you can also use tsx files, not sure how this would change; potentially look at webpack config -- https://github.com/yifanwu/b2/blob/master/webpack.config.js)
• In webpack I added babel-loader for jsx files with the react plugin (what this basically does is convert the react syntax to javascript)
• In the example.js ([EXTENSION-NAME].js) file you can import the App and render it (make sure to not use react-syntax in js file since babel only looks at jsx files)

My webpack config rules look like the following

var rules = [
    {
        test: /\.(jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['transform-class-properties']
        }    
    },
    { 
        test: /\.css$/,
        loader: ['style-loader', "css-loader"]
    },
]