Pular para o conteúdo principal

remote.html vs index.html

playground.wordpress.net expõe duas APIs distintas por meio de dois arquivos HTML separados: remote.html e index.html. Veja um resumo de suas funções e diferenças:

  • index.html usa o cliente da API do WordPress Playground para controlar o "endpoint" que é o remote.html.
  • A Query API é fornecida exclusivamente por index.html, independente da API JavaScript do WordPress Playground.
  • A API JavaScript é fornecida exclusivamente por remote.html. Apenas esse arquivo pode ser usado como "endpoint" para a classe PlaygroundClient.

Veja mais detalhes sobre cada um desses arquivos:

Remote.html​

O remote.html executa e renderiza o WordPress e também expõe uma API para que desenvolvedores possam controlá-lo. Importante: o remote.html não exibe elementos de interface, como UI de navegador ou seletores de versão. É apenas o WordPress. As funções principais do remote.html são:

  • Carregar a versão adequada do php.wasm, a build WebAssembly do PHP.
  • Carregar a versão correta do WordPress para interação do usuário.
  • Iniciar o PHP em um WebWorker e registrar um ServiceWorker para requisições HTTP.
  • Ouvir o evento message da janela pai e executar o comando de código apropriado.

Essa última parte é como a API pública funciona. A janela pai (index.html) envia uma mensagem para o iframe (remote.html) com um comando e argumentos, e o iframe executa esse comando e retorna o resultado com outra mensagem.

Enviar mensagens diretamente é trabalhoso, por isso a classe PlaygroundClient fornece uma API orientada a objetos que gerencia as mensagens internamente.

Para testes e depuração rápidos, o remote.html também expõe o cliente da API JavaScript como window.playground. Você pode usá-lo no console de desenvolvedor assim:

> await playground.listFiles("/")
(6) ['tmp', 'home', 'dev', 'proc', 'internal', 'wordpress']

Neste contexto, playground é uma instância de classe e você se beneficiará do autocompletar do navegador.

Index.html​

O index.html é um aplicativo independente construído em torno do remote.html usando o cliente da API do WordPress Playground.

Ele exibe a interface do navegador, seletores de versão e renderiza o WordPress incorporando o remote.html via um iframe. Funcionalidades de UI como barra de endereços ou seletor de versão são implementadas comunicando-se com o remote.html usando o PlaygroundClient.

O index.html monitora os parâmetros de consulta que recebe e aciona os métodos apropriados do PlaygroundClient. Por exemplo, ?plugin=coblocks aciona installPluginsFromDirectory( client, ['coblocks'] ). Esse mecanismo é a base da Query API.

Para testes e depuração rápidos, o index.html também expõe o cliente da API JavaScript como window.playground. Você pode usá-lo no console de desenvolvedor assim:

> await playground.listFiles("/")
(6) ['tmp', 'home', 'dev', 'proc', 'internal', 'wordpress']

Note que playground é um objeto Proxy nesse contexto e você não terá autocompletar do navegador.