تجزیه و تحلیل پایگاه کد shadcn-ui/ui: shadcn-ui CLI چگونه کار می کند؟ – قسمت 3.0

می خواستم بدانم shadcn-ui CLI چگونه کار می کند. در این مقاله، کد مورد استفاده برای ساخت shadcn-ui/ui CLI را مورد بحث قرار می‌دهم.

در قسمت 2.0 تا 2.15 در مورد چگونگی بحث صحبت کردم npx shadcn-ui init زیر کاپوت کار می کند

ما به چگونگی نگاه خواهیم کرد npx shadcn-ui اضافه کنید در این قسمت 3.x کار می کند.

از آنجایی که فایل packages/cli/src/commands/add.ts بزرگ است، این تجزیه و تحلیل را به بخش‌هایی تقسیم می‌کنم و در مورد تکه‌های کد صحبت می‌کنم و توضیح می‌دهم که چگونه کار می‌کند.

در این مقاله به بررسی مفاهیم می پردازیم:

1. دستور اضافه کنید.
2. پکیج Commander.js
3. دستور add چگونه ثبت می شود؟
4. استدلال و گزینه ها
5. addOptionsSchema

آیا می خواهید یاد بگیرید که چگونه shadcn-ui/ui را از ابتدا بسازید؟ وارسی ساختن از ابتدا

دستور اضافه کنید

export const add = new Command()
  .name("add")
  .description("add a component to your project")
  .argument("\[components...\]", "the components to add")
  .option("-y, --yes", "skip confirmation prompt.", true)
  .option("-o, --overwrite", "overwrite existing files.", false)
  .option(
    "-c, --cwd ",
    "the working directory. defaults to the current directory.",
    process.cwd()
  )
  .option("-a, --all", "add all available components", false)
  .option("-p, --path ", "the path to add the component to.")
  .action(async (components, opts) => {
    try {
      const options = addOptionsSchema.parse({
        components,
        ...opts,
      })

ما با نحوه اضافه شدن دستور add شروع می کنیم. قطعه کد بالا از packages/cli/src/commands/add.ts انتخاب شده است.

پکیج Commander.js:

فرمان از commander.js وارد شده است، یک راه حل کامل برای رابط های خط فرمان node.js.

دستور add چگونه ثبت می شود؟

نحوه ثبت دستور add به این صورت است که اگر این src/commands/index.ts را در یک تب جدید باز کنید، این کد را مطابق شکل زیر خواهید یافت.

دستورات به طور جداگانه در پوشه ای به نام دستورات برای اهداف نگهداری ایجاد می شوند. اگر می‌خواهید این مخزن shadcn-ui/ui را فورک کنید و می‌خواهید دستور خود را اضافه کنید، این یکی از راه‌های انجام آن است.

استدلال و گزینه ها

هنگامی که چیزی مانند npx shadcn-ui می نویسید، دکمه افزودن دکمه، در اینجا یک آرگومان است.

.argument("\[components...\]", "the components to add")

قطعه کد بالا از اینجا انتخاب شده است.

شما همچنین گزینه هایی دارید که با دستور add شما مطابق شکل زیر همراه هستند:

.option("-y, --yes", "skip confirmation prompt.", true)
.option("-o, --overwrite", "overwrite existing files.", false)
.option(
  "-c, --cwd ",
  "the working directory. defaults to the current directory.",
  process.cwd()
)
.option("-a, --all", "add all available components", false)
.option("-p, --path ", "the path to add the component to.")

و سپس شما باید اقدام کنید

.action(async (components, opts) => {

addOptionsSchema

 const options = addOptionsSchema.parse({
  components,
  ...opts,
})

const cwd = path.resolve(options.cwd)

if (!existsSync(cwd)) {
  logger.error(\`The path ${cwd} does not exist. Please try again.\`)
  process.exit(1)
}

قطعه بالا از add.ts انتخاب شده است

addOptionsSchema درست بالای تابع add اعلام شده است که در زیر نشان داده شده است:

const addOptionsSchema = z.object({
  components: z.array(z.string()).optional(),
  yes: z.boolean(),
  overwrite: z.boolean(),
  cwd: z.string(),
  all: z.boolean(),
  path: z.string().optional(),
})

این طرح اساساً اطمینان می دهد که همه گزینه ها و آرگومان ها قبل از پردازش بیشتر آنها معتبر هستند.

نتیجه:

در قسمت 2.0 تا 2.15، در مورد نحوه عملکرد npx shadcn-ui init در زیر هود بحث کردم. زمان آن رسیده است که مقاله‌های من به نسخه‌ای دست یابیم. در مقالات 3.x، در مورد نحوه عملکرد npx shadcn-ui add در زیر هود خواهم نوشت. لطفا توجه داشته باشید که semver برای مقالات من قابل استفاده نیست lol.

فرمان از commander.js وارد شده است، یک راه حل کامل برای رابط های خط فرمان node.js. نحوه ثبت دستور add با npx shadcn-ui CLI به این صورت است که اگر این src/commands/index.ts را در یک تب جدید باز کنید، این کد را مطابق شکل زیر خواهید یافت:

program.addCommand(init).addCommand(add).addCommand(diff)

یک آرگومان وجود دارد که یک نام کامپوننت یا آرایه ای از نام مؤلفه ها را می پذیرد، به همین دلیل است که چیزی مانند npx shadcn-ui add Button می نویسید.

دکمه اینجا یک استدلال است. دستور add نیز گزینه های کمی دارد مانند -y، -o، -c، -a، -p. در مورد این موارد در مستندات shadcn-ui CLI بیشتر بخوانید.

addOptionsSchema تضمین می کند که آرگومان ها و گزینه های ارسال شده به دستور add با استفاده از zod معتبر هستند

آیا می خواهید یاد بگیرید که چگونه shadcn-ui/ui را از ابتدا بسازید؟ وارسی ساختن از ابتدا

درمورد من:

وب سایت: https://ramunarasinga.com/

لینکدین: https://www.linkedin.com/in/ramu-narasinga-189361128/

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

ایمیل: ramu.narasinga@gmail.com

shadcn-ui/ui را از ابتدا بسازید

منابع

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts
2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L31C1-L49C9
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/index.ts#L24
4. https://www.npmjs.com/package/commander
5. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L22