create-lichtblick-extension

Introduction

Lichtblick allows developers to create extensions, or custom code that is loaded and executed inside the Lichtblick application. Extensions are authored in TypeScript using the "@lichtblick/suite" SDK.

Creating Your First Extension

Make sure you have Node.js 16 or newer installed. In a terminal, go into the directory where you keep source code (ex: cd ~/Code) and run the following command:

npm init lichtblick-extension@latest helloworld

Feel free to choose an extension name other than helloworld. Otherwise, this will create a folder named helloworld containing your extension. Run a one-time initialization step:

cd helloworld
npm install

This installs all of the dependencies needed to edit and build the extension. You can use any editor to work on this project, although VSCode is the best supported IDE for authoring Lichtblick extensions. Look at the files src/index.ts and src/ExamplePanel.tsx for a simple example of creating a React element and registering it as a custom panel. To build and install this extension into your local Lichtblick extensions folder, run:

npm run local-install

This should create a folder under your home directory such as ~/.lichtblick-suite/extensions/unknown.helloworld-0.0.0 containing your compiled extension. Start Lichtblick. If everything succeeded, you should be able to add a new panel in Lichtblick named "ExamplePanel". Each time you make a change to your extension, you will need to run npm run local-install again to build it and copy the build output to the Lichtblick extensions folder in your home directory. You can either reload Lichtblick or close and reopen it to load your latest extension code.

If you just want to confirm your code compiles without installing it locally, run npm run build.

You can customize the build and install process by editing your ./config.ts file. The config file should look something like this:

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.css$/i,
      use: ["style-loader", "css-loader"],
    });
    return config;
  },
};

Publishing Your Extension

All of the metadata for your extension is contained in the package.json file. Before publishing, make sure you have set name, publisher, version, and description. When you are ready to distribute your extension, run:

npm run package

This will produce a .foxe file such as helloworld-0.0.0.foxe. This is essentially a ZIP archive containing your extension manifest and compiled code that can be opened by the Lichtblick application, which will unpack it and install it to the ~/.lichtblick-suite/extensions folder.

Examples

You can find examples of different kinds of extensions in the ./examples directory.

Developer information

Information on developing create-lichtblick-extension itself.

Build and Run Locally

Build the create-lichtblick-extension package locally with:

npm pack

Run the extension generator:

 npx create-lichtblick-extension-{VERSION}.tgz example-extension-name

Release process

1. Bump the version in package.json, and merge to main
2. Create a new release
3. Create a tag for the version above, with a leading "v" (v0.0.0)
4. Generate release notes
5. Publish the release