Building Exporters 101

In this guide, you will find all you need to know to build a new exporter or modify existing exporters if you want to tweak some that you cloned from the Exporter Store. This guide walks you through building a new exporter and explaining all the basics, but it can be applied equally as well to modify existing ones.

You must use VSCode with Supernova extension to develop exporters. We are providing everything from language auto-completion, compiler, syntax highlight, JSON schemas to validate configuration of the package and tons of convenience tools to make the creation of exporters a breeze.

This entire section of the guide assumes you are using VSCode and have already configured your extension for the development.

Creating exporter package

You could create the exporter base manually, however, we strongly recommend you use VSCode command to prepare new exporter for you. Search for :>Supernova: Create a new exporter package command in your command palette and execute it.

Supernova exporter package command being executed

You will be presented with a folder picker dialog, select an empty folder that you want to use to store the newly created exporter, and confirm the creation of the exporter.

Upon confirmation, a new VSCode workspace will be automatically opened with the new exporter package folder as root - and it will automatically switch the Supernova extension to "development mode", enabling debugging capabilities you will need to develop your exporter. As a result, your VSCode workspace should look like this:

Debugging exporter and blueprints

The Supernova extension allows you to run exporter and each of its separate parts right from the IDE interface. In order to test the exporter, let's start with writing something really simple - a hello world, of course.

Open file called colors.pr and copy past the following code:

{[ let helloWorld = "Hello World" /]}
{{ helloWorld }}

This is what's called blueprint (albeit dead simple). Blueprint is a template that powers the generation package and is what you will be using to declare how the code generation should behave. You can execute the blueprint immediately by saving the file first (ctrl/cmd + s), then clicking Run Single File in Supernova Extension panel:

The result of this execution will be shown in "Output" panel under Supernova DSM option.

You can also run the entire exporter using the second option, Run Exporter. This executes all blueprints available and writes the result of the exporter to {root}/.build folder:

Exporter now properly generates colors.css file, with Hello World content!

You can also optionally use VSCode commands to run the exporter and/or test a separate blueprint:

• > Supernova: Run Exporter to run the entire exporter package and output to ./build

• > Supernova: Run Single file to run the currently opened blueprint file and output to console

Run Exporter and Run Single File are the most useful commands for debugging your new exporter

Exporter anatomy

A lot of magic is happening on your behalf because the exporter is already properly configured. But it is very important to understand how the exporter package is structured and what are all the options so you can expand it yourself - this is what Exporter Anatomy is all about.