zag

Zag es una biblioteca de JavaScript de máquinas de estado finito para construir componentes UI accesibles. Su propósito declarado es evitar reimplementar patrones comunes de componentes (pestañas, menús, modales, tooltips y otros) por separado en cada framework, modelando la lógica de interacción una vez de forma framework-agnostic. Ideas centrales descritas en el README: - Escribir una vez, usar en todas partes: las interacciones de los componentes se modelan independientemente de cualquier framework, con adaptadores disponibles para React, Solid, Svelte y Vue. - Enfoque en accesibilidad: el proyecto afirma manejar detalles como interacciones por teclado, gestión del foco, y roles y atributos ARIA. - Headless: las APIs de las máquinas se describen como completamente sin estilo, dejando la elección de la solución de estilo al desarrollador. - Máquinas de estado: la implementación se basa en ideas de los statecharts, aunque el README señala que no sigue la especificación SCXML. Modelo de uso: las máquinas se publican por componente como paquetes separados, por ejemplo @zag-js/dialog y @zag-js/tooltip, instalados con npm o yarn. Los wrappers de framework como @zag-js/react, @zag-js/vue, @zag-js/solid y @zag-js/svelte permiten consumir una máquina dentro de una aplicación. El ejemplo de React en el README muestra useMachine de @zag-js/react combinado con un paquete de componente, luego connect(service, normalizeProps) para producir una API de props, que se expande en elementos como el contenedor raíz y cada elemento. Principios rectores establecidos en el README: las máquinas y pruebas se modelan según las prácticas de autoría WAI-ARIA; las pruebas end-to-end se escriben para cada componente para que el comportamiento sea consistente entre frameworks; y las máquinas están destinadas a permanecer ligeras y simples, evitando conceptos complejos de máquinas como spawn y estados anidados. Notas del repositorio y flujo de trabajo: - La documentación y un changelog están enlazados desde el README (zagjs.com y CHANGELOG.md). - La compilación utiliza esbuild y turborepo para compilaciones concurrentes entre paquetes, produciendo salida CJS, ESM y DTS. - Existen ejemplos de inicio para React (Next.js TypeScript), Vue 3, Solid y Svelte. - Las pruebas end-to-end usan Playwright y se ejecutan por framework (React, Vue, Solid). - Se proporcionan comandos del generador para crear un nuevo paquete de máquina o un nuevo paquete de utilidad. - Otros comandos cubren ejecutar pruebas, linting, compilar e iniciar el sitio web. El README también reconoce varias inspiraciones, incluyendo código duplicado entre las implementaciones de Chakra UI en React y Vue, patrones de UI puros, Material Components Web, Radix UI, XState, Vue.js, Lit y Sonner. Las instrucciones de contribución señalan una etiqueta Good First Issue, reporte de problemas para errores y lagunas en la documentación, y solicitudes de funciones. El proyecto está licenciado bajo MIT y se mantiene bajo Chakra Systems Inc.