Inspecto

Introducción

Los Web Components son un estándar web (aún un tanto inmaduro) que permite la creación de componentes reutilizables para aplicaciones web de manera nativa. Estos componentes encapsulan el HTML, CSS y JavaScript relacionado en un solo paquete, lo que facilita su reutilización y mantenimiento. Sin embargo, una de las dificultades de usar componentes de terceros, es probar su API de manera efectiva, especialmente cuando la documentación es ambigua o insuficiente.

Inspecto es un tester gráfico para web components diseñada específicamente para abordar esta problemática. Se centra en el estándar WebComponents y cualquier biblioteca derivada de él, proporcionando una forma práctica de probar la API de un web component en desarrollo, pudiendo interactuar de forma visual, probando diferentes configuraciones y observando cómo afectan al comportamiento del componente en tiempo real.

Esto permite una depuración más efectiva y una comprensión más profunda de la API del componente. Además, inspecto facilita la identificación de posibles problemas y la mejora de la calidad del componente antes de su implementación en una aplicación web.

Ejemplo de uso

Características

• Consola minimalista integrada
• Lectura y captura automática de los Test y sus argumentos
• Interfaz gráfica para los WebComponents probando así la responsividad
• Flexibilidad para testear cualquier componente basado en los estándares de WebComponent
• Provee una función global, sencilla y minimalista: cw() para mostrar cualquier resultado por su consola

Tecnologías usadas

• Uso de la biblioteca para crear WebComponents nativos Lit (anteriormente LitElement) junto con la un tanto inmadura Api Nativa WebComponents
• Uso de TailWindCss
• Programado en Html, Css y JavaScript
• Uso de la biblioteca de SmartHtmlElements para probar el Tester
• Componente de Prueba subido a un Servidor en Hostgator: https://inspecto.webprized.com/editor
• Tester disponible para descargar por GitHub: https://github.com/RNovaCoder/Inspecto

Nota: Si sólo quiere usar el Tester valla directamente a la carpeta Dist