Cómo crear documentación de componentes en svelte.

Imagínense que llegan a un proyecto nuevo y cada componente en el front está documentado, pueden re-usar el código de alguien más con una rápida leída o inspeccionando los ejemplos que el creador dejó … Nunca me ha pasado, pero ha de ser hermoso(joking).

Cuando toca hacer código, es importante recordar que la gentileza es también una virtud y como svelte me parece una belleza, decidí hacer una biblioteca que se llama Svelte blueprint.

La idea es sencilla y debo admitir que me basé mucho en el concepto de React Styleguidedist.

src/Components/Button.svelte

Paso 1

Instalar la biblioteca.

npm install svelte-blueprint

Paso 2

Crear tu componente .svelte y agregar el comentario de la descripción del componente.

<!--D Ayuda a definir la descripción del componente -->

Paso 3

Agregar los ejemplos de uso del componente. Acá puedes meter variaciones en las propiedades.

<!-- E
<Button enabled> Ejemplo de uso de botón </Button>
-- !>

Paso 4

Si quieres agregar una descripción a cada prop que recibe tu componente lo puedes hacer…