Procesadores de Lenguajes

3º. 2º cuatrimestre. Itinerario de Computación. Grado en Ingeniería Informática. ULL

Organization ULL-ESIT-PL-1920   Github Classroom ULL-ESIT-PL-1920   Campus Virtual PL   Chat Chat   Profesor Casiano

Table of Contents

Clase del Miércoles 26/02/2020

Jueves 27 y Viernes 28 de Febrero 2020

En las clases del 27 y 28 aprenderemos algo mas sobre programación asíncrona en JS mediante retos y aprovecharemos para seguir con la corrección de las prácticas anteriores

Examenes Parciales

Lunes 9, Martes 10 y Miércoles 11 de Marzo





Examen Convocatoria Extraordinaria de Marzo

Callbacks Hell

The tutorial in this repo:

  1. Revisits the callback hell using a function loadScript that mimicks the <script> tag to load scripts on the browser,
  2. Introduces an improvement to the code using async-es(A pure ESM version of Async) and
  3. Introduces Webpack, a static module bundler for JavaScript applications — it takes all the code from your application and makes it usable in a web browser.

Promises

Práctica p3-t1-handling-events

Repo ULL-ESIT-GRADOII-PL/esprima-pegjs-jsconfeu-talk

En el Repo ULL-ESIT-GRADOII-PL/esprima-pegjs-jsconfeu-talk encontrará el material de varias charlas.

  1. Parsing, Compiling, and Static Metaprogramming at JSConfEU 2013 by Patrick Dubroy.
  2. Master the Art of the AST and Take Control of Your JS by Yonatan Mevorach.
  3. Talk on the same topic at Javascript Israel by Yonatan Mevorach

Esprima/Espree Example: checkstyle.js

The problem to solve: to write a program that forces camelCase instead of snake_case for identifiers in JS. See the blog Case Styles: Camel, Pascal, Snake, and Kebab Case

See the AST for the example:

var foo = bar;
var this_is_bad = 3;
function blah() {
  return function x() {
    var oops_another_one;
  }
}

Solution:

[~/javascript-learning/esprima-pegjs-jsconfeu-talk(private)]$ cat checkstyle.js 

var _ = require('underscore');
var esprima = require('espree');
var estraverse = require('estraverse');

function checkStyle(code, filename) {
    var ast = esprima.parse(code, parseOptions);
    var errors = [];
    estraverse.traverse(ast, {
        enter: function(node, parent) {
            if (node.type === 'VariableDeclaration')
                checkVariableNames(node, errors);
        }
    });
    return formatErrors(code, errors, filename);
}

function checkVariableNames(node, errors) {
    _.each(node.declarations, function(decl) {
        if (decl.id.name.indexOf('_') >= 0) {
            return errors.push({
                location: decl.loc,
                message: 'Use camelCase for variable names, not hacker_style.'
            });
        }
    });
}

// Takes a list of errors found by `checkStyle`, and returns a list of
// human-readable error messages.
function formatErrors(code, errors, filename) {
    return _.map(errors, function(e) {
        var loc = e.location.start;
        var prefix = (typeof filename === "function" ?
                filename("" + filename + ":" + loc.line + ":" + loc.column) : void 0) ? void 0 :
            "Line " + loc.line + ", column " + loc.column;
        return "" + prefix + ": " + e.message;
    });
}

var parseOptions = {
    loc: true,
    range: true
};

console.log(checkStyle(`
var foo = bar;
var this_is_bad = 3;
function blah() {
  return function x() {
    var oops_another_one;
  }
}`));

Ejecución:

[~/javascript-learning/esprima-pegjs-jsconfeu-talk(private)]$  node checkstyle.js 
[
  'Line 3, column 4: Use camelCase for variable names, not hacker_style.',
  'Line 6
]

Esprima/Espree Example: syntax-highlight.js

[~/javascript-learning/esprima-pegjs-jsconfeu-talk(private)]$ cat syntax-highlight.js

The readline module provides an interface for reading data from a Readable stream (such as process.stdin) one line at a time.

// http://esprima.readthedocs.io/en/latest/lexical-analysis.html
// Chapter 3. Lexical Analysis (Tokenization)
// Example: Syntax Highlighting
const esprima = require('espree');
const readline = require('readline');

const CYAN = '\x1b[36m';
const RESET = '\x1b[0m'
let source = '';

readline.createInterface({ input: process.stdin, terminal: false })
    .on('line', line => { source += line + '\n' })
    .on('close', () => {
        const tokens = esprima.tokenize(source, { range: true });
        const ids = tokens.filter(x => x.type === 'Identifier');
        debugger;
        const markers = ids.sort((a, b) => { return b.range[0] - a.range[0] });
        markers.forEach(t => {
            const id = CYAN + t.value + RESET;
            const start = t.range[0];
            const end = t.range[1];
            source = source.slice(0, start) + id + source.slice(end);
        });
        console.log(source);
    });

Acorn Examples

Getting the AST of a ECMA6 JSX source

~/.../learning/esprima-pegjs-jsconfeu-talk(develop)]$ node
Welcome to Node.js v12.10.0.
Type ".help" for more information.
> const {Parser} = require("acorn")
undefined
> const MyParser = Parser.extend(
...   require("acorn-jsx")())
undefined
> MyParser.parse("() => (<h1>Hello</h1>)")
Node {
  type: 'Program',
  start: 0,
  end: 22,
  body: [
    Node {
      type: 'ExpressionStatement',
      start: 0,
      end: 22,
      expression: [Node]
    }
  ],
  sourceType: 'script'
}

See astexplorer.net to see the full ESTree for () => (<h1>Hello</h1>)

acorn-walk

Let us continue with an example showing how to traverse the ESTree.

> const walk = require("acorn-walk")
undefined
> walk.simple(MyParser.parse("let x = 10"), {
...   Literal(node) {
.....     console.log(`Found a literal: ${node.value}`)
.....   }
... })
Found a literal: 10

See the ESTree for let x = 10

What is a Compiler?

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

En el Repo ULL-ESIT-GRADOII-PL/esprima-pegjs-jsconfeu-talk encontrará el material de esta charla.

ASTExplorer

ESLint Piggyback example

Babel remove “debugger” example

jscodeshift example

Repositorios interesantes de cowchimp

Your Comments

Comment with Disqus