GUIAS PRÁTICOS8 MIN DE LEITURA · MARKDOWN ↗

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: editor React, caixa de entrada Vue, janelas e PiP, entrega tipada, transições e keep-alive. O guia do cenário 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
Soma entre apps	Adiciona cliente e provedor com RPC, manifestos e permissões	Guia e arquivos
Receitas de APIs	RPC, contratos, concessões, hooks, plugins, timeline, sincronização e carregamento	Laboratório
Composição	Montagem React/Vue, contador compartilhado e publicação de eventos	React e Vue
Serviços e RPC	Consumo de contrato, solicitação versionada, resposta, cancelamento e revogação	Serviço conectado
Construtor CLI	Geração e cópia de um comando para executar depois no seu terminal	Composição
SSR, IA e MCP	Renderização Node, actions locais e relay conectado a um navegador	Exemplos para baixar

O explorador de APIs permite consultar assinatura, parâmetros, retorno, erros, permissões e limpeza antes de executar uma receita. O mapa de cobertura 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, 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	Resposta de um handler, intervalo incompatível, timeout, sinal de aborto e remoção do provedor
Contratos	`provide`, `consume`, acesso por versão compatível, revogação e substituição do provedor
Concessões	Solicitações do manifesto, concessões do shell, escrita permitida, negação e fachada revogada após `unmount`
Hooks	Prioridade, continuação com `next()`, cancelamento e montagem após remover o guard
Plugins	Permissões concedidas ao plugin, recebimento de eventos e remoção de listeners ao desinstalar
Timeline	Registro de alterações, `seek`, volta ao estado ao vivo e efeitos que não são rebobinados
Sincronização	Dois stores e mensagens reais por BroadcastChannel, seguidos do fechamento dos seus canais
Carregamento	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 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 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, 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.

Clique em +1 a partir de React. O valor também muda no inspetor Vue pelo store do WU.
Incremente ou reinicie pelo Vue. React recebe o novo valor.
Mude o nome e o framework no construtor. Publicar no barramento compartilha o comando e produz um evento que o inspetor mostra.
Clique em Pausar inscrições no Vue e incremente novamente pelo React. O store muda enquanto o inspetor mantém sua observação pausada.
Reconecte: Vue lê novamente o valor atual e registra suas inscrições.
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, comunicação e ciclo de vida 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 e a referência da CLI.

Acompanhar uma solicitação entre aplicações

Abra Serviços e RPC 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 explica assinaturas, concessões, versões e limpeza.

Executar os exemplos Node

Baixe e descompacte wu-server-recipes.zip. Na pasta descompactada, com Node 22.12 ou posterior:

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 e IA/MCP 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 e migração 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.