Práctica Espree logging

Resumen de lo aprendido

En esta práctica se va a relizar una transformación árbol, insertando console log a las entradas de las funciones que se analizan. Además de aprender a como extraer información del árbol generado.

Indicar los valores de los argumentos

Se ha modificado el código de logging-espree.js para que el log también indique los valores de los argumentos que se pasaron a la función. Ejemplo:

function foo(a, b) {
  var x = 'blah';
  var y = (function (z) {
    return z+3;
  })(2);
}
foo(1, 'wut', 3);

function foo(a, b) {
    console.log(`Entering foo(${ a }, ${ b })`);
    var x = 'blah';
    var y = function (z) {
        console.log(`Entering <anonymous function>(${ z })`);
        return z + 3;
    }(2);
}
foo(1, 'wut', 3);

CLI con Commander.js

Commander es una herramienta que se ocupa de analizar los argumentos de opciones y argumentos de comando, muestra errores de uso e implementa un sistema de ayuda. Está implementada en el ejecutable anterior, donde se define la interfaz a mostar, con la descripción deseada.

• Se ha añadido la opción -o, --output para indicar el nombre del fichero de salida.
• Se ha añadido la opción -h, --help para mostrar la ayuda.
• Con la opción -v, --version se muestra la versión del programa.

#!/usr/bin/env node

import { program } from "commander";
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const { version } = require("../package.json");
import { transpile } from "../src/logging-espree.js";

program
  .version(version)
  .argument("<filename>", 'file with the original code')
  .option("-o, --output <filename>", "file in which to write the output")
  .helpOption("-h, --help", "display this help message")
  .action((filename, options) => {
    transpile(filename, options.output);
  });
 
program.parse(process.argv);

Reto 1: Soportar funciones flecha

Para soportar las funciones flecha es necesario que la función sea capaz de reconcer ese tipo de nodos, para ello además se añade la opción ecmaVersion:6 en el espree.parse() para que el árbol generado sea compatible con las funciones flecha. Además se añade el tipo de nodo ArrowFunctionExpression en el if de la función addLogging().

function addLogging(code) {
  const ast = espree.parse(code);
  estraverse.traverse(ast, {
    enter: function (node, parent) {
      if (node.type === 'FunctionDeclaration' ||
          node.type === 'FunctionExpression' ||
          node.type === 'ArrowFunctionExpression') {
        addBeforeCode(node);
      }
    }
  });
  return escodegen.generate(ast);
}

Reto 2: Añadir el número de línea

Para añadir el número de línea en la que aparece la función, primeramente es necesario modificar la función addLogging y añadir como parámetro en el espree.parse "loc:true" que son las siglas de Line Of Code, pues ahora se puede utilizar el método node.loc.start.line y por tanto se añade al console.log() de beforeCode de la función addBeforeCode.

function addLogging(code) {
  const ast = espree.parse(code, {ecmaVersion:6, loc:true});
  estraverse.traverse(ast, {
    enter: function (node, parent) {  // estraverse siempre pasa el nodo y el padre del nodo por si es necesario, aunque puede ser null. En este caso no se usa.
      if (node.type === 'FunctionDeclaration' ||
          node.type === 'FunctionExpression') {  // FunctionDeclaration son las funciones ordinarias, FunctionExpression son las funciones que se declaran en una expresion 
        addBeforeCode(node);
      }
    }
  });
  return escodegen.generate(ast);
}

 function addBeforeCode(node) {
  const name = node.id ? node.id.name : '<anonymous function>';
  const parameters = node.params.map(param => `\$\{${param.name}\}`);  // Obtiene los parametros de la funcion.
  const beforeCode = `console.log(\`Entering ${name}(${parameters}) at line ${node.loc.start.line}\`);`;
  const beforeNodes = espree.parse(beforeCode, {ecmaVersion: 6}).body;  // Es una array de ATSs.
  node.body.body = beforeNodes.concat(node.body.body);
}

Tests and Covering

Para la ejecución de los test creamos un atajo en el package.json para poder ejecutarlos con el comando npm test. Dicho utiliza el módulo mocha para ejecutar los test y el módulo c8 para la cobertura.

  ...
  "scripts": {
    "fill": "your scripts here",
    "test": "mocha test/test.mjs",
    "cov": "c8 npm run test",
    "doc": "c8 --reporter=html --reporter=text --report-dir=docs mocha"
  },
  ...