SuperAPI AI 工具集

sveltekit

前端与建站

查看项目

更新于 10-16 02:25

技能介绍

用途

SvelteKit 技能用于处理 SvelteKit 应用级与路由级的开发工作,包括路由文件(+page/+layout/+server)、load、表单动作、hooks、认证、cookies、失效(invalidation)、SSR、水合(hydration)与导航等。

其优化目标是让路由与数据流在 SSR、水合、导航和渐进增强下保持正确,重点关注边界划分与最短的正确实现。

适用范围

当任务的难点在于应用级或路由级行为时,使用本技能。如果任务主要涉及组件内部、runes、snippets、局部状态或样式,则应使用 svelte 技能。

工作流程

1. 在修改代码前先确立本地风格

  • 检查 package.json、svelte.config.*、路由树、hooks 以及附近的 route 文件。
  • 除非任务明确要求迁移,否则优先沿用被修改文件中已有的约定。
  • 对于新代码,默认使用当前 SvelteKit API 和带类型的 route 文件。

2. 在写代码前先选择服务端/客户端边界

  • 将仅服务端的工作放在 +page.server.*、+layout.server.*、+server.*、hooks 或 $lib/server/* 中。
  • 将可复用的视图逻辑放在组件或 $lib 中,而不是 route 文件里。
  • 将请求相关的可变状态排除在共享模块之外,避免服务端状态在用户之间泄漏。
  • 保持路由流程清晰:params、URL、cookies 和 locals -> load 或 action -> 带类型的 props -> 组件。

3. 先解决数据流,再处理 UI 细节

  • 决定真实来源应放在 URL、服务端数据、组件状态、snapshots、context 还是共享响应式对象中。
  • 派生状态,而不是同步副本。
  • 决定数据是自动重新运行,还是仅在定向失效后重新运行。

4. 明确导航与 SSR 行为

  • 检查代码是在服务端、浏览器还是两者中运行。
  • 决定状态是否能在重新加载、深链接、历史导航后保留,还是仅存在于当前渲染中。
  • 检查路由组件是否在导航间被复用,以及是否有任何内容必须显式重置。

5. 验证

  • 使用仓库现有的检查手段验证相关的服务端、浏览器和渐进增强路径。
  • 当行为对版本敏感时,对照已安装的 Svelte 与 SvelteKit 版本以及当前官方文档进行核实。

主题指南

  • 修改 route 文件、load、父级数据、依赖追踪或序列化时,阅读 guides/load-routing.md。
  • 实现表单、变更、渐进增强或 API 端点时,阅读 guides/forms-endpoints.md。
  • 处理 hooks、认证、cookies、密钥或请求本地身份时,阅读 guides/auth-cookies.md。
  • 放置状态或修改导航、失效、历史、重置行为时,阅读 guides/state-navigation.md。
  • 涉及仅浏览器代码、服务端渲染、水合或水合前交互时,阅读 guides/ssr-hydration.md。
  • 采用重命名 API 或其他对版本敏感的 SvelteKit 特性时,阅读 guides/migration.md。

限制

资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围或效果数据,这些信息暂未提供。