Script para generar código
npm install @soyleninjs/code-generatorScript automatizado para generar secciones, snippets y componentes con sus respectivos archivos de estructura (Liquid, CSS y JavaScript).
Este generador te permite crear rápidamente la estructura de archivos necesaria para:
- Secciones de Shopify (nuevas o prefabricadas)
- Snippets reutilizables
- Componentes interactivos (Accordion, Popup, Modal, Tabs)
El script utiliza plantillas predefinidas y reemplaza variables dinámicamente para generar código personalizado.
Para ejecutar el generador:
``bash`
bun run gen
O directamente:
`bash`
bun run generator.js
#### Opción A: Nueva Sección
Crea una sección desde cero con plantillas personalizables.
Proceso:
1. Selecciona "Section"
2. Elige "Nueva Sección"
3. Ingresa el nombre de la sección
4. Decide si generar archivos de estilos (CSS)
5. Decide si generar archivos de scripts (JS)
Archivos generados:
`
sections/
└── [nombre-seccion].liquid
zrc/styles/sections/[nombre-seccion]/
├── index.css
├── [nombre-seccion].css
└── responsive.css
zrc/scripts/sections/[nombre-seccion]/
├── index.js
└── [nombre-seccion].js
`
Variables reemplazadas en plantillas:
- [[handle_section_name]] → nombre normalizado (kebab-case)[[section_name]]
- → nombre original[[name_custom_element]]
- → nombre en PascalCase para Web Components
#### Opción B: Sección Prefabricada
Genera secciones completas con código pre-diseñado.
Secciones disponibles:
- ✅ Testimonials - Sección de testimonios de clientes
Archivos generados: Los mismos que en "Nueva Sección", pero con contenido predefinido.
Crea snippets reutilizables de Liquid.
Proceso:
1. Selecciona "Snippet"
2. Ingresa el nombre del snippet
> ⚠️ En desarrollo: Esta funcionalidad está parcialmente implementada.
Crea componentes interactivos JavaScript.
Componentes disponibles:
- Accordion
- Popup
- Modal
- Tabs
Proceso:
1. Selecciona "Component"
2. Elige el tipo de componente
3. Responde "Por qué este component?"
> ⚠️ En desarrollo: Esta funcionalidad está parcialmente implementada.
El generador incluye funciones de transformación de texto en utils/utils.js:
javascript
handleText("Mi Sección Ejemplo") // → "mi-seccion-ejemplo"
`$3
Convierte a camelCase:
`javascript
toCamelCase("mi-seccion-ejemplo") // → "miSeccionEjemplo"
`$3
Convierte a PascalCase:
`javascript
toPascalCase("mi-seccion-ejemplo") // → "MiSeccionEjemplo"
`$3
Convierte a snake_case:
`javascript
toSnakeCase("mi-seccion-ejemplo") // → "mi_seccion_ejemplo"
`$3
Convierte a Train-Case:
`javascript
toTrainCase("mi seccion ejemplo") // → "Mi-Seccion-Ejemplo"
`📝 Sistema de Plantillas
El generador utiliza un sistema de reemplazo de variables con la sintaxis
[[variable]].$3
Parámetros:
-
from - Ruta de la plantilla origen
- to - Ruta de destino del archivo generado
- vars - Objeto con variables a reemplazarEjemplo de uso:
`javascript
copyTemplate(
'templates/section/liquid/template.liquid',
'sections/hero.liquid',
{
handle_section_name: 'hero',
section_name: 'Hero'
}
);
`En la plantilla:
`liquid
[[section_name]]
`Resultado generado:
`liquid
Hero
`🎨 Convenciones de Nombres
El generador aplica automáticamente las siguientes convenciones:
| Tipo | Formato | Ejemplo | Uso |
|------|---------|---------|-----|
| Archivos Liquid | kebab-case |
hero-banner.liquid | Nombres de archivo |
| Clases CSS | kebab-case | .hero-banner | Selectores CSS |
| Custom Elements | PascalCase | HeroBanner | Web Components JS |
| Variables JS | camelCase | heroBanner | Variables JavaScript |🔍 Ejemplo Completo
$3
`bash
bun run gen
`Respuestas:
1. Tipo:
Section
2. Tipo de sección: Nueva Sección
3. Nombre: Hero Banner
4. ¿Generar estilos?: Sí
5. ¿Generar scripts?: SíResultado:
`
✅ sections/hero-banner.liquid
✅ zrc/styles/sections/hero-banner/index.css
✅ zrc/styles/sections/hero-banner/hero-banner.css
✅ zrc/styles/sections/hero-banner/responsive.css
✅ zrc/scripts/sections/hero-banner/index.js
✅ zrc/scripts/sections/hero-banner/hero-banner.js
`⚙️ Tecnologías
- Runtime: Bun
- Interactividad: prompts v2.4.2
- File System: Node.js fs/promises
- Licencia: MIT
👤 Autor
@soyleninjs
📄 Licencia
MIT
---
💡 Tip: Para personalizar las plantillas, modifica los archivos en la carpeta
templates/`.