# SKILL: Compiler — internals

Tier 2. Para escribir `.ark` alcanza AIREF.md.

## Parser — excepciones que bloquean build

```
MISSING_TEMPLATE | MISSING_SCRIPT | WRONG_ORDER | MISSING_LANG_TS | DUPLICATE_SECTION
```
Tira `ArkParseError`. Distinto del analyzer (no bloqueante).

## Template — directivas

| Sintaxis | Output |
|---|---|
| `{{ expr }}` | `h('span', null, expr)` |
| `:attr="x"` | `attr: x` |
| `@event="h"` | `onEvent: h` (capitaliza) |
| `@keydown.enter="x"` | wrapper `(e) => e.key === 'Enter' && x(e)` |
| `v-if/v-else-if/v-else` | ternario anidado |
| `v-for="(item,idx) in coll"` | `coll.map((item,idx) => ...)` |
| `v-show="x"` | `style: { display: x ? '' : 'none' }` |
| `<slot/>` | `props.__slot_default?.() ?? []` |
| `<slot name="X"/>` | `props.__slot_X?.() ?? []` |
| `<slot :item="x"/>` | `props.__slot_default?.({item:x}) ?? []` |
| `<template #X>` hijo de Comp | prop `__slot_X: () => [...]` |
| `<template #default="{item}">` | prop `__slot_default: ({item}) => [...]` |
| `<PascalCase :p="x"/>` | `h(PascalCase, { p: x })` |
| `<component :is="x"/>` | `h(<x>, ...)` |

`KEY_MAP`: `enter|escape/esc|tab|space|up|down|left|right|delete|backspace`. Otros → capitalizados.

## Vite plugin — pipeline

1. Read `.ark`
2. Parse → `{ template, script, style }`
3. `analyze()` + format (errors en prod bloquean build)
4. Hash determinístico → `__scopeId`
5. `compileTemplate(template, useScope ? scopeId : undefined)` — stampea elementos DOM con `data-ark-{scopeId}` si hay `<style scoped>` con contenido
6. Si scoped → `scopeCss()` + injection code para `<head>` (id idempotente `ark-style-{scopeId}`)
7. Concat: imports + script + render + style injector + `__component.__render = render`
8. `transformWithEsbuild` para strip TS

Vite 5 only — `transformWithEsbuild` removido en v6.

## scope-css.ts

```typescript
scopeCss('.card { p }', 'abc')       // .card[data-ark-abc]{ p }
scopeCss(':host(.x) { p }', 'abc')   // [data-ark-abc].x { p }
scopeCss(':global(body.dark) .x{}','abc')  // body.dark .x[data-ark-abc]{} (sentinels __ARK_G_n__)
```

| Input | Output | Notas |
|---|---|---|
| `.a .b {}` | `.a .b[data-ark-X] {}` | solo rightmost |
| `.a > .b` | `.a > .b[data-ark-X]` | respeta combinadores |
| `.btn::before` | `.btn[data-ark-X]::before` | scope antes del pseudo |
| `:host` | `[data-ark-X]` | matchea root |
| `:global(X)` | `X` | escapa scope |
| `@media/@supports/@container` | recursivo | scopea internos |
| `@keyframes/@font-face/@page/@charset` | opaco | NO scopea |

## Stamping

`genElement()` agrega `data-ark-{scopeId}` a cada tag lowercase del template. NO a componentes PascalCase (child stamps lo suyo con SU scope). `<slot/>` tampoco — reemplazado por el call al slot prop.

## Plugin options

```typescript
arkcodeUi({ analyzer: { failOnWarnings: false, ignore: [], conventions: [] } })
```
`failOnWarnings: true` rompe DX en dev — evitar.
