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 é oremote.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 classePlaygroundClient
.
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.