تجزیه و تحلیل پایگاه کد shadcn-ui/ui: صفحه “Blocks” چگونه ساخته می شود – قسمت 1

Summarize this content to 400 words in Persian Lang
در این مقاله، نحوه ساخت صفحه Blocks در ui.shadcn.com را مورد بحث قرار می دهم. صفحه Blocks دارای ابزارهای بسیار زیادی استفاده شده است، از این رو من این تجزیه و تحلیل صفحه Blocks را به 5 قسمت تقسیم کردم.

تجزیه و تحلیل پایگاه کد shadcn-ui/ui: صفحه “Blocks” چگونه ساخته می شود – قسمت 1
تجزیه و تحلیل پایگاه کد shadcn-ui/ui: صفحه “Blocks” چگونه ساخته می شود – قسمت 2 (به زودی)
تجزیه و تحلیل پایگاه کد shadcn-ui/ui: صفحه “Blocks” چگونه ساخته می شود – قسمت 3 (به زودی)
تجزیه و تحلیل پایگاه کد shadcn-ui/ui: صفحه “Blocks” چگونه ساخته می شود – قسمت 4 (به زودی)
تجزیه و تحلیل پایگاه کد shadcn-ui/ui: صفحه “Blocks” چگونه ساخته می شود – قسمت 5 (به زودی)

در قسمت 1 موارد زیر را بررسی خواهیم کرد:

کجا می توان کد صفحه بلوک ها را در مخزن shadcn-ui/ui پیدا کرد؟
تابع getAllBlockIds
عملکرد _getAllBlocks

این توابع بیشتر توابع کاربردی دیگر را فراخوانی می کنند که در قسمت های دیگر توضیح داده خواهد شد.

کجا می توان کد صفحه بلوک ها را در مخزن shadcn-ui/ui پیدا کرد؟

blocks/page.tsx جایی است که کد مربوط به صفحه Blocks را در مخزن shadcn-ui/ui پیدا خواهید کرد.

فقط به این دلیل که فقط 10 خط کد دارد به این معنی نیست که یک صفحه ساده است، در پشت این خطوط اتفاقات زیادی وجود دارد، به خصوص در lib/blocks.ts، اما نگران نباشید، ما توابع کاربردی مورد استفاده را درک خواهیم کرد. در ادامه این مقاله و سایر بخش‌ها نیز به طور عمیق.

BlocksPage بلوک‌ها را از تابعی به نام getAllBlockIds() دریافت می‌کند که از lib/blocks وارد می‌شود و این بلوک‌ها با یک مؤلفه BlockDisplay که بلوک‌ها را در صفحه Blocks نشان می‌دهد نگاشت می‌شوند. بیایید دریابیم که در getAllBlockIds() چیست

تابع getAllBlockIds

قطعه کد زیر از lib/blocks.ts انتخاب شده است

