shadcn-ui/ui コードベース分析: shadcn-ui CLI はどのように機能しますか? - 一部

shadcn-ui CLI がどのように機能するかを知りたかったのです。この記事では、shadcn-ui/ui CLI の構築に使用されるコードについて説明します。

パート 2.8 では、promptForMinimalConfig 関数とそのパラメータ、および shadcn-ui CLI がチョークを使用してターミナル内のテキストを強調表示する方法について説明しました。

これは 2.8 の続きであり、この記事では以下の概念について説明します。

1. getRegistryStyles 関数
2. fetchRegistry 関数
3. スタイルスキーマ

getRegistryStyles 関数:

getRegistryStyles は utils/registry/index.tsx からインポートされます。

export async function getRegistryStyles() {
  try {
    const \[result\] = await fetchRegistry(\["styles/index.json"\])

    return stylesSchema.parse(result)
  } catch (error) {
    throw new Error(\`Failed to fetch styles from registry.\`)
  }
}

この関数は、スタイル レジストリをフェッチし、スタイル スキーマを使用して結果を解析します。

fetchRegistry 関数:

getRegistryStyles は、パラメータ [“styles/index.json”] を指定して fetchRegistry 関数を呼び出します。パラメーターが配列であるのはなぜですか?

async function fetchRegistry(paths: string\[\]) {
  try {
    const results = await Promise.all(
      paths.map(async (path) => {
        const response = await fetch(\`${baseUrl}/registry/${path}\`, {
          agent,
        })
        return await response.json()
      })
    )

    return results
  } catch (error) {
    console.log(error)
    throw new Error(\`Failed to fetch registry from ${baseUrl}.\`)
  }
}

パラメータが文字列の配列であることに注目してください。 fetchRegistry は Promise.all を使用し、マップを使用してパスをループするパスに基づいてフェッチするためです。 https://ui.shadcn.comstyles/index.json に移動すると、getRegistryStyles が呼び出されたときに以下の json がフェッチされることがわかります。

スタイルスキーマ

stylesSchema は、名前とラベルだけの単純なスキーマです。

export const stylesSchema = z.array(
  z.object({
    name: z.string(),
    label: z.string(),
  })
)

結論：

この記事では、次の概念について説明しました:

1. getRegistryStyles 関数

getRegistryStyles は utils/registry/index.tsx からインポートされます。この関数は、スタイル レジストリを取得し、スタイル スキーマを使用して結果を解析します。

2. fetchRegistry 関数

getRegistryStyles は、パラメータ [“styles/index.json”] を指定して fetchRegistry 関数を呼び出します。

パラメータが配列なのはなぜですか? fetchRegistry は Promise.all を使用し、マップを使用してパスをループするパスに基づいてフェッチするためです。 https://ui.shadcn.comstyles/index.json に移動すると、getRegistryStyles が呼び出されたときに取得されるスタイル関連の json が見つかります。

3.スタイルスキーマ

stylesSchema は、名前とラベルだけを備えたかなり単純なスキーマです。

export const stylesSchema = z.array(
  z.object({
    name: z.string(),
    label: z.string(),
  })
)

shadcn-ui/ui をゼロから構築する方法を学びたいですか? 最初から構築

をチェックしてください

私について：

ウェブサイト: https://ramunarasinga.com/

Linkedin: 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/utils/registry/index.ts#L29
2. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/index.ts#L139
3. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/registry/schema.ts#L26

以上がshadcn-ui/ui コードベース分析: shadcn-ui CLI はどのように機能しますか? - 一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。