Transições, foco e janelas

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.

Experimente também Apps em movimento: editor React, caixa de entrada Vue, janelas e PiP, entrega tipada, transições e keep-alive. O guia do cenário explica como aplicá-lo à sua aplicação.

Animar uma atualização

wu.transition(mutate, options) mede elementos com data-wu-vt antes e depois da mudança. Retorna ready, updateCallbackDone, finished, skipTransition() e mode. Aguarde updateCallbackDone para capturar erros da mutação: ready e finished sempre resolvem. O modo padrão usa FLIP e Web Animations no Shadow DOM e respeita movimento reduzido.

import { wu } from 'wu-framework';

const root = document.querySelector('#panel');
const item = document.createElement('div');
item.dataset.wuVt = 'product-42';
item.textContent = 'Product 42';
root.append(item);
const transition = wu.transition(() => {
  item.style.transform = 'translateX(80px)';
}, { root, duration: 250 });
await transition.updateCallbackDone;
await transition.finished;

Crie #panel antes do código. No Vue, aguarde nextTick() dentro da mutação; no Svelte, aguarde tick(). No React, wuReact.createWuViewTransition(React) e wuReact.createUseWuTransition(React) coordenam o commit do renderer. mode: "native-document" exige adesão explícita; não promete capturar o interior de todos os shadow roots.

wu.transition.between(fromApp, toApp, key, mutate?, options?) anima um elemento entre apps com a mesma chave data-wu-vt. Aceita null para o shell, fromRoot/toRoot, duration, timeout, easing, fade e ghost. Retorna o mesmo contrato de promessas; uma animação visual não transfere estado de negócio.

Foco acessível e keep-alive

wu.focus.remember(name, root) registra o foco profundo e restore(name) o restaura; ambos retornam booleano. forget(name) libera o registro. trap(root, { initial, restore }) retorna uma função de limpeza para um diálogo. describe(element, { labelledBy, describedBy }) conecta rótulos entre raízes e retorna o modo aplicado: referências a elementos, IDs ou texto; o último é uma cópia que deve ser atualizada quando o rótulo mudar.

Ocultar uma app com keepAlive preserva sua instância. Os adapters detectam React Activity, pausa de scope do Vue e detach/attach de views Angular quando essas APIs existem. Isso não interrompe automaticamente intervalos, sockets ou requisições: use wu:app:deactivated e wu:app:activated para pausá-los e retomá-los e remova listeners ao desmontar.

Mover uma app ativa para outra janela

import { wu } from 'wu-framework/core';
import 'wu-framework/windows';

// Run after the host has mounted the editor app.
document.querySelector('#detach-editor').addEventListener('click', async () => {
  try {
    const mode = 'documentPictureInPicture' in window ? 'pip' : 'popup';
    await wu.detach('editor', { window: mode, width: 900, height: 700 });
  } catch (error) {
    document.querySelector('#window-status').textContent = error.message;
  }
});
document.querySelector('#attach-editor').addEventListener('click', () => {
  wu.attach('editor');
});

Crie os botões e #window-status no shell. detach() exige uma app montada e visível e um gesto do usuário para abrir a janela. Adota os mesmos nós DOM; o código continua executando na janela original. Use ownerDocument.defaultView para consultar a janela visual. Aceita popup, Picture-in-Picture quando disponível ou um Window da mesma origem.

isDetached(name) consulta o estado; windowOf(name) retorna Window | null; windowsReady() carrega o subsistema. Fechar a janela, ocultar ou desmontar a app a devolve ao host. Trate WU_APP_NOT_MOUNTED, WU_APP_HIDDEN, WU_WINDOW_UNAVAILABLE, WU_WINDOW_DENIED e WU_DETACH_ABORTED. Escute wu:app:detached e wu:app:attached no contêiner quando o renderer precisar reagir.