SuperAPI AI 工具集

sveltekit-best-practices

前端与建站

查看项目

更新于 10-16 02:35

技能介绍

用途:该技能面向使用 SvelteKit 或 Svelte 5 代码的场景。资料指出,AI 代理多按 Svelte 4 模式训练,常生成基于 stores、响应式声明 $: 和 export let 的过时代码;本技能用于强制使用 Svelte 5 runes、load 函数与表单动作。

主要能力与规则:

  1. 用 Svelte 5 runes,不用 Svelte 4 stores 或响应式声明;$state、$derived、$effect 取代 stores 与 $:。
  2. 响应式状态用 $state,普通 let 不具响应性。
  3. 计算值用 $derived,而非 $:。
  4. 副作用用 $effect,而非 $: 响应式语句。
  5. 组件属性用 $props(),而非 export let。
  6. 双向绑定属性需用 $bindable()。
  7. 数据获取用 load 函数(+page.server.ts),而非 onMount 中 fetch。
  8. 表单提交用 form actions,而非为表单 POST 单独建 API 路由。
  9. 共享布局数据用 +layout.server.ts。
  10. 错误页用 +error.svelte 渲染 load/action 错误。
  11. 需要服务端与客户端共用数据时用 +page.ts,仅服务端数据用 +page.server.ts。
  12. 中间件(鉴权、重定向)用 hooks.server.ts 的 handle。
  13. 少用 $app/stores,优先通过 load 数据传参。
  14. 可复用模板片段用 Svelte 5 的 snippet 块与 @render。

常见模式:+page.server.ts 的 load 返回对象,+page.svelte 通过 $props() 接收 data;表单用 method="POST" 与 use:enhance;流式返回未 await 的 promise,模板用 {#await};TypeScript 使用 import type { PageServerLoad, PageProps } from './$types'。

限制与反模式:不要使用 svelte/store 的 writable、readable、derived、get;不要用 $: 做派生或副作用;不要用 export let 声明属性;SSR 需要的数据不要只在 onMount 中 fetch;不要仅为处理表单 POST 而建 +server.ts;未用 $bindable() 的属性不要用 bind:value。资料未提供安装命令、价格或平台信息。