SuperAPI AI 工具集

svelte-migrate

前端与建站

查看项目

更新于 10-16 14:37

技能介绍

用途:把单个 .svelte 文件从 Svelte 4 迁移到 Svelte 5 runes 语法,适用于被要求迁移、转换或升级某个 Svelte 文件时。用户提供文件路径后,按既定模式迁移该文件。

主要能力与迁移模式:props 由 export let 改为 $props(),并可用 interface Props 描述类型;需要重新赋值或变更的响应式变量由 let 改为 $state();$: 赋值改为 $derived(),复杂派生用 $derived.by();$: 语句改为 $effect();事件由 on:click 改为 onclick,|preventDefault、|stopPropagation 等修饰符需在处理器中手动处理;组件事件由 createEventDispatcher 改为回调 props;事件转发改为显式 handler;slot 改为 Snippet 与 {@render},带 props 的插槽用 {@snippet};bind: 对应 $bindable();beforeUpdate/afterUpdate 改为 $effect.pre/$effect;svelte:component 改为直接使用组件;$app/stores 的 page 改为 $app/state。

使用方式:先读取文件了解结构,识别所有 Svelte 4 模式,按 props、状态、派生值、副作用、事件、组件事件、插槽的顺序系统改写,更新 import(按需加入 Snippet 类型、移除不再使用的 createEventDispatcher),确保 TypeScript 类型正确,最后运行 pnpm check 验证无类型错误。

限制与注意:onMount 和 onDestroy 仍然有效,应保留,不要在没有真正响应式需求时把 onMount 改成 $effect;context="module" 脚本改为 <script module>;CSS/样式不变;{#if}、{#each}、{#await} 块不变;元素上的 bind: 指令不变;use: 动作指令不变;transition:、in:、out:、animate: 指令不变。资料未提供其他平台、收费或效果信息。