🚀 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:

``bash bun run gen`

O directamente:

`bash bun run generator.js`

`🎯 Funcionalidades`

`$3`

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

`$3`

Crea snippets reutilizables de Liquid.

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

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

`$3`

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:

`$3`


Normaliza texto a formato kebab-case:

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 reemplazar

Ejemplo 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:Section2. Tipo de sección:Nueva Sección3. Nombre:Hero Banner4. ¿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/`.

🚀 Generador de Código

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

📋 Descripción

El script utiliza plantillas predefinidas y reemplaza variables dinámicamente para generar código personalizado.

🚀 Uso

Para ejecutar el generador:

``bash bun run gen`

O directamente:

`bash bun run generator.js`

`🎯 Funcionalidades`

`$3`

#### 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`

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

`$3`

Crea snippets reutilizables de Liquid.

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

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

`$3`

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:

`$3`


Normaliza texto a formato kebab-case:

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 reemplazar

Ejemplo 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:

`🔍 Ejemplo Completo`

`$3`

`bash bun run gen`

Respuestas: 1. Tipo:Section2. Tipo de sección:Nueva Sección3. Nombre:Hero Banner4. ¿Generar estilos?:Sí5. ¿Generar scripts?:Sí

Resultado:

`⚙️ 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/`.

@soyleninjs/code-generator

🚀 Generador de Código

📋 Descripción

🚀 Uso

🎯 Funcionalidades

$3

$3

$3

🔧 Utilidades

$3

$3

$3

$3

$3

📝 Sistema de Plantillas

$3

[[section_name]]

Hero

🎨 Convenciones de Nombres

🔍 Ejemplo Completo

$3

⚙️ Tecnologías

👤 Autor

📄 Licencia

@soyleninjs/code-generator

🚀 Generador de Código

📋 Descripción

🚀 Uso

🎯 Funcionalidades

$3

$3

$3

🔧 Utilidades

$3

$3

$3

$3

$3

📝 Sistema de Plantillas

$3

[[section_name]]

Hero

🎨 Convenciones de Nombres

🔍 Ejemplo Completo

$3

⚙️ Tecnologías

👤 Autor

📄 Licencia

`🎯 Funcionalidades`

`$3`

`$3`

`$3`

`🔧 Utilidades`

`$3`

`$3`

`🔍 Ejemplo Completo`

`$3`

`⚙️ Tecnologías`

`👤 Autor`

`📄 Licencia`

`🎯 Funcionalidades`

`$3`

`$3`

`$3`

`🔧 Utilidades`

`$3`

`$3`

`🔍 Ejemplo Completo`

`$3`

`⚙️ Tecnologías`

`👤 Autor`

`📄 Licencia`