En una aplicación Angular, quiero verificar la compatibilidad nativa del navegador del cliente con el encadenamiento opcional (es2020) para cargar una biblioteca que tenga una versión ES moderna y una heredada.
El problema es: el compilador angular (creo que en realidad es el comportamiento de tsc genera) transpila todo a la versión ES específica (es6 en mi caso), rompiendo el código que usaría para verificar el soporte de encadenamiento opcional (rompiendo en el sentido de que no lo hará trabajar para verificar el soporte de encadenamiento opcional durante el tiempo de ejecución):
export function isOpChainingSupported(): boolean { const opChainingChecker = { support: true }; try { // CODE BEFORE TRANSPILING: // return opChainingChecker?.support; // // TURNS INTO return opChainingChecker === null || opChainingChecker === void 0 ? void 0 : opChainingChecker.support; } catch { return false; } }Intenté usar mover este código a una función en un archivo JS simple, usando la configuración de TS 'allowJs' para importarlo sin errores... no vaya: tsc termina transpilándolo también.
Ahora puedo ver tres opciones que realmente no me gustan:
Lo que quería preguntar es: ¿hay algo que no estoy viendo? ¿Una solución más simple que me he perdido?
Lo siento de antemano si esta es una mala pregunta, pero siento que cuando "juguemos" demasiado con un problema, ¡siempre es mejor preguntarle a las personas con una nueva visión de la imagen!
¡Salud!
Como ya opté por una de las opciones descritas en la pregunta, pensé que sería bueno responderla.
En mi primer intento, probé la solución de "biblioteca de terceros", pero no funcionó: cuando hay un error de sintaxis (que es el caso si usamos el encadenamiento opcional en un navegador sin soporte), la excepción ocurre antes el navegador en realidad ejecuta ese código, lo que lleva a dos resultados:
Entonces, necesitaba una forma de ejecutar el "código del verificador" en un contexto separado, para evitar que mi hilo principal (y, en consecuencia, mi aplicación) muera. Además, necesitaba una forma de verificar si el código se ejecutó correctamente o no.
La solución final que encontré es una combinación entre dos de las opciones: he creado una biblioteca que carga una prueba de secuencia de comandos simple para soporte de encadenamiento opcional, devolviendo una Promesa con un valor booleano que indica el soporte del navegador.
El script se carga dinámicamente, agregando una etiqueta de script temporal (que aísla la ejecución del contexto principal, evitando que SyntaxError elimine la aplicación). Para mejorar la seguridad, he usado el atributo de integridad.
Si alguien está pasando por el mismo problema, puede usar mi solución instalando el verificador de cadena opcional de la biblioteca npm y siguiendo las instrucciones. Intenté hacerlo lo más personalizable que pude, pero si no satisface sus necesidades, ¡siéntase libre de revisar mi repositorio y adaptar el código a voluntad!