Escodegen  and  Esmangle:   Using  Mozilla  JavaScript  AST  as  an  IR Yusuke  Suzuki   Keio  University     At  AOSD’13  Industry  Track

ContribuHon •  Propose  using  Mozilla  JS  AST  as  an  IR   •  To  show  this  benefit   –  Contributed  to  Esprima  parser   –  Created  Escodegen  unparser   –  Created  Esmangle  minifier   –  Created  Ibrik  code  coverage  tools

ECMAScript  everywhere •  ECMAScript  (a.k.a  JavaScript)  is  now  widely  used   –  Client  side   –  Server  side   –  In  databases   •  ECMAScript  tools  have  been  developed   –  Transpiler   •  Languages  compiled  into  JavaScript   –  Analyzer   –  Minifier  /  OpHmizier  

Outline 1.  IntroducHon   2.  What’s  Problem   3.  Our  SoluHon:  Using  Mozilla  JS  AST  as  an  IR   4.  Example  modules   5.  Example  tools   6.  Summary

Transpiled  debugging  is  hard •  Transpiled  debugging  is  difficult   –  line  and  column  numbers  don’t  correspond  to  the  original   •  SourceMap   –  holding  locaHon  mapping  informaHon   •  But  because  current  JS  tools  take  source  code  as  IO   such  informaHon  is  discarded  in  tools  pipeline   –  ALL  tools  need  to  handle  SourceMap  &  source  code  at  the  same  Hme   –  OR  construct  all-­‐in-­‐one  tools  

Problems  with  all-­‐in-­‐one  tools •  current  JS  tools  tend  to  become  all-­‐in-­‐one   •  Transpilers  do   –  Scanning   –  Parsing   –  OpHmizing   –  Minifying   –  GeneraHng  code   •  Necessary  to  implement  all  above  funcHonaliHes   •  The  problem:  an  IR  of  current  JS  tools  is  source  code  

Outline 1.  IntroducHon   2.  What’s  Problem   3.  Our  Solu:on:  Using  Mozilla  JS  AST  as  an  IR   4.  Example  modules   5.  Example  tools   6.  Summary

Mozilla  JS  AST •  We  propose  using  Mozilla  JS  AST  as  an  IR   •  This  is  an  AST  represented  as  a  JavaScript  object   •  Interfaces  are  corresponding  to  an  internal  AST  of  the  real   JavaScript  engine,  SpiderMonkey   –  At  least,  AST  contains  informaHon  enough  to  execute  JavaScript  code   •  AST  interfaces  are  well-­‐documented  and  standardized   –  haps://developer.mozilla.org/en-­‐US/docs/SpiderMonkey/Parser_API  

