Skip to content

Update docs #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ To install the extension, execute:
conda install -c conda-forge jupyterlab-blockly
```

or

```bash
pip install jupyterlab-blockly
```

### Kernels

- ipykernel
Expand All @@ -28,6 +34,12 @@ To remove the extension, execute:
conda uninstall -c conda-forge jupyterlab-blockly
```

or

```bash
pip uninstall jupyterlab-blockly
```

## Development install

**Note:** You will need NodeJS to build the extension package.
Expand All @@ -37,7 +49,7 @@ The `jlpm` command is JupyterLab's pinned version of
`yarn` or `npm` in lieu of `jlpm` below.

```bash
micromamba create -n blockly -c conda-forge python nodejs=18 yarn pre-commit jupyterla jupyter-packaging jupyterlab-language-pack-es-ES jupyterlab-language-pack-fr-FR ipykernel xeus-python xeus-lua
micromamba create -n blockly -c conda-forge python nodejs=18 yarn pre-commit jupyterla jupyterlab-language-pack-es-ES jupyterlab-language-pack-fr-FR ipykernel xeus-python xeus-lua
micromamba activate blockly
# Clone the repo to your local environment
# Change directory to the jupyterlab_blockly directory
Expand Down
68 changes: 39 additions & 29 deletions docs/other_extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
The JupyterLab-Blockly extension is ready to be used as a base for other projects: you can register new Blocks, Toolboxes and Generators. It is a great tool for fast prototyping.

## Creating a new JupyterLab extension
You can easily create a new JupyterLab extension by using a `cookiecutter`. You can read more documentation about `cookiecutters` [here](https://cookiecutter.readthedocs.io/en/latest/), but the process is fairly straight-forward.
You can easily create a new JupyterLab extension by using the official `copier` template, documented [here](https://github.com/jupyterlab/extension-template).

After running the following command:
After installing the needed plugins (mentioned in the above link) and creating an extension directory, you can run the following command:
```
cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts
copier copy --trust https://github.com/jupyterlab/extension-template .
```
the `cookiecutter` will ask for some basic information about your project. Once completed, it will create a directory containing several files, all forming the base of your project. You will mostly work in the `index.ts` file, located in the `src` folder.
which will ask you to fill some basic information about your project. Once completed, the directory will be populated with several files, all forming the base of your project. You will mostly work in the `index.ts` file, located in the `src` folder.

An example of creating a simple JupyterLab extension, which also contains the instructions of how to fill the information asked by the `cookiecutter`, can be found [here](https://github.com/jupyterlab/extension-examples/tree/master/hello-world).
An example of creating a simple JupyterLab extension, which also contains the instructions of how to fill the information asked by the `copier` template, can be found [here](https://github.com/jupyterlab/extension-examples/tree/master/hello-world).


## Importing JupyterLab-Blockly
Expand Down Expand Up @@ -113,34 +113,44 @@ const plugin: JupyterFrontEndPlugin<void> = {

## Additional configurations

You will need to request the `jupyterlab-blockly` package as a dependency of your extension, in order to ensure it is installed and available to provide the token `IBlocklyRegistry`. To do this, you need to add the following line to your `setup.py` file.
You will need to request the `jupyterlab-blockly` package as a dependency for your extension, in order to ensure it is installed and available to provide the token `IBlocklyRegistry`. To do this, you need to add the following line to your `pyproject.toml` file.

```python
// setup.py : 57

setup_args = dict(
...
install_requires=['jupyterlab-blockly>=0.3.2,<0.4']
...
)
```
// pyproject.toml : 26

Moreover, as we are working with deduplication of dependencies and the extension you are creating requires a service identified by a token from `jupyterlab-blockly`, you need to add the following configuration to your `package.json` file.
dependencies = [
"jupyterlab-blockly>=0.3.2,<0.4",
... // add any additional dependencies needed for your extension
]
```

Additionally, you will need to add the webpack configuration for loading the `Blockly` source maps. You can do this, by creating the following `webpack.config.js` file inside your root directory:

```js
// @ts-check

module.exports = /** @type { import('webpack').Configuration } */ ({
devtool: 'source-map',
module: {
rules: [
// Load Blockly source maps.
{
test: /(blockly\/.*\.js)$/,
use: [require.resolve('source-map-loader')],
enforce: 'pre'
}
].filter(Boolean)
},
// https://github.com/google/blockly-samples/blob/9974e85becaa8ad17e35b588b95391c85865dafd/plugins/dev-scripts/config/webpack.config.js#L118-L120
ignoreWarnings: [/Failed to parse source map/]
});
```
// package.json : 88-101

and by connecting the `webpack` config to your `jupyterlab` instance, which entails adding the following line inside your `package.json`:

```json
"jupyterlab": {
"sharedPackages": {
"jupyterlab-blockly": {
"bundled": false,
"singleton": true
},
"blockly": {
"bundled": false,
"singleton": true
}
}
}
```
This ensures your extension will get the exact same token the provider is using to identify the service and exclude it from its bundle as the provider will give a copy of the token. You can read more about deduplication of dependencies [here](https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#deduplication-of-dependencies), in the official *Extension Developer Guide for JupyterLab*.
...
"webpackConfig": "./webpack.config.js"
}
```
Loading