Generador de Componentes Vue Dinámicos y Descargables

Introducción

En el desarrollo de aplicaciones web modernas, la reutilización y personalización de componentes es clave para acelerar los tiempos de desarrollo. Herramientas como Storybook permiten “jugar” con las propiedades de los componentes, pero carecen de una funcionalidad que facilite la exportación directa de componentes configurados en un archivo listo para usar. Este trabajo propone una solución práctica: un generador que permite al usuario personalizar las props de un componente dinámicamente y descargar un archivo .vue que encapsula esa configuración.

---

Idea Central

El objetivo es proporcionar una interfaz donde los usuarios puedan:

1. Configurar un componente Vue dinámicamente.
2. Visualizar los cambios en tiempo real.
3. Generar y descargar un archivo .vue que encapsule la configuración realizada.

El archivo generado debe ser limpio y reutilizable, siguiendo las prácticas estándar de Vue 3.

---

Componentes Principales

1. Componente Base

El componente base es un componente Vue común que define un conjunto de props. Por ejemplo:

<script setup lang="ts">
import { defineProps } from 'vue';

defineProps({
  title: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <img :src="image" alt="Image" />
  </div>
</template>

2. Configuración Dinámica

El generador se basa en un archivo de configuración que describe las props del componente y sus tipos:

export const componentConfig = {
  title: {
    type: String,
    label: 'Título',
    inputType: 'text',
  },
  image: {
    type: String,
    label: 'URL de la imagen',
    inputType: 'url',
  },
};

3. Interfaz de Configuración

El usuario interactúa con un formulario generado dinámicamente según la configuración de props, como este:

<template>
  <form @submit.prevent>
    <div v-for="(field, key) in config" :key="key">
      <label :for="key">{{ field.label }}</label>
      <input
        :type="field.inputType"
        :id="key"
        v-model="formData[key]"
        :placeholder="`Escribe ${field.label}`"
      />
    </div>
    <button type="submit">Actualizar</button>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { componentConfig as config } from './componentConfig';

const formData = ref(
  Object.keys(config).reduce((acc, key) => {
    acc[key] = '';
    return acc;
  }, {})
);
</script>

---

Generación del Archivo

1. Archivo Simple

El contenido del archivo generado debe incluir un <template> que vincula las props configuradas:

<template>
  <component
    :title="title"
    :image="image"
  />
</template>

<script setup lang="ts">
const title = "Título Configurado";
const image = "https://example.com/image.jpg";
</script>

2. Código para Generar el Archivo

La función que construye el archivo:

function generateVueFileContent(formData) {
  const scriptVariables = Object.entries(formData)
    .map(([key, value]) => `const ${key} = "${value.replace(/"/g, '\\"')}";`)
    .join('\n');

  const propsAttributes = Object.keys(formData)
    .map((key) => `    :${key}="${key}"`)
    .join('\n');

  return `
<template>
  <component
${propsAttributes}
  />
</template>

<script setup lang="ts">
${scriptVariables}
</script>
  `.trim();
}

---

Descarga del Archivo

La funcionalidad de descarga se logra con la API de blobs:

function downloadVueFile(formData) {
  const content = generateVueFileContent(formData);
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.download = 'MyComponent.vue';
  link.click();

  URL.revokeObjectURL(url);
}

---

Ejemplo Completo

Supongamos que el usuario configura las siguientes props en el formulario:

• title: "Hola Mundo"
• image: "https://example.com/image.jpg"

1. Interfaz del Formulario

El usuario llena este formulario:

Título: Hola Mundo
URL de la imagen: https://example.com/image.jpg

2. Archivo Generado

El archivo descargado será MyComponent.vue con el siguiente contenido:

<template>
  <component
    :title="title"
    :image="image"
  />
</template>

<script setup lang="ts">
const title = "Hola Mundo";
const image = "https://example.com/image.jpg";
</script>

---

Ventajas

1. Reutilización: Los componentes generados pueden integrarse directamente en cualquier proyecto Vue.
2. Productividad: Acelera el desarrollo al eliminar la necesidad de escribir manualmente código repetitivo.
3. Colaboración: Facilita compartir configuraciones personalizadas entre desarrolladores.

---

Extensiones Futuras

1. Soporte para Estilos: Generar un <style> en el archivo con clases personalizadas.
2. Validaciones de Props: Incorporar validaciones dinámicas según el tipo de prop.
3. Nombre Personalizable: Permitir al usuario especificar el nombre del archivo generado.
4. Compatibilidad con Diferentes Componentes: Ampliar la funcionalidad para soportar múltiples tipos de componentes.

---

Conclusión

Este generador ofrece una solución práctica y eficiente para personalizar y exportar componentes Vue. La idea es trascendente porque combina la facilidad de uso de herramientas como Storybook con la capacidad de generar código reutilizable, abriendo nuevas posibilidades para el desarrollo colaborativo y la aceleración de proyectos.