Transforms

Transforms are a way to modify code before it's added to your project. You can use transforms to format code, add comments, or any other code modification you can think of.

Transforms are also pluggable so you can create your own and share them with the community. Here are a few of the officially supported transforms:

Adding transforms

You can add transforms to your config by running the following command:

jsrepo config transform jsrepo-transform-my-transform

This will automatically install the transform and add it to your config:

import { defineConfig } from "jsrepo";
import myTransform from "jsrepo-transform-my-transform"; 

export default defineConfig({
	transforms: [myTransform()], 
});

Transform authors

When creating transforms we recommend you follow a few rules:

1. Name your transform package with the following naming convention: jsrepo-transform-<name> or @<org>/jsrepo-transform-<name>
2. Export the transform as the default export

The name of your transform in the config will be the name of your package without the jsrepo-transform- prefix converted to camel case.

For example:

jsrepo-transform-my-transform -> myTransform
@my-org/jsrepo-transform-my-transform -> myTransform

Official plugins are an exception to this rule to prevent having to name packages like @jsrepo/jsrepo-transform-prettier.

For instance:

@jsrepo/transform-prettier -> prettier
@jsrepo/transform-faster-prettier -> fasterPrettier

Creating your own transform

To demonstrate the power of transforms let's create a simple transform that adds a comment at the top of each file letting the user know what registry the item was added from.

import type { Transform } from "jsrepo";

export default function(): Transform {
	return {
		transform: async (code, fileName, { registryUrl }) => {
			if (fileName.endsWith('.ts') || fileName.endsWith('.js')) {
				return { code: `// Added from ${registryUrl}\n\n${code}` };
			}

			// return nothing since no changes were made
			return { };
		},
	};
}

Now we can use the transform in our config:

import { defineConfig } from "jsrepo";
import addComment from "./src/transform"; 

export default defineConfig({
	transforms: [addComment()], 
});

Now when users add items from the registry they will include the comment at the top of the file letting them know what registry the item was added from:

// Added from https://example.com/registry

export function add(a: number, b: number): number {
	return a + b;
}