Heim > Web-Frontend > js-Tutorial > shadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? - Teil

shadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? - Teil

WBOY
Freigeben: 2024-07-18 14:11:58
Original
1182 Leute haben es durchsucht

Ich wollte herausfinden, wie die CLI von shadcn-ui funktioniert. In diesem Artikel bespreche ich den Code, der zum Erstellen der shadcn-ui/ui-CLI verwendet wird.

In Teil 2.8 haben wir uns die Funktion promptForMinimalConfig und ihre Parameter angesehen und wie die shadcn-ui-CLI Kreide verwendet, um Text im Terminal hervorzuheben.

Dies ist eine Fortsetzung von 2.8, wir werden uns in diesem Artikel mit den folgenden Konzepten befassen.

  1. getRegistryStyles-Funktion
  2. fetchRegistry-Funktion
  3. stylesSchema

shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part

getRegistryStyles-Funktion:

getRegistryStyles wird aus utils/registry/index.tsx importiert.

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.\`)
  }
}
Nach dem Login kopieren

Diese Funktion ruft die Stilregistrierung ab und analysiert das Ergebnis mithilfe des Stilschemas.

fetchRegistry-Funktion:

getRegistryStyles ruft die fetchRegistry-Funktion mit einem Parameter [„styles/index.json“] auf. Warum ist der Parameter ein Array?

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}.\`)
  }
}
Nach dem Login kopieren

Beachten Sie, dass der Parameter ein Array von Zeichenfolgen ist. Weil fetchRegistry Promise.all verwendet und Abrufe basierend auf Pfadschleifen durch die Pfade mithilfe von Map abruft. Navigieren Sie zu https://ui.shadcn.comstyles/index.json. Sie werden feststellen, dass der folgende JSON abgerufen wird, wenn getRegistryStyles aufgerufen wird.

shadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? - Teil

StylesSchema

stylesSchema ist eher ein einfaches Schema mit nur Name und Beschriftung.

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

Abschluss:

In diesem Artikel habe ich die folgenden Konzepte besprochen:

  1. getRegistryStyles-Funktion

getRegistryStyles wird aus utils/registry/index.tsx importiert. Diese Funktion ruft die Stilregistrierung ab und analysiert das Ergebnis mithilfe des Stilschemas.

2. fetchRegistry-Funktion

getRegistryStyles ruft die fetchRegistry-Funktion mit einem Parameter [„styles/index.json“] auf.

Warum ist der Parameter ein Array? Weil fetchRegistry Promise.all verwendet und Abrufe basierend auf Pfadschleifen durch die Pfade mithilfe von Map abruft. Navigieren Sie zu https://ui.shadcn.comstyles/index.json. Dort finden Sie den stilbezogenen JSON, der abgerufen wird, wenn getRegistryStyles aufgerufen wird.

3. StylesSchema

stylesSchema ist ein eher einfaches Schema mit nur Name und Beschriftung.

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

Möchten Sie lernen, wie man shadcn-ui/ui von Grund auf erstellt? Schauen Sie sich Build-from-Scratch

an

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: ramu.narasinga@gmail.com

Shadcn-ui/ui von Grund auf erstellen

Referenzen:

  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

Das obige ist der detaillierte Inhalt vonshadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? - Teil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage