# Como executar os exemplos
Teste APIs do WU, conecte React e Vue e percorra um serviço com contratos, RPC, permissões e limpeza.
Experimente também [Apps em movimento](/pt/labs/interaction/): editor React, caixa de entrada Vue, janelas e PiP, entrega tipada, transições e keep-alive. O [guia do cenário](/pt/docs/guides/interactive-workspace/) explica como aplicá-lo à sua aplicação.
## Escolha o que deseja verificar
Se acabou de criar `mi-plataforma` e adicionar `inspector`, comece por **Contador compartilhado** e continue com **Soma entre apps**. Os dois guias incluem arquivos completos e um ZIP para aplicar ao mesmo workspace. Depois, os laboratórios permitem explorar mais cenários neste portal.
| Percurso | O que executa | Onde abrir |
| --- | --- | --- |
| Contador compartilhado | Conecta os contadores React e Vue do seu workspace pelo store | [Guia e arquivos](/pt/docs/guides/shared-counter/) |
| Soma entre apps | Adiciona cliente e provedor com RPC, manifestos e permissões | [Guia e arquivos](/pt/docs/guides/rpc-between-apps/) |
| Receitas de APIs | RPC, contratos, concessões, hooks, plugins, timeline, sincronização e carregamento | [Laboratório](/pt/labs/) |
| Composição | Montagem React/Vue, contador compartilhado e publicação de eventos | [React e Vue](/pt/labs/composition/) |
| Serviços e RPC | Consumo de contrato, solicitação versionada, resposta, cancelamento e revogação | [Serviço conectado](/pt/labs/backend/) |
| Construtor CLI | Geração e cópia de um comando para executar depois no seu terminal | [Composição](/pt/labs/composition/) |
| SSR, IA e MCP | Renderização Node, actions locais e relay conectado a um navegador | [Exemplos para baixar](/examples/wu-server-recipes.zip) |
O [explorador de APIs](/pt/api/) permite consultar assinatura, parâmetros, retorno, erros, permissões e limpeza antes de executar uma receita. O [mapa de cobertura](/pt/api/coverage/) relaciona os 397 registros do catálogo aos exemplos disponíveis. Esses registros não representam uma porcentagem de testes do framework.
## Executar uma receita de API
Abra o [laboratório](/pt/labs/), escolha uma receita e execute-a. Selecioná-la não inicia trabalho por si só. Cada verificação mostra o que se esperava e o que aconteceu; ao terminar, também informa a limpeza dos recursos.
As oito receitas reúnem **49 verificações** dos seus cenários. Uma execução correta comprova essas condições específicas, não todas as combinações possíveis de uma API.
| Receita | Operações que você pode observar |
| --- | --- |
| [RPC](/pt/labs/?recipe=rpc) | Resposta de um handler, intervalo incompatível, timeout, sinal de aborto e remoção do provedor |
| [Contratos](/pt/labs/?recipe=contracts) | `provide`, `consume`, acesso por versão compatível, revogação e substituição do provedor |
| [Concessões](/pt/labs/?recipe=grants) | Solicitações do manifesto, concessões do shell, escrita permitida, negação e fachada revogada após `unmount` |
| [Hooks](/pt/labs/?recipe=hooks) | Prioridade, continuação com `next()`, cancelamento e montagem após remover o guard |
| [Plugins](/pt/labs/?recipe=plugins) | Permissões concedidas ao plugin, recebimento de eventos e remoção de listeners ao desinstalar |
| [Timeline](/pt/labs/?recipe=timeline) | Registro de alterações, `seek`, volta ao estado ao vivo e efeitos que não são rebobinados |
| [Sincronização](/pt/labs/?recipe=sync) | Dois stores e mensagens reais por BroadcastChannel, seguidos do fechamento dos seus canais |
| [Carregamento](/pt/labs/?recipe=loading) | Estratégias, dicas, carregamento de um módulo local, montagem, substituições permitidas e expiração do cache |
Você pode compartilhar a URL com `?recipe=rpc` ou outro identificador da tabela. `/labs/api/` mantém acesso ao mesmo laboratório. O código exibido corresponde a receitas incluídas no projeto; a interface não avalia texto escrito pelo visitante.
Cada execução cria sua própria instância WU no documento atual. As apps são montadas em elementos dentro de um Shadow DOM; o executor libera seus handlers, contratos, listeners, canais e apps ao terminar. Cancelar, mudar de receita ou remover o componente solicita aborto e limpeza. Se a limpeza não for confirmada a tempo, o recibo informa isso e o diagnóstico mantém os recursos pendentes.
## Do laboratório ao seu código
No código-fonte de uma receita, **`h` é o auxiliar de testes deste portal**. Ele não é importado de `wu-framework`. O runner cria esse objeto e o passa à função da receita.
| Na receita | No seu projeto |
| --- | --- |
| `const { wu } = h` | Importe `wu` de `wu-framework` no módulo cliente do shell. |
| `h.init(...)` | O shell chama `await wu.init({ apps, ... })` com seu catálogo real. |
| `h.app(nombre, grants)` | Uma entrada de `apps` com `name`, a URL que serve seu `wu.json` e os `grants` concedidos. |
| `h.check` / `h.rejects` | Verificações do teste; sua interface mostra o resultado ou trata o erro com `try`/`catch`. |
| `h.defer` | Registra a limpeza do teste. Em uma app, mantenha as funções de cancelamento de inscrição e execute-as em `unmount`. |
| `h.sleep` / `h.until` | Esperas do cenário de teste; não são métodos do runtime WU. |
Os links **Auxiliar de testes (h)** e **Executor de receitas** permitem ler essa infraestrutura. Em Concessões, **Manifesto da app** mostra as permissões solicitadas: compare-as com o array `granted` do código. A app solicita escrita em `docs.api.*`, mas o shell concede apenas `docs.api.allowed`; por isso, escrever em `docs.api.denied` deve falhar.
## Uma página Astro com RPC
A receita [Uma soma entre aplicações](/pt/docs/guides/rpc-between-apps/) leva **7 + 8 = 15** ao seu workspace: uma app recebe os números, outra calcula e o shell Astro concede permissões e as monta em ordem. Também inclui uma falha recuperável ao parar o provedor.
Baixe [wu-rpc-sum.zip](/examples/wu-rpc-sum.zip) e siga os passos do guia para adicionar as apps antes de copiar seus arquivos. O ZIP é aplicado dentro de `mi-plataforma/`; o README indica cada destino. A página resultante é `shell/src/pages/suma.astro`. Se já criou a soma que era executada inteiramente no host, substitua esse arquivo pelo da receita completa.
Cada app usa o `context.wu` recebido ao ser montada. Os manifestos solicitam as permissões; o host as concede. Assim, você pode acompanhar o percurso completo `cliente → request → handle del proveedor → respuesta`, consultar o código de cada lado e verificar o que acontece quando o serviço desaparece.
## Compartilhar estado e eventos entre React e Vue
Em [Composição](/pt/labs/composition/), o shell monta duas apps WU. React controla o construtor de comandos; Vue observa o store e os eventos. Seus controles visuais são Custom Elements Lit.
1. Clique em **+1 a partir de React**. O valor também muda no inspetor Vue pelo store do WU.
2. Incremente ou reinicie pelo Vue. React recebe o novo valor.
3. Mude o nome e o framework no construtor. **Publicar no barramento** compartilha o comando e produz um evento que o inspetor mostra.
4. Clique em **Pausar inscrições** no Vue e incremente novamente pelo React. O store muda enquanto o inspetor mantém sua observação pausada.
5. Reconecte: Vue lê novamente o valor atual e registra suas inscrições.
6. Desmonte uma app pela sua barra e monte-a novamente. Observe o ciclo de vida e a remoção dos recursos dessa instância.
O contador usa `docs.lab.counter`; o último comando, `docs.lab.lastCommand`. Os eventos são `docs:lab:counter`, `docs:lab:command` e `docs:lab:lifecycle`. Consulte [estado](/pt/docs/framework/state/), [comunicação](/pt/docs/framework/communication/) e [ciclo de vida](/pt/docs/framework/lifecycle/) para levar o padrão às suas aplicações.
O botão de copiar gera texto para seu terminal. O portal não executa o binário da WU CLI, não instala pacotes nem modifica o sistema do visitante. Para criar um workspace real, siga [Seu primeiro workspace](/pt/docs/guides/quickstart/) e a [referência da CLI](/pt/docs/cli/api-reference/).
## Acompanhar uma solicitação entre aplicações
Abra [Serviços e RPC](/pt/labs/backend/) para observar um cliente que consome `docs:backend:service` e chama o canal publicado pelo seu provedor.
Primeiro, envie um manifesto com `name` e `entry`. Depois, remova `entry`, peça uma versão incompatível ou desmonte o provedor. Esses casos distinguem um dado rejeitado pelo serviço, um contrato que não atende ao intervalo e um provedor que deixou de estar disponível.
A receita lenta permite cancelar durante a execução. O provedor conecta o sinal do WU à interrupção do seu trabalho; parar apenas a espera do cliente não bastaria para garantir isso. [Um serviço conectado com WU](/pt/docs/guides/browser-backend/) explica assinaturas, concessões, versões e limpeza.
## Executar os exemplos Node
Baixe e descompacte [wu-server-recipes.zip](/examples/wu-server-recipes.zip). Na pasta descompactada, com Node 22.12 ou posterior:
```sh
npm install
npm test
npm run test:mcp
```
`npm test` verifica SSR e actions locais. O teste MCP precisa de um navegador compatível e conecta um processo de relay a uma página real. Siga [SSR](/pt/docs/framework/server-recipes/) e [IA/MCP](/pt/docs/framework/ai-recipes/) para preparar os requisitos e executar cada caso. Essas receitas não se tornam serviços Node ao abrir a página estática do portal.
## Versões e implementação
Exemplos da página inicial, laboratórios e downloads usam WU Framework **4.0.0**; guias de terminal usam CLI **1.2.0**. Consulte [distribuição](/pt/sources/) e [migração](/pt/docs/guides/releases/) antes de atualizar um projeto existente.
A implementação do serviço usa um Worker e um programa WASI para processar dados reais no navegador sem implantar um servidor. Essa infraestrutura fica por trás do provedor WU: permite executar o exemplo, enquanto o contrato estudado continua sendo `provide`/`consume`, `handle`/`request`, permissões e ciclo de vida. Ela não adiciona um motor WASI geral ao framework nem substitui um listener HTTP, SSR Node ou um relay MCP.