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

Summarize this content to 400 words in Persian Lang
می خواستم بدانم shadcn-ui CLI چگونه کار می کند. در این مقاله، کد مورد استفاده برای ساخت shadcn-ui/ui CLI را مورد بحث قرار می‌دهم.

در قسمت 2.10، تابع getRegistryBaseColors، دستورات، ایجاد components.json و solveConfigPaths را بررسی کردیم.

اکنون که متوجه شدیم تابع promptForMinimalConfig چگونه کار می کند، زمان آن فرا رسیده است که به نحوه عملکرد تابع runInit بپردازیم.

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

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

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

این تابع نسبتاً بزرگ است، بیایید این تحلیل را با مطالعه تکه‌های کد کوچک تجزیه کنیم.

خوب، این کد قبلاً دارای نظراتی است که مختص عملیات هستند. می‌توانیم همین نظرات را دنبال کنیم تا این تحلیل را به بخش‌هایی تقسیم کنیم.

اطمینان حاصل کنید که همه دایرکتوری های مسیرهای حل شده وجود دارند.
پیکربندی tailwind را بنویسید.
فایل css بنویس
فایل cn را بنویسید.
وابستگی ها را نصب کنید.

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

اطمینان حاصل کنید که همه دایرکتوری های مسیرهای حل شده وجود دارند.

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

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

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

در مقاله 2.10، من در مورد نحوه افزودن شیء کانفیگ حل شدهPaths صحبت کردم.

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

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

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

کد بالا از مسیر استفاده می کند. متد path.extname() پسوند مسیر را از آخرین وقوع . (نقطه) کاراکتر تا انتهای رشته در آخرین قسمت مسیر. اگر وجود ندارد. در آخرین بخش از مسیر، یا اگر وجود ندارد. کاراکترهایی غیر از اولین کاراکتر نام پایه مسیر (به path.basename() مراجعه کنید)، یک رشته خالی برگردانده می شود.

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

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

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

existsSync تابعی از بسته “fs” است که اگر مسیر وجود داشته باشد true و در غیر این صورت false برمی گرداند.

اگر دایرکتوری وجود نداشته باشد، از fs.mkdir برای ایجاد دایرکتوری استفاده می شود.

نتیجه:

اکنون که فهمیدم تابع promptForMinimalConfig چگونه کار می کند، زمان آن فرا رسیده است که به نحوه عملکرد تابع runInit در کد منبع مرتبط shadcn-ui/ui CLI بپردازیم.

تابع runInit نسبتاً بزرگ است، اجازه دهید این تحلیل را با مطالعه تکه‌های کد کوچک تجزیه کنیم. این قبلاً نظراتی دارد که توضیح می دهد چه کاری انجام می دهد. این عملیات همراه با نظرات به شرح زیر است:

اطمینان حاصل کنید که همه دایرکتوری های مسیرهای حل شده وجود دارند.
پیکربندی tailwind را بنویسید.
فایل css بنویس
فایل cn را بنویسید.
وابستگی ها را نصب کنید.

من بحث کردم که چگونه دستور init shadcn با استفاده از existsSync از بسته “fs” اطمینان می دهد که همه دایرکتوری های مسیرهای حل شده وجود دارند، اگر دایرکتوری وجود نداشته باشد، این تابع به سادگی یک dir جدید با استفاده از mkdir ایجاد می کند.

آیا می خواهید یاد بگیرید که چگونه 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 را از ابتدا بسازید

منابع:

https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L81

https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/init.ts#L307

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

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

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