SuperAPI AI 工具集

implement-hotwire

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:在 Rails 项目中实现 Hotwire 前端交互,覆盖 Turbo Frames、Turbo Streams 与 Stimulus 控制器三类场景。选择依据为:链接或表单后局部替换页面用 Turbo Frame;广播服务端变更用 Turbo Stream;Turbo 之外的纯客户端行为用 Stimulus;整页导航用普通 Rails 导航而非 Frame。

主要能力与流程:先以标准 Rails 表单和链接实现纯 HTML 功能;再用 turbo_frame_tag 包裹局部更新区域,并确认 DOM 中存在正确 id 的 <turbo-frame>;随后添加 Turbo Frames/Streams,通过 ActionCable 广播,并在 DevTools 网络面板确认 frame 请求返回 text/vnd.turbo-stream.html,在 Action Cable 日志确认订阅;最后仅在需要额外 JS 行为处挂载 Stimulus 控制器,并在浏览器控制台用 application.getControllerForElementAndIdentifier(el, 'name') 验证实例。

验证与限制:需在禁用 JavaScript 的浏览器或使用 Capybara :rack_test 驱动运行 rails test:system,确认表单可提交、链接可导航、刷新后数据仍保留。硬性约束包括:始终从纯 HTML 开始并渐进增强,绝不用 Turbo Frames 做整页导航,始终先在不含 JavaScript 的环境测试。输出应包含渐进基线、所选原语及理由、DOM 契约、服务端契约与验证清单;默认语言为英文,除非另有要求。可按需加载 EXAMPLES.md 与 references/workflow.md,并可与 write-tests、apply-stack-conventions、code-review 等技能串联。