mcp-svelte-docs
Svelte 5에 대한 포괄적인 참조 가이드를 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 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} - Props :
export let prop → let { prop } = $props() - 구성 요소 이벤트 :
createEventDispatcher() → 콜백 속성 - 슬롯 :
<slot> → {@render children()}
🧩 Svelte 5 기능
- 룬 : $state, $derived, $effect, $props 등
- 스니펫 : 매개변수가 있는 재사용 가능한 마크업 청크
- Props : 구조 분해를 통한 컴포넌트 Props에 대한 새로운 접근 방식
- 이벤트 : 표준 HTML 이벤트 속성 및 콜백 속성
⚠️ 일반적인 실수
- 반응성 : 상태를 직접 내보내는 것, $state를 잊어버리는 것 등.
- 이벤트 : onclick 대신 on:click 사용, 이벤트 수정자 등
- Props : $props 대신 export let 사용, TypeScript 문제 등
🌐 글로벌 상태 패턴
- 함수 기반 : 모듈 수준 상태를 위한 Getter/Setter 함수
- 객체 기반 : 보다 인체공학적인 API를 위한 게터/세터가 있는 객체
- 클래스 기반 : 구조화된 상태에 대한 상태 저장 속성이 있는 클래스
- 컨텍스트 기반 : SSR 안전 글로벌 상태를 위한 Svelte 컨텍스트
💡 포괄적인 예시
모든 콘텐츠에는 다음이 포함됩니다.
- JavaScript와 TypeScript 예제 모두
- 개념과 사용법에 대한 명확한 설명
- 모범 사례 및 고려 사항
- 피해야 할 일반적인 함정
용법
설치
지엑스피1
구성
서버는 환경 변수를 설정하여 구성할 수 있습니다.
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>
이는 $state 룬에 대한 자세한 참조를 마크다운 형식으로 반환합니다.
API
서버는 다음 MCP 도구를 구현합니다.
스벨테 패턴
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)."
}
]
}
스벨테5_특징
Svelte 5 기능에 대한 자세한 정보를 알아보세요.
매개변수:
feature (문자열, 필수): 기능 이름(예: "룬", "스니펫", "속성")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 (문자열, 필수): 기능 이름(예: "룬", "스니펫", "이벤트")
응답 예시:
{
"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 구성을 따르는지 확인하세요.
기여하다
기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.
특허
MIT 라이센스 - 자세한 내용은 LICENSE 파일을 참조하세요.
감사의 말
기반으로 구축됨: