En los últimos meses En los últimos meses, se me asignó la tarea de determinar cómo escribir y administrar widgets independientes para mi trabajo de tiempo completo. Si bien fue relativamente sencillo garantizar que fueran funcionales, rápidamente me di cuenta de que mantenerlos era un desafío completamente diferente

Con esto en mente, comencé un proyecto paralelo durante mi tiempo libre y lo convertí en código abierto. Esto me permitió compartir mis conocimientos y las estrategias que me ayudaron a garantizar la calidad de mis widgets.

¿Cómo los hice originalmente?

Dado que mis widgets requerían un alto nivel de reactividad, confié en gran medida en la API del componente Svelte y usé Rollup para agruparlos. "Fue simple y directo hasta que tuve los siguientes problemas:

• Mi CSS no utilizado aumentaba con el tiempo y tampoco estaba seguro de si solo se estaba incluido el CSS del componente deseado.

• Es difícil manejar JavaScript a través de widgets sin una escritura estricta. Rápidamente se convirtió en un desastre ya que tuve que compartir algunas utilidades como la decodificación y autenticación jwt.

¿Cómo lo cambié?

Comencé a considerar cómo podría establecer algunos valores predeterminados y, lo que es más importante, integrar un sistema de tipos. Esto me llevó a la creación de mi proyecto paralelo, Svelte-standalone.

El objetivo de svelte-standalone era:

• Asegúrese de tener un CSS bien minimizado y elimine el CSS no utilizado al agrupar.
• Asegurar un sistema de tipos de elección bien respaldado y reutilizado en todas mis aplicaciones.

Nota: el sistema de tipos elegido fue TypeScript.

• Asegurar pruebas unitarias y de integración.
• Asegurarme de poder comprobar mis widgets visualmente antes y después de analizarlos.

¿Cómo logré todo eso?

Después de asegurar la compatibilidad de TypeScript con los complementos acumulativos y el preprocesador Svelte, di un paso atrás y dividí mi proyecto en pasos clave. Básicamente tuve:

1. Un .esbelto.
2. Un archivo embed.js responsable de iniciar la instancia del archivo .svelte y agregarlo al cuerpo.

A partir de ahí me di cuenta de que mi archivo de inserción era básicamente un archivo predeterminado replicado en todos mis widgets y comencé a generarlos. Entonces pude usar las herramientas de Codegen para generar 3 archivos basados ​​en mis archivos esbeltos y mi deseo de manejar los tipos en toda la aplicación:

1. declaration.d.ts: habilitó que pudiera importar directamente mi componente esbelto y envolverlo usando el tipo SvelteComponent, por lo que convertí mis componentes esbeltos en tipo fuerte de forma predeterminada.
2. types.ts: habilitado para poder escribir una configuración predeterminada basada en los accesorios declarados desde declaración.d.ts.
3. embed.ts - ¡habilité el inicio/detención de mi componente de forma estándar para todos mis widgets!

¡Y listo! Este enfoque resolvió mis problemas con el sistema de tipos y mejoró la capacidad de mantenimiento de mis widgets.

Cómo abordé los desafíos de CSS:

Los principales desafíos relacionados con CSS que enfrenté fueron: ¿Cómo puedo purgar y minimizar mi CSS sin complicaciones? ¿Cómo puedo escribir CSS que sea fácil de colaborar y de integrar en diferentes entornos?

La solución fue bastante sencilla: solo usa Tailwind CSS.

Con este enfoque, identifiqué los siguientes beneficios:

• No más estilos conflictivos: Usar Tailwind me permitió dejar de preocuparme por los estilos conflictivos. Por ejemplo, cuando se trata de una aplicación heredada que depende en gran medida de Bootstrap, simplemente apliqué un prefijo y un indicador importante a mi widget, y los conflictos se resolvieron.

• Integración perfecta: Al importar mi widget a otra aplicación Tailwind, puedo omitir fácilmente ciertas directivas de Tailwind para reducir el tamaño de mi paquete.

• Purga y minificación sin esfuerzo: Minificar se volvió sencillo y, con PurgeCSS integrado de Tailwind, solo necesitaba configurar la marca de contenido correctamente para cada widget. Esto aseguró que solo se incluyeran los estilos necesarios en el paquete final.

¿Cómo solucioné los problemas de las pruebas?

Me enfrenté al desafío de garantizar pruebas integrales para mis widgets, que abarcaran pruebas unitarias, pruebas de integración y pruebas visuales.

Mi objetivo principal era visualizar mis componentes antes y después de procesarlos con Rollup. Para lograr esto, tomé los siguientes pasos:

• Libro de cuentos estrictamente tipificado: Implementé un libro de cuentos estrictamente tipificado basado en mis archivos declaración.d.ts y tipos.ts. Esto hizo que fuera conveniente generar automáticamente una historia predeterminada para cada uno de mis widgets.

• Integración de Vite: utilicé Vite para cargar el componente incluido en una ruta Svelte. También fue conveniente generar un componente de ruta predeterminado basado en mis archivos TypeScript.

¡Eso fue todo! ¡Apreciaría de todo corazón algún comentario! Además, echa un vistazo a Svelte-standalone.

Si tienes preguntas, sugerencias o inquietudes, ¡no dudes en contactarme!