Skip to content

Commit 3257876

Browse files
committed
update docs for creating another extension
1 parent 1f48117 commit 3257876

File tree

2 files changed

+54
-31
lines changed

2 files changed

+54
-31
lines changed

docs/installation.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ To install the extension, execute:
1212
conda install -c conda-forge jupyterlab-blockly
1313
```
1414

15+
or
16+
17+
```bash
18+
pip install jupyterlab-blockly
19+
```
20+
1521
### Kernels
1622

1723
- ipykernel
@@ -28,6 +34,12 @@ To remove the extension, execute:
2834
conda uninstall -c conda-forge jupyterlab-blockly
2935
```
3036

37+
or
38+
39+
```bash
40+
pip uninstall jupyterlab-blockly
41+
```
42+
3143
## Development install
3244

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

3951
```bash
40-
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
52+
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
4153
micromamba activate blockly
4254
# Clone the repo to your local environment
4355
# Change directory to the jupyterlab_blockly directory

docs/other_extensions.md

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
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.
44

55
## Creating a new JupyterLab extension
6-
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.
6+
You can easily create a new JupyterLab extension by using the official `copier` template, documented [here](https://github.com/jupyterlab/extension-template).
77

8-
After running the following command:
8+
After installing the needed plugins (mentioned in the above link) and creating an extension directory, you can run the following command:
99
```
10-
cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts
11-
```
12-
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.
10+
copier copy --trust https://github.com/jupyterlab/extension-template .
11+
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.
1312
14-
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).
13+
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).
1514
1615
1716
## Importing JupyterLab-Blockly
@@ -113,34 +112,46 @@ const plugin: JupyterFrontEndPlugin<void> = {
113112

114113
## Additional configurations
115114

116-
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.
115+
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.
117116

118-
```python
119-
// setup.py : 57
117+
```toml
118+
// pyproject.toml : 26
120119

121-
setup_args = dict(
122-
...
123-
install_requires=['jupyterlab-blockly>=0.3.2,<0.4']
124-
...
125-
)
120+
dependencies = [
121+
"jupyterlab-blockly>=0.3.2,<0.4",
122+
... // add any additional dependencies needed for your extension
123+
]
126124
```
127125

128-
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.
129-
126+
Additionally, you will need to add the webpack configuration for loading the `Blockly` source maps.
127+
128+
You can do this, by creating the following `webpack.config.js` file inside your root directory:
129+
130+
```js
131+
// @ts-check
132+
133+
module.exports = /** @type { import('webpack').Configuration } */ ({
134+
devtool: 'source-map',
135+
module: {
136+
rules: [
137+
// Load Blockly source maps.
138+
{
139+
test: /(blockly\/.*\.js)$/,
140+
use: [require.resolve('source-map-loader')],
141+
enforce: 'pre'
142+
}
143+
].filter(Boolean)
144+
},
145+
// https://github.com/google/blockly-samples/blob/9974e85becaa8ad17e35b588b95391c85865dafd/plugins/dev-scripts/config/webpack.config.js#L118-L120
146+
ignoreWarnings: [/Failed to parse source map/]
147+
});
130148
```
131-
// package.json : 88-101
132149

150+
and by connecting the `webpack` config to your `jupyterlab` intstance, by adding the following line inside your `package.json`:
151+
152+
```json
133153
"jupyterlab": {
134-
"sharedPackages": {
135-
"jupyterlab-blockly": {
136-
"bundled": false,
137-
"singleton": true
138-
},
139-
"blockly": {
140-
"bundled": false,
141-
"singleton": true
142-
}
143-
}
144-
}
145-
```
146-
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*.
154+
...
155+
"webpackConfig": "./webpack.config.js"
156+
}
157+
```

0 commit comments

Comments
 (0)