# O que é WU

Entenda que problema o WU resolve, como uma app e seu shell se encaixam e quando faz sentido utilizá-lo.

Veja versões, mudanças e requisitos em [Framework 4.0 e CLI 1.2](/pt/docs/guides/releases/).


O WU permite reunir aplicações web independentes em uma mesma página. Cada aplicação mantém sua interface e seu framework; o WU coordena quando ela aparece, quando é removida e como se comunica com as demais.

O pacote inclui adapters para **React, Vue, Angular, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX e Stimulus**. Consulte os contratos na [referência de adapters](/pt/docs/framework/api-adapters/).

Para outra tecnologia, registre `mount` e `unmount` com `wu.define`, ou crie um adapter com [`createWuAdapter`](/pt/docs/framework/api-adapters/#createwuadapter). O contrato comum permite conectar aplicações com o mesmo framework ou com frameworks diferentes.

<span id="el-problema-que-resuelve"></span>

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

## O problema que resolve

Imagine uma loja com um catálogo em React e um carrinho em Vue. Suas equipes precisam alterar e publicar cada parte separadamente, mas o usuário espera uma única experiência: escolher um produto no catálogo e vê-lo no carrinho.

O WU carrega ambas as aplicações, entrega um contêiner a cada uma e oferece canais para compartilhar dados. O catálogo pode avisar sobre uma seleção sem importar componentes nem código do carrinho. As duas aplicações também poderiam usar React: **a independência entre aplicações é o essencial; misturar frameworks é uma possibilidade**.

<span id="tres-piezas-para-entenderlo"></span>

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

## Três partes para entender

<span id="1-la-app-aporta-una-parte-de-la-interfaz"></span>

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

### 1. A app fornece uma parte da interface

O catálogo e o carrinho são **microapps**, também chamadas microfrontends ou MFE. Cada uma registra como se desenhar em um contêiner e como remover os recursos que criou ao sair. No WU, essas operações se chamam `mount` e `unmount`: seu ciclo de vida.

Você pode escrevê-las com JavaScript ou usar um **adaptador**, que conecta o ciclo de vida de React, Vue ou outro framework ao WU. [Os adaptadores](/pt/docs/framework/api-adapters/) evitam repetir essa conexão em cada aplicação.

<span id="2-el-shell-decide-dónde-aparece-cada-app"></span>

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

### 2. O shell decide onde cada app aparece

O **shell** ou **host** é a página que as reúne. Define suas URLs, reserva os espaços para mostrá-las e coordena navegação, permissões e erros visíveis. Pode ser construído com Astro, outro framework ou HTML e JavaScript.

Na loja, o shell pode reservar uma área para o catálogo e outra para o carrinho. Não precisa conhecer os componentes internos de cada um.

<span id="3-el-runtime-las-conecta-durante-la-ejecución"></span>

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

### 3. O runtime as conecta durante a execução

O **runtime** é o pacote JavaScript `wu-framework` em execução na página. Carrega e monta as apps e fornece eventos, estado compartilhado e chamadas com resposta.

Por exemplo, o catálogo pode emitir um evento ao selecionar um produto; o carrinho o recebe e atualiza sua interface. O shell concede as permissões de que cada app precisa. Aprenda esses mecanismos após a primeira montagem, em [comunicação entre aplicações](/pt/docs/framework/communication/).

**A WU CLI prepara o projeto.** O comando `wu` trabalha no terminal: gera arquivos, prepara dependências, inicia o desenvolvimento e reúne os arquivos de produção. O runtime trabalha na aplicação aberta pelo usuário. Você pode usar WU sem a CLI se preparar esses arquivos com suas próprias ferramentas. [Conheça o fluxo da CLI](/pt/docs/cli/overview/).

<span id="cuándo-tiene-sentido"></span>

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

## Quando faz sentido

- Equipes diferentes precisam manter e publicar partes de uma mesma experiência separadamente.
- Você quer incluir uma aplicação nova ao lado de outra existente durante uma migração.
- Você precisa compor interfaces com limites de estilos e comunicação explícita entre aplicações.

Se uma única aplicação com seu roteador e seus componentes atende às suas necessidades, dividi-la em microapps acrescenta trabalho de configuração, montagem e coordenação. Você não precisa de vários frameworks para usar WU nem precisa de WU apenas por usar vários componentes.

O WU também não é uma fronteira para executar código hostil. Shadow DOM encapsula DOM e estilos, mas não impede, por si só, o acesso ao contexto JavaScript da página. Consulte [isolamento](/pt/docs/framework/sandbox/) e [segurança e permissões](/pt/docs/framework/security/) antes de escolher como carregar código de terceiros.

<span id="empieza-con-una-app"></span>

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

## Comece com uma app

Siga [Sua primeira app](/pt/docs/guides/quickstart/) para gerar um shell com uma microapp e verificar o resultado no navegador. Depois você pode [adicionar outra app](/pt/docs/guides/add-an-app/) e [preparar a produção](/pt/docs/guides/production/).

O percurso usa Astro e React como exemplo. O shell e os frameworks escolhidos podem ser outros.

<span id="qué-sucede-al-montar-una-app"></span>

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

## O que acontece ao montar uma app

O shell declara a URL da app. Nessa URL, um **manifesto** (`wu.json`) descreve o arquivo JavaScript que o WU deve carregar: sua **entrada**. Esse arquivo registra o ciclo de vida; o shell pede a montagem e a interface aparece.

<details>
<summary>Ver uma montagem mínima em JavaScript</summary>

Este exemplo mostra os arquivos envolvidos. Pressupõe um projeto que resolve `import ... from 'wu-framework'` por meio de seu bundler e serve os arquivos da app; não é uma receita de instalação. [A primeira app](/pt/docs/guides/quickstart/) prepara esse ambiente.

O HTML do shell contém `<div id="hello-slot"></div>`. Seu módulo **cliente** executa:

```js
import { wu } from 'wu-framework';

await wu.init({
  apps: [{ name: 'hello', url: '/apps/hello' }],
  sandbox: 'module',
});

await wu.mount('hello', '#hello-slot');
```

A URL serve um arquivo `/apps/hello/wu.json`:

```json
{
  "name": "hello",
  "entry": "assets/hello.js",
  "styleMode": "own-only",
  "wu": { "permissions": [] }
}
```

O bundle `assets/hello.js` registra a app ao ser avaliado:

```js
import { wu } from 'wu-framework';

wu.define('hello', {
  mount(container) {
    const heading = document.createElement('h2');
    heading.textContent = 'Hola desde WU';
    container.append(heading);
  },
  unmount(container) {
    container.replaceChildren();
  },
});
```

Ao resolver `wu.mount`, o contêiner mostra **Hola desde WU**. `wu.define` registra como desenhar a app; `wu.mount` faz com que ela apareça. O nome deve coincidir no registro, no manifesto e em `define`. A entrada deve ser JavaScript utilizável pelo navegador; publicar JSX/TSX bruto em um servidor estático não o transforma em um módulo executável.

<span id="una-instancia-compartida-y-permisos-por-app"></span>

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

### Uma instância compartilhada e permissões por app

A importação principal cria ou reutiliza `window.wu` e também expõe `Symbol.for('wu-framework')`. Os módulos de uma mesma página devem resolver o runtime de forma coerente; duplicar pacotes não produz automaticamente runtimes isolados. No Node, uma importação de `wu` continua sendo uma instância de módulo compartilhada por esse processo: para SSR, usa-se `wu-framework/server` e dados por solicitação.

O `wu` importado pelo shell tem autoridade de host. O segundo argumento do callback `mount(container, context)` da app contém `context.wu`: uma **facade**, ou seja, o acesso ao WU limitado às permissões dessa aplicação. Ela é revogada ao desmontá-la. Use esse argumento para manter o contrato de permissões. Recuperar `window.wu` a partir de um microfrontend que compartilha o contexto JavaScript do shell recupera a autoridade do host.

</details>

<span id="si-necesitas-profundizar"></span>

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

## Se precisar se aprofundar

| O que você quer entender | Continue aqui |
| --- | --- |
| Declarar apps, URLs, manifestos e permissões | [Configuração](/pt/docs/framework/configuration/) |
| Montar, desmontar e limpar recursos | [Ciclo de vida](/pt/docs/framework/lifecycle/) |
| Enviar eventos ou pedir uma resposta a outra app | [Comunicação](/pt/docs/framework/communication/) |
| Compartilhar dados que a interface possa observar | [Estado compartilhado](/pt/docs/framework/state/) |
| Buscar a assinatura e o contrato de um método | [Referência de API](/pt/docs/framework/api-reference/) |
| Integrar Astro, Next ou renderização no servidor | [Integrações](/pt/docs/framework/integrations/) |

<details>
<summary>Consultar limites técnicos e fontes de implementação</summary>

O pacote distribui ESM, CommonJS e UMD e exige Node `>=20.0.0` para suas ferramentas. O navegador executa o runtime cliente; o ponto de entrada `wu-framework/server` fornece as funções de renderização no servidor. Cada adaptador tem seus próprios requisitos de renderer e hidratação.

O WU não exige que Astro renderize as árvores React/Vue por meio de suas próprias ilhas: pode montar bundles independentes em contêineres do shell.

<span id="alcance-del-runtime"></span>

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

### Alcance do runtime

- Não há um roteador geral do core que interprete rotas do manifesto.
- Shadow DOM encapsula DOM/CSS; não impede, por si só, o acesso à janela principal.
- `strict` e `eval` usam iframes same-origin e não constituem uma fronteira contra código hostil.
- O store, seu histórico e a timeline vivem na memória; não oferecem um banco de dados nem auditoria durável.
- As aplicações são executadas em contextos do navegador; o core não inclui um motor geral de drivers, Worker ou WASM para tarefas arbitrárias.

<span id="referencia-de-implementación"></span>

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

### Referência de implementação

| Parte | Responsabilidade | Fonte |
| --- | --- | --- |
| `WuCore` | Registro, inicialização, montagem, desmontagem e ownership de contêineres | `src/core/wu-core.js` |
| Manifesto `wu.json` | Entrada, exportações, dependências declarativas e permissões solicitadas | `src/core/wu-manifest.js` |
| Lifecycle da app | Conectar e remover seu renderer do contêiner fornecido | `src/index.d.ts` |
| Sandbox e ponte de estilos | Limite DOM, distribuição de estilos e acompanhamento de efeitos | `src/core/wu-sandbox.js` |
| Barramento de eventos e RPC | Eventos com identidade; perguntas com resposta, versão e cancelamento | `src/core/wu-event-bus.js` |
| Store | Dados compartilhados, snapshots separados e notificações | `src/core/wu-store.js` |
| Shell | URLs, grants, navegação, composição e tratamento visível de erros | `src/core/wu-core.js` |

O contrato de exports está em `package.json`; o singleton e os acessos globais, em `src/index.js`; o contexto com escopo, em `src/core/wu-core.js` e `src/core/wu-core.js`. Os testes relevantes incluem `tests/unit/package-exports.test.js`, `tests/unit/core-store-isolation.test.js` e `tests/unit/capability-security-v3.test.js`.

</details>

Consulte [supervisão, recuperação e replay](/pt/docs/framework/runtime-reliability/) para `superviseApp`, `createReplaySession` e os métodos scoped `reportError`, `now` e `random`.