Analyse de la base de code shadcn-ui/ui : comment fonctionne la CLI shadcn-ui ? - Partie

Je voulais découvrir comment fonctionne la CLI shadcn-ui. Dans cet article, je discute du code utilisé pour créer la CLI shadcn-ui/ui.

Dans la partie 2.8, nous avons examiné la fonction promptForMinimalConfig et ses paramètres et comment la CLI shadcn-ui utilise la craie pour surligner le texte dans le terminal.

Ceci est une continuation de la version 2.8, nous examinerons les concepts ci-dessous dans cet article.

1. fonction getRegistryStyles
2. fonction fetchRegistry
3. stylesSchéma

Fonction getRegistryStyles :

getRegistryStyles est importé depuis 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.\`)
  }
}

Cette fonction récupère le registre des styles et analyse le résultat à l'aide du schéma de styles.

Fonction fetchRegistry :

getRegistryStyles appelle la fonction fetchRegistry avec un paramètre [« styles/index.json »]. Pourquoi le paramètre est-il un tableau ?

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}.\`)
  }
}

Remarquez comment le paramètre est un tableau de chaînes. Parce que fetchRegistry utilise Promise.all et récupère en fonction du chemin qui parcourt les chemins à l'aide de la carte. Accédez à https://ui.shadcn.comstyles/index.json, vous constaterez que le json ci-dessous est récupéré lorsque getRegistryStyles est appelé.

stylesSchéma

stylesSchema est plutôt un schéma simple avec juste un nom et une étiquette.

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

Conclusion:

Dans cet article, j'ai abordé les concepts suivants :

1. fonction getRegistryStyles

getRegistryStyles est importé depuis utils/registry/index.tsx. Cette fonction récupère le registre des styles et analyse le résultat à l'aide du schéma de styles.

2. Fonction fetchRegistry

getRegistryStyles appelle la fonction fetchRegistry avec un paramètre ["styles/index.json"].

Pourquoi le paramètre est-il un tableau ? Parce que fetchRegistry utilise Promise.all et récupère en fonction du chemin qui parcourt les chemins à l'aide de la carte. Accédez à https://ui.shadcn.comstyles/index.json, vous trouverez les styles liés au json qui sont récupérés lorsque getRegistryStyles est appelé.

3. stylesSchéma

stylesSchema est un schéma plutôt simple avec juste un nom et une étiquette.

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

Vous voulez apprendre à créer shadcn-ui/ui à partir de zéro ? Découvrez construire à partir de zéro

Sur moi:

Site Internet : https://ramunarasinga.com/

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

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

Email : ramu.narasinga@gmail.com

Construisez shadcn-ui/ui à partir de zéro

Références :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!