shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7
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.6, we looked at function getTsConfigAliasPrefix that returns the alias used in paths in your project’s ts-config.json.
Let’s move on to the next line of code.
At L84, it is a simple check that returns null if any of the projectType or tailwindCssFile or tsConfigAliasPrefix does not exist.
Let’s learn more about isTypescriptProject(cwd)
const isTsx = await isTypeScriptProject(cwd)
isTypescriptProject is a function imported from ui/packages/cli/src/utils/get-project-info.ts and this function checks if the cwd (current working directory) has a tsconfig.json file.
export async function isTypeScriptProject(cwd: string) {
// Check if cwd has a tsconfig.json file.
return pathExists(path.resolve(cwd, "tsconfig.json"))
}
pathExists
pathExists is a function imported from fs-extra
import fs, { pathExists } from "fs-extra"
Conclusion:
To check if a project uses TypeScript, you could do the same thing that shadcn-ui/ui CLI package does. That is, check if tsconfig.json path exists in the given cwd using pathExists function provided by fs-extra.
Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at [email protected]
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects