SuperAPI AI 工具集

svelte

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:为 Epicenter 项目提供 Svelte 5 编码规范,在编辑 .svelte、.svelte.ts 文件或处理 Svelte UI 状态时应用。

主要能力与约定:

  • Runes 基线:用 $state 存组件就地修改的响应值;只在整体替换的值(大数组、仅替换的持久化 store、不透明句柄)用 $state.raw,它按引用存储、无深代理、仅对重新赋值反应。计算状态优先 $derived;$effect 仅作浏览器端逃生口(DOM 集成、分析、订阅、外部系统),返回的清理函数在重跑前和组件销毁时执行。由 $props() 派生的值通常应写成 $derived。
  • 组件与 props:props 默认归父级所有,命令用回调 props,仅 UI 包装等有意双向 API 才用 $bindable。新代码用 snippets 与 {@render} 取代 slot,类型用 Snippet 与元组参数如 Snippet<[Row]>。避免旧模式:$:、export let、on:click、<slot>、beforeUpdate、createEventDispatcher 等,改用 onclick 等事件属性与回调 props。
  • 状态与集合:ID 键集合用 SvelteMap,成员集合用 SvelteSet;仅命令式读取的集合用普通 Set/Map。表数据通过 @epicenter/svelte 的 fromData 读取,非表来源用 fromSubscription,外部事件源用 svelte/reactivity 的 createSubscriber 桥接。
  • 其他决策:可弃资源身份依赖 prop 时由父级用 {#key} 或 {#if} 控制挂载;稳定 promise 用 {#await};有限联合用 satisfies Record 查表;新可复用 DOM 行为优先 {@attach} 而非 use:;workspace 字符串字段优先失焦提交;字符串属性混表达式用 Svelte 引号插值。

使用方式:编辑相关文件时按上述规范执行,并在改动前对照官方源码或本地已安装类型核验 Svelte 5、SvelteKit、shadcn-svelte 的行为。可用 DeepWiki MCP 针对 sveltejs/svelte 等仓库提窄问题,但仅作导向,决定性细节需以本地类型、源码或官方文档验证。

适用场景:Epicenter 项目中的 Svelte 5 runes、组件生命周期、workspace 状态与 TanStack Query 相关改动。

限制:具体安装命令、版本号、收费与平台信息资料未提供。