Loomix
ДокументацияРуководство РазработчикаCLI Инструмент Разработчика Loomix

Loom CLI и реестр компонентов (Loomix Registry)

Встроенная CLI-утилита, позволяющая разработчикам скачивать и синхронизировать модульные блоки и визуальные стили из GitHub Registry одной командой без написания дополнительного кода.

Совет для разработчиков
Выполните loom --help в терминале, чтобы увидеть полный список команд и опций.

1. Что такое Loom CLI и Loomix Registry?

Loom CLI работает как специализированный менеджер пакетов компонентов для вашего интернет-магазина, позволяя исследовать сотни готовых стилей и подключать их за секунды.

  • Загрузка и синхронизация новых стилей блоков из реестра GitHub в один шаг.
  • Автоматическая проверка зависимостей и обновление файлов экспорта компонентов.
  • Поддержка публичных и приватных реестров (Private Registry) для команд и агентств.
  • Полная интеграция с GitHub Actions и рабочими процессами CI/CD.
  • Установка конкретных стилей блоков напрямую в папку компонентов проекта.
Просмотр доступных блоков в реестре
bash
npx loom list-blocks

1.2 Синхронизация стилей с панелью Strapi

Процесс автоматического добавления загруженных стилей в выпадающие списки выбора в панели Strapi.

  • Обнаружение новых стилей компонентов в директории blocks.
  • Обновление поля перечисления стилей (enum) в схеме (Schema) Strapi.
  • Мгновенная доступность нового стиля для контент-менеджеров в Strapi.

2. Установка и использование Loom CLI

Инструмент предварительно интегрирован в репозиторий и запускается напрямую через npx или pnpm:

Выберите нужный блок в каталоге Loomix Registry.

Выполните команду установки: npx loom add-block <имя-блока>.

CLI автоматически загрузит необходимые файлы TypeScript и стили Tailwind.

Обновите файл BlockRenderer.tsx для регистрации нового блока.

Откройте Strapi и начните использовать новый визуальный стиль.

3. Команда для установки конкретного блока или стиля

Команда для добавления нового стиля (напр., Style 4) к блоку Hero:

Команда прямой установки стиля
bash
npx loom add-block hero --style 4

4. Структура папок блоков в витрине

Все блоки аккуратно организованы в модульной структуре директории src/components/blocks.

Официальные и пользовательские реестры

Официальный реестр (Official Registry):

Стили, которые постоянно поддерживаются и обновляются командой Loomix в соответствии с новейшими стандартами Next.js.

Приватный реестр (Private Registry):

Возможность для агентства создать собственный закрытый репозиторий на GitHub для переиспользования компонентов между проектами.

Дерево каталогов модульных блоков:

Иерархическое расположение компонентов и barrel-файлов (index.ts):

Иерархия Папок Реестра Компонентов
text
src/components/blocks/
├── hero/
│   ├── HeroStyle1.tsx
│   ├── HeroStyle2.tsx
│   └── index.ts
├── features/
│   ├── FeaturesStyle1.tsx
│   └── index.ts
└── BlockRenderer.tsx

Шаги для подключения приватного реестра GitHub:

  1. Создайте новый репозиторий на GitHub с именем loomix-custom-registry.
  2. Организуйте блоки с исходным кодом и соответствующими файлами schema.json.
  3. Добавьте Personal Access Token (PAT) с правами доступа к repo в файл .env.
  4. Укажите путь к реестру командой npx loom registry set-url.
Настройка реестра в переменных окружения
env
LOOMIX_REGISTRY_URL=https://raw.githubusercontent.com/your-org/loomix-registry/main
LOOMIX_REGISTRY_TOKEN=ghp_your_token_here