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

#javascript #nextjs #opensource #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 1.0 and part 1.1, I discussed the code written in packages/cli/src/index.ts. In part 2.0, I talked about how the commander.js is used along with zod to parse the CLI argument passed. In Part 2.1, we will look at few more lines of code.

const cwd = path.resolve(options.cwd)

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

preFlight(cwd)

We will look at below concepts based on the code snippet above:

path.resolve
Ensure target directory exists
preFlight function
fg.glob

path.resolve

The path.resolve() method resolves a sequence of paths or path segments into an absolute path. (Source)

cwd is a CLI option that you pass when you run the shadcn-ui/ui init command.

The official CLI docs has the below options for the init command.

Usage: shadcn-ui init \[options\]

initialize your project and install dependencies

Options:
  -y, --yes        skip confirmation prompt. (default: false)
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command

Ensure target directory exists

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

This code snippet is self explanatory, it checks if the target directory exists; if it does not, the code logs the message and process exits.

import { existsSync, promises as fs } from "fs"

existsSync is an import function from “fs”.

preFlight function

preFlight is a function that checks that tailwind.config.* file exists, otherwise throws an error.

fg.glob

import fg from "fast-glob"

preFlight validates that tailwind.config.* file exists by using function named glob.

// We need Tailwind CSS to be configured.
const tailwindConfig = await fg.glob("tailwind.config.\*", {
  cwd,
  deep: 3,
  ignore: PROJECT\_SHARED\_IGNORE,
})

fast-glob is a package that provides methods for traversing the file system and returning pathnames that matched a defined set of a specified pattern according to the rules used by the Unix Bash shell with some simplifications, meanwhile results are returned in arbitrary order. Quick, simple, effective. (source)

Conclusion:

We looked at few more lines of code from init.ts command related file. There a couple of safeguarding techniques here, one is if the target directory does not exist, exit the proccess and log an error and the second one is, detecing the tailwind.config.* using fast-glob package since tailwind is required for shadcn-ui to work properly.

Never forget to put your defensive mechanism in case the program fails as it is not always guaranteed to execute successfully.