This repo can be considered as part tutorial, part template for making new JupyterLab extensions using Fable.
If you've never made a Jupyterlab extension before, I strongly recommend you complete the standard tutorial.
This repo is based on that tutorial, approximately midway through (complex enough to show nontrivial behavior but simple enough to understand almost immediately).
Rather than displaying astronomy pictures of the day, the extension in this repo displays a message in a new tab when launched from the command palette.
jupyter labextension install fable-jupyterlab-extension
This is based on my personal preferences. For more options, see the extension development guide.
Initial install and after library adds
npm install mono .paket/paket.exe install
Terminal A in VSCode
jupyter labextension install . --no-build npm run watch
This will watch your F# code and trigger builds of
If you prefer not to trigger builds using a watch, you can
npm run build every time you want a new build.
Terminal B in VSCode
jupyter lab --watch
This will watch your extension and trigger builds of it.
Even with this watch, you still need to refresh your browser during development.
JS dependencies are declared in
package-lock.json is a lock file automatically generated.
Paket is a dependency manager for .NET and mono projects, which is designed to work well with NuGet packages and also enables referencing files directly from Git repositories or any HTTP resource. It enables precise and predictable control over what packages the projects within your application reference.
.NET dependencies are declared in
src/paket.references lists the libraries actually used in the project. Since you can have several F# projects, we could have different custom
.paket files for each project.
Last but not least, in the
.fsproj file you can find a new node:
<Import Project="..\.paket\Paket.Restore.targets" /> which just tells the compiler to look for the referenced libraries information from the
Fable-splitter is a standalone tool which outputs separated files instead of a single bundle. Here all the js files are put into the
lib. And the main entry point is our
Because Jupyter uses Typescript, we can use ts2fable to generate strongly typed imports of Jupyter's JS packages. Unfortunately these are a bit huge and the conversion is messy.
Jupyter.fs contains the minimal imports for this demo repo, and these imports were tweaked out of the files in the