Adding Content

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 the dependencies in package.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 and plugin.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 from jupyterlab/jupyterlab

  • Run jupyter lab and verify changes.