# Templates e composição poliglota

Os treze alvos de microapps, shells disponíveis, adaptadores gerados e o alcance de cada template.

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


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

## Catálogo implementado

A CLI aceita treze nomes de microapp. A seleção do shell acrescenta `astro` e `next`. O suporte a um nome significa que existe um caminho de geração; não comprova paridade absoluta de compilador, SSR, ecossistema nem ciclo de vida entre frameworks.

| Alvo | Componente / registro gerado | Shell gerado com essa seleção |
| --- | --- | --- |
| `react` | `App.tsx`, `wuReact.register` com runtime React/ReactDOM explícito | React |
| `vue` | `App.vue`, `wuVue.register` | Vue |
| `svelte` | `App.svelte`, `wuSvelte.registerSvelte5` | JavaScript agnóstico |
| `solid` | `App.tsx`, `wuSolid.register` | Solid |
| `preact` | `App.tsx`, `wuPreact.register` | Preact |
| `qwik` | `App.tsx`, `wuQwik.register` | Qwik |
| `lit` | `App.ts`, `wuLit.register` | Lit |
| `vanilla` | Módulo de app, `wuVanilla.register` com função render | JavaScript agnóstico |
| `angular` | Componente e configuração Angular, `registerStandalone` | Angular |
| `alpine` | JavaScript com `@alpinejs/csp`, `wuAlpine.register` | JavaScript agnóstico |
| `stencil` | Custom element e `wuStencil.register` | JavaScript agnóstico |
| `htmx` | Módulo HTML/JS, `wuHtmx.register` | JavaScript agnóstico |
| `stimulus` | Módulo de controladores, `wuStimulus.register` | JavaScript agnóstico |

As extensões refletem o modo rápido com TypeScript ativado onde é compatível. O assistente pode gerar variantes JavaScript. Em Alpine, HTMX e Stimulus, não oferece TypeScript.

<span id="versiones-del-catálogo-11"></span>

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

## Versões do catálogo 1.1

```sh
wu catalog
wu catalog --json
```

O catálogo é a fonte única de create, add, install, upgrade e descoberta. Declara WU Framework `^4.0.0`, Preact `^11.0.0` e TypeScript `~6.0.0` para Angular 22. O JSON inclui intervalos e motivos de versões retidas; a geração não consulta npm para escolher versões.

<span id="qué-constituye-una-microapp-generada"></span>

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

## O que constitui uma microapp gerada

O gerador grava um pacote identificável, uma configuração Vite, um `index.html`, um componente de demonstração e um ponto de entrada de registro. O contêiner standalone do HTML coincide com o seletor esperado pelo adaptador. Isso permite executar a app com sua toolchain, além de montá-la a partir do shell WU.

Não gera automaticamente um `wu.json` de origem. No desenvolvimento, o servidor pode oferecer um manifesto virtual com contratos vazios; em produção, o build grava um com a entrada emitida. Para usar imports/exports de contrato ou permissões, escreva um manifesto explícito e verifique se suas solicitações coincidem com os grants do host.

<span id="particularidades-que-importan"></span>

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

## Particularidades relevantes

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

### React

O ponto de entrada passa `React` e `ReactDOM` ao adaptador para manter uma mesma identidade de runtime. Evite misturar uma cópia do adaptador que resolve outra instância com a usada pelo componente. Compartilhar dependências em produção também exige incluir os especificadores completos que são importados.

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

### Angular

O scaffold gera `tsconfig.json` e `tsconfig.app.json`, importa o compilador, prepara a configuração da aplicação e passa funções de criação ao adaptador standalone. A compilação de Angular precisa de sua integração específica; remover esses arquivos por considerá-los decorativos pode produzir um build sem o código esperado.

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

### Stencil

O template atual grava diretamente uma classe que estende `HTMLElement` e registra um custom element. Usa o adaptador Stencil, mas não equivale a gerar um projeto completo do compilador Stencil com todo o seu pipeline. Se precisar desse pipeline, integre-o explicitamente e verifique sua entrada construída.

Cada app Stencil registra `wu-stencil-<name>` e não instala `@stencil/core`. O shell Angular declara `rxjs`, o shell Solid seu preset Babel e o shell agnóstico não adiciona Svelte. O template Vanilla encaminha estado e contexto WU ao render e aos componentes.

<span id="alpine-y-htmx"></span>

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

### Alpine e HTMX

Alpine usa a distribuição CSP. O ponto de entrada de HTMX desativa a avaliação e as tags de script, prepara a configuração antes de importar o runtime e evita estilos automáticos de indicador. Essas decisões fazem parte do scaffold; reativar as funções exige revisar sua relação com a política do host.

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

### Qwik

No desenvolvimento, há uma seleção de compilação que usa o otimizador de Qwik. O template como microapp WU é montado no cliente; não promete, por si só, uma arquitetura SSR ou resumability completa do host.

<span id="shell-astro-o-next"></span>

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

## Shell Astro ou Next

```bash
wu create conocimiento --template react --shell astro
cd conocimiento
wu add vue explorador --no-install
wu add lit indicador --no-install
wu install
wu dev --no-open
```

Astro constrói o shell; React, Vue e Lit são registrados como microapps. O host deve decidir sua montagem e seus contratos. Eles não precisam adotar o framework do shell.

A alternativa `--shell next` usa um export estático para `out/`. `--template astro` e `--template next` falham porque o catálogo de microapps não contém esses alvos. O suporte a shell não implica que o WU execute um servidor SSR de Astro ou Next.

<span id="prueba-mínima-de-una-combinación"></span>

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

## Teste mínimo de uma combinação

Construa, carregue cada app, acione seu contador de demonstração, mude de app e monte-a novamente. Revise o console, os estilos e a limpeza ao desmontar. Se acrescentar comunicação, verifique tanto uma operação permitida quanto uma rejeitada por contrato. Uma tabela de templates é um inventário; esse teste estabelece qual comportamento funciona no projeto e nas versões instaladas.

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

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

## Referência de implementação

- `wu-cli/src/config/catalog.zig`
- `wu-cli/src/commands/catalog.zig`
- `wu-cli/src/commands/templates/`
- `wu-cli/tests/scaffold-catalog.test.cjs`
- `wu-cli/tests/vanilla-ctx.test.cjs`