Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2024-07-18 06:33:31
Original
670 people have browsed it

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.11, we looked at runInit function and how shadcn-ui/ui ensures directories provided in resolvedPaths in config exist.

The following operations are performed in runInit function:

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

  1. Ensure all resolved paths directories exist.
  2. Write tailwind config.
  3. Write css file.
  4. Write cn file.
  5. Install dependencies.

1, 2, 3 from the above are covered in part 2.12 and 2.13, let’s find out how “Write cn file” operation is done.

Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch

Write cn file

The below code snippet is picked from cli/src/commands/init.ts

// Write cn file.
  await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )
Copy after login

templates.UTILS contains the below code

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`

export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`
Copy after login

cn utility is literally code returned as a string and written to lib/utils when you run shadcn init.

Conclusion:

templates.UTILS variable in packages/cli/src/commands/init.ts contains the cn utility function related code.

export const UTILS = \`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue\[\]) {
  return twMerge(clsx(inputs))
}
\`


export const UTILS\_JS = \`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}
\`
Copy after login

Catch here is, this code is presented as a string into fs.writeFile that writes to a provided path as shown below

await fs.writeFile(
    \`${config.resolvedPaths.utils}.${extension}\`,
    extension === "ts" ? templates.UTILS : templates.UTILS\_JS,
    "utf8"
  )
Copy after login

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/commands/init.ts#L331C3-L356C4
  2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/templates.ts#L1

The above is the detailed content of shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 4. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template