Generate Registry

Installation

npx shadcn@latest add https://ui.oward.dev/r/registry.json generate-registry

Vue d'ensemble

Le script generate-registry.js est un outil d'automatisation Node.js qui génère et maintient le fichier registry.json pour un registry shadcn/ui. Il analyse automatiquement la structure de vos composants, utilitaires et styles pour créer un registry conforme au schéma officiel de shadcn/ui.

• Détection automatique des types disponibles (ui, lib, style, item, etc.)
• Extraction des dépendances npm depuis les imports ES6 et CommonJS
• Support des structures complexes avec sous-dossiers et fichiers multiples

Structure du projet

Le script s'attend à une structure de projet standard pour un registry shadcn/ui :

your-project/
├── registry.json          # Fichier généré automatiquement
└── registry/             # Dossier source des composants
    ├── ui/              # Composants UI
    ├── lib/             # Utilitaires et hooks
    ├── style/           # Styles et tokens
    └── item/            # Items complexes (blocks)

Utilisation

Commande de base

Exécutez le script depuis le répertoire racine de votre registry :

node generate-registry.js

Le script va :

1. Scanner le dossier ./registry/ pour détecter les types disponibles
2. Pour chaque type, analyser les fichiers et extraire les métadonnées
3. Générer automatiquement les entrées du registry avec leurs dépendances
4. Sauvegarder le fichier registry.json

Options CLI

Le script accepte plusieurs options pour personnaliser son comportement :

Exemples d'utilisation

# Exécution depuis le répertoire courant
node generate-registry.js

# Avec un chemin spécifique

node generate-registry.js --path /path/to/project

# Avec vérification du code de sortie

node generate-registry.js || exit 1

Les types

Le script détecte automatiquement les types de composants disponibles dans votre registry. Chaque type correspond à une catégorie de fichiers avec un rôle spécifique dans le registry shadcn/ui.

Extraction des dépendances

Le script extrait automatiquement les dépendances npm depuis vos imports. Il supporte plusieurs syntaxes :

// Import simple
import { Button } from "lucide-react";

// Import type
import type { ButtonProps } from "lucide-react";

// Import tout
import \* as React from "react";

Spécifier des versions de dépendances

Par défaut, les dépendances sont extraites sans version. Pour spécifier des versions précises, vous avez deux options :

Pour les fichiers solo : Utilisez l'annotation @package dans les commentaires JSDoc :

/**
 * @description My component with specific dependency versions
 * @author Your Name <[email protected]>
 * @package tailwind-merge@^3.4.0
 * @package lucide-react@^0.400.0
 */
export function MyComponent() {
  // ...
}

Pour les items multi-fichiers : Créez un fichier meta-registry.json à la racine de l'item :

{
  "description": "My complex component",
  "author": "Your Name <[email protected]>",
  "dependencies": {
    "tailwind-merge": "^3.4.0",
    "class-variance-authority": "^0.7.0"
  }
}

Métadonnées des items

Le script extrait automatiquement les métadonnées des composants de deux façons différentes :

Via JSDoc (fichier unique)

Pour les composants simples avec un seul fichier, ajoutez les métadonnées directement dans le code via les annotations JSDoc @description, @package et @author :

/**
 * @description Un bouton personnalisable avec support des variantes et des tailles.
 * @author Your Name <[email protected]>
 * @package twailwind-merge@^3.4.0
 */
export function Button({ children, ...props }: ButtonProps) {
  return <button {...props}>{children}</button>;
}

Le script détectera automatiquement ces annotations et les ajoutera au registry.

Via meta-registry.json (items complexes)

Pour les items complexes avec plusieurs fichiers, créez un fichier meta-registry.json à la racine :

{
  "description": "Script to generate tailwind-merge configuration from Tailwind CSS v4 @theme tokens",
  "author": "Geoffrey From Oward <[email protected]>",
  "dependencies": {
    "tailwind-merge": "^3.4.0"
  }
}

Structure d'un item

Composant simple (un seul fichier) :

registry/ui/button/
└── button.tsx           # Avec @description, @author et @package en JSDoc

Item complexe (plusieurs fichiers) :

registry/item/dashboard/
├── dashboard.tsx       # Fichier principal
├── components/
│   ├── header.tsx
│   └── sidebar.tsx
├── lib/
│   └── utils.ts
└── meta-registry.json  # Métadonnées centralisées (description, author, dependencies)

Exclure des fichiers de la génération

Le script supporte une métadonnée spéciale @registry-ignore qui permet d'exclure des fichiers de la génération du registry. C'est particulièrement utile pour les fichiers de base qui ne doivent pas être installables via la CLI shadcn.

// @registry-ignore

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Sortie du script

Le script génère un fichier registry.json conforme au schéma shadcn/ui :

{
  "name": "my-registry",
  "author": "Your Name",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "description": "Un bouton personnalisable...",
      "dependencies": ["class-variance-authority"],
      "registryDependencies": ["utils"],
      "files": [
        {
          "path": "ui/button.tsx",
          "type": "registry:ui"
        }
      ],
      "meta": {
        "author": "Your Name <[email protected]>"
      }
    }
  ]
}