# Astro, React, Vue e adaptadores

Composição poliglota com script cliente Astro, adaptadores reais e uma ponte manual que mantém a fachada com escopo.

<span id="un-shell-astro-con-apps-independientes"></span>

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

## Um shell Astro com apps independentes

Astro pode servir o conteúdo editorial e os slots, enquanto o WU carrega aplicações com seu próprio build Vite. O import do runtime que monta DOM deve estar em um `<script>` processado pelo Astro, não ser executado como montagem no frontmatter do servidor.

```astro
---
const title = 'Laboratorio políglota';
---
<html lang="es">
  <head><meta charset="utf-8" /><title>{title}</title></head>
  <body>
    <main>
      <div id="react-slot"></div>
      <div id="vue-slot"></div>
    </main>
    <script>
      import { wu } from 'wu-framework';
      await wu.init({
        apps: [
          { name: 'react-demo', url: '/apps/react-demo', framework: 'react' },
          { name: 'vue-demo', url: '/apps/vue-demo', framework: 'vue' },
        ],
      });
      await Promise.all([
        wu.mount('react-demo', '#react-slot'),
        wu.mount('vue-demo', '#vue-slot'),
      ]);
    </script>
  </body>
</html>
```

Os dois diretórios públicos devem conter seus manifestos e assets compilados. Para estado e eventos com escopo, adicione solicitações em cada manifesto e as concessões correspondentes em ambas as configurações do host.

<span id="entry-react-con-adapter"></span>

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

## Entrada React com adaptador

```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { register } from 'wu-framework/adapters/react';
import App from './App.jsx';

const registered = await register('react-demo', App, {
  runtime: { React, ReactDOM },
  standalone: false,
  strictMode: true,
  props: { label: 'React' },
});
if (!registered) throw new Error('No se pudo registrar react-demo');
```

A injeção `runtime` permite ao adaptador usar as mesmas instâncias da sua aplicação. Importe `ReactDOM` de `react-dom/client`: a montagem requer `createRoot`, mesmo que o intervalo do peer de React seja mais amplo. Para hidratar, o runtime também deve oferecer `hydrateRoot`.

O adaptador mantém raízes por nome, implementa `update` mesclando props e oferece hidratação por `hydrateRoot` quando disponível. `standalone` é `true` por padrão e procura `#root` se não encontrar o WU; desative-o para que um microfrontend integrado não seja montado acidentalmente em outro lugar.

<span id="entry-vue-con-adapter"></span>

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

## Entrada Vue com adaptador

```js
import { register, wuVuePlugin } from 'wu-framework/adapters/vue';
import * as Vue from 'vue';
import App from './App.vue';

const registered = await register('vue-demo', App, {
  standalone: false,
  props: { label: 'Vue' },
  setup(app) {
    app.use(wuVuePlugin, { Vue });
  },
});
if (!registered) throw new Error('No se pudo registrar vue-demo');
```

O `register` do Vue resolve seu runtime pelo mecanismo do adaptador; não tem a opção React `runtime`. `setup` recebe a app antes de montar para registrar plugins ou roteador. O plugin aceita o namespace Vue para resolver helpers em contextos sem bare imports nem `window.Vue`; entregar o namespace em `setup` não substitui por si só a resolução inicial de `register`.

A atualização usa props reativas na raiz quando Vue oferece `reactive`. A hidratação é anunciada quando existe `createSSRApp`. O padrão de `standaloneContainer` é `#app`.

<span id="conservar-la-autoridad-scoped"></span>

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

## Manter a autoridade com escopo

No 4.0, os adapters React/Vue passam a facade à árvore de componentes, e seus hooks de eventos/store aplicam os grants da microapp. Declare as solicitações do manifest e os grants do shell. O padrão manual abaixo continua útil para um renderer próprio ou uma dependência explícita `appWu`.

Para um renderer personalizado, registre um lifecycle explícito e passe a facade como dependência:

```jsx
import { wu } from 'wu-framework';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

let root;
let appWu;
let props = {};
const render = () => root.render(React.createElement(App, { ...props, appWu }));

wu.define('react-demo', {
  mount(container, context) {
    appWu = context.wu;
    root = createRoot(container);
    render();
  },
  update(_container, nextProps) {
    props = { ...props, ...nextProps };
    render();
  },
  unmount() {
    root?.unmount();
    root = undefined;
    appWu = undefined;
  },
});
```

No Vue, o mesmo padrão usa `createApp(App, { appWu: context.wu })`, `app.provide('appWu', context.wu)` e `app.unmount()`. Se precisar de props vivas, mantenha um objeto `reactive` e atualize-o no slot `update`.

<span id="integraciones-incluidas-en-el-paquete"></span>

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

## Integrações incluídas no pacote

Os seguintes subcaminhos fazem parte do pacote:

| Import | Função |
| --- | --- |
| `wu-framework/integrations/astro` | Factory para `astro.config.mjs` |
| `wu-framework/integrations/astro/WuShell.astro` | Inicializa apps do shell |
| `wu-framework/integrations/astro/WuApp.astro` | Slot de montagem, com lazy opcional |
| `wu-framework/integrations/astro/WuAppSSR.astro` | Renderização de servidor e montagem/hidratação cliente |
| `wu-framework/integrations/next` | Integração Next e componentes do pacote |

Importe a integração e seus componentes de `wu-framework/integrations/astro`. Os tipos do wrapper Astro expõem menos configuração que `WuCore`; um bootstrap cliente explícito permite controlar concessões e ordem de inicialização quando o shell precisa dessa configuração adicional.

Há adaptadores separados para **React, Vue, Angular, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX e Stimulus**. Selecione o do renderizador da sua aplicação e verifique seus slots: montagem, props vivas, hidratação e transmissão do contexto têm contratos específicos em cada adaptador.

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

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

## Referência de implementação

Exportações: `package.json`; React: `src/adapters/react/index.js` e `src/adapters/react/index.js`; Vue: `src/adapters/vue/index.js` e `src/adapters/vue/index.js`; Astro: `integrations/astro/index.js`, `integrations/astro/WuShell.astro`, `integrations/astro/WuApp.astro`. Testes: `tests/unit/react-runtime-injection.test.js`, `tests/unit/adapter-conformance.test.js`, `tests/unit/adapter-slots.test.js`, `tests/unit/vue-slot-mount-target.test.js`.