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…


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 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:

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:

  1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L84C3-L88C47
  2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L174
  3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L10
  4. https://www.npmjs.com/package/fs-extra


This content originally appeared on DEV Community and was authored by Ramu Narasinga


Print Share Comment Cite Upload Translate Updates
APA

Ramu Narasinga | Sciencx (2024-07-05T20:46:55+00:00) shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7. Retrieved from https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/

MLA
" » shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7." Ramu Narasinga | Sciencx - Friday July 5, 2024, https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/
HARVARD
Ramu Narasinga | Sciencx Friday July 5, 2024 » shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7., viewed ,<https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/>
VANCOUVER
Ramu Narasinga | Sciencx - » shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/
CHICAGO
" » shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7." Ramu Narasinga | Sciencx - Accessed . https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/
IEEE
" » shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7." Ramu Narasinga | Sciencx [Online]. Available: https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/. [Accessed: ]
rf:citation
» shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.7 | Ramu Narasinga | Sciencx | https://www.scien.cx/2024/07/05/shadcn-ui-ui-codebase-analysis-how-does-shadcn-ui-cli-work-part-2-7/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.