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.7, we looked at function isTypescriptProject this function checks if the cwd (current working directory) has a tsconfig.json file.
Let’s move on to the next line of code.
.
.
export async function promptForMinimalConfig(
cwd: string,
defaultConfig: Config,
defaults = false
) {
const highlight = (text: string) => chalk.cyan(text)
let style = defaultConfig.style
let baseColor = defaultConfig.tailwind.baseColor
let cssVariables = defaultConfig.tailwind.cssVariables
if (!defaults) {
const styles = await getRegistryStyles()
const baseColors = await getRegistryBaseColors()
const options = await prompts(\[
{
type: "select",
name: "style",
message: \`Which ${highlight("style")} would you like to use?\`,
choices: styles.map((style) => ({
title: style.label,
value: style.name,
})),
},
{
type: "select",
name: "tailwindBaseColor",
message: \`Which color would you like to use as ${highlight(
"base color"
)}?\`,
choices: baseColors.map((color) => ({
title: color.label,
value: color.name,
})),
},
{
type: "toggle",
name: "tailwindCssVariables",
message: \`Would you like to use ${highlight(
"CSS variables"
)} for colors?\`,
initial: defaultConfig?.tailwind.cssVariables,
active: "yes",
inactive: "no",
},
\])
style = options.style
baseColor = options.tailwindBaseColor
cssVariables = options.tailwindCssVariables
}
const config = rawConfigSchema.parse({
$schema: defaultConfig?.$schema,
style,
tailwind: {
...defaultConfig?.tailwind,
baseColor,
cssVariables,
},
rsc: defaultConfig?.rsc,
tsx: defaultConfig?.tsx,
aliases: defaultConfig?.aliases,
})
// Write to file.
logger.info("")
const spinner = ora(\`Writing components.json...\`).start()
const targetPath = path.resolve(cwd, "components.json")
await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8")
spinner.succeed()
return await resolveConfigPaths(cwd, config)
}
Okay, there is a lot going on here, let’s break this down by understanding small chunks of code.
Parameters:
promptForMinimalConfig function is called with the parameters named cwd — this is the current working directory, projectConfig — this is the value returned from getProjectConfig, opts.defaults — this is a CLI argument configured with Commander.js, shown below:
export const init = new Command()
.name("init")
.description("initialize your project and install dependencies")
.option("-y, --yes", "skip confirmation prompt.", false)
.option("-d, --defaults,", "use default configuration.", false)
.option(
"-c, --cwd <cwd>",
"the working directory. defaults to the current directory.",
process.cwd()
)
Chalk
const highlight = (text: string) => chalk.cyan(text)
This line above is picked from to be displayed in your terminal.
Find more details .
export async function getRegistryStyles() {
try {
const \[result\] = await fetchRegistry(\["styles/index.json"\])
return stylesSchema.parse(result)
} catch (error) {
throw new Error(\`Failed to fetch styles from registry.\`)
}
}
This calls a function named fetchRegistry. More on this in the next article.
Conclusion:
Now that getProjectConfig function from shadcn-ui/ui CLI source code analysis is complete, I discussed few more lines of code that followed this function.
There’s a function named promptForMinimalConfig
export async function promptForMinimalConfig(
cwd: string,
defaultConfig: Config,
defaults = false
) {
const highlight = (text: string) => chalk.cyan(text)
let style = defaultConfig.style
let baseColor = defaultConfig.tailwind.baseColor
let cssVariables = defaultConfig.tailwind.cssVariables
...
This function has the prompts such as Which color would you like to use as base color, Which color would you like to use as base color and Would you like to use CSS variables. I haven’t exactly reached that part of code yet to discuss how these prompts are configured but found that highlight is a small util function that applies color to the text that you see in your terminal using chalk package.
Want to learn how to build shadcn-ui/ui from scratch? Check out
Linkedin:
Email:
References:
↗ Original-Artikel auf dev.to lesenVollständiger Original-BerichtAusführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR