SuperAPI AI 工具集

svelte-component-factoring

前端与建站

查看项目

更新于 10-16 09:54

技能介绍

用途:在创建、拆分、组合或评审 Svelte 组件时,用“谁拥有这段行为、状态、远程结果和证据”取代“这段标记能否被抽出来”的判断标准。

主要能力:给出组件拆分标准,即一个组件端到端拥有一个产品职责;它导入自己负责结果、pending 状态、错误与重试的远程函数,把本地 UI 状态保留在本地,对外只暴露事实性事件或回调 props,不导入同级组件内部实现、不调用同级的刷新函数、不传递控制器式方法集合。当组件存在多个独立变更原因(上传文件、观察异步状态、渲染目录、拥有模态状态、样式化重复行)时应拆分;仅为搬动标记而拆分、却把状态和远程仍留在路由控制器中的做法不可取。

用法与放置规则:保持路由页面轻薄,只做组合同级、传路由数据、设置路由作用域上下文、拥有路由级功能开关,不承担业务工作流、分页器、模态动作状态或远程刷新逻辑。状态放在用户可见职责所在处:只有一个叶子消费远程结果时在该组件导入;多个同级渲染同一结果时在其最近共同拥有者加载并下传纯数据;变更影响特定列表或行时刷新逻辑放在拥有该列表或行的组件旁;派生状态用 $derived 而非 $effect;$effect 用于浏览器副作用(轮询、订阅、计时器、响应已消费事件刷新查询、分析、DOM 操作、第三方集成),且启动工作的 effect 必须显式终止或清理。

上下文与事件:context 仅用于路由作用域横切服务,值须狭窄,允许类型化事件通道、路由作用域能力对象、小型不可变配置、提供方拥有的有界响应式状态;禁止宽泛路由数据包、远程查询结果、行数组、模态状态、通用命令包。事件须为事实(如 record-saved(id)、job-terminal(id))而非命令(如 refreshList()、clearCard())。父子组件事件优先用 Svelte 5 回调 props;已知 Svelte 后代间发布/消费用路由作用域 context;除非事件需跨出 Svelte 路由子树,否则避免 document 级 CustomEvent 总线。

评审清单:用一句话命名新组件的产品职责;列出每个远程函数及其拥有组件;列出每个状态桶及放置理由;证明跨组件事件或 context 值是事实而非命令或宽泛共享控制器;确认无同级导入另一同级内部实现;异步同级在各自 的 svelte:boundary 下,避免慢远程清空页面;说明哪些既有行为是不变量、哪些测试覆盖。

限制:资料未提供该技能的具体安装方式、支持平台、收费情况或可执行命令;实际使用前应先阅读当前组件、路由、测试与邻近模式,并查阅官方 Svelte/SvelteKit 文档中涉及 context、$derived、$effect、远程函数、异步边界与测试的部分,以及受影响路由已采纳的设计产物或 ADR。