Descripción:

El CLI astro-cli-components es una herramienta de línea de comandos diseñada para simplificar y acelerar la creación de componentes en proyectos basados en Astro, un framework web ultrarrápido.

Características Principales:

Generación Rápida de Componentes:

Permite a los desarrolladores crear nuevos componentes rápidamente con una sola línea de comando.

Estructura y Archivos Predefinidos:

Genera automáticamente la estructura de archivos estándar para un componente en Astro, incluyendo archivos HTML, CSS y JS.

Detección de los frameworks usados:

La herramienta detecta automaticamente si el proyecto tiene algunas integraciones implementadas.

Instalation

 npm i -D astro-components-cli

or

 bun i -D astro-components-cli

or

 pnpm i -D astro-components-cli

Global instalation

npm i -g astro-components-cli

or

bun install -g astro-components-cli

or

pnpm install -g astro-components-cli

Usage

npx acc [NameComponent]

Parameters

[NameComponent] Name of the component to be created

If you pass a name after the command it wil create a component with this name.

Note: if you pass an absolute path like src/components/layout/Header2 with the name of the

component. The CLI will understand that you want to create the component on this path and it will create the component on src/components/layout. This will be more explained with an image.

Examples

Normal create component

npx acc Header

It will prompt you to create your component and create the file additional information

Create component with absolute path

npx acc src/components/layout/Header2

Then it will create you the component like so:

> [!CAUTION]

> This CLI won't work on a workspace that isn't from Astro framework  

Other configurations

You can create a config file named astro-components.json to define configs of the CLI.

| Parameter | Type | Description | Default | |--- |--- |--- |--- | | questionMe* | boolean | parameter to ask you if you want to create the component. | true | | reactJsxTemplate | string | parameter to define your custom React with JavaScript template. | templateDefaultForReactJsx | | reactTsx | string | parameter to define custom React With TypeScript template. | templateDefaultForReactTsx | | vueJSTemplate | string | parameter to define your custom VueJS template. | templateDefaultForVueJs | | vueTSTemplate | string | parameter to define your custom Vue with TypeScript template. | templateDefaultForVueTs | | svelteJSTemplate | string | parameter to define your custom Svelte JavaScript template. | templateDefaultForSvelteJS | | svelteTSTemplate | string | parameter to define your custom Svelte TypeScript template. | templateDefaultForSvelteTS |

*Parameters requireds