zag

Zag是一个用于构建可访问性UI组件的JavaScript有限状态机库。其宗旨是在各框架中避免重复实现常见的组件模式（如标签页、菜单、模态框、提示框等），而是以框架无关的方式对交互逻辑进行建模。 README中概述的核心思想： - 一次编写，处处可用：组件交互独立于任何框架进行建模，并为React、Solid、Svelte和Vue提供适配器。 - 注重可访问性：项目处理键盘交互、焦点管理以及ARIA角色和属性等细节。 - 无头架构：机器API被描述为完全无样式，将样式选择权留给开发者。 - 状态机：实现基于状态图概念，但README指出其不遵循SCXML规范。 使用方式：每个组件作为一个单独的包发布，例如@zag-js/dialog和@zag-js/tooltip，可通过npm或yarn安装。框架包装器如@zag-js/react、@zag-js/vue、@zag-js/solid和@zag-js/svelte让你能够在应用中消费机器。README中的React示例展示了useMachine from @zag-js/react与组件包结合使用，然后通过connect(service, normalizeProps)生成props API，将其展开到根容器和各个项等元素上。 README所述的指导原则：机器和测试遵循WAI-ARIA创作实践；每个组件都编写了端到端测试，以确保跨框架行为一致；机器旨在保持轻量级和简洁，避免使用spawn和嵌套状态等复杂机器概念。 仓库和工作流说明： - README链接了文档和变更日志（zagjs.com和CHANGELOG.md）。 - 构建使用esbuild和turborepo以实现跨包的并发构建，产出CJS、ESM和DTS格式。 - 提供了React（Next.js TypeScript）、Vue 3、Solid和Svelte的 starter 示例。 - 端到端测试使用Playwright，并按框架分别运行（React、Vue、Solid）。 - 提供生成器命令来脚手架化新的机器包或工具包。 - 其他命令涵盖运行测试、代码检查、构建和启动网站。 README还列出了多个灵感来源，包括Chakra UI的React和Vue实现之间的重复代码、纯UI模式、Material Components Web、Radix UI、XState、Vue.js、Lit和Sonner。贡献指南指向"Good First Issue"标签，以及针对bug和文档空白的issue报告和功能请求。该项目采用MIT许可，由Chakra Systems Inc.维护。