DEV Community

Cover image for shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.9
Ramu Narasinga
Ramu Narasinga

Posted on • Edited on

shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.9

I wanted to find out how shadcn-ui CLI works. In this article, I discuss the code used to build the shadcn-ui/ui CLI.

In part 2.8, we looked at function promptForMinimalConfig and its parameters and how the shadcn-ui CLI uses chalk to highlight text in the terminal.

This is a continuation to 2.8, we will look at below concepts in this article.

  1. getRegistryStyles function
  2. fetchRegistry function
  3. stylesSchema

getRegistryStyles function:

getRegistryStyles is imported from utils/registry/index.tsx.

export async function getRegistryStyles() {
  try {
    const \[result\] = await fetchRegistry(\["styles/index.json"\])

    return stylesSchema.parse(result)
  } catch (error) {
    throw new Error(\`Failed to fetch styles from registry.\`)
  }
}
Enter fullscreen mode Exit fullscreen mode

This function fetches the styles registry and parses the result using styles schema.

fetchRegistry function:

getRegistryStyles calls fetchRegistry function with a paramter [“styles/index.json”]. Why is the parameter being an array?

async function fetchRegistry(paths: string\[\]) {
  try {
    const results = await Promise.all(
      paths.map(async (path) => {
        const response = await fetch(\`${baseUrl}/registry/${path}\`, {
          agent,
        })
        return await response.json()
      })
    )

    return results
  } catch (error) {
    console.log(error)
    throw new Error(\`Failed to fetch registry from ${baseUrl}.\`)
  }
}
Enter fullscreen mode Exit fullscreen mode

Notice how the parameter is an array of strings. Because fetchRegistry uses Promise.all and fetches based on path looping through the paths using map. Navigate to https://ui.shadcn.comstyles/index.json, you will find that the below json is fetched when the getRegistryStyles is called.

stylesSchema

stylesSchema is rather a simple schema with just name and label.

export const stylesSchema = z.array(
  z.object({
    name: z.string(),
    label: z.string(),
  })
)
Enter fullscreen mode Exit fullscreen mode

Conclusion:

In this article, I discussed the following concepts:

  1. getRegistryStyles function

getRegistryStyles is imported from utils/registry/index.tsx. This function fetches the styles registry and parses the result using styles schema.

2. fetchRegistry function

getRegistryStyles calls fetchRegistry function with a paramter [“styles/index.json”].

Why is the parameter being an array? Because fetchRegistry uses Promise.all and fetches based on path looping through the paths using map. Navigate to https://ui.shadcn.comstyles/index.json, you will find the styles related json that is fetched when the getRegistryStyles is called.

3. stylesSchema

stylesSchema is a rather simple schema with just name and label.

export const stylesSchema = z.array(
  z.object({
    name: z.string(),
    label: z.string(),
  })
)
Enter fullscreen mode Exit fullscreen mode

Get free courses inspired by the best practices used in open source.

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: ramu.narasinga@gmail.com

Learn the best practices used in open source.

References:

  1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L29
  2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L139
  3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/schema.ts#L26

Top comments (0)