How to create and use custom registry?

[xecei]

I want to try to create an internal library and connect it to sly/cli. Is there any guide for this? I saw REGISTRY_URL=http://localhost:3000 npx @sly-cli/sly , but there is no any other documentation for this case

[jacobparis]

I've been slow to add documentation here since I think I can improve the contribution process a lot still. Right now you need to create two files and edit one, and I think I can get it down to just adding a single file (or cloning from a template).

Local Setup

• Clone the repo and run the site with npm run dev -w site
• use REGISTRY_URL=http://localhost:3000/ npx @sly-cli/sly add to connect to it locally
• once you add a library, you should see it in the "configure libraries" section on the CLI. I think there's a bug with the --no-cache flag where it stops it from writing to the cache but not always reading from it (I will fix this), but you can use npx @sly-cli/sly refresh to clear the cache at any time which should make them all appear.

Adding a library

There are three steps to adding a library

• it needs an index route (site/app/routes/registry+/draft-ui[.json].ts) that returns JSON for all the items in the library
• it needs an item route (site/app/routes/registry+/draft-ui.$name[.json].ts) that returns JSON for an individual item
• the main registry index needs to include your library's index too (site/app/routes/registry+/index[.json].ts)

I'd recommend just copy/pasting the two files from an existing library (like draft UI above) and editing it to return your component data instead. There are helper functions to fetch from Github since that's where most of them are, but at the end of the day the registry is just returning URLs and some meta data so you could serve it from anywhere

Response schema

In site/app/schemas.ts you can see the zod schemas that everything conforms to. If you're just serving from github you can copy/paste an existing library and not have to deal with these, but if you're doing something more custom then you might need to know about them

The library index site/app/routes/registry+/draft-ui[.json].ts returns a resources array that looks like this

• name: the component name you'll see in the CLI
• dependencies: any npm dependencies this component needs
• devDependencies: same same but for dev dependencies
• registryDependencies: other components in the same library that it depends on that Sly will install first. For example if your Dialog component uses a Popover internally, the popover could be a registryDependency.

The library item route site/app/routes/registry+/draft-ui.$name[.json].ts returns the same as above, except only one item, and it's extended with this files array. Each file has name which is the filename it should create, and content which is the file contents.

Transformers

In the sly.json that you get after you add a library, there's a transformers array that can point to typescript files. When you install a component, it will be passed through these functions in order (string input, string output) before being saved. If you have multiple different repos with styling differences, or if some use the "use client" tags and some don't, for example, then each one could provide its own transformers to modify the components to match. If not, you probably won't get much use out of this feature for a private registry. You could also just modify the library endpoints to manipulate the files further there.

[xecei]

Thank you for help! :)