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

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.5, we looked at function getTailwindFile that returns the main css file that contains tailwind base imports.

Let’s move on to the next line of code.

After getting the tailwindCSS file, the next step is to get the tsConfig alias prefix.


const tsConfigAliasPrefix = await getTsConfigAliasPrefix(cwd)

getTsConfigAliasPrefix is imported from ui/packages/cli/src/utils/get-project-info.ts and this function returns the alias used in your tsConfig for “./*” or “./src/*”. Let’s find out how.


export async function getTsConfigAliasPrefix(cwd: string) {
  const tsConfig = await loadConfig(cwd)
 
  if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
    return null
  }
 
  // This assume that the first alias is the prefix.
  for (const [alias, paths] of Object.entries(tsConfig.paths)) {
    if (paths.includes("./*") || paths.includes("./src/*")) {
      return alias.at(0)
    }
  }
 
  return null
}

loadConfig

This function loads the tsconfig.json or jsconfig.json. It will start searching from the specified cwd directory. Passing the tsconfig.json or jsconfig.json file directly instead of a directory also works.

Read more about loadConfig from the docs.

Returning alias:


// This assume that the first alias is the prefix.
for (const [alias, paths] of Object.entries(tsConfig.paths)) {
  if (paths.includes("./*") || paths.includes("./src/*")) {
    return alias.at(0)
  }
}

.at is an Array.prototype.at(), using at(0) is equivalent to using alias[0].

From the docs, the at() method is equivalent to the bracket notation when index is non-negative. For example, array[0] and array.at(0) both return the first item. However, when counting elements from the end of the array, you cannot use array[-1] like you may in Python or R, because all values inside the square brackets are treated literally as string properties, so you will end up reading array["-1"], which is just a normal string property instead of an array index.

The usual practice is to access length and calculate the index from that — for example, array[array.length - 1]. The at() method allows relative indexing, so this can be shortened to array.at(-1).

Conclusion:

Judging by this function name “getTsConfigAliasAsPrefix” in shadcn-ui CLI related source code, it is obvious that this function returns the alias prefix from your project based on what you provided in your project’s tsconfig.json.

It uses loadConfig provided by tsconfig-paths (https://www.npmjs.com/package/tsconfig-paths#loadconfig) package that returns an object that looks like below:


{
  resultType: "success";
  absoluteBaseUrl: string;
  paths: { [key: string]: Array<string> };
}

These paths are from your tsconfig.json.

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 ramu.narasinga@gmail.com

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

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

loadConfig

Returning alias:

Conclusion:

About me:

References:

On this page