mcp-svelte-docs

Un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona una guía de referencia completa para Svelte 5, lo que ayuda a los LLM a proporcionar una guía precisa al trabajar con Svelte. Si bien incluye patrones de migración de Svelte 4 a Svelte 5, también sirve como referencia detallada sobre las características, errores comunes y prácticas recomendadas de Svelte 5.

Características

📊 Categorías de contenido

Patrones de migración : Comparaciones del código de Svelte 4 y Svelte 5
Características de Svelte 5 : Documentación detallada sobre runas, fragmentos, accesorios y eventos.
Errores comunes : Patrones que muestran código incorrecto y correcciones con explicaciones
Patrones de estado global : Diversos enfoques para la gestión del estado global en Svelte 5

🔄 Patrones clave de migración

Declaración de estado : let count = 0 → let count = $state(0)
Valores derivados : $: doubled = count * 2 → const doubled = $derived(count * 2)
Efectos secundarios : $: { /* effect */ } → $effect(() => { /* effect */ })
Manejo de eventos : on:click={handler} → onclick={handler}
Propiedades : export let prop → let { prop } = $props()
Eventos de componentes : createEventDispatcher() → propiedades de devolución de llamada
Ranuras : <slot> → {@render children()}

🧩 Características de Svelte 5

Runas : $estado, $derivado, $efecto, $props y más
Fragmentos : fragmentos reutilizables de marcado con parámetros
Props : Nuevo enfoque para los componentes de props con desestructuración
Eventos : atributos de eventos HTML estándar y propiedades de devolución de llamada

⚠️ Errores comunes

Reactividad : exportar estado directamente, olvidar $state, etc.
Eventos : uso de on:click en lugar de onclick, modificadores de eventos, etc.
Propiedades : uso de export let en lugar de $props, problemas de TypeScript, etc.

🌐 Patrones de estados globales

Basado en funciones : funciones getter/setter para el estado a nivel de módulo
Basado en objetos : objetos con captadores/configuradores para API más ergonómicas
Basado en clases : clases con propiedades con estado para estados estructurados
Basado en contexto : contextos esbeltos para un estado global seguro para SSR

💡 Ejemplos completos

Todo el contenido incluye:

Ejemplos de JavaScript y TypeScript
Explicaciones claras de conceptos y usos.
Mejores prácticas y consideraciones
Errores comunes que hay que evitar

Uso

Instalación

# Install dependencies
npm install

# Build the project
npm run build

# Start the server
npm start

Configuración

El servidor se puede configurar estableciendo variables de entorno:

DEBUG : Establezca en 'verdadero' para habilitar el registro de depuración

Configuración de Cline

Agregue esto a su configuración de 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"
			]
		}
	}
}

Uso con LLM

Cuando un LLM necesita brindar orientación sobre Svelte, puede utilizar las herramientas y recursos disponibles:

Patrones de migración

<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte_pattern</tool_name>
<arguments>
{
  "pattern": "event"
}
</arguments>
</use_mcp_tool>

Esto devolverá patrones de migración relacionados con el manejo de eventos, mostrando las implementaciones de Svelte 4 y Svelte 5.

Características de 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>

Esto devolverá información detallada sobre la runa $state, incluidos ejemplos y mejores prácticas.

Errores comunes

<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_common_mistakes</tool_name>
<arguments>
{
  "feature": "props"
}
</arguments>
</use_mcp_tool>

Esto devolverá errores comunes relacionados con los accesorios en Svelte 5, junto con correcciones y explicaciones.

Acceso a recursos

<access_mcp_resource>
<server_name>mcp-svelte-docs</server_name>
<uri>svelte5://runes/state</uri>
</access_mcp_resource>

Esto devolverá una referencia detallada para la runa $state en formato markdown.

API

El servidor implementa las siguientes herramientas MCP:

patrón esbelto

Obtenga patrones de migración de Svelte 4 a Svelte 5.

Parámetros:

pattern (cadena, obligatorio): Nombre del patrón o categoría a buscar

Ejemplo de respuesta:

{
	"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)."
		}
	]
}

característica svelte5

Obtenga información detallada sobre las características de Svelte 5.

Parámetros:

feature (cadena, obligatoria): nombre de la característica (p. ej., "runas", "fragmentos", "props")
includeExamples (booleano, opcional): si se deben incluir ejemplos de código

Ejemplo de respuesta:

{
	"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_errores_comunes

Obtenga errores comunes y correcciones para las funciones de Svelte 5.

Parámetros:

feature (cadena, obligatoria): nombre de la función (p. ej., "runas", "fragmentos", "eventos")

Ejemplo de respuesta:

{
	"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."
		}
	]
}

Recursos

El servidor también proporciona los siguientes recursos MCP:

Recursos directos

svelte5://overview : Descripción general de las características y cambios de Svelte 5
svelte5://runes/overview : Descripción general de todas las runas en Svelte 5
svelte5://snippets/overview : Descripción general de los fragmentos en Svelte 5
svelte5://global-state/overview : Descripción general de los enfoques del estado global en Svelte 5

Plantillas de recursos

svelte5://runes/{rune_name} : Referencia detallada para una runa específica
svelte5://patterns/{category}/{pattern_name} : Referencia para un patrón específico de Svelte
svelte5://mistakes/{category} : Errores comunes para una categoría específica

Desarrollo

Estructura del proyecto

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

Agregar nuevo contenido

Patrones de migración

Para agregar nuevos patrones de migración, agréguelos al archivo de patrón apropiado en el directorio 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'
}

Características de Svelte 5

Para agregar nuevas funciones de Svelte 5, agréguelas al archivo 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'
  ]
}

Errores comunes

Para agregar nuevos errores comunes, agréguelos al archivo 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'
}

Patrones de estados globales

Para agregar nuevos patrones de estado global, agréguelos al archivo 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'
}

Configuración

Clonar el repositorio
Instalar dependencias:

npm install

Construir el proyecto:

npm run build

Ejecutar en modo de desarrollo:

npm run dev

Solución de problemas

Problemas comunes

Patrón no encontrado : Asegúrate de buscar un patrón existente en la base de datos. Intenta usar términos más generales como "estado" o "evento" en lugar de nombres de patrones específicos.
El servidor no se inicia : asegúrese de tener los permisos correctos para ejecutar el servidor y de que el puerto no esté en uso.
Errores de TypeScript : asegúrese de tener instalada la versión correcta de TypeScript y de que su código siga la configuración de TypeScript del proyecto.

Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.

Licencia

Licencia MIT: consulte el archivo LICENCIA para obtener más detalles.

Expresiones de gratitud

Construido sobre:

Integrations

mcp-svelte-docs

Características

📊 Categorías de contenido

🔄 Patrones clave de migración

🧩 Características de Svelte 5

⚠️ Errores comunes

🌐 Patrones de estados globales

💡 Ejemplos completos

Uso

Instalación

Configuración

Configuración de Cline

Uso con LLM

Patrones de migración

Características de Svelte 5

Errores comunes

Acceso a recursos

API

patrón esbelto

característica svelte5

svelte5_errores_comunes

Recursos

Recursos directos

Plantillas de recursos

Desarrollo

Estructura del proyecto

Agregar nuevo contenido

Patrones de migración

Características de Svelte 5

Errores comunes

Patrones de estados globales

Configuración

Solución de problemas

Problemas comunes

Contribuyendo

Licencia

Expresiones de gratitud

Tools

Related Resources

Appeared in Searches