Loomix
BelgelerGeliştirici KılavuzuLoomix CLI Geliştirici Aracı

Loom CLI ve Bileşen Kayıt Defteri (Loomix Registry)

Geliştiricilerin GitHub Kayıt Defterinden hazır modüler blokları ve görsel stilleri kod yazmadan tek komutla indirmesini ve senkronize etmesini sağlayan dahili CLI aracı.

Geliştirici İpucu
Mevcut tüm komutları ve seçenekleri listelemek için terminalde loom --help komutunu çalıştırın.

1. Loom CLI ve Loomix Registry Nedir?

Loom CLI, e-ticaret mağazanız için özel bir bileşen paket yöneticisi gibi çalışır. Önceden tasarlanmış yüzlerce stili inceleyebilir ve tek komutla projenize entegre edebilirsiniz.

  • GitHub kayıt defterinden yeni blok stillerini tek tıkla indirme ve senkronize etme.
  • Bileşen bağımlılıklarını otomatik kontrol etme ve dışa aktarım dosyalarını güncelleme.
  • Şirketler ve ekipler için hem genel hem de özel (Private) kayıt defteri desteği.
  • GitHub Actions ve CI/CD iş akışlarıyla tam otomatik entegrasyon.
  • Belirli bir blok stilini doğrudan projenin bileşen klasörüne yükleme.
Kayıt Defterindeki Blokları Listeleme
bash
npx loom list-blocks

1.2 Stillerin Strapi Yönetim Paneli ile Senkronizasyonu

Yeni indirilen stillerin Strapi arayüzünde seçim listesine otomatik olarak eklenmesi süreci.

  • blocks klasörüne yeni eklenen bileşen stillerinin tespiti.
  • Strapi Schema'sındaki stil numaralandırma (Enumeration) alanının güncellenmesi.
  • İçerik yöneticisinin Strapi panelinde yeni stili anında seçebilmesi.

2. Loom CLI Kurulumu ve Kullanımı

Araç depo içerisinde yerleşik olarak bulunur ve npx veya pnpm ile doğrudan çalıştırılabilir:

Mevcut Loomix Kayıt Defterinden istediğiniz bloğu belirleyin.

Yükleme komutunu çalıştırın: npx loom add-block .

CLI gerekli TypeScript ve Tailwind stillerini otomatik indirir.

BlockRenderer.tsx dosyasını güncelleyerek yeni bloğu haritaya dahil edin.

Strapi'yi açın ve yeni görsel stili hemen kullanmaya başlayın.

3. Yeni Bir Blok veya Stil Yükleme Komutu

Hero bloğuna yeni bir stil (örn: Style 4) eklemek için komut:

Doğrudan Stil Yükleme Komutu
bash
npx loom add-block hero --style 4

4. Mağaza Projesindeki Blok Klasör Yapısı

Tüm bloklar src/components/blocks dizini altında modüler ve düzenli şekilde organize edilir.

Resmi ve Özel Kayıt Defteri Seçenekleri

Resmi Kayıt Defteri (Official Registry):

Loomix ekibi tarafından sürekli güncellenen ve en son Next.js standartlarıyla test edilen stiller.

Özel Kayıt Defteri (Private Registry):

Ajansınız veya ekibiniz için GitHub'da özel bileşen havuzu oluşturma ve projeler arasında paylaşma imkanı.

Modüler Bloklar Dosya Ağacı Yapısı:

Bileşenlerin ve dışa aktarım dosyalarının hiyerarşik düzeni:

Bileşen Kayıt Defteri Klasör Hiyerarşisi
text
src/components/blocks/
├── hero/
│   ├── HeroStyle1.tsx
│   ├── HeroStyle2.tsx
│   └── index.ts
├── features/
│   ├── FeaturesStyle1.tsx
│   └── index.ts
└── BlockRenderer.tsx

Özel GitHub Kayıt Defteri Bağlantı Adımları:

  1. GitHub üzerinde loomix-custom-registry adında yeni bir depo oluşturun.
  2. Blokları bileşen kodları ve schema.json dosyalarıyla organize edin.
  3. Kişisel Erişim Belirtecini (PAT) .env dosyanıza ekleyin.
  4. npx loom registry set-url komutuyla CLI'yi özel deponuza yönlendirin.
Ortam Değişkenlerinde Kayıt Defteri Ayarı
env
LOOMIX_REGISTRY_URL=https://raw.githubusercontent.com/kurumunuz/loomix-registry/main
LOOMIX_REGISTRY_TOKEN=ghp_gizli_belirtec_buraya