This content originally appeared on DEV Community and was authored by Ramu Narasinga
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.
Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch
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
- 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
Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch
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
Build shadcn-ui/ui from scratch
References:
- https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts
- https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-config.ts#L55
- https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-config.ts#L91
- https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L19C1-L27C2
This content originally appeared on DEV Community and was authored by Ramu Narasinga
Ramu Narasinga | Sciencx (2024-07-19T22:01:53+00:00) shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 3.1. Retrieved from https://www.scien.cx/2024/07/19/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-3-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.