Skeleton React 1.0.0 发布：现代化 UI 组件库的重大升级

Skeleton 是一个现代化的 UI 组件库，专注于为开发者提供美观、易用且高性能的界面元素。它支持多种前端框架，包括 Svelte 和 React。本次发布的 Skeleton React 1.0.0 版本标志着该项目的一个重要里程碑，带来了全面的组件重构和功能增强。

核心升级：Zag.js 集成

本次更新的最大亮点是所有组件都集成了 Zag.js。Zag.js 是一个无头 UI 库，它提供了一套可访问、可组合的交互原语。通过这一集成，Skeleton 组件现在具备了：

1. 更强大的交互能力：所有组件都获得了更精细的交互控制
2. 更好的可访问性：自动处理 ARIA 属性和键盘导航
3. 更一致的 API：跨框架的统一开发体验
4. 动画支持：Tailwind 插件中新增了 CSS 动画效果

新增组件

1.0.0 版本引入了多个全新组件，丰富了开发者的工具箱：

• 导航组件：包括 Navigation Rail、Navigation Bar 和 Navigation Tile，为应用提供专业的导航解决方案
• 表单控件：
  • Switch 开关组件
  • Segment Control 分段控件
  • FileUpload 文件上传组件
  • Tags Input 标签输入组件
  • Slider 滑块组件
  • Ratings 评分组件
• 数据显示：
  • ProgressRing 环形进度条
  • Pagination 分页组件

组件 API 重构

为了提供更一致的开发体验，多个组件的 API 进行了重大调整：

1. Tabs 组件重构：

   • 移除了 Tabs.Item 组件
   • 新增了 Tabs.Panels 组件
   • 实现了与 Svelte 版本更一致的 API

2. 命名规范化：

   • React 的 <Nav> 组件更名为 <Navigation>
   • 统一了组件命名约定

3. 属性标准化：

   • 修正了 TagsInput 组件中不一致的属性命名
   • 为 Segment 组件添加了 aria-labelledby 支持

样式与交互改进

1. 视觉增强：

   • 改进了全局和组件级别的焦点状态样式
   • 优化了 Switch 和 Slider 组件的焦点表现
   • 提升了 Ratings 组件标签文本的显示效果

2. 主题支持：

   • 基于主题生成器的改进调整了默认样式
   • 移除了不必要的样式类（如 NavBar 的额外高度类）

3. 交互优化：

   • Navigation Tile 现在支持手动管理选中状态
   • 文件上传组件获得了功能增强

技术架构调整

1. 依赖管理：

   • 将 react 和 react-dom 移至 peerDependencies
   • 添加 @skeletonlabs/skeleton 作为 peer-dependency
   • 支持 React 19

2. 代码组织：

   • 移除了 reactCompose 工具函数
   • 添加了 $lib 别名路径
   • 标准化了 "use client" 指令的使用

3. 工具链升级：

   • 将 Prettier 和 ESLint 配置移至仓库根目录
   • 更新了代码格式化规则

问题修复与优化

1. 功能修正：

   • 恢复了 Pagination 组件的 count 属性
   • 解决了 Pagination 替代模式下的页面计数问题
   • 修复了 ProgressRing 在 Safari 中 100% 显示的问题

2. 性能优化：

   • 移除了 Avatar 组件的 filter 属性
   • 为 Avatar 组件实现了 style 属性

3. 稳定性提升：

   • 解决了多个组件的测试回归问题
   • 为 Ratings 组件设置了正确的唯一 key

开发者体验改进

1. 默认行为调整：

   • ProgressRing 默认不显示标签（可通过 showLabel 启用）
   • 改进了 Ratings 组件的半星 SVG 默认样式

2. 配置选项：

   • 为 Pagination 添加了 showFirstLastButtons 属性
   • 为 Navigation 组件自动生成默认 ID

3. 样式定制：

   • 改进了按钮、徽章、芯片和表单元素的样式
   • 实现了更灵活的风格定制选项

总结

Skeleton React 1.0.0 是一个全面革新的版本，不仅引入了大量新组件，还对现有组件进行了深度重构。通过集成 Zag.js，组件获得了更强大的交互能力和更好的可访问性。API 的标准化和样式的优化进一步提升了开发体验。对于正在使用或考虑使用 Skeleton 的 React 开发者来说，1.0.0 版本无疑是一个值得升级的重要里程碑。