viewcomponent-patterns

用途

ViewComponent Patterns 是面向 Rails 8 的 ViewComponent 开发技能，用于创建可复用、可测试的 UI 组件，并采用测试驱动开发（TDD）流程。ViewComponent 是 Ruby 对象形式的视图组件，其特点包括：比 partial 更快（无需 partial 查找）、无需完整请求周期即可单元测试、可用 Ruby 封装视图逻辑、通过显式接口实现类型安全。

主要能力

该技能覆盖以下内容：

• 快速开始：通过 bundle add view_component 添加依赖，使用 bin/rails generate component Card title 生成组件。
• TDD 工作流：先写组件规格（RED），运行规格（因无组件而失败），生成组件骨架，实现组件，运行规格（GREEN），按需添加变体/插槽。
• 项目结构：组件位于 app/components/，规格位于 spec/components/，包含基础类、组件类、模板文件以及嵌套组件目录（如 table、modal）。
• 基础组件：ApplicationComponent 继承 ViewComponent::Base，可包含 ActionView::Helpers::TagHelper、NumberHelper 等，并提供共享辅助方法（如处理 nil 值的 not_specified_span）。
• 基本组件示例：CardComponent 接收 title 与可选 subtitle，通过 subtitle? 判断是否渲染副标题，模板中使用 content 渲染块内容。
• 常见模式（共五种，详见 patterns.md）：状态徽章（BadgeComponent 使用 success/warning/error/info/neutral 变体常量）、带插槽的组件（renders_one/renders_many 实现灵活布局，如 header、footer、actions）、集合组件（TableComponent 支持可选自定义行插槽）、模态框组件（尺寸变体与基于插槽的结构）、模型包装（类 Presenter，使用 with_collection_parameter、delegate 与嵌套组件渲染）。
• 视图中的用法：简单组件、带块的组件、带插槽的组件、集合渲染（with_collection）。
• 组件测试：在标记 type: :component 的规格中使用 render_inline 与 Capybara 匹配器（have_css、have_text），涵盖基本变体规格、可选参数规格、插槽测试、集合渲染规格以及 ViewComponent Previews 设置。
• 检查清单：先写规格（RED）、继承 ApplicationComponent、使用插槽实现灵活内容、变体使用常量（开闭原则）、用不同输入测试、测试集合渲染、为开发创建预览、所有规格 GREEN。

使用方式

1. 在 Gemfile 中添加：bundle add view_component。
2. 生成组件：bin/rails generate component Card title。
3. 按 TDD 流程编写规格、生成骨架、实现组件、运行规格。
4. 在视图中渲染组件，例如：
   • 简单组件：<%= render BadgeComponent.new(text: "Active", variant: :success) %>
   • 带块：<%= render CardComponent.new(title: "Stats") do %> ... <% end %>
   • 带插槽：<%= render CardComponent.new do |card| %> <% card.with_header do %> ... <% end %> ... <% end %>
   • 集合：<%= render EventCardComponent.with_collection(@events) %>
5. 使用 render_inline 与 Capybara 匹配器编写组件规格。

适用场景

适用于 Rails 8 项目中构建可复用 UI 元素、抽取复杂 partial、创建可测试视图组件的场景，尤其适合希望以 TDD 方式开发视图组件、需要插槽与集合渲染等灵活布局、或希望用 Ruby 封装视图逻辑的开发者。

限制

资料未提供关于收费、价格、平台支持范围、性能基准或与其他框架兼容性的信息，暂未提供。