Loomix
DocumentaciónGuía para DesarrolladoresHerramienta CLI para Desarrolladores Loomix

Loom CLI y Registro de Componentes (Loomix Registry)

Herramienta CLI integrada que permite a los desarrolladores descargar y sincronizar bloques modulares y estilos visuales desde GitHub Registry con un solo comando sin escribir código adicional.

Consejo para Desarrolladores
Ejecuta loom --help en tu terminal para listar todos los comandos y opciones disponibles.

1. ¿Qué son Loom CLI y Loomix Registry?

Loom CLI funciona como un gestor de paquetes de componentes dedicado para tu tienda online. Te permite explorar cientos de estilos prediseñados e integrarlos en segundos.

  • Descarga y sincronización de nuevos estilos de bloques desde el registro de GitHub en un solo paso.
  • Verificación automática de dependencias y actualización de archivos de exportación de componentes.
  • Soporte para registros públicos y privados (Private Registry) para equipos y agencias.
  • Integración completa y automatizada con flujos de trabajo de GitHub Actions y CI/CD.
  • Instalación de estilos de bloques específicos directamente en la carpeta de componentes del proyecto.
Listar Bloques Disponibles en el Registro
bash
npx loom list-blocks

1.2 Sincronización de Estilos con el Panel de Strapi

Proceso de inclusión automática de los estilos recién descargados en los menús desplegables de Strapi.

  • Detección de nuevos estilos de componentes añadidos en la carpeta blocks.
  • Actualización del campo de enumeración de estilos en el esquema (Schema) de Strapi.
  • Disponibilidad inmediata del nuevo estilo para los redactores de contenido en Strapi.

2. Instalación y Uso de Loom CLI

La herramienta viene preintegrada en el repositorio y se ejecuta directamente con npx o pnpm:

Identifica el bloque deseado en el catálogo de Loomix Registry.

Ejecuta el comando de instalación: npx loom add-block .

El CLI descarga automáticamente los archivos TypeScript y estilos de Tailwind necesarios.

Actualiza el archivo BlockRenderer.tsx para registrar el nuevo bloque.

Abre Strapi y comienza a utilizar el nuevo estilo visual de inmediato.

3. Comando para Instalar un Bloque o Estilo Específico

Comando para añadir un nuevo estilo (ej. Style 4) al bloque Hero:

Comando Directo de Instalación de Estilo
bash
npx loom add-block hero --style 4

4. Estructura de Carpetas de Bloques en la Tienda

Todos los bloques se organizan de forma modular y ordenada en el directorio src/components/blocks.

Opciones de Registros Oficiales y Personalizados

Registro Oficial (Official Registry):

Estilos mantenidos y actualizados continuamente por el equipo de Loomix bajo los últimos estándares de Next.js.

Registro Privado (Private Registry):

Permite a tu agencia crear un repositorio privado en GitHub para reutilizar componentes entre múltiples proyectos.

Árbol de Directorios de Bloques Modulares:

Disposición jerárquica de componentes y archivos de barril (index.ts):

Estructura de Carpetas del Registro de Componentes
text
src/components/blocks/
├── hero/
│   ├── HeroStyle1.tsx
│   ├── HeroStyle2.tsx
│   └── index.ts
├── features/
│   ├── FeaturesStyle1.tsx
│   └── index.ts
└── BlockRenderer.tsx

Pasos para Conectar un Registro Privado de GitHub:

  1. Crea un nuevo repositorio en GitHub llamado loomix-custom-registry.
  2. Organiza los bloques con su código y archivos schema.json correspondientes.
  3. Añade un Personal Access Token (PAT) con permisos repo a tu archivo .env.
  4. Apunta el CLI a tu repositorio con el comando npx loom registry set-url.
Configuración del Registro en Variables de Entorno
env
LOOMIX_REGISTRY_URL=https://raw.githubusercontent.com/tuorganizacion/loomix-registry/main
LOOMIX_REGISTRY_TOKEN=ghp_tu_token_aqui