1+ <!DOCTYPE HTML>
2+ < html lang ="en ">
3+ 4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < title > JS code generator demo: JS → AST → JS</ title >
7+ < link rel ="stylesheet " href ="./style.css " type ="text/css " />
8+ < script src ="./lib/esprima.js "> </ script >
9+ < script src ="./lib/escodegen.browser.js "> </ script >
10+ < script type ="text/javascript ">
11+ function $D ( elm ) {
12+ var range = document . createRange ( ) ;
13+ range . selectNodeContents ( elm ) ;
14+ range . deleteContents ( ) ;
15+ range . detach ( ) ;
16+ }
17+ function $T ( mes ) {
18+ return document . createTextNode ( mes ) ;
19+ }
20+ function hasClass ( e , name ) {
21+ name = name . toLowerCase ( ) ;
22+ var cn = e . className ;
23+ if ( ! cn ) return false ;
24+ var cnlist = cn . toLowerCase ( ) . split ( / \s + / ) ;
25+ for ( var i = 0 , l = cnlist . length ; i < l ; i ++ )
26+ if ( cnlist [ i ] == name ) return true ;
27+ return false ;
28+ }
29+ function addClass ( e , name ) {
30+ var cn = e . className || '' ;
31+ if ( hasClass ( e , name ) ) return ;
32+ e . className = cn + ' ' + name ;
33+ }
34+ function removeClass ( e , name ) {
35+ if ( ! hasClass ( e , name ) ) return ;
36+ var cn = e . className || '' ;
37+ name = name . toLowerCase ( ) ;
38+ var cnlist = cn . toLowerCase ( ) . split ( / \s + / ) ;
39+ cnlist . splice ( cnlist . indexOf ( name ) , 1 ) ;
40+ e . className = cnlist . join ( ' ' ) ;
41+ }
42+ function toggleClass ( e , name ) {
43+ ( hasClass ( e , name ) ) ? removeClass ( e , name ) : addClass ( e , name ) ;
44+ }
45+ document . addEventListener ( 'DOMContentLoaded' , function ( ev ) {
46+ var textarea = document . getElementById ( "console" ) ;
47+ var pre = document . getElementById ( "output" ) ;
48+ textarea . value = "for(var i=1;i<=100;++i){if(i%15===0){console.log('FizzBuzz')}else if(i%3===0){console.log('Fizz')}else if(i%5===0){console.log('Buzz')}else{console.log(i)}}" ;
49+ function show ( ) {
50+ $D ( pre ) ;
51+ try {
52+ removeClass ( textarea , "invalid" ) ;
53+ var AST = esprima . parse ( textarea . value ) ;
54+ pre . appendChild ( $T ( escodegen . generate ( AST ) ) ) ;
55+ } catch ( e ) {
56+ addClass ( textarea , "invalid" )
57+ pre . appendChild ( $T ( "Invalid" ) ) ;
58+ }
59+ }
60+ show ( ) ;
61+ textarea . addEventListener ( "input" , show , false ) ;
62+ } , false ) ;
63+ </ script >
64+ </ head >
65+ 66+ < body >
67+ < h1 > JS code generator demo: JS → AST → JS</ h1 >
68+ < p > using < a href ="http://esprima.org/ "> esprima</ a > as parser</ p >
69+ < p > and using < a href ="https://github.com/Constellation/escodegen "> escodegen</ a > as code generator</ p >
70+ < textarea id ="console " rows ="10 " cols ="30 " placeholder ="write your code "> </ textarea >
71+ < pre id ="output "> </ pre >
72+ </ body >
73+ 74+ </ html >
0 commit comments