Svelte es un marco simple que es fácil de usar y sus últimos cambios deberían hacerlo aún más fácil.
En junio de 2023, Svelte anunció su versión estable más reciente, la versión 4. La actualización de Svelte 4 es principalmente una versión de mantenimiento de Svelte 3, cuyo objetivo es preparar el escenario para que la próxima generación de Svelte se lance como Svelte 5.
Svelte 4 agrega varias mejoras al ecosistema de Svelte, incluido un rediseño del sitio web, la configuración de transiciones locales como predeterminadas, la mejora de la compatibilidad con componentes web y el cambio de TypeScript a JSDoc.
1. Rediseño del sitio esbelto
Svelte 4 llegó junto con mejoras al oficial sitio web esbelta. La nueva apariencia del sitio es fantástica, con documentos de TypeScript mejorados, una opción de modo oscuro, y una experiencia de usuario generalmente mejorada en todos los dispositivos.
El sitio de Svelte ahora tiene un REPL mejorado que le permite experimentar con el código de Svelte directamente en el navegador.
Además, todos los enlaces de tutoriales de Svelte ahora apuntan a la experiencia de los nuevos estudiantes de Svelte, mientras que los tutoriales antiguos están disponibles para los usuarios de Safari 16.3 y versiones anteriores.
2. Las transiciones locales son predeterminadas
Imagine la dolorosa experiencia de tener que conformarse con las transiciones CSS después de ver que su página se carga más de lo esperado porque usó transiciones Svelte.
Por lo general, se reproduce una transición cuando destruye un bloque principal. Puede anular este comportamiento con el |local modificador Esto hace que la transición se ejecute solo cuando destruya el bloque que contiene el componente de destino. En Svelte 4, esto |local El modificador está configurado como predeterminado para las transiciones.
En el fragmento a continuación, se agrega localmente una transición de diapositiva al división elemento:
{artículo}3. Compatibilidad mejorada con componentes web
Svelte siempre ha promovido la reutilización y la mantenibilidad, de ahí su soporte continuo para componentes web. Los componentes web le permiten crear elementos HTML personalizados reutilizables con estilos y comportamiento inyectados.
Svelte 4 cambia la forma en que genera componentes web, eliminando errores e inconsistencias. Estos cambios incluyen:
- Exportar crea un accesorio de componente, haciéndolo accesible a los consumidores de componentes.
- Las asignaciones son reactivas. Para cambiar el estado de un componente y desencadenar una nueva representación, asígnelo a una variable declarada localmente.
- Utilizar el $ símbolo al comienzo de una declaración para marcarla como una declaración reactiva. Las declaraciones reactivas se ejecutan después de otro código de secuencia de comandos y antes de que se represente el marcado del componente, siempre que cambien los valores dependientes.
- Al crear objetos de tienda, prefije la tienda con $ para permitir el acceso reactivo a un valor.
- Establecer el atributo de contexto de una etiqueta de secuencia de comandos en módulo hace que el script se ejecute una vez cuando el módulo se evalúa por primera vez en lugar de para cada instancia de componente.
4. El cambio de TypeScript a JSDoc
JSDoc es una herramienta de documentación que admite agregar anotaciones de tipo y comentarios a los códigos JavaScript.
Teniendo en cuenta que JSDoc engaña a los desarrolladores para que documenten sus códigos, esta migración tiene como objetivo alentar a más desarrolladores de Svelte a adquirir el hábito de documentar correctamente sus códigos. Una base de código JavaScrpt adecuadamente documentada requeriría poca o ninguna verificación de tipo.
Si es nuevo en TypeScript, debería explore TypeScript y descubra por qué los desarrolladores lo prefieren.
Migración a Svelte 4
Svelte 4 tiene un rendimiento mejorado y un desarrollo optimizado, lo que es excelente para crear aplicaciones web de alto rendimiento. Esta nueva versión también debería fomentar una mejor documentación del código con el paso a JSDoc.
Svelte continúa mejorando, y aunque no es un marco con el que todos los desarrolladores estén familiarizados, aquellos que lo están lo elogian mucho.