As an example: Add a leaflet viewer plugin for geoJSON files.
- Go to npm: search for leaflet (success!).
- Go to
jupyterlab
top level source directory:jlpm add leaflet
. This adds the file to thedependencies
inpackage.json
. - Next we see if there is a typing declaration for leaflet:
jlpm add --dev @types/leaflet
. Success! - If there are no typings, we must create our own. An example typings file that exports functions is path-posix. An example with a class is xterm.
- Add a reference to the new library in
src/typings.d.ts
. - Create a folder in
src
for the plugin. - Add
index.ts
andplugin.ts
files. - If creating CSS, import them in
src/default-themes/index.css
. - The
index.ts
file should have the core logic for the plugin. In this case, it should create a widget and widget factory for rendering geojson files (see Documents). - The
plugin.ts
file should create the extension and add the content to the application. In this case registering the widget factory using the document registry. - Run
jlpm run build
fromjupyterlab/jupyterlab
- Run
jupyter lab
and verify changes.