mcpField
S
svelte5

svelte5

github.com/trevors开发39 次安装
代码仓库

关于 svelte5

面向 Svelte 5 组件开发者的参考技能，展示如何将 Svelte 4 写法改为 runes，并提供 TypeScript、模式和易错点的参考资料。

主要功能

  1. 01Svelte 4 到 Svelte 5 的改写示例
  2. 02$props、$state、$derived 的用法
  3. 03事件与片段语法
  4. 04TypeScript 和易错点参考资料

适用场景

  1. 01迁移现有组件到 Svelte 5
  2. 02在新组件中使用 runes
  3. 03查阅类型定义和响应性注意事项

安装

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

$npx skills add https://github.com/trevors/dot-claude --skill svelte5

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

包含的文件

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

gotchas.md
patterns.md
typescript.md

详细介绍

Svelte 5 语法

始终使用 Svelte 5 runes。绝不使用 Svelte 4 模式。

Svelte 4 → Svelte 5

Svelte 4 ❌Svelte 5 ✅
export let foolet { foo } = $props()
export let foo = 'default'let { foo = 'default' } = $props()
$: doubled = x * 2let doubled = $derived(x * 2)
$: { sideEffect() }$effect(() => { sideEffect() })
on:click={handler}onclick={handler}
on:input={handler}oninput={handler}
on:click|preventDefault={h}onclick={e => { e.preventDefault(); h(e) }}
<slot />{@render children()}
<slot name="x" />{@render x?.()}
$$props使用 $props() 和 rest：let { ...rest } = $props()
$$restPropslet { known, ...rest } = $props()
createEventDispatcher()传递回调属性：let { onchange } = $props()

Stores → Runes

Svelte 4 ❌Svelte 5 ✅
import { writable } from 'svelte/store'移除导入
const count = writable(0)let count = $state(0)
$count (auto-subscribe)count（直接访问）
count.set(1)count = 1
count.update(n => n + 1)count += 1

快速参考

<script>
  // Props (with defaults and rest)
  let { required, optional = 'default', ...rest } = $props();

  // Two-way bindable prop
  let { value = $bindable() } = $props();

  // Reactive state
  let count = $state(0);
  let items = $state([]);      // arrays are deeply reactive
  let user = $state({ name: '' }); // objects too

  // Derived values
  let doubled = $derived(count * 2);
  let complex = $derived.by(() => {
    // multi-line logic here
    return expensiveCalc(count);
  });

  // Side effects
  $effect(() => {
    console.log(count);
    return () => cleanup(); // optional cleanup
  });
</script>


<button onclick={() => count++}>Click</button>
<input oninput={e => value = e.target.value} />


{@render children?.()}

Snippets（替换 Slots）


<Dialog>
  {#snippet header()}
    <h1>Title</h1>
  {/snippet}

  {#snippet footer(close)}
    <button onclick={close}>Done</button>
  {/snippet}
</Dialog>


<script>
  let { header, footer, children } = $props();
</script>
{@render header?.()}
{@render children?.()}
{@render footer?.(() => open = false)}

参考资料

需要时加载：

评论

支持 Markdown