# Cómo ejecutar los ejemplos

Prueba APIs de WU, conecta React y Vue y recorre un servicio con contratos, RPC, permisos y limpieza.

Prueba también [Apps en movimiento](/es/labs/interaction/): editor React, bandeja Vue, ventanas y PiP, entrega tipada, transiciones y keep-alive. La [guía del escenario](/es/docs/guides/interactive-workspace/) explica cómo llevarlo a tu aplicación.

<span class="section-anchor" id="section-1"></span>

## Elige qué quieres comprobar

Si acabas de crear `mi-plataforma` y añadir `inspector`, empieza por **Contador compartido** y continúa con **Suma entre apps**. Las dos guías incluyen archivos completos y un ZIP para aplicarlos al mismo workspace. Los laboratorios permiten explorar después más escenarios desde este portal.

| Recorrido | Qué ejecuta | Dónde abrirlo |
| --- | --- | --- |
| Contador compartido | Conecta los contadores React y Vue de tu workspace mediante el store | [Guía y archivos](/es/docs/guides/shared-counter/) |
| Suma entre apps | Añade cliente y proveedor con RPC, manifests y permisos | [Guía y archivos](/es/docs/guides/rpc-between-apps/) |
| Recetas de APIs | RPC, contratos, grants, hooks, plugins, timeline, sincronización y carga | [Laboratorio](/es/labs/) |
| Composición | Montaje React/Vue, contador compartido y publicación de eventos | [React y Vue](/es/labs/composition/) |
| Servicios y RPC | Consumo de contrato, solicitud versionada, respuesta, cancelación y revocación | [Servicio conectado](/es/labs/backend/) |
| Constructor CLI | Generación y copia de un comando para ejecutarlo después en tu terminal | [Composición](/es/labs/composition/) |
| SSR, IA y MCP | Renderizado Node, actions locales y relay conectado con un navegador | [Ejemplos descargables](/examples/wu-server-recipes.zip) |

El [explorador de APIs](/es/api/) permite consultar firma, parámetros, retorno, errores, permisos y limpieza antes de ejecutar una receta. El [mapa de cobertura](/es/api/coverage/) relaciona los 397 registros del catálogo con los ejemplos disponibles. Esos registros no representan un porcentaje de pruebas del framework.

<span class="section-anchor" id="section-2"></span>

## Ejecutar una receta de API

Abre el [laboratorio](/es/labs/), elige una receta y ejecútala. Seleccionarla no inicia trabajo por sí solo. Cada comprobación muestra qué se esperaba y qué ocurrió; al terminar se informa también la limpieza de recursos.

Las ocho recetas reúnen **49 comprobaciones** de sus escenarios. Una ejecución correcta acredita esas condiciones concretas, no todas las combinaciones posibles de una API.

| Receta | Operaciones que puedes observar |
| --- | --- |
| [RPC](/es/labs/?recipe=rpc) | Respuesta de un handler, rango incompatible, timeout, señal de aborto y retirada del proveedor |
| [Contratos](/es/labs/?recipe=contracts) | `provide`, `consume`, acceso por versión compatible, revocación y sustitución del proveedor |
| [Grants](/es/labs/?recipe=grants) | Requests del manifest, grants del shell, escritura permitida, denegación y facade revocada tras `unmount` |
| [Hooks](/es/labs/?recipe=hooks) | Prioridad, continuación con `next()`, cancelación y montaje después de retirar el guard |
| [Plugins](/es/labs/?recipe=plugins) | Permisos concedidos al plugin, recepción de eventos y baja de listeners al desinstalar |
| [Timeline](/es/labs/?recipe=timeline) | Registro de cambios, `seek`, vuelta al estado vivo y efectos que no se rebobinan |
| [Sincronización](/es/labs/?recipe=sync) | Dos stores y mensajes reales mediante BroadcastChannel, seguidos del cierre de sus canales |
| [Carga](/es/labs/?recipe=loading) | Estrategias, hints, carga de un módulo local, montaje, overrides permitidos y expiración de caché |

Puedes compartir la URL con `?recipe=rpc` u otro identificador de la tabla. `/labs/api/` conserva acceso al mismo laboratorio. El código mostrado corresponde a recetas incluidas en el proyecto; la interfaz no evalúa texto que escriba el visitante.

Cada ejecución crea una instancia propia de WU en el documento actual. Las apps se montan en elementos dentro de un Shadow DOM; el runner libera sus handlers, contratos, listeners, canales y aplicaciones al terminar. Cancelar, cambiar de receta o retirar el componente solicita aborto y limpieza. Si esa limpieza no se confirma a tiempo, el recibo lo indica y el diagnóstico conserva los recursos pendientes.

<span class="section-anchor" id="section-3"></span>

## Del laboratorio a tu código

En la fuente de una receta, **`h` es el ayudante de pruebas de este portal**. No se importa de `wu-framework`. El runner crea ese objeto y se lo pasa a la función de la receta.

| En la receta | En tu proyecto |
| --- | --- |
| `const { wu } = h` | Importa `wu` de `wu-framework` en el módulo cliente del shell. |
| `h.init(...)` | El shell llama a `await wu.init({ apps, ... })` con su catálogo real. |
| `h.app(nombre, grants)` | Una entrada de `apps` con `name`, la URL que sirve su `wu.json` y los `grants` concedidos. |
| `h.check` / `h.rejects` | Comprobaciones de la prueba; tu interfaz muestra el resultado o maneja el error con `try`/`catch`. |
| `h.defer` | Registra limpieza para la prueba. En una app conserva las funciones de baja y ejecútalas en `unmount`. |
| `h.sleep` / `h.until` | Esperas del escenario de prueba; no son métodos del runtime WU. |

