mcpField
S
svelte5-best-practices

svelte5-best-practices

github.com/ejirocodes开发617.2k 次安装18 周前更新
代码仓库

关于 svelte5-best-practices

介绍 Svelte 5 在响应式、组件、事件、TypeScript、SvelteKit、迁移和性能方面的实践模式。帮助开发者采用新约定并避免常见错误。

主要功能

  1. 01Runes 与响应式状态模式
  2. 02Snippets 和组件属性
  3. 03事件与回调约定
  4. 04TypeScript 与泛型组件
  5. 05SvelteKit 和性能指引
  6. 06Svelte 4 迁移说明

适用场景

  1. 01构建 Svelte 5 组件
  2. 02迁移 Svelte 4 代码
  3. 03实现 SvelteKit 加载逻辑与表单操作

安装

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

$npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices

安装后在 Claude Code 中输入/svelte5-best-practices确认已加载。

包含的文件

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

references/
events.md
migration.md
performance.md
runes.md
snippets.md
sveltekit.md
typescript.md

详细介绍

Svelte 5 最佳实践

快速参考

主题使用时机参考
Runes$state、$derived、$effect、$props、$bindable、$inspectrunes.md
Snippets替代插槽、{#snippet}、{@render}snippets.md
事件onclick 处理程序、回调属性、上下文 APIevents.md
TypeScript属性类型、泛型组件typescript.md
迁移从 Svelte 4 迁移到 5、从 stores 迁移到 runesmigration.md
SvelteKitLoad 函数、表单操作、SSR、页面类型sveltekit.md
性能通用响应性、避免过度响应、流式传输performance.md

核心模式

响应式状态
<script>
  let count = $state(0);           // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>
组件属性
<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>
Snippets（替代插槽）
<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}
事件处理程序

<button onclick={() => count++}>Click</button>
回调属性（替代 createEventDispatcher）
<script>
  let { onclick } = $props();
</script>

<button onclick={() => onclick?.({ data })}>Click</button>

常见错误

  1. 使用 let 却不使用 $state - 不使用 $state()，变量就不会具有响应性
  2. 使用 $effect 处理派生值 - 应改用 $derived
  3. 使用 on:click 语法 - 在 Svelte 5 中应使用 onclick
  4. 使用 createEventDispatcher - 应改用回调属性
  5. 使用 <slot> - 应使用 snippets 和 {@render}
  6. 忘记 $bindable() - bind: 正常工作所必需
  7. 在 SSR 中设置模块级状态 - 会导致跨请求数据泄漏
  8. 在 load 函数中顺序 await - 使用 Promise.all 并行发起请求

评论

支持 Markdown