Complemento HTML: Por qué copiar las funciones básicas del navegador tiene mucho sentido

(10 de diciembre de 2020)

El Complemento HTML para Storybook hace lo que los navegadores modernos han estado haciendo durante años. Aún así, es sorprendentemente útil y se acerca a las 100K descargas. El desarrollador principal de Whitespace Fredrik Johansson explica por qué.

Vista previa animada del complemento HTML en acción

La idea se originó en un proyecto de cliente que estábamos haciendo para el proveedor de plataforma web sueco Episerver. Nuestro equipo estaba construyendo una biblioteca de componentes que su equipo interno de desarrolladores de .Net implementaría en episerver.com. Estarían escribiendo los componentes en un lenguaje de plantillas específico de Episerver y querían un acceso más fácil al código HTML, sin tener que luchar con React.

Escribir un complemento para Storybook resultó ser bastante sencillo, y hay un breve guía sobre cómo hacerlo. En menos de un día, la primera versión del complemento HTML estaba lista. Por un capricho, lo agregué al Github de Whitespace por la remota posibilidad de que otros también lo encontraran útil. Y en lo que va de 2020, hemos tenido casi 100K descargas.

¿Qué hace HTML Addon?

Agrega un panel que muestra el código HTML del componente que está viendo en Storybook. Es tan simple como eso.

Técnicamente, el complemento usa la API del navegador (específicamente innerHTML) para recuperar el HTML resultante de los componentes escritos en diferentes marcos. Esto se hace automáticamente cuando se actualiza el DOM, ya sea al cambiar entre historias o al cambiar la salida de la actual a través de controles o perillas. Luego, el marcado se procesa a través de Prettier para que sea legible.

Captura de pantalla del panel de complementos HTML

¿Por qué usamos el complemento?

Al principio, no vi el beneficio de crear un complemento que simplemente muestre HTML. Durante años, el marcado de componentes individuales ha sido visible a través de las herramientas de desarrollo en los navegadores modernos, entonces, ¿por qué reinventar la rueda? Para ser honesto, construir el complemento fue más una cuestión de complacer a nuestro ejecutivo de cuenta.

Sin embargo, el tiempo, por una vez, me ha demostrado que estoy equivocado.

El complemento simplifica tres tareas comunes en espacios en blanco:

  1. Traspasos. A menudo trabajamos para empresas de tecnología con desarrolladores de backend internos. Obtener acceso directo a HTML sin tener que configurar el proyecto ahorra tiempo. Además, hace que nuestra entrega sea completamente independiente de la elección del idioma de las plantillas de nuestros clientes.
  2. Auditorías de calidad. Cuando realizamos pruebas de accesibilidad, nuestros especialistas en accesibilidad obtienen acceso directo al marcado HTML.
  3. Solución de problemas. El acceso instantáneo al HTML facilita la búsqueda de errores. No tener que abrir las herramientas de desarrollo del navegador elimina un poco la fricción. Y si codifica para ganarse la vida, tener menos fricción es definitivamente algo bueno.

Todo se reduce al hecho de que más desarrolladores de UI en Whitespace (y en otros lugares) conocen HTML que React. E incluso para un ávido desarrollador de React como yo, HTML suele ser más sencillo. El complemento HTML destila el código a la esencia y facilita el trabajo a una variedad de personas.

¿Cómo lo instalo?

Agregue el complemento HTML a su Storybook con npm :

npm i --save-dev @whitespace/storybook-addon-html

Registre el complemento en .storybook / main.js :

module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};

Hay más información en el archivo Léame en GitHub .

¿Cuál es el plan? hacia adelante?

Estoy sorprendido y contento con la recepción positiva del complemento. Recibo comentarios regulares a través de Github y dedico algunas horas cada mes a corregir errores. También hemos visto contribuciones de otras personas que han sido de gran ayuda para mantenerlo actualizado con las nuevas versiones del núcleo de Storybook.

Si desea agregar funciones, no dude en hacer una extracción solicitud, o contáctame en Github oa través de Whitespaces Twitter .

Participe

Consulte el Catálogo de complementos para conocer más formas de personalizar su Libro de cuentos. Para obtener los últimos complementos y noticias de Storybook, regístrese en la lista de correo de Storybook. Consulte Storybook en GitHub y únase al chat de Discord .

Publicado originalmente en https : //whitespace.se el 10 de diciembre de 2020.