Critical

Esta camada contém o código TypeScript que será compilado para um JavaScript inline. O objetivo deste código inline é fazer as configurações iniciais do plugin, assim que a página é carregada. Este recurso será útil para os testes A/B, setando os layouts corretos para cada versão, logo no início.

Com a mudança para setar o layout diretamente no código do backend, esta camada perdeu um pouca a sua importância, mas o custo de manter esta camada é baixo, então não há motivos para removê-la.

O código crítico tem duas divisões, o localizado em client/src/presenter/web/critical, que é o código que faz o setup inicial do plugin, e o localizado em client/src/infra/critical, que são as dependências do código crítico e portanto precisam ser compilados juntos.

TIP

Você pode ver mais detalhes sobre o processo de build na documentação do gulpfile.

Injetando o código inline

O código PHP localizado em claroluz-uploader.php, na raiz do plugin compilado, é responsável por injetar o código inline no HTML da página. O código aciona o hook wp_headopen in new window para fazer isso.

add_action('wp_head', function () {
    $criticalJs = file_get_contents(CLAROLUZ_PLUGIN_DIR . 'assets/js/critical.min.js');
    $i18n = file_get_contents(CLAROLUZ_PLUGIN_DIR . 'assets/lang/es.json');
    echo "<script>const translation = {$i18n}; {$criticalJs}</script>";
}, 20, 1);

Neste código, a variável $criticalJs recebe o conteúdo do arquivo critical.min.js, que é o código compilado. A variável $i18n recebe o conteúdo do arquivo es.json, que é o arquivo de tradução para o espanhol. O arquivo de tradução é injetado no código inline para que o código crítico possa usar as traduções.

Presenter

O código localizado em client/src/presenter/web/critical é o código que faz o setup inicial do plugin.

Endpoints

As duas variáveis que definem os endpoints são apiDataProd para a API usada em produção e apiDataDev para a API usada em desenvolvimento.

Essas variáveis precisam receber um objeto do tipo ClaroluzDatasourceEndpoints, como o exemplo abaixo:

const apiDataDev = new ClaroluzDatasourceEndpoints({
    qr: 'https://pre-claroluz-offersurl-api.azurewebsites.net/offers-by-url/1',
    file: 'https://pre-claroluz-offersfiles-api.azurewebsites.net/offers-by-files/1',
    cups: 'https://pre-claroluz-offercups-api.azurewebsites.net/offers-by-cups/1',
    contract: 'https://pre-claroluz-contract-angular.azurewebsites.net/dashboard'
});

appProperties()

A função appProperties() é responsável por definir as propriedades da aplicação. Retornando um objeto do tipo ClaroluzEventsProperties.

Esta função captura algumas variáveis passadas via URL e configura o comportamento do plugin de acordo com elas. Sendo as seguintes:

debug=on: Ativa informações do que está acontecendo com o plugin no console do navegador.
dev=on: Torna opções do ambiente de desenvolvimento ativáveis. Sozinho ele não faz nada, mas é necessário estar ativado para que se possa mudar o datasource.
gtag=on: No ambiente de desenvolvimento, eventos do gtag não são disparados por padrão, este parâmetro permite habilitar o disparo deles.
ds: Permite definir qual será a fonte de consulta do uploader. Só funciona se dev for true Este parâmetro aceita algumas opções, listadas abaixo.

valor	ação
dev	força a usar a versão de desenvolvimento da `API`
prod	força a usar a versão em produção da `API`
local	Usa um `JSON` estático que retorna sempre os mesmo resultados para que o plugin possa ser testado sem precisar acessar a `API` real
local-no-offers	Similar ao valor `local`, porém com este, será retornado um resultado sem ofertas

Em qualquer domínio que não seja o claroluz.es, o plugin irá definir por padrão os parâmetros debug e dev como true, portanto não é preciso passá-los para poder testar em domínios de testes, enquanto o datasource recebe o endereço da API de desenvolvimento por padrão.

setUploader()

A função setUploader() tem a capacidade de definir qual será o modo do uploader de acordo com o valor passado no parâmetro uploader da URL. Sendo as seguintes opções:

valor	ação
cups	força o modo `cups`
pdf	força o modo `pdf`
*	Qualquer outro valor força o modo `qr`

Infra

O código localizado em client/src/infra/critical são as dependências do código crítico e portanto precisam ser compilados juntos.

As classes que compõem o código crítico são:

# Critical

# Injetando o código inline

# Presenter

# Endpoints

# appProperties()

# setUploader()