export async function getAllBlockIds(
style: Style\[“name”\] = DEFAULT\_BLOCKS\_STYLE
) {
const blocks = await \_getAllBlocks(style)
return blocks.map((block) => block.name)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این قطعه کد توضیحی است، پارامتر استایل یک مقدار پیش‌فرض DEFAULT_BLOCKS_STYLE دریافت می‌کند زیرا در صفحه Blocks، همانطور که در زیر نشان داده شده است، getAllBlockIds را بدون هیچ پارامتری فراخوانی می‌کنیم:

const blocks = await getAllBlockIds()

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اما صبر کنید، چه ارزشی دارد DEFAULT\_BLOCKS\_STYLE?

در خط 14 در lib/blocks، کد زیر را خواهید یافت:

const DEFAULT\_BLOCKS\_STYLE = “default” satisfies Style\[“name”\]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

“پیش‌فرض” Style را برآورده می‌کند[“name”]، سبک از ثبت / سبک است. من فقط کیفیت Typescript نوشته شده در این shadcn-ui/ui را تحسین می کنم. بنابراین، _getAllBlocks با پارامتری به نام استایل فراخوانی می‌شود که به صورت پیش‌فرض آغاز می‌شود. تا اینجا، کد مستقیم است. حالا بیایید بفهمیم که در _getAllBlocks چیست

عملکرد _getAllBlocks

قطعه کد زیر از lib/blocks.ts انتخاب شده است

async function \_getAllBlocks(style: Style\[“name”\] = DEFAULT\_BLOCKS\_STYLE) {
const index = z.record(registryEntrySchema).parse(Index\[style\])

return Object.values(index).filter(
(block) => block.type === “components:block”
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حتی اگر getAllBlockIds از بالا این تابع را با یک پارامتر فراخوانی می کند، این تابع همچنان دارای یک مقدار پیش فرض برای پارامتر style است.

const index = z.record(registryEntrySchema).parse(Index\[style\])

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد بالا دارای موارد زیر است:

z.record

طرحواره رکورد در Zod برای اعتبارسنجی انواعی مانند Record استفاده می شود. این به ویژه برای ذخیره یا ذخیره اقلام توسط ID مفید است.

registryEntrySchema

registryEntrySchema یک طرح واره برای بلوک ها تعریف می کند

export const registryEntrySchema = z.object({
name: z.string(),
description: z.string().optional(),
dependencies: z.array(z.string()).optional(),
devDependencies: z.array(z.string()).optional(),
registryDependencies: z.array(z.string()).optional(),
files: z.array(z.string()),
source: z.string().optional(),
type: z.enum(\[
“components:ui”,
“components:component”,
“components:example”,
“components:block”,
\]),
category: z.string().optional(),
subcategory: z.string().optional(),
chunks: z.array(blockChunkSchema).optional(),
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تجزیه (شاخص[style])

تجزیه یک روش طرحواره برای بررسی معتبر بودن داده ها است. اگر اینطور باشد، یک مقدار با اطلاعات نوع کامل برگردانده می شود! در غیر این صورت، یک خطا پرتاب می شود.

مثال:

const stringSchema = z.string();

stringSchema.parse(“fish”); // => returns “fish”
stringSchema.parse(12); // throws error

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Index از _registry_folder وارد شده و شامل تمام اجزای مورد استفاده در shadcn-ui/ui است.

به نظر می‌رسد این فایل به‌طور خودکار توسط scripts/build-registry.ts تولید می‌شود و در بسته CLI نیز برای افزودن مؤلفه‌های shadcn به پروژه شما استفاده می‌شود.

اساساً ما شاخص را تأیید می کنیم[“default”] در مقابل طرح رجیستری برای اطمینان از معتبر بودن کد تولید شده خودکار و آماده بودن برای پردازش بیشتر مانند نمایش در صفحه بلوک ها.

_getAllBlocks بلوک ها را بر اساس نوع بلوک فیلتر می کند که در زیر نشان داده شده است:

return Object.values(index).filter(
(block) => block.type === “components:block”
)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به این ترتیب می توانید اجزایی را ببینید که مختص صفحه Blocks هستند.

نتیجه:

ما دو تابع مهم ماژول به نام‌های getAllBlockIds و _getAllBlocks را بررسی کردیم. به نظر من این کد کاملاً توضیحی است، من روشی را تحسین می‌کنم که از اعتبارسنجی طرح‌واره رکورد zod در فهرست رجیستری تولید خودکار json استفاده می‌شود.

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

درمورد من:

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

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

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

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

منابع:

https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/blocks/page.tsx

https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L20

https://github.com/shadcn-ui/ui/blob/main/apps/www/lib/blocks.ts#L75

https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/schema.ts#L16

export async function getAllBlockIds(
  style: Style\["name"\] = DEFAULT\_BLOCKS\_STYLE
) {
  const blocks = await \_getAllBlocks(style)
  return blocks.map((block) => block.name)
}

const blocks = await getAllBlockIds()

const DEFAULT\_BLOCKS\_STYLE = "default" satisfies Style\["name"\]

async function \_getAllBlocks(style: Style\["name"\] = DEFAULT\_BLOCKS\_STYLE) {
  const index = z.record(registryEntrySchema).parse(Index\[style\])

  return Object.values(index).filter(
    (block) => block.type === "components:block"
  )
}

const index = z.record(registryEntrySchema).parse(Index\[style\])

export const registryEntrySchema = z.object({
  name: z.string(),
  description: z.string().optional(),
  dependencies: z.array(z.string()).optional(),
  devDependencies: z.array(z.string()).optional(),
  registryDependencies: z.array(z.string()).optional(),
  files: z.array(z.string()),
  source: z.string().optional(),
  type: z.enum(\[
    "components:ui",
    "components:component",
    "components:example",
    "components:block",
  \]),
  category: z.string().optional(),
  subcategory: z.string().optional(),
  chunks: z.array(blockChunkSchema).optional(),
})

const stringSchema = z.string();

stringSchema.parse("fish"); // => returns "fish"
stringSchema.parse(12); // throws error

return Object.values(index).filter(
    (block) => block.type === "components:block"
  )