Es necesario analizar toda la base de código y resolver todos los módulos antes de crear un paquete. Solo entonces se puede iniciar el servidor y servir el paquete. Cuanto más grande sea tu aplicación, más tiempo tardará en iniciarse.
Por otro lado, Vite inicia el servidor de inmediato y sirve el módulo de entrada al navegador. Dado que el navegador comprende las importaciones siguientes, solo carga los módulos adicionales cuando es necesario. Vite solo necesita realizar un preprocesamiento ligero, como eliminar los tipos de typescript, antes de enviar estos archivos de vuelta al navegador. Sin embargo, no importa cuán grande sea tu base de código, el servidor siempre se inicia al instante y las reconstrucciones incrementales también son muy, muy rápidas.
Nos encantan estos nuevos beneficios de rendimiento, por lo que tenía sentido poner a prueba Vite y utilizarlo como base para una solución alternativa a storybook. Hemos creado una herramienta de código abierto llamada Ladle. Una herramienta para desarrollar y probar componentes React a través de historias, construida desde cero sobre Vite.
Hagamos una demostración. Comenzaremos con una carpeta vacía, así que inicialicemos nuestro proyecto. También necesitamos agregar algunas dependencias como react, react-dom y ladle. Por defecto, Ladle busca la carpeta source. Y específicamente busca archivos que terminen con .stories.dsx. Así que creemos el archivo welcome-stories.dsx.
Las historias también son solo componentes React, pero deben ser exportadas. Así que exportemos primero el nombre de la historia, que exporta un encabezado. Por supuesto, esto podría ser cualquier componente React, por ejemplo, un componente de tu sistema de diseño. Y ahora podemos iniciar Ladle con el comando ladleserve. Esto inicia de inmediato un servidor de desarrollo v8 y esta es la interfaz de Ladle. En el lado izquierdo puedes encontrar tu componente y en el lado derecho hay una navegación que muestra todas las historias descubiertas. Por defecto, se utilizan los nombres de archivo y los nombres de exportación para crear esta navegación. Pero esto también se puede cambiar a través del código mediante los parámetros nombre de la historia y export default título.
Agreguemos algunas historias adicionales para demostrar otras características. Esta historia tiene un botón que no es muy accesible. Como puedes ver, el contraste de color no es bueno. Puedes ejecutar una verificación de accesibilidad haciendo clic en este icono. Y ahora la verificación nos indica que hay una violación y nos proporciona detalles para que podamos depurar y solucionarlo. Otra característica útil es cuando se prueban la capacidad de respuesta y el diseño responsivo.
Comments