Skip to content

Commit d43e63d

Browse files
committed
feat: Enhance documentation and definitions for Svelte 5
- Added comprehensive definitions for common mistakes, custom events, event delegation, event modifiers, global state, lifecycle equivalents, migration patterns, snapshots, and snippets. - Updated README to reflect new features and improved architecture. - Improved database loading and querying logic in build and loader scripts. - Refactored code for better readability and maintainability.
1 parent a8e6882 commit d43e63d

16 files changed

+887
-255
lines changed

.changeset/full-times-trade.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'mcp-svelte-docs': patch
3+
---
4+
5+
add more defintions update readme

README.md

Lines changed: 83 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,105 @@
11
# mcp-svelte-docs
22

3-
A Model Context Protocol (MCP) server that provides a comprehensive
4-
reference guide for Svelte 5 and SvelteKit, helping LLMs provide
5-
accurate guidance when users are working with Svelte. It includes
6-
detailed documentation for:
7-
8-
- **Svelte 5 core features** (runes, components, events)
9-
- **Modern async patterns** (await expressions, loading states)
10-
- **SvelteKit remote functions** (type-safe client-server
3+
A Model Context Protocol (MCP) server providing authoritative Svelte 5
4+
and SvelteKit definitions extracted directly from TypeScript
5+
declarations. Get precise syntax, parameters, and examples for all
6+
Svelte 5 concepts through a single, unified interface.
7+
8+
## Architecture
9+
10+
**Definition-First Approach**: Rather than multiple specialized tools,
11+
this server provides one powerful `svelte_definition` tool that
12+
accesses 28+ comprehensive definitions covering:
13+
14+
- **All Svelte 5 runes** ($state, $derived, $props, $effect variants)
15+
- **Modern features** (snippets, await expressions, remote functions)
16+
- **Event handling** (DOM events, custom events, component
1117
communication)
12-
- **Migration patterns** from Svelte 4 to Svelte 5
13-
- **Common mistakes** and best practices
14-
- **Advanced patterns** for state management and data flow
18+
- **Migration guidance** (Svelte 4 to 5 patterns and best practices)
19+
- **TypeScript interfaces** (Snippet, Snapshot types)
20+
- **Advanced patterns** (global state, common mistakes, lifecycle
21+
equivalents)
1522

16-
## Available Tools
23+
## Available Tool
1724

18-
This MCP server provides 16 specialized tools for Svelte 5 and
19-
SvelteKit development:
25+
### `svelte_definition`
2026

21-
### Core Svelte 5 Runes
27+
**Single, powerful tool** for all Svelte 5 and SvelteKit concepts:
2228

23-
- `svelte5_state` - Documentation for `$state` rune (reactive state)
24-
- `svelte5_derived` - Documentation for `$derived` rune (computed
25-
values)
26-
- `svelte5_props` - Documentation for `$props` rune (component
27-
properties)
28-
- `svelte5_effect` - Documentation for `$effect` rune (side effects)
29+
```typescript
30+
svelte_definition(identifier: string, format?: "syntax"|"quick"|"full")
31+
```
32+
33+
**Examples:**
2934

30-
### Svelte 5 Features
35+
- `svelte_definition("$state")` - Complete $state documentation
36+
- `svelte_definition("snippets", "quick")` - Snippet overview with
37+
example
38+
- `svelte_definition("onclick", "syntax")` - Just the TypeScript
39+
signature
40+
- `svelte_definition("migration-patterns")` - Svelte 4 → 5 migration
41+
guide
3142

32-
- `svelte5_snippets` - Documentation for snippets (replacement for
33-
slots)
34-
- `svelte5_events` - Event handling patterns in Svelte 5
35-
- `svelte5_component_events` - Component event patterns and best
36-
practices
37-
- `svelte5_global_state` - Global state management patterns
43+
**Response Formats:**
3844

39-
### Modern Async Features ✨ NEW
45+
- `"syntax"` - TypeScript signature only (~50 words)
46+
- `"quick"` - Definition + minimal example (~200 words)
47+
- `"full"` - Complete documentation with examples (~500-1000 words,
48+
default)
4049

41-
- `svelte5_await_expressions` - Await expressions for async operations
42-
(experimental)
43-
- `sveltekit_remote_functions` - Remote functions for type-safe
44-
client-server communication (experimental)
50+
### Available Identifiers (28+)
4551

46-
### Migration & Guidance
52+
**Core Runes:** `$state`, `$state.raw`, `$state.snapshot`, `$derived`,
53+
`$derived.by`, `$props`, `$bindable`, `$effect`, `$effect.pre`,
54+
`$effect.root`, `$effect.pending`, `$effect.tracking`
4755

48-
- `svelte5_migration` - Migration patterns from Svelte 4 to Svelte 5
49-
- `svelte5_mistakes` - Common mistakes and how to avoid them
50-
- `svelte5_overview` - General overview of Svelte 5 features
51-
- `svelte5_runes_overview` - Comprehensive overview of all runes
56+
**Development Tools:** `$inspect`, `$host`
5257

53-
### Tool Parameters
58+
**Features & Patterns:** `snippets`, `onclick`, `component-events`,
59+
`migration-patterns`, `await-expressions`, `remote-functions`,
60+
`global-state`, `common-mistakes`, `lifecycle-equivalents`
5461

55-
All tools support an optional `includeExamples` parameter:
62+
**Event Handling:** `custom-events`, `event-delegation`,
63+
`event-modifiers`
5664

57-
- `includeExamples: true` (default) - Include code examples and
58-
demonstrations
59-
- `includeExamples: false` - Return documentation without code
60-
examples for concise reference
65+
**TypeScript Interfaces:** `snippet`, `snapshot`
6166

6267
## Key Features
6368

64-
### 🚀 Experimental Async Support
65-
66-
- **Await Expressions**: Use `await` directly in components,
67-
`$derived`, and markup
68-
- **Boundaries**: Error handling and loading states with
69-
`<svelte:boundary>`
70-
- **Synchronized Updates**: Consistent UI updates during async
71-
operations
72-
- **Performance Patterns**: Avoid waterfalls, optimize concurrent
73-
requests
74-
75-
### ⚡ Remote Functions
76-
77-
- **Type-safe Communication**: Full TypeScript support between client
78-
and server
79-
- **Four Function Types**: Query (read), Form (submit), Command
80-
(execute), Prerender (static)
81-
- **Optimistic Updates**: Immediate UI feedback with server
82-
synchronization
83-
- **Progressive Enhancement**: Works with and without JavaScript
84-
85-
### 📚 Comprehensive Documentation
86-
87-
- **Real-world Examples**: Patterns from core maintainer projects
88-
- **Migration Guidance**: Step-by-step Svelte 4 to 5 migration
89-
- **Error Prevention**: Common mistakes and corrections
90-
- **Best Practices**: Production-ready patterns and recommendations
69+
### 🎯 **Authoritative & TypeScript-First**
70+
71+
- **Direct from Source**: Definitions extracted from official Svelte 5
72+
TypeScript declarations
73+
- **Always Current**: Reflects the actual API, not outdated tutorials
74+
- **Type-Safe**: Includes precise parameter types, return values, and
75+
constraints
76+
77+
### **Single Interface, Complete Coverage**
78+
79+
- **One Tool**: `svelte_definition` replaces 16+ specialized tools
80+
- **28+ Definitions**: Every Svelte 5 rune, feature, and pattern
81+
covered
82+
- **Consistent Responses**: Same interface whether you need `$state`
83+
or `remote-functions`
84+
85+
### 🚀 **Modern Svelte 5 & SvelteKit Support**
86+
87+
- **Await Expressions**: Async operations directly in templates
88+
(`await-expressions`)
89+
- **Remote Functions**: Type-safe client-server communication
90+
(`remote-functions`)
91+
- **All Runes**: Complete `$effect` family, `$state` variants,
92+
`$derived.by`, `$bindable`
93+
- **Advanced Patterns**: Event handling, global state, component
94+
communication
95+
96+
### 📚 **Smart Error Recovery**
97+
98+
- **Fuzzy Matching**: Suggests correct identifiers for typos
99+
- **Related Concepts**: Points to similar definitions when searches
100+
fail
101+
- **Migration Help**: Converts Svelte 4 patterns to Svelte 5
102+
equivalents
91103

92104
## Config
93105

definitions/common-mistakes.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# common-mistakes Definition
2+
3+
**Definition:** Anti-patterns and debugging guide for common Svelte 5
4+
mistakes
5+
**Syntax:** Patterns to avoid and correct alternatives
6+
**Categories:**
7+
8+
- Reactivity pitfalls with `$state` and `$derived`
9+
- Improper `$effect` usage and cleanup
10+
- Migration errors from Svelte 4 patterns
11+
**Returns:** Understanding of correct Svelte 5 patterns
12+
**Purpose:** Debugging guide and best practice reference
13+
14+
## Examples
15+
16+
```js
17+
// ❌ MISTAKE: Destructuring $state loses reactivity
18+
let user = $state({ name: 'Alice' });
19+
let { name } = user; // 'name' is not reactive!
20+
21+
// ✅ CORRECT: Access properties directly
22+
user.name; // Reactive access
23+
24+
// ❌ MISTAKE: Using $effect for derived values
25+
let count = $state(0);
26+
let double = $state(0);
27+
$effect(() => {
28+
double = count * 2; // Wrong - use $derived instead
29+
});
30+
31+
// ✅ CORRECT: Use $derived for computed values
32+
let double = $derived(count * 2);
33+
34+
// ❌ MISTAKE: Missing cleanup in $effect
35+
$effect(() => {
36+
let interval = setInterval(() => {}, 1000);
37+
// Missing cleanup causes memory leak!
38+
});
39+
40+
// ✅ CORRECT: Return cleanup function
41+
$effect(() => {
42+
let interval = setInterval(() => {}, 1000);
43+
return () => clearInterval(interval);
44+
});
45+
46+
// ❌ MISTAKE: Using $state.raw unnecessarily
47+
let items = $state.raw([1, 2, 3]);
48+
items.push(4); // No reactivity!
49+
50+
// ✅ CORRECT: Use regular $state for arrays/objects
51+
let items = $state([1, 2, 3]);
52+
items.push(4); // Reactive
53+
```
54+
55+
## Related
56+
57+
- `$state` - For reactive state management
58+
- `$derived` - For computed values, not `$effect`
59+
- `$effect` - For side effects, not derived values
60+
- `$state.raw` - Only when you need non-reactive state
61+
- `migration-patterns` - Svelte 4 to 5 conversion guide

definitions/custom-events.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# custom-events Definition
2+
3+
**Definition:** Creating and dispatching custom events for
4+
component-to-component communication in Svelte 5
5+
**Syntax:** Event callback props or direct event dispatching
6+
patterns
7+
**Methods:**
8+
9+
- Callback props: `onclick: (event) => void` prop pattern
10+
- Direct dispatch: Using native `dispatchEvent()` with custom events
11+
- Event forwarding: `on:event` forwarding to parent components
12+
**Returns:** Custom event communication between components
13+
**Replaces:** Svelte 4's `createEventDispatcher()` function
14+
15+
## Examples
16+
17+
```svelte
18+
<!-- Child component with callback props -->
19+
<script>
20+
let { onUserSelect, onItemClick } = $props();
21+
22+
function handleClick(user) {
23+
// Call parent's callback with event data
24+
onUserSelect?.(user);
25+
}
26+
</script>
27+
28+
<button on:click={() => handleClick({ id: 1, name: 'Alice' })}>
29+
Select User
30+
</button>
31+
32+
<!-- Parent component receiving custom events -->
33+
<script>
34+
function handleUserSelect(user) {
35+
console.log('User selected:', user);
36+
}
37+
38+
function handleItemClick(item) {
39+
console.log('Item clicked:', item);
40+
}
41+
</script>
42+
43+
<ChildComponent
44+
onUserSelect={handleUserSelect}
45+
onItemClick={handleItemClick}
46+
/>
47+
48+
<!-- Alternative: Direct event dispatching -->
49+
<script>
50+
import { createEventDispatcher } from 'svelte';
51+
52+
// For components that need DOM event dispatching
53+
let element;
54+
55+
function dispatchCustom(data) {
56+
element?.dispatchEvent(new CustomEvent('customEvent', {
57+
detail: data,
58+
bubbles: true
59+
}));
60+
}
61+
</script>
62+
63+
<div bind:this={element} on:click={() => dispatchCustom({ value: 42 })}>
64+
Click to dispatch custom event
65+
</div>
66+
67+
<!-- Event forwarding pattern -->
68+
<script>
69+
let { onButtonClick } = $props();
70+
</script>
71+
72+
<!-- Forward built-in events -->
73+
<button on:click on:mouseenter>
74+
Forwarded events
75+
</button>
76+
77+
<!-- Forward with custom logic -->
78+
<button on:click={(e) => onButtonClick?.(e.target.textContent)}>
79+
Custom forwarding
80+
</button>
81+
```
82+
83+
## Related
84+
85+
- `component-events` - Patterns for component communication
86+
- `onclick` - Basic event handling
87+
- `event-modifiers` - Modifying event behavior
88+
- `$props` - Receiving event callback props

0 commit comments

Comments
 (0)