🚀 Generador de Código

Script automatizado para generar secciones, snippets y componentes con sus respectivos archivos de estructura (Liquid, CSS y JavaScript).

📋 Descripción

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.

🚀 Uso

Para ejecutar el generador:

bun run gen

O directamente:

bun run generator.js

🎯 Funcionalidades

1️⃣ Generación de Secciones

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.

2️⃣ Generación de Snippets

Crea snippets reutilizables de Liquid.

Proceso:

1. Selecciona "Snippet"
2. Ingresa el nombre del snippet

⚠️ En desarrollo: Esta funcionalidad está parcialmente implementada.

3️⃣ Generación de Componentes

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.

🔧 Utilidades

El generador incluye funciones de transformación de texto en utils/utils.js:

handleText(string)

Normaliza texto a formato kebab-case:

handleText("Mi Sección Ejemplo") // → "mi-seccion-ejemplo"

toCamelCase(string)

Convierte a camelCase:

toCamelCase("mi-seccion-ejemplo") // → "miSeccionEjemplo"

toPascalCase(string)

Convierte a PascalCase:

toPascalCase("mi-seccion-ejemplo") // → "MiSeccionEjemplo"

toSnakeCase(string)

Convierte a snake_case:

toSnakeCase("mi-seccion-ejemplo") // → "mi_seccion_ejemplo"

toTrainCase(string)

Convierte a Train-Case:

toTrainCase("mi seccion ejemplo") // → "Mi-Seccion-Ejemplo"

📝 Sistema de Plantillas

El generador utiliza un sistema de reemplazo de variables con la sintaxis [[variable]].

Función copyTemplate(from, to, vars)

Parámetros:

• from - Ruta de la plantilla origen
• to - Ruta de destino del archivo generado
• vars - Objeto con variables a reemplazar

Ejemplo de uso:

copyTemplate(
  'templates/section/liquid/template.liquid',
  'sections/hero.liquid',
  {
    handle_section_name: 'hero',
    section_name: 'Hero'
  }
);

En la plantilla:

<div class="[[handle_section_name]]">
  <h1>[[section_name]]</h1>
</div>

Resultado generado:

<div class="hero">
  <h1>Hero</h1>
</div>

🎨 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

Crear una nueva sección "Hero Banner"

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/.