Mozilla  JS  AST  example •  “var  a  =  42”  is  represented  as  follows,   {          "type":  "Program",          "body":  [{                  "type":  "VariableDeclaraHon",                  "declaraHons":  [{                          "type":  "VariableDeclarator",                          "id":  {                                  "type":  "IdenHfier",                                  "name":  "a"  },                          "init":  {                                  "type":  "Literal",                                  "value":  42,                                  "raw":  "42”  }  }],                  "kind":  "var”  }]  }  

Mozilla  JS  AST  as  an  IR •  Module  developers  only  consider  about  JS  AST  object   –  Not  necessary  to  implement  ECMAScript  parser  and  unparser   –  Develop  each  modules  independently   –  Make  composable  modules   •  Passing  more  informaHon  than  source  code   –  LocaHon  informaHon  to  original  code   –  Generated  flags  (node  inserted  by  tools)   •  AST  is  close  to  JavaScript  code   –  GeneraHng  efficient  JavaScript  from  a  SSA  form  is  a  hard  job   •  arbitrary  jumps   –  Keeping  tracking  of  the  JS  code’s  structure  with  SSA  form  is  too  heavy   responsibility  for  JavaScript  module  developers  

Outline 1.  IntroducHon   2.  What’s  Problem   3.  Our  SoluHon:  Using  Mozilla  JS  AST  as  an  IR   4.  Example  modules   5.  Example  tools   6.  Summary

Esprima  -­‐  parser •  ECMAScript  parser  wriaen  in  ECMAScript   •  Extremely  precise  to  ECMA262  5th  ediHon   –  haps://bugs.ecmascript.org/show_bug.cgi?id=387   •  AccepHng  ECMAScript  code  and  generaHng  JS  AST   Esprima JS AST JS code

Escodegen  –  unparser •  ECMAScript  unparser  wriaein  in  ECMAScript   •  AccepHng  JS  AST  and  generaHng  JS  code   –  And  SourceMap   •  Escodegen  is  responsible  to  generate  valid  JavaScript  code   from  AST   –  It  guarantees   “parse(generate(parse(code)))”  structurally  equals  to  “parse(code)”   Escodegen JavaScript code OR SourceMap JS AST

Esmangle  –  minifier  /  opHmizer •  ECMAScript  minifier  /  opHmizer  wriaen  in  ECMAScript   •  AccepHng  JS  AST  and  generaHng  opHmized  JS  AST   •  It  executes  small  pass  funcHons  using  fixed-­‐point  iteraHon   over  the  AST   •  Because  it  preserves  locaHon  informaHon  aaached  to  AST   nodes,  later,  Escodegen  can  generate  a  SourceMap  to  original   code   Esmangle Optimized JS AST JS AST

Outline 1.  IntroducHon   2.  What’s  Problem   3.  Our  SoluHon:  Using  Mozilla  JS  AST  as  an  IR   4.  Example  modules   5.  Example  tools   6.  Summary

Esmangle  -­‐  minifier •  haps://github.com/ConstellaHon/esmangle   •  AOT  compiler  (minifier  &  opHmizer)   •  Parser,  opHmizer  and  unparser  are  independent  and   connected  with  an  IR   Escodegen Optimized JS code Esprima Optimized JS AST JS AST JS code Esmangle SourceMap

CoffeeScriptRedux  –  transpiler •  haps://github.com/michaelficarra/CoffeeScriptRedux   •  Rewrite  of  the  CoffeeScript  compiler   –  To  provide  modules  for  CoffeeScript  compiler  itself   •  Parsing  CoffeeScript,  generaHng  CS  AST,  transforming  it  into   JS  AST  and  emit  JS  code  by  Escodegen   •  Esmangle  is  now  combined  into  this  pipeline   Preprocessor Parser Optimizer Compiler Escodegen JavaScript code OR SourceMap CoffeeScript code Context Free CS CS AST Optimized CS AST JS AST Esmangle Optimized JS AST JS AST

Google  Caja  -­‐  sandbox •  haps://developers.google.com/caja/   •  Analyzing  &  Transforming  JS  code  and  creaHng  sandbox  to   make  third  party  JS  /  HTML  /  CSS  safe  to  embed   •  Acorn  (ECMAScript  parser)  and  Escodegen  is  used  for  code   transformaHon   •  Acorn  is  not  Esprima,  but  Because  it  also  generates  JS  AST,   there  is  no  problem  for  Escodegen   Escodegen JS code JS AST JS code Some pass of Caja Acorn (Parser) Rewriter Rewrited JS AST

Istanbul  –  code  coverage  tool •  haps://github.com/yahoo/istanbul   •  Code  coverage  tool  for  JavaScript   •  Parsing  JS  code,  instrumenHng  it  to  trace  execuHon  and   generaHng  traceable  code   Instrumenter Escodegen Traceable JS code Esprima Modified JS AST JS AST JS code

Ibrik  -­‐  code  coverage  tool  for   CoffeeScript •  haps://github.com/ConstellaHon/ibrik   •  Code  coverage  tool  for  CoffeeScript   •  Parsing  CoffeeScript  code,  instrumenHng  it  to  trace  execuHon   and  generaHng  traceable  code   –  CoffeeScriptRedux  compiler  generates  JS  AST   Istanbul Instrumenter Escodegen Traceable JS code Modified JS AST JS AST CoffeeScript code CoffeeScriptRedux compiler

Shumway  –  Flash  VM •  haps://github.com/mozilla/shumway   •  Flash  VM  and  runHme  wriaen  in  JS   •  Parsing  bytecode,  construcHng  CFG,  transforming  JS  AST,   emiung  JS  code  and  execuHng  it   •  GeneraHng  JS  on-­‐the-­‐fly  gains  faster  performance  than  a   tradiHonal  switch-­‐based  VM   Bytecode Parser Normalize Bytecode CFG Restructuring Interpreter (switch based) Verifier Compiler Escodegen JavaScript code

The  others •  LLJS  (Low  level  JS)   –  hap://mbebenita.github.com/LLJS/   •  Require-­‐hm   –  haps://github.com/jrburke/require-­‐hm   •  Harmonizr   –  haps://github.com/jdiamond/harmonizr   •  Complexity  report   –  haps://github.com/philbooth/complexityReport.js  

Outline 1.  IntroducHon   2.  What’s  Problem   3.  Our  SoluHon:  Using  Mozilla  JS  AST  as  an  IR   4.  Example  modules   5.  Example  tools   6.  Summary

Conclusion •  We  propose  using  Mozilla  JS  AST  as  an  IR   •  We  contributed  &  created  modules   –  Esprima   –  Escodegen   –  Esmangle   •  We  present  tools  consist  of  modules  using  JS  AST   •  We  present  the  example  applying  modules  to  transpiled   languages  

Thank  you  for  your  aaenHon Any  quesHons?