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: editor React, bandeja Vue, ventanas y PiP, entrega tipada, transiciones y keep-alive. La guía del escenario explica cómo llevarlo a tu aplicación.
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 |
| Suma entre apps | Añade cliente y proveedor con RPC, manifests y permisos | Guía y archivos |
| Recetas de APIs | RPC, contratos, grants, hooks, plugins, timeline, sincronización y carga | Laboratorio |
| Composición | Montaje React/Vue, contador compartido y publicación de eventos | React y Vue |
| Servicios y RPC | Consumo de contrato, solicitud versionada, respuesta, cancelación y revocación | Servicio conectado |
| Constructor CLI | Generación y copia de un comando para ejecutarlo después en tu terminal | Composición |
| SSR, IA y MCP | Renderizado Node, actions locales y relay conectado con un navegador | Ejemplos descargables |
El explorador de APIs permite consultar firma, parámetros, retorno, errores, permisos y limpieza antes de ejecutar una receta. El mapa de cobertura relaciona los 397 registros del catálogo con los ejemplos disponibles. Esos registros no representan un porcentaje de pruebas del framework.
Ejecutar una receta de API
Abre el laboratorio, 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 | Respuesta de un handler, rango incompatible, timeout, señal de aborto y retirada del proveedor |
| Contratos | provide, consume, acceso por versión compatible, revocación y sustitución del proveedor |
| Grants | Requests del manifest, grants del shell, escritura permitida, denegación y facade revocada tras unmount |
| Hooks | Prioridad, continuación con next(), cancelación y montaje después de retirar el guard |
| Plugins | Permisos concedidos al plugin, recepción de eventos y baja de listeners al desinstalar |
| Timeline | Registro de cambios, seek, vuelta al estado vivo y efectos que no se rebobinan |
| Sincronización | Dos stores y mensajes reales mediante BroadcastChannel, seguidos del cierre de sus canales |
| Carga | 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.
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.
Una página Astro con RPC
La receta Una suma entre aplicaciones 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 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.
Compartir estado y eventos entre React y Vue
En Composición, 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.
- Pulsa +1 desde React. El valor cambia también en el inspector Vue mediante el store de WU.
- Incrementa o reinicia desde Vue. React recibe el nuevo valor.
- Cambia nombre y framework en el constructor. Publicar en el bus comparte el comando y produce un evento que el inspector muestra.
- Pulsa Pausar suscripciones en Vue y vuelve a incrementar desde React. El store cambia mientras el inspector mantiene su observación pausada.
- Reconecta: Vue vuelve a leer el valor actual y registra sus suscripciones.
- 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, comunicación y 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 y la referencia CLI.
Seguir una solicitud entre aplicaciones
Abre Servicios y RPC 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 explica firmas, grants, versiones y limpieza.
Ejecutar los ejemplos Node
Descarga y descomprime wu-server-recipes.zip. Desde la carpeta descomprimida, con Node 22.12 o posterior:
npm install
npm test
npm run test:mcpnpm 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 e IA/MCP 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.
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 y migración 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.