Astro, React, Vue e adaptadores

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.

---
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.

Entrada React com adaptador

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.

Entrada Vue com adaptador

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.

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:

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.

Integrações incluídas no pacote

Os seguintes subcaminhos fazem parte 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.

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.