Apps conectadas.

Estes trechos são extraídos das fontes vinculadas. Ambos os módulos registram seu lifecycle com wu.define e recebem mount(container, {wu: scoped}): scoped é a facade dessa app. COUNTER é docs.lab.counter e LAST_COMMAND, docs.lab.lastCommand.

React: gravar e refletir o valor compartilhado

+1 a partir de React executa estas linhas do handler do controle. A gravação atualiza o dado compartilhado; o evento adiciona uma entrada ao inspetor.

const next=(scoped.store.get(COUNTER)??0)+1;
scoped.store.set(COUNTER,next);
scoped.emit('docs:lab:counter',{value:next,source:'React'});

React lê uma vez com useState e conecta store.on dentro de useLayoutEffect. Cada notificação chama setCounter. Ao desmontar o root de React, a limpeza do efeito executa dispose(). alive evita atualizar mensagens de uma instância removida; diagnostics conta seus listeners.

const [counter,setCounter]=useState(()=>scoped.store.get(COUNTER)??0);

useLayoutEffect(()=>{
  alive.current=true;
  const dispose=scoped.store.on(COUNTER,value=>setCounter(value??0));
  diagnostics.listeners+=1;
  return ()=>{alive.current=false;dispose();diagnostics.listeners-=1;};
},[scoped]);

Publicar no barramento salva o comando e emite o fato. result vem de buildCommand, o gerador de texto desta app; draft contém o formulário.

scoped.store.set(LAST_COMMAND,result.command);
const accepted=scoped.emit('docs:lab:command',{command:result.command,framework:draft.framework,operation:draft.operation});
setStatus(accepted?tr("Comando publicado. Runtime Lab recibe el evento."):tr("El host no concedió permiso para publicar el evento."));

Vue: observar, pausar e ler novamente

Vue cria state com reactive. connectLeaves() registra duas inscrições no store e três no barramento; track guarda cada função de cancelamento de inscrição. Os callbacks alteram state.counter e state.lastCommand; receive converte o envelope do evento em uma linha do histórico.

const connectLeaves=()=>{
  if(disposers.length)return;
  try {
    const track=dispose=>{disposers.push(dispose);diagnostics.listeners+=1;};
    track(scoped.store.on(COUNTER,value=>{state.counter=value??0;}));
    track(scoped.store.on(LAST_COMMAND,value=>{state.lastCommand=value??'';}));
    for(const name of ['docs:lab:command','docs:lab:counter','docs:lab:lifecycle'])track(scoped.on(name,receive));
    state.counter=scoped.store.get(COUNTER)??0;state.lastCommand=scoped.store.get(LAST_COMMAND)??'';state.connected=true;sync();
  }catch(error){disconnect();throw error;}
};

store.on não entrega automaticamente o valor inicial: as leituras get ao conectar também recuperam as mudanças ocorridas durante a pausa. As notificações do store chegam por microtasks; a gravação já está visível para get.

Pausar inscrições e unmount chamam disconnect(). Essa função percorre os cancelamentos salvos; sync() copia os contadores de diagnóstico para o estado de Vue. Desmontar também remove o listener DOM e executa app.unmount().

disconnect=()=>{
  const pending=disposers;disposers=[];
  for(const dispose of pending){dispose();diagnostics.listeners-=1;diagnostics.cleanups+=1;}
  state.connected=false;sync();
};

Conectar à sua própria interface

Escolha seus caminhos e eventos, mantenha a leitura inicial e vincule cada cancelamento de inscrição ao lifecycle do consumidor. Declare as solicitações no manifesto e os grants no shell: manifesto React, manifesto Vue e como conceder permissões. Os hosts independentes de React e Vue mostram o registro, a inicialização e a montagem de uma app.

Nesta demo, React e Vue adaptam o estado à propriedade model dos controles Lit e recebem seus eventos DOM wu-command-intent e wu-runtime-intent. Você pode ler os controles do produtor, os controles do consumidor e seus estilos compartilhados, ou conectar estas mesmas operações do WU aos seus controles. As fontes mantêm os imports e a estrutura do projeto do portal.

Continue com as regras do store e seus padrões wildcard e o contrato do barramento de eventos.