mcp-svelte-文档
模型上下文协议 (MCP) 服务器提供 Svelte 5 的全面参考指南，帮助 LLM 在用户使用 Svelte 时提供准确的指导。它不仅包含从 Svelte 4 到 Svelte 5 的迁移模式，还可作为 Svelte 5 功能、常见错误和最佳实践的详细参考。
特征
📊 内容类别
- 迁移模式：Svelte 4 和 Svelte 5 代码的并排比较
- Svelte 5 功能：关于符文、片段、道具和事件的详细文档
- 常见错误：显示错误代码的模式以及带有解释的更正
- 全局状态模式：Svelte 5 中各种全局状态管理方法
🔄 关键迁移模式
- 状态声明：
let count = 0 → let count = $state(0) - 派生值：
$: doubled = count * 2 → const doubled = $derived(count * 2) - 副作用：
$: { /* effect */ } → $effect(() => { /* effect */ }) - 事件处理：
on:click={handler} → onclick={handler} - 道具：
export let prop → let { prop } = $props() - 组件事件：
createEventDispatcher() → 回调 props - 插槽：
<slot> → {@render children()}
🧩 Svelte 5 功能
- 符文：$state、$derived、$effect、$props 等
- 片段：带有参数的可重复使用的标记块
- Props ：通过解构实现组件 props 的新方法
- 事件：标准 HTML 事件属性和回调属性
⚠️ 常见错误
- 反应性：直接导出状态，忘记$state等。
- 事件：使用 on:click 代替 onclick、事件修饰符等。
- Props ：使用 export let 而不是 $props、TypeScript 问题等。
🌐 全局状态模式
- 基于函数：模块级状态的 getter/setter 函数
- 基于对象：带有 getter/setter 的对象，可提供更符合人体工程学的 API
- 基于类：具有结构化状态的状态属性的类
- 基于上下文：用于 SSR 安全全局状态的 Svelte 上下文
💡 综合示例
所有内容包括：
- JavaScript 和 TypeScript 示例
- 清晰解释概念和用法
- 最佳实践和注意事项
- 应避免的常见陷阱
用法
安装
# Install dependencies
npm install
# Build the project
npm run build
# Start the server
npm start
配置
可以通过设置环境变量来配置服务器：
DEBUG ：设置为“true”以启用调试日志记录
克莱恩配置
将其添加到您的 Cline MCP 设置中：
{
"mcpServers": {
"mcp-svelte-docs": {
"command": "node",
"args": ["/path/to/mcp-svelte-docs/dist/index.js"],
"env": {
"DEBUG": "false"
},
"disabled": false,
"autoApprove": [
"svelte_pattern",
"svelte5_feature",
"svelte5_common_mistakes"
]
}
}
}
与法学硕士 (LLM) 合作
当 LLM 需要提供有关 Svelte 的指导时，可以使用可用的工具和资源：
迁移模式
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte_pattern</tool_name>
<arguments>
{
"pattern": "event"
}
</arguments>
</use_mcp_tool>
这将返回与事件处理相关的迁移模式，显示 Svelte 4 和 Svelte 5 的实现。
Svelte 5 功能
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_feature</tool_name>
<arguments>
{
"feature": "state",
"includeExamples": true
}
</arguments>
</use_mcp_tool>
这将返回有关 $state 符文的详细信息，包括示例和最佳实践。
常见错误
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_common_mistakes</tool_name>
<arguments>
{
"feature": "props"
}
</arguments>
</use_mcp_tool>
这将返回与 Svelte 5 中的道具相关的常见错误，以及更正和解释。
资源访问
<access_mcp_resource>
<server_name>mcp-svelte-docs</server_name>
<uri>svelte5://runes/state</uri>
</access_mcp_resource>
这将以 markdown 格式返回 $state 符文的详细参考。
API
该服务器实现了以下 MCP 工具：
svelte_pattern
获取 Svelte 4 到 Svelte 5 的迁移模式。
参数：
pattern （字符串，必需）：要搜索的模式名称或类别
响应示例：
{
"patterns": [
{
"name": "Basic state",
"description": "Declaring and using component state",
"svelte4": "<script>\n let count = 0;\n \n function increment() {\n count++;\n }\n</script>\n\n<button on:click={increment}>\n Clicked {count} times\n</button>",
"svelte5": "<script>\n let count = $state(0);\n \n function increment() {\n count++;\n }\n</script>\n\n<button onclick={increment}>\n Clicked {count} times\n</button>",
"notes": "In Svelte 5, state is explicitly declared using the $state rune, and event handlers use standard HTML attributes (onclick) instead of the directive syntax (on:click)."
}
]
}
svelte5_feature
获取有关 Svelte 5 功能的详细信息。
参数：
feature （字符串，必需）：功能名称（例如，“runes”，“snippets”，“props”）includeExamples （布尔值，可选）：是否包含代码示例
响应示例：
{
"features": [
{
"name": "$state",
"description": "The $state rune is used to declare reactive state in Svelte 5.",
"examples": [
{
"code": "<script>\n let count = $state(0);\n \n function increment() {\n count++;\n }\n</script>\n\n<button onclick={increment}>\n Clicked {count} times\n</button>",
"explanation": "Basic usage of $state to create a reactive counter. When the button is clicked, the count is incremented and the UI updates automatically."
}
],
"bestPractices": [
"Use $state for any value that needs to trigger UI updates when changed",
"For large arrays or objects that don't need deep reactivity, consider using $state.raw",
"Don't export $state variables directly from modules, use getter/setter functions instead"
]
}
]
}
svelte5_common_mistakes
获取 Svelte 5 功能的常见错误和更正。
参数：
feature （字符串，必需）：功能名称（例如，“runes”，“snippets”，“events”）
响应示例：
{
"mistakes": [
{
"name": "Exporting state directly",
"description": "Directly exporting a stateful variable from a module",
"mistake": "// counter.svelte.js\nlet count = $state(0);\n\nexport { count };",
"correction": "// counter.svelte.js\nlet count = $state(0);\n\nexport function getCount() {\n return count;\n}\n\nexport function setCount(value) {\n count = value;\n}",
"explanation": "When you export a stateful variable directly, the reactivity is lost when it's imported elsewhere. This is because the importing module only gets the current value, not the reactive binding. Instead, export functions that access and modify the state."
}
]
}
资源
该服务器还提供以下 MCP 资源：
直接资源
svelte5://overview ：Svelte 5 功能和变化概述svelte5://runes/overview ：Svelte 5 中所有符文的概览svelte5://snippets/overview ：Svelte 5 中的代码片段概述svelte5://global-state/overview ：Svelte 5 中的全局状态方法概述
资源模板
svelte5://runes/{rune_name} ：特定符文的详细参考svelte5://patterns/{category}/{pattern_name} ：特定 Svelte 模式的参考svelte5://mistakes/{category} ：特定类别的常见错误
发展
项目结构
src/
├── index.ts # MCP server entry point
├── config.ts # Basic configuration
├── tools/ # Tool implementations
│ └── handler.ts # Tool registration
├── resources/ # Resource implementations
│ └── index.ts # Resource registration
└── patterns/ # Pattern database
├── index.ts # Exports all patterns
├── state.ts # State management patterns
├── events.ts # Event handling patterns
├── props.ts # Props and component patterns
├── templating.ts # Templating patterns
├── lifecycle.ts # Lifecycle patterns
├── svelte5_features.ts # Svelte 5 specific features
├── common_mistakes.ts # Common mistakes and corrections
└── global_state.ts # Global state patterns
添加新内容
迁移模式
要添加新的迁移模式，请将它们添加到src/patterns目录中的相应模式文件中：
{
name: 'Pattern Name',
description: 'Description of the pattern',
svelte4: `Svelte 4 code example`,
svelte5: `Svelte 5 code example`,
notes: 'Additional notes about migration considerations'
}
Svelte 5 功能
要添加新的 Svelte 5 功能，请将它们添加到src/patterns/svelte5_features.ts文件中：
{
name: 'Feature Name',
description: 'Description of the feature',
examples: [
{
code: `Code example`,
explanation: 'Explanation of the example'
}
],
bestPractices: [
'Best practice 1',
'Best practice 2'
]
}
常见错误
要添加新的常见错误，请将其添加到src/patterns/common_mistakes.ts文件中：
{
name: 'Mistake Name',
description: 'Description of the common mistake',
mistake: `Incorrect code example`,
correction: `Corrected code example`,
explanation: 'Detailed explanation of why the mistake is problematic and how the correction addresses it'
}
全局状态模式
要添加新的全局状态模式，请将它们添加到src/patterns/global_state.ts文件中：
{
name: 'Global State Pattern Name',
description: 'Description of the global state pattern',
code: `Implementation example`,
usage: `Usage example`,
notes: 'Additional notes about the pattern, including considerations for server vs. client usage'
}
设置
- 克隆存储库
- 安装依赖项：
- 构建项目：
- 以开发模式运行：
故障排除
常见问题
- 未找到模式：请确保您正在搜索的模式存在于数据库中。请尝试使用更通用的术语，例如“状态”或“事件”，而不是具体的模式名称。
- 服务器未启动：确保您具有运行服务器的正确权限并且该端口尚未被使用。
- TypeScript 错误：确保您安装了正确版本的 TypeScript，并且您的代码遵循项目的 TypeScript 配置。
贡献
欢迎贡献代码！欢迎提交 Pull 请求。
执照
MIT 许可证 - 有关详细信息，请参阅LICENSE文件。
致谢
构建于：