Komponens-regiszter

A komponens-regiszterek módot adnak az UI komponensek megosztására és felfedezésére. A shadcn/ui népszerűsítette őket, és lehetővé teszik, hogy komponenseket közvetlenül a projektjeidbe fedezz fel és másolj.

A regiszterek alapvető változást jelentenek abban, ahogyan a fejlesztők megosztják és felfedezik az UI komponenseket. A hagyományos npm csomagoktól eltérően a regiszterek egy nyílt forráskódú modellt használnak, és a forráskód letöltésén keresztül működnek a projektedbe.

Mi tesz egy regisztert?

1. Forráskód terjesztése

Ellentétben az npm csomagokkal, amelyek lefordított kódot terjesztenek, a regiszterek forráskódot osztanak meg:

// Traditional npm package
import { Button } from 'some-ui-library';

// Registry-based component
// Copy source from registry into your project
// src/components/ui/button.tsx contains the full source
import { Button } from '@/components/ui/button';

2. Metaadatok és konfiguráció

A jó regiszterek gazdag metaadatokat tartalmaznak a komponensekről, mint például a név, leírás, függőségek és kategória.

{
  "name": "announcement",
  "type": "registry:component",
  "description": "A compound badge component designed to display announcements with theming support",
  "dependencies": ["class-variance-authority", "lucide-react"],
  "registryDependencies": ["badge"],
  "files": [
    {
      "type": "registry:component",
      "content": "..."
    }
  ],
  "category": "ui"
}

3. Előnézet és dokumentáció

Bár nem kerülnek letöltésre, a regiszterek weboldalai rendszerint a következőket nyújtják:

• Élő komponens-előnézetek
• Interaktív példák
• Részletes dokumentáció
• Kódrészletek, amelyek készen állnak a másolásra

A regiszter-architektúra előnyei

A komponens-regiszterek jelentős előnyöket kínálnak mind a szerzők, mind a felhasználók számára, leegyszerűsítve a komponensek megosztásának és átvételének folyamatát.

Szerzők számára

A komponens-szerzők számára a regiszterek rendkívül egyszerűvé teszik a terjesztést. Miután egy komponens elkészült, hozzáadható a regiszterhez, így az azonnal elérhetővé válik a felhasználók számára anélkül, hogy bonyolult publikálási lépésekre lenne szükség. Ez a terjesztés könnyítése felgyorsítja a visszajelzési ciklust és ösztönzi a gyors iterációt.

A verziókezelés egy további kulcsfontosságú előny. A regiszterek általában követik a komponens verzióit, a változásnaplókat és a kompatibilitási információkat. Például egy komponens bejegyzése megadhatja az aktuális verziót, kiemelheti a legutóbbi változásokat, mint például a javított hozzáférhetőség vagy új funkciók, és jelezheti, hogy mely shadcn/ui verziókat támogatja. Ez az átláthatóság segít a karbantartóknak a frissítések kommunikálásában, és biztosítja, hogy a felhasználók olyan komponenseket válasszanak, amelyek megfelelnek a projektkövetelményeiknek.

A közösségi részvétel is javul a regiszterek által. A szerzők közvetlen visszajelzéseket kaphatnak a felhasználóktól, akik hibákat jelenthetnek, funkciókat kérhetnek és hozzájárulhatnak a közös fejlesztéshez. Ez interaktívabb és reagálóbb fejlesztési környezetet eredményez, ami mind a készítők, mind a fogyasztók javára válik.

Felhasználók számára

A komponens-felhasználók szemszögéből a regiszterek jelentősen javítják a felfedezési folyamatot. A felhasználók kategóriák szerint böngészhetnek, kereshetnek, megtekinthetik a népszerűségi mutatókat és feltérképezhetik a kapcsolódó komponenseket, így könnyebb megtalálniuk pontosan azt, amire szükségük van a projektjeikhez.

Egy komponens integrálása előtt a felhasználók megtekinthetik azt működés közben, kipróbálhatnak különböző variánsokat, és áttekinthetik a viselkedését és kódminőségét. Ez a képesség, hogy előre értékelni lehessen a komponenseket, csökkenti a kockázatot és növeli a bizalmat a használat során.

Talán a legfontosabb, hogy a regiszterek valódi tulajdonjogot adnak a felhasználóknak. A függőségbe zártság helyett a felhasználók a forráskódot közvetlenül átmásolják a projektjeikbe. Ez azt jelenti, hogy szükség szerint módosíthatják a komponenseket, elkerülhetik a függőségkezelés bonyodalmait, és teljes irányítást tarthatnak a kódbázisuk felett.

Regiszter létrehozása

Elég gyorsan létrehozhatsz egy egyszerű regisztert. Gyakorlatilag csak 3 alapvető elemre van szükséged:

1. Komponensek

Hozz létre egy komponenst, vagy több komponenst, amelyeket meg szeretnél osztani. Győződj meg róla, hogy rendelkezel a komponensek forráskódjával, és hogy azok jól dokumentáltak és könnyen érthetők.

Fontold meg olyan elemek hozzáadását, mint a Markdown dokumentáció, példapéldák és egy mód a komponens előnézetére.

2. Publikus végpont

Hozz létre egy publikus végpontot, amely kiszolgálja a komponenseket. Ez lehet egy egyszerű JSON fájl vagy egy összetettebb weboldal. Amíg nyilvános és elérhető, bármilyen végpontot használhatsz.

3. CLI

Készíts egy CLI-t, amely lehetővé teszi a komponensek telepítését a projektedbe. Ez lehet olyan egyszerű, mint egyetlen parancs, például npx myregistry add button, vagy egy összetettebb parancs opciókkal és zászlókkal.

A shadcn regiszter használata

Saját regiszter építése remek módja annak, hogy megoszd a komponenseidet a közösséggel, de sok erőfeszítést és karbantartást igényel. Ha csak egy-két komponenst szeretnél megosztani, használhatod a shadcn/ui ökoszisztémát — regiszter, CLI és változók.

Nézzük meg, hogyan tehetünk közzé egy MetricCard komponenst élőben kevesebb mint 5 perc alatt a Vercel statikus tárhelyének használatával.

1. lépés: Mappa létrehozása

Hozz létre egy mappát a következő struktúrával:

my-component/
├── public/
│   └── metric-card.json
└── vercel.json

Tedd a regiszter bejegyzésed JSON fájlját (pl. metric-card.json) a public/ mappába.

2. lépés: Adj hozzá egy vercel.json fájlt

Hozz létre egy vercel.json fájlt a public/ mellett a következő tartalommal:

{
  "headers": [
    {
      "source": "/(.*).json",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Content-Type",
          "value": "application/json"
        }
      ]
    }
  ]
}

Ez biztosítja, hogy a JSON fájl a megfelelő CORS és tartalmi fejléc értékekkel kerüljön kiszolgálásra.

3. lépés: Telepítés Vercel-re

A mappád gyökeréből futtasd:

vercel --prod

és válaszolj a megjelenő kérdésekre a projekt telepítéséhez.

Ha elkészült, a fájlod élő lesz valami ilyesmi címen:

https://your-project-name.vercel.app/metric-card.json

4. lépés: A komponens telepítése

Most bárki lefuttathatja:

npx shadcn@latest add https://your-project-name.vercel.app/metric-card.json

Nincs npm csomag, nincs build lépés, nincs bonyolultság.