Output file types

In the last chapter, we went over the main export function and how it shapes what the exporter ultimately produces.

If you watched closely, you might have noticed one strange thing. In the type signature, the output is defined as Array<AnyOutputFile>:

                                                        
                                                        
                                                            Pulsar.export(async (sdk: Supernova, context: PulsarContext): Promise<Array<AnyOutputFile>>
                                                        
                                                            

However, in the provided example, we have returned a file of type text:

                                                        
                                                        
                                                            Pulsar.export(async (sdk: Supernova, context: PulsarContext): Promise<Array<AnyOutputFile>> => {
                                                        
                                                          // Create two static files and return it
                                                          return [
                                                            FileHelper.createTextFile({
                                                              relativePath: "./styles/",
                                                              fileName: "colors.css",
                                                              content: ":root {}",
                                                            })
                                                          ]
                                                        })
                                                        
                                                            

So, what are the types of files that the exporter can retrieve and how do they differ?

Output File Types

There are three main types of files you can return:

• OutputTextFile
• OutputBinaryFile
• OutputCopyRemoteUrlFile

Each file is declared differently and each behaves differently when written to the output.

OutputTextFile

This type of file is very simple, and allows you to copy any arbitrary string to the destination. You can build it easily using the FileHelper.createTextFile method:

                                                        
                                                        
                                                            FileHelper.createTextFile({
                                                           relativePath: "./styles/",
                                                           fileName: "colors.css",
                                                           content: ":root {}",
                                                        })
                                                        
                                                            

• relativePath defines where the file should be located in relation to the root export folder.
• fileName defines how the file will be named on the output.
• content is what gets written to the relativePath + fileName destination.

OutputBinaryFile

This type of file is tailored for non-textual data such as images, audio, or any other binary content that you create during the exporter run. The difference between binary and text is that the binary file doesn't change the encoding of the data, while the text files are always written as UTF-8 encoded text files. It requires an ArrayBuffer for the data. You can utilize the FileHelper.createBinaryFile method to generate it:

                                                        
                                                        
                                                            FileHelper.createBinaryFile({
                                                           relativePath: "./assets/images/",
                                                           fileName: "profile.jpg",
                                                           data: myArrayBuffer, // This should be an instance of ArrayBuffer containing your binary data
                                                        })
                                                        
                                                            

• relativePath defines where the binary file should be located in relation to the root export folder.
• fileName defines how the file will be named on the output.
• data is the binary content (in the form of an ArrayBuffer) that gets written to the relativePath + fileName destination.

OutputCopyRemoteUrlFile

This type is specialized for copying content from a given URL to a destination path.

Instead of sending the actual content, you send the source URL and the system will copy the file from that URL to the specified location during the write phase of the export. Utilize the FileHelper.createCopyUrlFile method to create this:

                                                        
                                                        
                                                            FileHelper.createCopyUrlFile({
                                                           relativePath: "./assets/videos/",
                                                           fileName: "tutorial.mp4",
                                                           url: "https://example.com/videos/tutorial.mp4",
                                                        })
                                                        
                                                            

• relativePath defines where the file from the URL should be saved in relation to the root export folder.
• fileName defines how the file will be named on the output.
• url is the source URL from which the file will be copied.

Ensure the URL provided is accessible and the destination has the necessary permissions to copy the content from the source. This file type is immensely useful when working with assets. You can check the SVG-to-React exporter for an advanced example of how to use it to its fullest potential.