Carregamento, entradas e pré-carregamento

Da URL ao ciclo de vida

A URL registrada aponta para o diretório público de uma aplicação. O registro solicita <url>/wu.json. Durante a montagem, se ainda não existir uma definição, o WU resolve o entry, executa-o conforme o modo de sandbox e aguarda o registro com wu.define.

Publique um manifesto que nomeie o arquivo real. Um build Vite pode emitir hashes; o manifesto implantado deve ser atualizado para apontar para a entrada dessa mesma compilação. O framework não transforma TypeScript nem JSX no cliente.

{
  "name": "reports",
  "entry": "assets/reports-C4z8m.js",
  "styleMode": "own-only"
}

Resolução da entrada

resolveModulePath usa a entrada do manifesto, com fallback interno main.js se ela não existir. Isso é diferente do manifesto gerado diante de um 404, cuja entrada é index.js.

1. Se a entrada começar com src/, dist/, public/, build/, assets/, lib/ ou es/, será usada diretamente junto à base.
2. Nos outros casos, verifica-se primeiro o caminho declarado literalmente.
3. Se não existir, esses diretórios comuns são testados em paralelo, mantendo a ordem de prioridade ao escolher um resultado.
4. Se nenhum responder, o caminho declarado é retornado para que o erro mencione o arquivo configurado pelo autor.

As verificações usam HEAD e distinguem JavaScript de um fallback HTML de SPA pelo content type. Se o servidor não aceitar HEAD e responder 405, um GET com intervalo é permitido. A resolução bem-sucedida é mantida por base e entrada; não há motivo para depender das heurísticas se você pode emitir o manifesto correto.

Escolher uma estratégia

Para controlar o carregamento pelo shell, use lazy e chame mount ou prefetch quando necessário. manual aparece nos tipos do Astro, mas não é uma estratégia registrada do core; uma estratégia desconhecida usa lazy e emite um aviso.

Eager executa código, por um import direto no realm do host, antes da montagem. Não equivale a baixar bytes nem a montar com sandbox strict. Para antecipar um download, mantenha lazy e use as APIs de prefetch; verifique a política CSP e a compatibilidade do navegador do projeto.

Prefetch explícito

await wu.prefetch(['reports', 'catalog']);

const cancelHover = wu.prefetch('reports', {
  on: 'hover',
  target: '#reports-link',
});

const cancelVisible = wu.prefetch('catalog', {
  on: 'visible',
  target: '#catalog-slot',
});

// Cuando esos elementos abandonen el shell:
cancelHover();
cancelVisible();

immediate retorna uma promise. hover, visible e idle retornam uma função de cancelamento síncrona. Não converta indiscriminadamente todos esses retornos em promises se depois quiser invocá-los como limpeza. Os disparadores instalam listeners, IntersectionObserver ou callbacks ociosos, conforme o caso.

A implementação detecta Speculation Rules, modulepreload e prefetch como alternativas. É uma solicitação ao navegador, não uma garantia de execução, velocidade ou disponibilidade offline.

Componentes exportados por uma app

Além da entrada de ciclo de vida, um manifesto pode declarar módulos compartilháveis em wu.exports. Uma app consumidora declara dependências como catalog.ProductCard em wu.imports; a verificação prévia global confere esses nomes após o registro de todas as apps.

{
  "name": "catalog",
  "entry": "assets/catalog.js",
  "wu": {
    "exports": { "ProductCard": "components/product-card.js" },
    "imports": []
  }
}

const ProductCard = await wu.use('catalog.ProductCard');

use exige exatamente app.component, verifica a app e a exportação e carrega o módulo pelo loader adiado. Retorna module.default se existir ou o namespace do módulo caso contrário. O arquivo deve ser compatível com o renderizador consumidor; o WU não converte automaticamente um componente React em Vue.

O método existe no runtime, mas não está listado na declaração pública de WuCore; consulte as notas de TypeScript ao consumi-lo em código tipado.

O loader restringe o caminho à base da app, rejeita traversal e URLs absolutas de componente e usa import nativo. Essa troca de módulos é diferente do contrato provide/consume: não incorpora por si só versionamento de métodos nem o mesmo modelo de RPC com escopo.

Dependências e CORS

O navegador também precisa resolver todos os imports transitivos da entrada. Se mantiver bare imports como react ou vue em um bundle publicado, forneça um import map coerente ou empacote essas dependências. Teste também dist servido como arquivos estáticos para detectar imports ou caminhos que dependiam do servidor de desenvolvimento do Vite.

Para URLs de origens diferentes, o manifesto, a entrada, os chunks e os estilos devem estar acessíveis conforme CORS e CSP. Um HTTP 200 com HTML é um caminho errado, mesmo que a aba de rede pareça verde. Verifique conteúdo e MIME, além do status.

Referência de implementação

Resolver: src/core/wu-core.js; validação HEAD: src/core/wu-core.js; import: src/core/wu-core.js; componentes: src/core/wu-core.js e src/core/wu-loader.js; espera por define: src/core/wu-core.js; estratégias: src/core/wu-strategies.js; prefetch: src/core/wu-prefetch.js. Testes: tests/unit/entry-path-resolution.test.js, tests/unit/prefetch.test.js, tests/unit/dist-bundler-directives.test.js, tests/unit/abort-timeout.test.js.