create-components CLI

CLI para crear múltiples componentes en lote con soporte para plantillas por proyecto y stubs incorporados.

Instalación

Proyecto local:

npm i -D create-components-cli

Global (opcional):

npm i -g create-components-cli

Uso

Interactivo:

npm create-components

También puedes ejecutar el binario directo si está instalado globalmente:

create-components

Stubs y plantillas

El generador busca plantillas (stubs) en este orden:

1. Stubs del proyecto: ./stubs/<ext>/ (por ejemplo ./stubs/vue/, ./stubs/astro/)
2. Stubs incorporados del paquete: stubs/<ext>/ dentro del módulo

Donde <ext> es astro, tsx, vue, js, ts.

Cada stub es un archivo nombrado como NOMBRE<ext> por ejemplo:

• stubs/astro/basic.astro
• stubs/astro/with-slot.astro
• stubs/tsx/with-props.tsx
• stubs/vue/setup.vue

El CLI detecta automáticamente las plantillas disponibles para la extensión seleccionada y muestra solo esas opciones.

Placeholder de nombre

Dentro de la plantilla, puedes usar el texto Component como placeholder. El generador lo reemplaza por el nombre real del componente.

Ejemplo Vue (stubs/vue/basic.vue):

<template>
	<div class="component">
		Component
	</div>
</template>

<script>
export default {
	name: 'Component'
}
</script>

Crear stubs personalizados por proyecto

1. Crea la carpeta de stubs en tu proyecto:

   • stubs/astro/
   • stubs/tsx/
   • stubs/vue/
   • stubs/js/
   • stubs/ts/

2. Añade tus archivos de plantilla. Ejemplos:

   • stubs/astro/card.astro
   • stubs/vue/panel.vue
   • stubs/tsx/with-state.tsx

3. Asegúrate de incluir el placeholder Component para que se reemplace por el nombre.

Al ejecutar el CLI, verás tus plantillas personalizadas en la lista. Si una plantilla no existe para la extensión elegida, se usa basic si está disponible; si no hay stubs, se genera un contenido por defecto razonable.

API de Node

import { createComponents, getTemplatesForExt } from 'create-components-cli';

// Crea componentes a partir de una plantilla
await createComponents(['Button', 'Card'], '.vue', 'src/components', 'basic');

// Obtiene plantillas disponibles para una extensión
const vueTemplates = getTemplatesForExt('.vue');