Outputs

Outputs allow you to customize the way your registry is distributed or more generally what to do with the registry after it's built.

This isn't limited into building your registry into a format that jsrepo can understand you could use it to output documentation or a manifest for your own CLI application.

By default jsrepo ships with two output types:

Distributed - Output your registry as json files in a directory.
Repository - Output your registry as a single json file in the root of your repository.

Here are all the officially available outputs:

Distributed

Output your registry as json files in a directory.

Repository

Output your registry as a single json file in the root of your repository.

shadcn

Output your registry as a shadcn registry.

Creating a custom output

You can create your own output either inline in your config file or as a standalone package.

For this example we will create a standalone package that outputs your registry as a markdown file called REGISTRY.md.

Let's create our output.ts file and import the Output type from jsrepo/outputs:

import type { Output } from "jsrepo/outputs";

export function output(): Output {
    return {
        
    }
}

Next let's define the output key to define how the registry should be output:

src/output.ts

import type { Output } from "jsrepo/outputs";

export const OUTPUT_FILE = "REGISTRY.md";

export function output(): Output {
    return {
        output: async (buildResult, { cwd }) => { 
            let content = `# ${buildResult.name}\n\n`; 
            for (const item of buildResult.items) { 
                content += `## ${item.name}\n\n${item.description}\n\n`; 
            } 
            fs.writeFileSync(path.join(cwd, OUTPUT_FILE), content); 
        }, 
    }
}

The buildResult object contains a bunch of useful information about the registry. You can find the full type here.

Finally we can define the clean key to define how to remove the output file before the next build:

src/output.ts

import type { Output } from "jsrepo/outputs";

export const OUTPUT_FILE = "REGISTRY.md";

export function output(): Output {
    return {
        output: async (buildResult, { cwd }) => {
            let content = `# ${buildResult.name}\n\n`;

            for (const item of buildResult.items) {
                content += `## ${item.name}\n\n${item.description}\n\n`;
            }

            fs.writeFileSync(path.join(cwd, OUTPUT_FILE), content);
        },
        clean: async ({ cwd }) => { 
            const manifestPath = path.join(cwd, OUTPUT_FILE); 
            if (!fs.existsSync(manifestPath)) return; 
            fs.rmSync(manifestPath); 
        }, 
    }
}

Now we can use the output in our config file:

jsrepo.config.mts

import { defineConfig } from "jsrepo";
import { output } from "./src/output";

export default defineConfig({
    registry: {
        name: "my-registry",
        outputs: [output()],
        // ...
    }
});

And the result should look like this:

REGISTRY.md

# my-registry

## button

A button component.

Outputs

Distributed

Repository

shadcn

Creating a custom output

On this page