mcpField
S
sveltekit-data-flow

sveltekit-data-flow

github.com/spences10开发1693 次安装16 周前更新
代码仓库

关于 sveltekit-data-flow

为 SvelteKit 开发者提供数据加载、表单处理和错误控制的编码技能，按路由文件职责说明服务端与通用逻辑的选择及序列化规则。

主要功能

  1. 01区分服务端与通用 load
  2. 02说明表单 actions 处理模式
  3. 03涵盖错误与重定向处理
  4. 04提示数据序列化限制
  5. 05指导显式环境变量使用

适用场景

  1. 01选择页面数据加载位置
  2. 02实现服务端表单提交
  3. 03处理身份验证后的客户端缓存失效

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spences10/skills --skill sveltekit-data-flow

安装后在 Claude Code 中输入/sveltekit-data-flow确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
client-auth-invalidation.md
error-redirect-handling.md
explicit-environment-variables.md
form-actions.md
load-functions.md
serialization.md

详细介绍

SvelteKit 数据流

快速开始

环境变量： 启用实验性标志时，优先使用显式环境变量（src/env.ts + $app/env/private|public）。

使用哪个文件？ 仅限服务器端（数据库/机密）：+page.server.ts | 通用（两端均运行）：+page.ts | API：+server.ts

加载决策： 需要服务器资源？→ 服务器端 load | 需要客户端 API？→ 通用 load

表单操作： 始终使用 +page.server.ts。错误时返回 fail()， 跳转时抛出 redirect()，失败时抛出 error()。

示例

// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};

参考文件

备注

  • 服务器端 load → 通过 data 参数传递给通用 load | 始终 throw redirect()/error()
  • 服务器端 load 不得返回类实例/函数（无法序列化）
  • $app/env/private 仅限服务器端；仅将确实安全的值标记为公开
  • 最后验证时间： 2026-06-08

评论

支持 Markdown