Los enlaces **Ayudante de pruebas (h)** y **Ejecutor de recetas** permiten leer esa infraestructura. En Grants, **Manifest de la app** muestra los permisos solicitados: compáralos con el array `granted` del código. La app solicita escritura en `docs.api.*`, pero el shell sólo concede `docs.api.allowed`; por eso escribir `docs.api.denied` debe fallar.

<span class="section-anchor" id="section-4"></span>

## Una página Astro con RPC

La receta [Una suma entre aplicaciones](/es/docs/guides/rpc-between-apps/) lleva **7 + 8 = 15** a tu workspace: una app recibe los números, otra calcula y el shell Astro concede permisos y las monta en orden. Incluye también un fallo recuperable al detener el proveedor.

Descarga [wu-rpc-sum.zip](/examples/wu-rpc-sum.zip) y sigue los pasos de la guía para añadir las apps antes de copiar sus archivos. El ZIP se aplica dentro de `mi-plataforma/`; el README indica cada destino. La página resultante es `shell/src/pages/suma.astro`. Si ya creaste la suma que se ejecutaba enteramente en el host, sustituye ese archivo por el de la receta completa.

Cada app usa el `context.wu` recibido al montarse. Los manifests solicitan los permisos; el host los concede. Así puedes seguir el recorrido completo `cliente → request → handle del proveedor → respuesta`, consultar el código de cada lado y comprobar qué ocurre cuando desaparece el servicio.

<span class="section-anchor" id="section-5"></span>

## Compartir estado y eventos entre React y Vue

En [Composición](/es/labs/composition/), el shell monta dos apps WU. React controla el constructor de comandos; Vue observa el store y los eventos. Sus controles visuales son Custom Elements Lit.

1. Pulsa **+1 desde React**. El valor cambia también en el inspector Vue mediante el store de WU.
2. Incrementa o reinicia desde Vue. React recibe el nuevo valor.
3. Cambia nombre y framework en el constructor. **Publicar en el bus** comparte el comando y produce un evento que el inspector muestra.
4. Pulsa **Pausar suscripciones** en Vue y vuelve a incrementar desde React. El store cambia mientras el inspector mantiene su observación pausada.
5. Reconecta: Vue vuelve a leer el valor actual y registra sus suscripciones.
6. Desmonta una app desde su barra y vuelve a montarla. Observa el lifecycle y la retirada de recursos de esa instancia.

El contador utiliza `docs.lab.counter`; el último comando, `docs.lab.lastCommand`. Los eventos son `docs:lab:counter`, `docs:lab:command` y `docs:lab:lifecycle`. Consulta [estado](/es/docs/framework/state/), [comunicación](/es/docs/framework/communication/) y [lifecycle](/es/docs/framework/lifecycle/) para llevar el patrón a tus aplicaciones.

El botón de copiar genera texto para tu terminal. El portal no ejecuta el binario de WU CLI, instala paquetes ni modifica el sistema del visitante. Para crear un workspace real sigue [Tu primer workspace](/es/docs/guides/quickstart/) y la [referencia CLI](/es/docs/cli/api-reference/).

<span class="section-anchor" id="section-6"></span>

## Seguir una solicitud entre aplicaciones

Abre [Servicios y RPC](/es/labs/backend/) para observar un cliente que consume `docs:backend:service` y llama al canal publicado por su proveedor.

Primero envía un manifest con `name` y `entry`. Después elimina `entry`, pide una versión incompatible o desmonta el proveedor. Estos casos distinguen un dato rechazado por el servicio, un contrato que no satisface el rango y un proveedor que dejó de estar disponible.

La receta lenta permite cancelar durante la ejecución. El proveedor conecta la señal de WU con la interrupción de su trabajo; detener sólo la espera del cliente no bastaría para garantizarlo. [Un servicio conectado con WU](/es/docs/guides/browser-backend/) explica firmas, grants, versiones y limpieza.

<span class="section-anchor" id="section-7"></span>

## Ejecutar los ejemplos Node

Descarga y descomprime [wu-server-recipes.zip](/examples/wu-server-recipes.zip). Desde la carpeta descomprimida, con Node 22.12 o posterior:

```sh
npm install
npm test
npm run test:mcp
```

`npm test` comprueba SSR y actions locales. La prueba MCP necesita un navegador compatible y conecta un proceso de relay con una página real. Sigue [SSR](/es/docs/framework/server-recipes/) e [IA/MCP](/es/docs/framework/ai-recipes/) para preparar sus requisitos y ejecutar cada caso. Estas recetas no se convierten en servicios Node por abrir la página estática del portal.

<span class="section-anchor" id="section-8"></span>

## Versiones e implementación

Los ejemplos de la portada, laboratorios y descargas usan WU Framework **4.0.0**; las guías de terminal usan CLI **1.2.0**. Consulta [distribución](/es/sources/) y [migración](/es/docs/guides/releases/) antes de trasladar un proyecto anterior.

La implementación del servicio utiliza un Worker y un programa WASI para procesar datos reales en el navegador sin desplegar un servidor. Esa infraestructura queda detrás del proveedor WU: permite ejecutar el ejemplo, mientras que el contrato estudiado sigue siendo `provide`/`consume`, `handle`/`request`, permisos y lifecycle. No añade un motor WASI general al framework ni sustituye un listener HTTP, SSR Node o un relay MCP.