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

#javascript #opensource #nextjs #shadcnui

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()

So what’s happening in the above code snippet?

Check if the cwd exists.
getConfig function.
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)
}

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)
}

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.\`)
  }
}

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