Formas curiosas de comunicar y persistir estados

Esta vez aprendí nuevas formas de comunicar estados, no todo es MobX, Redux y props.

hace 6 meses   •   5 min de lectura

Por Andrés Tuñón

El fin de semana pasado, me encontraba leyendo he investigando acerca de como funciona chakra ui y los addons de storybook, para mejorar el proyecto previamente hecho; si quieres conocer la historia completa:

Mi experiencia contribuyendo a un repositorio open source
Comparto lo que aprendí al contribuir en un proyecto open source y algunos puntos a mejorar en mi arsenal de habilidades
Diseñando la primera versión (PR aprobado)
Consideraciones al documentar y mantener librerías open source
Comento lo que aprendí gracias a mi segunda contribución a un proyecto open source
DIseñando la segunda versión (PR rechazado)

Nuevo rumbo

Mi solución del botón sobre los componentes no funcionó y debía buscar una forma poco invasiva de cambiar el tema oscuro del sitio.

La solución clara es un botón en el toolbar, justo como storybook igual lo hace:

Toolbar
Toolbar

De ese modo resuelvo todos los issues; pero hay un problema, la estructura de un addon solo te deja cambiar parámetros globales ... o eso creía en ese momento.

Memoria y Persistencia Auxiliar

Estuve indagando dentro Chakra UI para conocer cómo ellos persisten si es tema oscuro/claro y me encontré que simplemente es un estado en memoria, con ayuda del localstorage y atributos en el html.

Es impresionante, primero que todo ellos utilizan Providers para dar la props a toda la aplicación y sus componentes.

Ellos tienen unas opciones configurables; pero omitiendo eso, halan la información desde el localStorage para saber si previamente el sitio estaba en tema oscuro o claro:

Los pasos iniciales
Los pasos iniciales

Luego sincroniza contra un atributo dentro del cuerpo del sitio, para finalmente entregar el contexto y las funciones como toggle, set y otros:

sincroniza contra el body
sincroniza contra el body 
Entrega el Contexto
Entrega el Contexto

Comparto el provider principal para que puedan ver el código:

chakra-ui/color-mode-provider.tsx at main · chakra-ui/chakra-ui
⚡️ Simple, Modular & Accessible UI Components for your React Applications - chakra-ui/color-mode-provider.tsx at main · chakra-ui/chakra-ui

Luego pase a trabajar con el addon y ver que podía hacer para cambiar algo dentro de Chakra UI y modificar el tema.

Parámetros

Lo que te enseñan en las bases de como armar un addon en storybook es la persistencia por parámetros, clásico de cualquier sitio.

Es decir, le das click al botón cambiando un estado (en este caso outlineActive), ese estado acciona 'algo' en la pantalla por javascript, pero cosas superficiales. Además persiste estos parámetros en la ruta del sitio para saber su estado anterior.

Un ejemplo general seria entrar al detalle de un producto y consultar la información de ese producto por su id.

Volviendo a la necesidad, yo necesito cambiar el estado de un provider, necesito ir desde el toolbar hasta la parte de preview, donde inicialicé el Provider y accionar el toggle.

No puedo depender del atributo, ni el localstorage; ya que solo son utilizados por chakra ui para saber inicialmente qué tema fue anteriormente, no es una escucha constante. Necesito una forma nueva de comunicarme y para eso existen los canales

Canales

Es una forma brindada por Storybook de comunicar eventos en diversas partes de tu sitio. No es más que canales de websocket disfrazado.

Storybook por detrás es un clásico express que sirve un sitio estático a partir de las stories de la carpeta que le indiques. Dentro de toda esta construcción, abre múltiples canales para comunicarse con el servidor:

Cómo inicia storybook
Cómo inicia storybook

Aquí se crea aparte todo lo referente al Websocket; en otras palabras, se abstrae en una clase:

Abstracción del Websocket
Abstracción del Websocket

Ahora cada vez que se llame getServerChannel crea una nueva instancia de esta clase. Al parecer ese noServer permite que se pueda compartir un http server entre multiples websocket servers (un tema que debo investigar). En otras palabras todo se mantiene comunicado bajo el mismo server.

Luego en los addons te permite utilizar estos canales y el resto del ecosistema:

Es una solución realmente interesante, aquí dejo el código donde se trabaja con el ws:

storybook/get-server-channel.ts at 5583dd111577f3faa7a2b1bf88ca090e732bcf9a · storybookjs/storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more! - storybook/get-server-channel.ts at 5583dd111577f3faa7a2b1bf88ca090e732bcf...

Y finalmente gracias a los canales es que logro comunicar cuando quiero cambiar de tema, dejaré el PR con los cambios por si quieren echarle un vistazo:

feat(storybook-addon): Replace button on the corner with toggle tool by ngxCoder · Pull Request #5756 · chakra-ui/chakra-ui
Closes #5544 #5380📝 DescriptionThis PR replaces the ColorModeSwitch with a Tool.This tool allows the users to toggle the color mode of their stories (the same purpose).⛳️ Current behavior (upda...

Corre la voz

Sigue leyendo