WU / DOCSMICROFRONTENDS UNIVERSAIS
PT

Core, subsistemas e manifests

Escolha entradas opcionais e declare o contrato de cada app em um arquivo, no shell ou no módulo.

Esta página descreve o WU Framework 4.0.0. Consulte o guia de migração para Framework 4.0 e CLI 1.2 antes de atualizar um projeto existente.

Escolher o runtime

wu-framework carrega subsistemas opcionais no primeiro uso. wu-framework/core exige imports explícitos no shell. A CLI 1.0.0 compartilha a entrada core entre shell e apps em desenvolvimento e produção.

import { wu } from 'wu-framework/core';
import 'wu-framework/timeline';
import 'wu-framework/ports';

await wu.init({ apps: [] });
const timeline = await wu.timelineReady();
Função Import do shell
AI wu-framework/ai
Timeline wu-framework/timeline
Devtools wu-framework/devtools
MCP wu-framework/mcp
strict wu-framework/sandbox/iframe
eval wu-framework/sandbox/html-parser + wu-framework/sandbox/iframe
Store sync wu-framework/store-sync
Shadow wu-framework/shadow
Windows wu-framework/windows
Drag and drop wu-framework/dnd
Ports / remote wu-framework/ports
.wuapp wu-framework/wuapp

Se faltar um import, WU_OPTIONAL_NOT_BUNDLED identifica o subsistema e a entrada necessária. Adicione-o uma vez no shell e reconstrua. O import registra o subsistema; não concede permissões às apps.

Três fontes de manifest

manifest: "fetch" é o padrão e carrega wu.json. Um objeto manifest declara os mesmos dados no shell. Com manifest: "define", o módulo chama wu.declare ou passa { manifest } no terceiro argumento de wu.define; configure entry, pois não há um arquivo anterior indicando o módulo.

// shell.js
import { wu } from 'wu-framework/core';
await wu.init({ apps: [{
  name: 'greeting', url: '/apps/greeting/',
  manifest: 'define', entry: 'entry.js', grants: [],
}] });
await wu.mount('greeting', '#greeting-slot');
// apps/greeting/entry.js
import { wu } from 'wu-framework/core';
wu.define('greeting', {
  mount(container) { container.textContent = 'Hello from WU'; },
  unmount(container) { container.replaceChildren(); },
}, { manifest: { wu: { permissions: [] } } });

O HTML do shell deve conter #greeting-slot; o módulo da app deve importar a mesma instância WU do shell. Os três modos validam o manifest e aplicam os grants do host. Declarar em JavaScript não torna o código secreto nem cria uma fronteira de segurança.

Identidade durante o carregamento

definesAs registra outra instância de um módulo que mantém o nome original. Durante o carregamento, WU redireciona define e declare ao novo registro. Só pode existir um carregamento ativo por nome redirecionado: WU_DEFINE_REDIRECT_BUSY. Se o módulo definir o nome errado, WU_DEFINE_NAME_MISMATCH informa os nomes observados sem repetir um timeout que não resolveria o problema.

Montar dentro de outro Shadow DOM

mount(name, target) aceita um seletor ou um HTMLElement. Passe o elemento quando ele pertence a um Shadow DOM: seletores do documento não atravessam essa fronteira. Recuperação e desmontagem mantêm o mesmo host; inspect() retorna containerSelector: null para montagem por elemento.

// The shell has already registered and initialized the editor app.
const shell = document.querySelector('my-shell');
const slot = shell.shadowRoot.querySelector('[data-editor-slot]');
await runtime.mount('editor', slot);
// Later, when the shell releases this view:
await runtime.unmount('editor', { force: true });

Instâncias possuem seus recursos

Cada new WuCore() tem seu próprio store, cache em memória, métricas e links de pré-carregamento. destroy() libera esses recursos e preserva os de outras instâncias. Um cache injetado com new WuCore({ cache }) pertence ao chamador e não é limpo automaticamente. Para persistência, crie um WuCache com armazenamento e namespace explícitos e decida quando limpá-lo.

Registre os lifecycles com runtime.define(...) na instância correspondente. Importar o singleton global wu registra no host compartilhado. Em uma instância independente, aguarde runtime.timelineReady() antes de gravar mudanças. Esse padrão compõe demos confiáveis na mesma página; ele não cria uma fronteira de segurança para código arbitrário.

Consulte supervisão, recuperação e replay para superviseApp, createReplaySession e os métodos scoped reportError, now e random.

destroy() revoga portas criadas pelo host, retorna apps de janelas separadas e libera recursos de drag and drop, shadow, health, replay e timeline dessa instância. Ofertas e destinos de arraste também são liberados ao revogar a lease de uma app, incluindo unmount ou quarentena.

CONSTRUA O WU CONOSCO

Encontrou um bug? Tem uma ideia?

Sua experiência melhora o WU. Conte o que falhou ou ajude a manter seu desenvolvimento.