Customizing existing exporters

Learn how to modify an existing exporter to your liking.

When you almost like an output of an exporter but you need to make some small changes to fit your codebase needs, you can fork the exporter and start modifying it. Here are the steps to take:

1. Fork from public exporter repository

First, you need to fork the exporter package so you can use it as a base for your new exporter.

In order to locate the repository of existing exporter, go to its detail (Code automation > Exporters) and then click on the the repository button which takes you to the exporter repository:

null

Then, depending on the platform the exporter is hosted on, fork it to your own repository. Most exporters are hosted on GitHub which provides an easy way to do that, simply by clicking on the Fork repository button at the top of the repository:

null

We also maintain a big repository of all exporters build with new Pulsar 2.0, and eventually all exporters will be moved there. If you are interested in the new exporters, fork this repository instead: https://github.com/Supernova-Studio/exporters.

2. Prepare for local testing

Next, you'll want to prepare the exporter for local testing:

  1. You'll need VS Code for this step, as we have built a VS Code extension that makes development of the exporter a breeze.
  2. Make sure you have the VS Code extension setup.
  3. Clone the forked exporter to your file system.
  4. Open the root folder of the forked exporter in the VS Code.

If you have gone through all the steps, you are ready to start developing your own version of the exporter! Try to run the exporter using Supernova extension panel against your design system, like this:

null

Once the exporter finishes execution, a new folder called .build will appear in the root folder of the exporter, which will contain your exported code. You'll also know that export finished because of the information message in the output panel of the VS Code interface:

null

3. Modify the exporter package ID

Because every exporter must be unique within the Supernova ecosystem, you must modify the exporter ID before you will be able to use it in your workspace. To do so, locate file exporter.json in the root of exporter directory and change id property to something that describes your exporter.

We recommend reverse dot notation for your id in the format of [company]/[exporter-name]. For Supernova, such exporter id would look like: supernovaio.exporter-css.

You can also change the name in the package.json file but this step is optional, as the Supernova system validates exporter.json rather than package.json when installing the package.

4. Start customizing!

We have prepared an entire guide that walks you through the anatomy of the exporter and the process of building them. Read it to discover what's possible!

5. Contribute the package

Once you have done the changes and you are happy with the exporter you have running locally, it is time to upload it to your workspace so you can automate the delivery to your repositories. Read the contribution guide to learn how to make the new exporter package available to everyone.