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.
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:
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:
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/utils/get-project-info.ts#L82C37-L82C59
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L157
https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L11
