Estoy tratando de construir un preprocesador HTML que me ayude con mi proyecto electrónico. He mirado otros preprocesadores y ninguno cumple con mis expectativas, así que decidí crear el mío. Este es un ejemplo del formato o sintaxis del código.
{{@import Button from './components/Out'}} {{@Component { name: 'Button', useStrict: true, props: { name: '', className: '', values: '' } }}} {{@include './index', { name: props.name }}} <button class={{props.className}}>{{{name}}}</button> {{@if (avatar !== null || avatar !== undefined) }} <li class={{`${props.name}`}}> this is a test {{avatar}} </li> {{@each field in values}} <span class="d-flex"> {{field.name}} <small> power level: <b>{{field.power}}</b> </small> </span> {{/each}} {{/if}} <Button name="" text="" value="" href=""/> {{/Component}} //---- the problem is below; compiling the code and storing the values of each global variable <@ let avatar = 'My avatar is on the run'; const values = [{name: 'Batman', power: '200kilowatts'}, {name: 'Spiderman', power: '60watts'}]; const func = () => { let name = 'David'; script = name; } @>He analizado todo el archivo o código, y todo funciona bien, excepto compilar ese script.
NB:
Esprimapara extraer las variables globales del script .
Primero, pensé en usar el objeto ventana para compilar el script, de esa manera, puedo obtener el valor de cada variable llamando a window[variableName] Estoy usando el nodo js, así que Jsdom pero desafortunadamente no funcionó, window[variableName] siguió regresando undefined .
Luego pensé en eval , pero eso también planteó problemas porque no puedo hacer uso de las variables en eval , así que pensé en crear dinámicamente esas variables primero o guardarlas en el objeto global , pero ciertamente no funcionará, al menos que yo sepa.
Perdón por la descripción larga... el resumen es que necesito poder obtener el valor de cada variable después de compilar la cadena. He intentado encontrar js-engines or js-compilers que se puedan instalar con npm pero no tuve mucha suerte con eso. También por si acaso, alguien dice que encontró un preprocesador similar, por favor, he investigado y no hay ninguno similar. Le puse mucha funcionalidad a este preprocesador y es un componente importante para mi proyecto electrónico... Así que cualquier ayuda es perfecta... gracias por su tiempo.
Aquí hay una solución que se me ocurrió:
<script> let jsCode = ` var test1 = 'var'; const test2 = 'const'; let test3 = 'let'; console.log(this.globalCtxVar); return { test1, test2, test3 } `; let ctx = { globalCtxVar: 'testVar' }; let fn = Function(jsCode); ctx = Object.assign(ctx, fn.call(ctx)); console.log(ctx) </script>permite ejecutar código js usando Función y exportar variables usando retorno, también se puede acceder a ctx dentro del código con esto
al final de la ejecución, ctx se ve así:
{ "globalCtxVar": "testVar", "test1": "var", "test2": "const", "test3": "let" }Entonces al final es lo mismo que eval pero con mayor control de entradas/salidas ya que es una función