feat: Add dynamic Vue 3 components system
- Add dynamicComponents.ts service (~300 lines) - CSS scoping with high specificity - Async setup support with Suspense - Event bus for inter-component communication - Shared Pinia store with main app - No app overhead (uses render + createVNode) - Add MCP tools for Vue components - render_vue_component - save_vue_component - load_vue_component - list_vue_components - delete_vue_component - Add SQLite table for component persistence - Add TypeScript declarations for webmcp - Configure Vite for runtime template compilation - Add comprehensive README with documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onMounted } from 'vue'
|
||||
import { useCanvasStore } from '../stores/canvas'
|
||||
import {
|
||||
renderInlineComponent,
|
||||
componentsApi,
|
||||
type VueComponentDefinition
|
||||
} from '../services/dynamicComponents'
|
||||
|
||||
const canvasStore = useCanvasStore()
|
||||
|
||||
@@ -15,11 +20,24 @@ onMounted(async () => {
|
||||
inactivityTimeout: 60 * 60 * 1000 // 1 hora
|
||||
})
|
||||
|
||||
// Escuchar eventos de conexión
|
||||
webmcp.on?.('connected', () => {
|
||||
canvasStore.setConnected(true)
|
||||
})
|
||||
webmcp.on?.('disconnected', () => {
|
||||
canvasStore.setConnected(false)
|
||||
})
|
||||
|
||||
// Registrar herramientas para el canvas
|
||||
registerCanvasTools(webmcp)
|
||||
|
||||
// Exponer webmcp globalmente para debug
|
||||
;(window as any).webmcp = webmcp
|
||||
|
||||
// Verificar si ya está conectado
|
||||
if (webmcp.isConnected) {
|
||||
canvasStore.setConnected(true)
|
||||
}
|
||||
})
|
||||
|
||||
function registerCanvasTools(mcp: any) {
|
||||
@@ -74,6 +92,247 @@ function registerCanvasTools(mcp: any) {
|
||||
return 'HTML renderizado'
|
||||
}
|
||||
)
|
||||
|
||||
// render_vue_component: Renderiza un componente Vue 3 dinámico
|
||||
mcp.registerTool(
|
||||
'render_vue_component',
|
||||
'Renderiza un componente Vue 3 completo con acceso a ref, reactive, computed, watch, Pinia stores, etc.',
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
description: 'ID único del componente'
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
description: 'Nombre del componente (ej: MyCounter)'
|
||||
},
|
||||
template: {
|
||||
type: 'string',
|
||||
description: 'Template HTML del componente con sintaxis Vue'
|
||||
},
|
||||
setup: {
|
||||
type: 'string',
|
||||
description: 'Código de la función setup (debe retornar un objeto con las propiedades reactivas)'
|
||||
},
|
||||
style: {
|
||||
type: 'string',
|
||||
description: 'CSS del componente (opcional)'
|
||||
},
|
||||
props: {
|
||||
type: 'array',
|
||||
items: { type: 'string' },
|
||||
description: 'Lista de props que acepta el componente'
|
||||
},
|
||||
imports: {
|
||||
type: 'array',
|
||||
items: { type: 'string' },
|
||||
description: 'Funciones de Vue a importar: ref, reactive, computed, watch, watchEffect, onMounted, onUnmounted, nextTick, h'
|
||||
},
|
||||
componentProps: {
|
||||
type: 'object',
|
||||
description: 'Valores para las props del componente'
|
||||
},
|
||||
mode: {
|
||||
type: 'string',
|
||||
enum: ['replace', 'append'],
|
||||
description: 'replace: limpia el canvas, append: agrega al final'
|
||||
}
|
||||
},
|
||||
required: ['id', 'name', 'template']
|
||||
},
|
||||
(args: {
|
||||
id: string
|
||||
name: string
|
||||
template: string
|
||||
setup?: string
|
||||
style?: string
|
||||
props?: string[]
|
||||
imports?: string[]
|
||||
componentProps?: Record<string, any>
|
||||
mode?: string
|
||||
}) => {
|
||||
const container = document.getElementById('canvas-content')
|
||||
if (!container) return 'Error: canvas no encontrado'
|
||||
|
||||
// Quitar placeholder
|
||||
const placeholder = container.querySelector('.canvas-placeholder')
|
||||
if (placeholder) placeholder.remove()
|
||||
|
||||
const definition: VueComponentDefinition = {
|
||||
id: args.id,
|
||||
name: args.name,
|
||||
template: args.template,
|
||||
setup: args.setup,
|
||||
style: args.style,
|
||||
props: args.props,
|
||||
imports: args.imports || ['ref', 'reactive', 'computed']
|
||||
}
|
||||
|
||||
const isAppend = args.mode === 'append'
|
||||
const result = renderInlineComponent(definition, container, args.componentProps || {}, isAppend)
|
||||
|
||||
// Guardar referencia para cleanup
|
||||
;(window as any).__vueComponentUnmount = result.unmount
|
||||
|
||||
canvasStore.addToHistory({ tool: 'render_vue_component', args, timestamp: Date.now() })
|
||||
return `Componente Vue "${args.name}" renderizado correctamente`
|
||||
}
|
||||
)
|
||||
|
||||
// save_vue_component: Guarda un componente en la base de datos
|
||||
mcp.registerTool(
|
||||
'save_vue_component',
|
||||
'Guarda un componente Vue en la base de datos para reutilizarlo después',
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
description: 'ID único del componente (se genera automáticamente si no se proporciona)'
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
description: 'Nombre del componente'
|
||||
},
|
||||
template: {
|
||||
type: 'string',
|
||||
description: 'Template HTML del componente'
|
||||
},
|
||||
setup: {
|
||||
type: 'string',
|
||||
description: 'Código de la función setup'
|
||||
},
|
||||
style: {
|
||||
type: 'string',
|
||||
description: 'CSS del componente'
|
||||
},
|
||||
props: {
|
||||
type: 'array',
|
||||
items: { type: 'string' },
|
||||
description: 'Lista de props'
|
||||
},
|
||||
imports: {
|
||||
type: 'array',
|
||||
items: { type: 'string' },
|
||||
description: 'Funciones de Vue necesarias'
|
||||
}
|
||||
},
|
||||
required: ['name', 'template']
|
||||
},
|
||||
async (args: Omit<VueComponentDefinition, 'id'> & { id?: string }) => {
|
||||
try {
|
||||
const result = await componentsApi.save({
|
||||
id: args.id || `comp-${Date.now()}`,
|
||||
name: args.name,
|
||||
template: args.template,
|
||||
setup: args.setup,
|
||||
style: args.style,
|
||||
props: args.props,
|
||||
imports: args.imports
|
||||
})
|
||||
canvasStore.addToHistory({ tool: 'save_vue_component', args, timestamp: Date.now() })
|
||||
return `Componente "${args.name}" guardado con ID: ${result.id}`
|
||||
} catch (e: any) {
|
||||
return `Error al guardar: ${e.message}`
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// load_vue_component: Carga y renderiza un componente guardado
|
||||
mcp.registerTool(
|
||||
'load_vue_component',
|
||||
'Carga un componente Vue guardado desde la base de datos y lo renderiza',
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
description: 'ID del componente a cargar'
|
||||
},
|
||||
componentProps: {
|
||||
type: 'object',
|
||||
description: 'Props para pasar al componente'
|
||||
},
|
||||
mode: {
|
||||
type: 'string',
|
||||
enum: ['replace', 'append'],
|
||||
description: 'replace: limpia el canvas, append: agrega al final'
|
||||
}
|
||||
},
|
||||
required: ['id']
|
||||
},
|
||||
async (args: { id: string; componentProps?: Record<string, any>; mode?: string }) => {
|
||||
try {
|
||||
const definition = await componentsApi.getById(args.id)
|
||||
if (!definition) {
|
||||
return `Error: Componente con ID "${args.id}" no encontrado`
|
||||
}
|
||||
|
||||
const container = document.getElementById('canvas-content')
|
||||
if (!container) return 'Error: canvas no encontrado'
|
||||
|
||||
const placeholder = container.querySelector('.canvas-placeholder')
|
||||
if (placeholder) placeholder.remove()
|
||||
|
||||
const isAppend = args.mode === 'append'
|
||||
const result = renderInlineComponent(definition, container, args.componentProps || {}, isAppend)
|
||||
;(window as any).__vueComponentUnmount = result.unmount
|
||||
|
||||
canvasStore.addToHistory({ tool: 'load_vue_component', args, timestamp: Date.now() })
|
||||
return `Componente "${definition.name}" cargado y renderizado`
|
||||
} catch (e: any) {
|
||||
return `Error: ${e.message}`
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// list_vue_components: Lista los componentes guardados
|
||||
mcp.registerTool(
|
||||
'list_vue_components',
|
||||
'Lista todos los componentes Vue guardados en la base de datos',
|
||||
{
|
||||
type: 'object',
|
||||
properties: {}
|
||||
},
|
||||
async () => {
|
||||
try {
|
||||
const components = await componentsApi.getAll()
|
||||
if (components.length === 0) {
|
||||
return 'No hay componentes guardados'
|
||||
}
|
||||
const list = components.map(c => `- ${c.id}: ${c.name}`).join('\n')
|
||||
return `Componentes guardados:\n${list}`
|
||||
} catch (e: any) {
|
||||
return `Error: ${e.message}`
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// delete_vue_component: Elimina un componente
|
||||
mcp.registerTool(
|
||||
'delete_vue_component',
|
||||
'Elimina un componente Vue de la base de datos',
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
id: {
|
||||
type: 'string',
|
||||
description: 'ID del componente a eliminar'
|
||||
}
|
||||
},
|
||||
required: ['id']
|
||||
},
|
||||
async (args: { id: string }) => {
|
||||
try {
|
||||
await componentsApi.delete(args.id)
|
||||
return `Componente "${args.id}" eliminado`
|
||||
} catch (e: any) {
|
||||
return `Error: ${e.message}`
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user