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.