Critical

Esta capa contiene el código TypeScript que se compilará en un JavaScript en línea. El propósito de este código en línea es realizar la configuración inicial del plugin, tan pronto como se carga la página. Esta función será útil para las "pruebas A/B", ya que establece los diseños correctos para cada versión desde el principio.

Con el paso a configurar el diseño directamente en el código de back-end, esta capa ha perdido parte de su importancia, pero el costo de mantener esta capa es bajo, por lo que no hay razón para eliminarla.

El código crítico tiene dos divisiones, la ubicada en client/src/presenter/web/critical, que es el código que realiza la configuración inicial del plugin, y la ubicada en client/src/infra/critical , que son las dependencias críticas del código y, por lo tanto, deben compilarse juntas.

TIP

Puede ver más detalles sobre el proceso de compilación en la documentación de gulpfile.

Inyectando el código en línea

El código PHP ubicado en claroluz-uploader.php, en la raíz del plugin compilado, es responsable de inyectar el código en línea en el HTML de la página. El código activa el enlace wp_head wp_headopen in new window para hacer esto.

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);

En este código, la variable $criticalJs recibe el contenido del archivo critical.min.js, que es el código compilado. La variable $i18n toma el contenido del archivo es.json, que es el archivo de traducción al español. El archivo de traducción se inyecta en el código en línea para que el código crítico pueda usar las traducciones.

Presenter

El código ubicado en client/src/presenter/web/critical es el código que realiza la configuración inicial del plugin.

Endpoints

Las dos variables que definen los puntos finales son apiDataProd para la API utilizada en producción y apiDataDev para la API utilizada en desarrollo.

Las variables necesitan recibir un objeto de tipo Claroluz Datasource Endpoints, como el siguiente ejemplo:

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()

La función appProperties() es responsable de definir las propiedades de la aplicación. Devolviendo un objeto de tipo ClaroluzEventsProperties.

Esta función captura algunas variables pasadas a través de URL y configura el comportamiento del plugin en consecuencia. Siendo lo siguiente:

debug=on: Activa información sobre lo que está pasando con el plugin en la consola del navegador.
dev=on: Tiene las opciones de ntorno de desarrollo ativas. No hace nada por sí mismo, pero necesita ser activado para cambiar la 'fuente de datos'.
gtag=on: En el ambiente de desarrollo, los eventos gtag no se disparan por defecto, este parámetro permite habilitar su disparo.
ds: Permite definir cuál será la fuente de consulta del uploader. Solo funciona si dev es true. Este parámetro acepta algunas opciones, que se enumeran a continuación.

valor	acción
dev	forzar el uso de la versión de desarrollo de la `API`
prod	forzar el uso de la versión de producción de la `API`
local	Utiliza un 'JSON' estático que siempre devuelve los mismos resultados para que el complemento pueda probarse sin tener que acceder a la 'API' real.
local-no-offers	Similar al valor `local`, pero con este se devolverá un resultado sin ofertas

En cualquier dominio que no sea claroluz.es, el plugin definirá por defecto los parámetros debug y dev como true, por lo que no es necesario pasarlos para poder probar en dominios de prueba, mientras que el datasource obtiene la dirección de la API de desarrollo de forma predeterminada.

setUploader()

La función setUploader() tiene la capacidad de definir cuál será el modo uploader según el valor pasado en el parámetro uploader de la URL. Siendo las siguientes opciones:

valor	acción
cups	forzar el modo `cups`
pdf	forzar el modo `pdf`
*	Cualquier otro valor fuerza el modo `qr`

Infra

El código ubicado en client/src/infra/critical son las dependencias del código crítico y, por lo tanto, deben compilarse juntos.

Las clases que componen el código crítico son:

# Critical

# Inyectando el código en línea

# Presenter

# Endpoints

# appProperties()

# setUploader()