> 웹 프론트엔드 > JS 튜토리얼 > shadcn-ui/ui 코드베이스 분석: shadcn-ui CLI는 어떻게 작동합니까? — 1부

shadcn-ui/ui 코드베이스 분석: shadcn-ui CLI는 어떻게 작동합니까? — 1부

WBOY
풀어 주다: 2024-07-18 10:28:50
원래의
347명이 탐색했습니다.

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.10, we looked at getRegistryBaseColors function, prompts, creating components.json and resolveConfigPaths.

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

Now that we understood how promptForMinimalConfig function works, it is time we move onto find out how runInit function works.

runInit

export async function runInit(cwd: string, config: Config) {
  const spinner = ora(\`Initializing project...\`)?.start()

  // Ensure all resolved paths directories exist.
  for (const \[key, resolvedPath\] of Object.entries(config.resolvedPaths)) {
    // Determine if the path is a file or directory.
    // TODO: is there a better way to do this?
    let dirname = path.extname(resolvedPath)
      ? path.dirname(resolvedPath)
      : resolvedPath

    // If the utils alias is set to something like "@/lib/utils",
    // assume this is a file and remove the "utils" file name.
    // TODO: In future releases we should add support for individual utils.
    if (key === "utils" && resolvedPath.endsWith("/utils")) {
      // Remove /utils at the end.
      dirname = dirname.replace(/\\/utils$/, "")
    }

    if (!existsSync(dirname)) {
      await fs.mkdir(dirname, { recursive: true })
    }
  }

  const extension = config.tsx ? "ts" : "js"

  const tailwindConfigExtension = path.extname(
    config.resolvedPaths.tailwindConfig
  )

  let tailwindConfigTemplate: string
  if (tailwindConfigExtension === ".ts") {
    tailwindConfigTemplate = config.tailwind.cssVariables
      ? templates.TAILWIND\_CONFIG\_TS\_WITH\_VARIABLES
      : templates.TAILWIND\_CONFIG\_TS
  } else {
    tailwindConfigTemplate = config.tailwind.cssVariables
      ? templates.TAILWIND\_CONFIG\_WITH\_VARIABLES
      : templates.TAILWIND\_CONFIG
  }

  // Write tailwind config.
  await fs.writeFile(
    config.resolvedPaths.tailwindConfig,
    template(tailwindConfigTemplate)({
      extension,
      prefix: config.tailwind.prefix,
    }),
    "utf8"
  )

  // Write css file.
  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
  if (baseColor) {
    await fs.writeFile(
      config.resolvedPaths.tailwindCss,
      config.tailwind.cssVariables
        ? config.tailwind.prefix
          ? applyPrefixesCss(baseColor.cssVarsTemplate, config.tailwind.prefix)
          : baseColor.cssVarsTemplate
        : baseColor.inlineColorsTemplate,
      "utf8"
    )
  }

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

  spinner?.succeed()

  // Install dependencies.
  const dependenciesSpinner = ora(\`Installing dependencies...\`)?.start()
  const packageManager = await getPackageManager(cwd)

  // TODO: add support for other icon libraries.
  const deps = \[
    ...PROJECT\_DEPENDENCIES,
    config.style === "new-york" ? "@radix-ui/react-icons" : "lucide-react",
  \]

  await execa(
    packageManager,
    \[packageManager === "npm" ? "install" : "add", ...deps\],
    {
      cwd,
    }
  )
  dependenciesSpinner?.succeed()
}
로그인 후 복사

This function is rather large, let’s break this analysis down by studying small code chunks.

Well, this code already has some comments added that are specific to the operations. We can follow the same comments to break this analysis down into parts.

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

In this article, let’s find out how shadcn-ui/ui CLI ensures all resolved paths directories exist.

Ensure all resolved paths directories exist.

// Ensure all resolved paths directories exist.
  for (const \[key, resolvedPath\] of Object.entries(config.resolvedPaths)) {
    // Determine if the path is a file or directory.
    // TODO: is there a better way to do this?
    let dirname = path.extname(resolvedPath)
      ? path.dirname(resolvedPath)
      : resolvedPath

    // If the utils alias is set to something like "@/lib/utils",
    // assume this is a file and remove the "utils" file name.
    // TODO: In future releases we should add support for individual utils.
    if (key === "utils" && resolvedPath.endsWith("/utils")) {
      // Remove /utils at the end.
      dirname = dirname.replace(/\\/utils$/, "")
    }

    if (!existsSync(dirname)) {
      await fs.mkdir(dirname, { recursive: true })
    }
  }
로그인 후 복사

In article 2.10, I talked about how config has resolvedPaths object is added.

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

// Determine if the path is a file or directory.
// TODO: is there a better way to do this?
let dirname = path.extname(resolvedPath)
  ? path.dirname(resolvedPath)
  : resolvedPath
로그인 후 복사

The above code uses path. The path.extname() method returns the extension of the path, from the last occurrence of the . (period) character to end of string in the last portion of the path. If there is no . in the last portion of the path, or if there are no . characters other than the first character of the basename of path (see path.basename()) , an empty string is returned.

// If the utils alias is set to something like "@/lib/utils",
// assume this is a file and remove the "utils" file name.
// TODO: In future releases we should add support for individual utils.
if (key === "utils" && resolvedPath.endsWith("/utils")) {
  // Remove /utils at the end.
  dirname = dirname.replace(/\\/utils$/, "")
}
로그인 후 복사

The comment in the above code explains it all.

if (!existsSync(dirname)) {
  await fs.mkdir(dirname, { recursive: true })
}
로그인 후 복사

existsSync is a function from “fs” package, returns true if the path exists, false otherwise.

if the directory does not exist, fs.mkdir is used to create the directory.

Conclusion:

Now that I understood how promptForMinimalConfig function works, it is time to move onto finding out how runInit function works in the shadcn-ui/ui CLI related source code.

runInit function is rather large, let’s break this analysis down by studying small code chunks. This already has some comments explaining what it does. These operations with comments are as follows:

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

I discussed how shadcn’s init command ensures all resolved paths directories exist by using existsSync from “fs” package, if the directory does not exist, this function simply creates a new dir using mkdir.

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#L81
  2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L307

위 내용은 shadcn-ui/ui 코드베이스 분석: shadcn-ui CLI는 어떻게 작동합니까? — 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