@@ -16,7 +16,15 @@ puts greet.call(hello: 'martian')
1616
1717const DEFAULT_PREVIEW = `# Here you will see the transpiled source code.` ;
1818
19- const CONFIG = `# Here you can define custom source rewriters.` ;
19+ const CONFIG = `# Here you can define custom source rewriters.
20+ # For example, you can add ":=" operator (if you miss C) as follows:
21+ #
22+ # RubyNext.define_text_rewriter "operator_assign" do
23+ # def safe_rewrite(source)
24+ # source.gsub(":=", "=")
25+ # end
26+ # end
27+ ` ;
2028
2129const OUTPUT = "// Here will be the output of your program" ;
2230
@@ -32,6 +40,7 @@ export default class App {
3240 this . monaco = monaco ;
3341
3442 this . onSelectEditor = this . onSelectEditor . bind ( this ) ;
43+ this . invalidatePreview = this . invalidatePreview . bind ( this ) ;
3544 }
3645
3746 bootstrap ( ) {
@@ -71,12 +80,7 @@ export default class App {
7180
7281 this . el
7382 . querySelector ( '[target="transpile-btn"]' )
74- . addEventListener ( "click" , ( ) => {
75- const result = this . transpile ( this . codeEditor . getValue ( ) ) ;
76-
77- this . previewEditor . setValue ( result ) ;
78- this . showEditor ( "previewEditor" ) ;
79- } ) ;
83+ . addEventListener ( "click" , this . invalidatePreview ) ;
8084
8185 this . el
8286 . querySelector ( '[target="run-btn"]' )
@@ -96,15 +100,39 @@ export default class App {
96100
97101 this . el . addEventListener ( "change" , this . onSelectEditor ) ;
98102
99- this . setCurrentVersion ( ) ;
103+ this . versionSelect = document . getElementById ( "versionSelect" ) ;
104+
105+ if ( theme === "dark" ) this . versionSelect . classList . add ( "sl-theme-dark" ) ;
106+
107+ this . versionSelect . addEventListener ( "sl-change" , this . invalidatePreview ) ;
108+
109+ this . setCurrentVMVersion ( ) ;
100110 }
101111
102- transpile ( code ) {
103- const result = this . vm
104- . eval ( "RubyNext.transform(%q(" + code + "))" )
105- . toString ( ) ;
112+ transpile ( code , opts = { } ) {
113+ let rubyOptions = "{" ;
114+
115+ if ( opts . version ) {
116+ rubyOptions += `version: "${ opts . version } ;
117+ }
118+
119+ rubyOptions += "}" ;
106120
107- return result ;
121+ try {
122+ // eval configuration
123+ // first, reset custom rewriters
124+ this . vm . eval ( "RubyNext.custom_rewriters.clear" ) ;
125+ this . vm . eval ( this . configEditor . getValue ( ) ) ;
126+
127+ const result = this . vm
128+ . eval ( "RubyNext.transform(%q(" + code + "), **" + rubyOptions + ")" )
129+ . toString ( ) ;
130+
131+ return result ;
132+ } catch ( e ) {
133+ console . error ( e ) ;
134+ return e . message ;
135+ }
108136 }
109137
110138 execute ( source ) {
@@ -116,7 +144,7 @@ export default class App {
116144 }
117145 }
118146
119- async setCurrentVersion ( ) {
147+ async setCurrentVMVersion ( ) {
120148 const versionContainer = document . getElementById ( "currentVersion" ) ;
121149 if ( ! versionContainer ) return ;
122150
@@ -137,6 +165,14 @@ export default class App {
137165 } ) ;
138166 }
139167
168+ invalidatePreview ( ) {
169+ const version = this . versionSelect . value ;
170+ const newSource = this . transpile ( this . codeEditor . getValue ( ) , { version } ) ;
171+ this . previewEditor . setValue ( newSource ) ;
172+
173+ this . showEditor ( "previewEditor" ) ;
174+ }
175+
140176 showEditor ( editorName ) {
141177 const editor = this . el . querySelector ( `#${ editorName } ) ;
142178 if ( ! editor ) return ;
0 commit comments