Eu queria descobrir como funciona a CLI shadcn-ui. Neste artigo, discuto o código usado para construir a CLI shadcn-ui/ui.

Na parte 2.11, vimos a função runInit e como shadcn-ui/ui garante que os diretórios fornecidos em resolvePaths na configuração existam.

As seguintes operações são realizadas na função runInit:

1. Certifique-se de que todos os diretórios de caminhos resolvidos existam.
2. Escreva a configuração do tailwind.
3. Escreva o arquivo css.
4. Escreva o arquivo cn.
5. Instale dependências.

1, 2, 3, 4 acima são abordados nas partes 2.12, 2.13 e 2.14, vamos descobrir como a operação de “Instalar dependências” é feita.

Instalar dependências

O trecho de código abaixo foi escolhido em cli/src/commands/init.ts

// 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()

ora é um girador de terminal elegante e é usado para mostrar a mensagem “Instalando dependências…” quando você executa o comando npx shadcn init.

getPackageManager

getPackageManager são pacotes importados/cli/src/utils/get-package-manager.ts

import { detect } from "@antfu/ni"

export async function getPackageManager(
  targetDir: string
): Promise {
  const packageManager = await detect({ programmatic: true, cwd: targetDir })

  if (packageManager === "yarn@berry") return "yarn"
  if (packageManager === "pnpm@6") return "pnpm"
  if (packageManager === "bun") return "bun"

  return packageManager ?? "npm"
}

Você já usou o npm em um projeto pnpm? Eu fiz isso e muitas vezes ele falha ao instalar o pacote porque você está usando o npm em um projeto pnpm.

@antfu/ni permite que você use o gerenciador de pacotes correto e detect é uma função que fornece o packageManager usado em um determinado projeto baseado em cwd.

Não consigo encontrar nada mencionado sobre o método de detecção no leia-me @antfu/ni do Github. Como você saberia que tal método existe, a menos que você o leia em alguma base de código de código aberto?

executivo

Execa executa comandos em seu script, aplicativo ou biblioteca. Ao contrário dos shells, ele é otimizado para uso programático. Construído sobre o módulo principal child_process. Isto é construído pela lenda, Sindre Sorhus

shadcn-ui/ui CLI usa execa para instalar as dependências necessárias como parte do comando npx shadcn-ui init.

Conclusão

shadcn-ui CLI usa execa, construído pela lenda Sindre Sorhu. Execa é usado para instalar as dependências necessárias em um arquivo de script. Todos nós estamos familiarizados com a execução de comandos de instalação, mas se você quiser instalar alguns pacotes em um script programaticamente, execa pode ser usado.

shadcn-ui CLI detecta o gerenciador de pacotes usado em seu projeto usando o método “detect” de @antfu/ni.

Este artigo marca minha busca para estudar e aprender o que acontece nos bastidores quando você executa o comando npx shadcn-ui init como concluído.

Estou estudando o comando add.

Quer aprender como construir shadcn-ui/ui do zero? Confira construir do zero

Sobre mim:

Site: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

E-mail: [email protected]

Construa shadcn-ui/ui do zero

Referências:

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L382
2. https://www.npmjs.com/package/ora
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-package-manager.ts#L3
4. https://www.npmjs.com/package/@antfu/ni
5. https://github.com/antfu-collective/ni#readme
6. https://github.com/search?q=import {detectar} de "@antfu/ni"&type=code
7. https://www.npmjs.com/package/execa
8. https://github.com/sindresorhus