Informe Práctica Espree Logging

En esta práctica trabajamos con un programa que hace que dentro de cada función que se ejecuta se añada una línea que imprima por consola que se está entrando a dicha función. Se nos pide añadir una modificación para que aparte de eso también imprima los parámetros con los que se llama a dicha función.

Los pasos a realizar antes de ponernos a tocar el código son:

Instalar las dependencias en el repositorio en el que trabajaremos, se hace usando el comando npm i. Estas dependencias quedan expresadas en el fichero package.json

Ahora utilizaremos node para ejecutar el programa. Si queremos hacer uso del debugger de Chrome ejecutamos node --inspect-brk fichero.js y así la terminal deja escuchando en la dirección 127.0.0.1 (la nuestra) para que Chrome se pueda conectar con un web socket al fichero que hemos pasado con ese comando de forma remota.

Una vez analizado el código utilizando los breakpoints que nos ofrece el debugger de Chrome procedemos a realizar la modificación de la práctica, la cual simplemente se hace declarando un array dentro de la función addBeforeCode en el que metemos todos los parámetros de la función que se está analizando. En concreto esta función está ya parseada a estas alturas del programa, con lo cual tenemos que inspeccionar un árbol sintáctico del que sacaremos dichos parámetros. Luego simplemente añadimos en el console.log() después del nombre de la función el nuevo array que hemos rellenado.

About

This repository contains code samples from the talks:

1. Parsing, Compiling, and Static Metaprogramming at JSConfEU 2013 by Patrick Dubroy.
   • You can find slides for the talk on Speaker Deck
2. Master the Art of the AST and Take Control of Your JS by Yonatan Mevorach.
   • Here are the slides
3. Talk on the same topic at Javascript Israel by Yonatan Mevorach

Talk Master the Art of the AST and Take Control of Your JS by Yonatan Mevorach

• See also the video Master the Art of the AST and Take Control of Your JS.
• Here is another version of the talk at Javascript Israel
• Here are the slides

ASTExplorer

• astexplorer.net demo

ESLint Piggyback example

• ESLint: Working with Plugins
• eslint-plugin-piggyback

Babel remove "debugger" example

• Babel plugin Remove debugger transform. This plugin removes all debugger; statements
• babel-plugin-transform-remove-debugger at GitHub

jscodeshift example

• codeshift at GitHub
• Write Code to Rewrite Your Code: jscodeshift
• jscodeshift example
• jscodeshift cpojer/js-codemod no-vars.js

Repositorios interesantes de cowchimp

• AST Scout is a tool for analyzing and visualizing the relationship between the public API of a Class\Module and its implementations details (e.g. private methods, dependencies used).
• A web tool to explore the ASTs generated by various parsers. https://astexplorer.net/
• A curated list of awesome AST resources

Talk Babel plugins: Writing code that writes code - SingaporeJS

• Babel plugins: Writing code that writes code - SingaporeJS
• Babel Handbook

Talk Parsing, Compiling, and Static Metaprogramming at JSConfEU 2013 by Patrick Dubroy.

Esprima Examples

• checkstyle.coffee and logging.coffee contain the original source code for the style checker and logging examples presented in the talk.
• checkstyle.js and logging.js are the slightly simplified JS versions that were shown in the talk.
• syntax-highlight.js is taken from the Esprima tutorial Chapter 3. Lexical Analysis (Tokenization)¶

PEG.js Example

altjs.coffee is the code for the "AltJS language in 5 minutes" section presented in the second half of the talk.

Extra Special Bonus!

idgrep.coffee (and idgrep.js) is another example of using Esprima to do static analysis on JavaScript code.

REPL example

> esprima = require('esprima')
{ parse: [Function: parse],
  parseModule: [Function: parseModule],
  parseScript: [Function: parseScript],
  tokenize: [Function: tokenize],
  Syntax: 
   { ... },
  version: '4.0.1' }

> esprima.tokenize('answer = 42', { range: true })
[ { type: 'Identifier', value: 'answer', range: [ 0, 6 ] },
  { type: 'Punctuator', value: '=', range: [ 7, 8 ] },
  { type: 'Numeric', value: '42', range: [ 9, 11 ] } ]

> esprima.parseScript('const answer = 42', { tokens: true })
Script {
  type: 'Program',
  body: 
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'const' } ],
  sourceType: 'script',
  tokens: 
   [ { type: 'Keyword', value: 'const' },
     { type: 'Identifier', value: 'answer' },
     { type: 'Punctuator', value: '=' },
     { type: 'Numeric', value: '42' } ] }

> inspect = require('util')
{ ... }

> console.log(util.inspect(esprima.parseScript('answer = 42'), {depth: null}))
Script {
  type: 'Program',
  body: 
   [ ExpressionStatement {
       type: 'ExpressionStatement',
       expression: 
        AssignmentExpression {
          type: 'AssignmentExpression',
          operator: '=',
          left: Identifier { type: 'Identifier', name: 'answer' },
          right: Literal { type: 'Literal', value: 42, raw: '42' } } } ],
  sourceType: 'script' }
undefined
>