# SKILL: Components — gotchas + 18 patrones canónicos
Cargar cuando AIREF no alcanza: necesitás un patrón específico (form, async, modal, slots, teleport) o entender por qué un componente se rompe silenciosamente.
## Gotcha #1 — `.value` en template
```
state.X template → SIN .value (Proxy auto-unwrap)
state.X.value script → CON .value
props.X template → SIN .value (props NO son signals)
props.X.value → NUNCA. undefined.value crashea silencioso si prop no se pasa.
```
Analyzer rechaza `props.X.value` en template con `PROP_VALUE_IN_TEMPLATE`.
```html
…
…
```
## Gotcha #2 — Snapshot en computed con closure
```typescript
// ❌ dep no se registra (closure cacheada)
const cls = computed(() => (tab) => tab === activeTab.value ? 'on' : 'off')
// ✅ leer dep en el getter
const cls = computed(() => { const a = activeTab.value; return (t) => t === a ? 'on' : 'off' })
```
## Gotcha #3 — `@click` con argumento NO acepta curried
El template-compiler convierte `@click="actions.fn(arg)"` en `onClick: (e) => { actions.fn(arg) }`. **Llama `fn(arg)` y descarta el retorno.** Si `fn` devuelve una función, esa función NUNCA se ejecuta.
```typescript
// ❌ ROTO en @click nativo — el retorno se ignora
function setActive(id: string) { return () => { currentView.value = id } }
// template: @click="actions.setActive('users')" → llama setActive('users'), retorno descartado, signal NO cambia
// ✅ patrón correcto — muta directo en el cuerpo
function setActive(id: string) { currentView.value = id }
// template: @click="actions.setActive('users')" → llama setActive('users'), signal cambia ✓
```
**Excepción única**: el patrón curried SÍ funciona como prop a componentes hijos, porque el Child recibe el resultado como prop y lo invoca él mismo:
```html
```
Pero en `@click` del DOM nativo, el compiler descarta el retorno. Analyzer detecta este patrón con `CURRIED_ACTION_IN_TEMPLATE`.
## Gotcha #4 — Form submit OBLIGATORIO stopPropagation
```typescript
function submit(e: Event) {
e.preventDefault(); e.stopPropagation() // burbujea — Component padre puede capturar y disparar 2x
}
```
## Gotcha #5 — Anti-patterns silenciosos (analyzer NO detecta)
```typescript
// ❌ mutar dentro de computed (side effect)
const x = computed(() => { otroSignal.value = 5; return a.value * 2 })
// ❌ hook fuera del sync setup
onMount(async () => { await fetch('/x'); onUnmount(() => {}) }) // hooks usan estado global
// ❌ mount con HTMLElement (toma string)
mount(App, document.getElementById('app')!) // ✗
mount(App, '#app') // ✓
```
## Gotcha #6 — Wrapper invisible del child
`h(ChildComp, props, ...children)` crea `
` con `__arkUnmount`, `__arkSlot`, `__arkTag`. Props `onX` se registran 2x: prop del child + listener del wrapper. Inline closures `:onClick="() => x()"` NO re-montan (`diffComponentProps` lo resuelve desde v0.16+).
---
## PATRONES — 18 canónicos
### P1 — `:class` ternario reactivo
```typescript
const btnCls = computed(() => state.active.value ? 'on' : 'off')
// :class="computed.btnCls"
```
### P2 — Input controlado
```html
```
```typescript
function onEmail(e: Event) { email.value = (e.target as HTMLInputElement).value }
```
### P3 — Action con argumento en v-for
```typescript
// ✅ muta directo, NO usa return ()=>{}
function toggle(id: string) {
todos.value = todos.value.map(t => t.id === id ? {...t, done: !t.done} : t)
}
// @click="actions.toggle(todo.id)" ← compiler invoca toggle(id), todos.value se actualiza
```
Ver Gotcha #3 — el patrón curried (`return () => {}`) está prohibido en `@click` nativo porque el compiler descarta el retorno.
### P4 — Comm hijo → padre (emit)
```typescript
// child: emit('user-saved', payload)
// parent:
// parent: function onSave(payload) {} // recibe e.detail directo
```
### P5 — Modal con slot default
```html
{{ props.title }}
```
### P6 — Form submit + validación (stopPropagation)
```typescript
function submit(e: Event) {
e.preventDefault(); e.stopPropagation()
if (computed.formInvalid.value) return
/* dispatch a service */
}
```
### P7 — Async action ⚡ (try/catch + toast)
**Desde v0.24.3**: `