DEV Community

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

Posted on • Updated on

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

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 3.0, I discussed how npx shadcn-ui add command is registered. We will look at few more lines of code from packages/cli/src/commands/add.ts.

const cwd = path.resolve(options.cwd)

if (!existsSync(cwd)) {
  logger.error(\`The path ${cwd} does not exist. Please try again.\`)
  process.exit(1)
}

const config = await getConfig(cwd)
if (!config) {
  logger.warn(
    \`Configuration is missing. Please run ${chalk.green(
      \`init\`
    )} to create a components.json file.\`
  )
  process.exit(1)
}

const registryIndex = await getRegistryIndex()
Enter fullscreen mode Exit fullscreen mode

So what’s happening in the above code snippet?

  1. Check if the cwd exists.
  2. getConfig function.
  3. getRegistryIndex.

Check if the cwd exists.

This code checks the current directory exists and logs an error if it doesn’t.

existsSync is imported from “fs” at the top of add.ts file.

getConfig function

getConfig is not as simple as it looks like.

const config = await getConfig(cwd)
if (!config) {
  logger.warn(
    \`Configuration is missing. Please run ${chalk.green(
      \`init\`
    )} to create a components.json file.\`
  )
  process.exit(1)
}
Enter fullscreen mode Exit fullscreen mode

getConfig is imported from a different file named get-config. Reason behind this could be that context matters when it comes where you place your function. For example, logically, a function named getConfig can never be placed in a file named get-project-info.

export async function getConfig(cwd: string) {
  const config = await getRawConfig(cwd)

  if (!config) {
    return null
  }

  return await resolveConfigPaths(cwd, config)
}
Enter fullscreen mode Exit fullscreen mode

This function calls another function named getRawConfig.

I explained in great detail how getConfig works in the article Part 2.2

getRegistryIndex

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

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

A simple utility function that fetches index.json available at https://ui.shadcn.com/registry/index.json

Conclusion:

Once the options and the argument passed to add command in shadcn-ui CLI, In the action, there is a lot of code, about 218 lines in add.ts. I picked a few lines of code that followed part 3.0 explanation and discussed about

  1. Check if the cwd exists.

This code checks the current directory exists and logs an error if it doesn’t.

existsSync is imported from “fs” at the top of add.ts file.

2. getConfig function.

getConfig is imported from a different file named get-config. Reason behind this could be that context matters when it comes where you place your function. For example, logically, a function named getConfig can never be placed in a file named get-project-info.

I explained in great detail how getConfig works in the article Part 2.2

3. getRegistryIndex.

A simple utility function that fetches index.json available at https://ui.shadcn.com/registry/index.json

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/commands/add.ts
  2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-config.ts#L55
  3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-config.ts#L91
  4. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L19C1-L27C2

Top comments (0)