diff --git a/example/example-page.css b/example/example-page.css index fcd44e0..bb4917b 100644 --- a/example/example-page.css +++ b/example/example-page.css @@ -10,7 +10,7 @@ body { } .container .col { - width: 50%; + width: 33%; padding: 10px; } @@ -20,4 +20,15 @@ body { .CodeMirror { box-shadow: 3px 4px 21px -4px rgba(0,0,0,0.75); -} \ No newline at end of file +} + + +#fullscreenButton { + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 0px); +} +#output { position: relative; } +main { text-align: center; } +main .error { background: red; padding: 10px; font-family: courier; line-height: 5ex; } \ No newline at end of file diff --git a/example/example.js b/example/example.js index ed93723..e50fd01 100644 --- a/example/example.js +++ b/example/example.js @@ -5,7 +5,7 @@ import prettyJS from 'pretty-js' import { compile } from '../src/wescheme' -import Evaluator from '../src/runtime/mzscheme-vm/evaluator' +import { Runner } from '../src/runtime/mzscheme-vm/evaluator' import loadProject from '../src/runtime/loadProject' require('./example.css') @@ -22,18 +22,19 @@ var cm2 = CodeMirror.fromTextArea( ) cm.on('change', function() { try { - cm2.setValue(prettyJS(compile("TEST PROGRAM", cm.getValue(), true).bytecode.toString())) + const bytecode = prettyJS(compile(cm.getValue(), true).bytecode.toString()); + cm2.setValue(bytecode) } catch (e) { + cm2.setValue("Compilation Error (see console for details)") if (e instanceof Error) { throw e } - cm2.setValue(e) } }) - cm2.on('change', function() { - try { init(); } + if(cm2.getValue().includes("Compilation Error")) return; + try { runBytecode(); } catch (e) { throw e; } }); @@ -42,130 +43,19 @@ cm.setValue('(triangle 200 "solid" "turquoise")') /////////////////////////////////////////////////////////////////////////////// // imported from WeScheme war-src/js/run.js -function init(publicId) { - - var Runner = function(outputDOMContainer) { - var that = this; - this.outputDOMContainer = outputDOMContainer; - this.evaluator = new Evaluator({ - write: function(thing) { that.addToInteractions(thing); }, - }); - this.evaluator.setImageProxy("/imageProxy"); - this.evaluator.setRootLibraryPath("/js/mzscheme-vm/collects"); - - this.runCompiledCode = function(compiledCode, permStringArray) { - var that = this; - var onSuccessRun = function() { }; - var onFailRun = function(exn) { that.renderErrorAsDomNode(exn); }; - this.evaluator.executeCompiledProgram((0,eval)('(' + compiledCode + ')'), - onSuccessRun, - onFailRun); - }; - - this.runSourceCode = function(title, sourceCode, permStringArray) { - var that = this; - var onSuccessRun = function() { console.log('success')}; - var onFailRun = function(exn) { that.renderErrorAsDomNode(exn); }; - this.evaluator.executeProgram(title, sourceCode, onSuccessRun, onFailRun); - }; - - this.addToInteractions = function(interactionVal) { - - // Returns if x is a dom node. - function isDomNode(x) { - return (x.nodeType != undefined); - } - // Returns if x is a node that should be printed - // Printable Nodes are CANVAS elements, OR non-empty SPANs - function isPrintableNode(x){ - return x.nodeName === "CANVAS" || x.childNodes.length > 0; - } - - if(!isPrintableNode(interactionVal)){ return;} // make sure there are no other topLevelEvaluationNodes in the outputDOMContainer - while(this.outputDOMContainer.firstChild){ - this.outputDOMContainer.removeChild(this.outputDOMContainer.firstChild); - } - if (isDomNode(interactionVal)) { - interactionVal.style.display="inline-block"; - interactionVal.classList.add("replOutput"); // simulate the editor REPL, so CSS spacing will kick in - this.outputDOMContainer.append(interactionVal); - } else { - var newArea = document.createElement("div"); - newArea.style.width='100%'; - newArea.text(interactionVal); - newArea.style.display="inline-block"; - this.outputDOMContainer.append(newArea); - } - this.outputDOMContainer.scrollTop = this.outputDOMContainer.scrollHeight; - }; - - // renderErrorAsDomNode: exception -> element - // Given an exception, produces error dom node to be displayed. - this.renderErrorAsDomNode = function(err) { - var msg = this.evaluator.getMessageFromExn(err); - - var dom = document.createElement('div'); - dom['class'] = 'moby-error'; - - var msgDom = document.createElement('div'); - msgDom['class'] = 'moby-error:message'; - msgDom.appendChild(document.createTextNode(msg)); - dom.appendChild(msgDom); - - var stacktrace = this.evaluator.getTraceFromExn(err); - for (var i = 0; i < stacktrace.length; i++) { - dom.appendChild(document.createTextNode("at: line " + stacktrace[i].line + - ", column " + stacktrace[i].column)); - } - return dom; - }; - }; - +function runBytecode(publicId) { + var inter = document.getElementById('interactions'); var runner = new Runner(document.getElementById('interactions')); - var afterLoad = function(aProgram) { - - var title = "Test Program", // aProgram.getTitle(), - sourceCode = cm.getValue(), // aProgram.getSourceCode(), - programCode = null, // Set it to null, so that the client-side compiler is invoked. - permissions = null, // aProgram.getPermissions(), - notes = null; // aProgram.getNotes(); - - var j = document.getElementById('interactions'), - b = document.getElementsByTagName("body")[0]; - - var toggleFullscreen = function() { - // obtain the element being added - var elem; - if (j.querySelectorAll("canvas").length == 1) { elem = j.querySelectorAll("canvas")[0]; } - else { elem = j[0]; } - - // get fullscreen access - if(!document.fullscreenElement) elem.requestFullscreen( Element.ALLOW_KEYBOARD_INPUT ); - else document.exitFullscreen(); - }; - var input = document.createElement("input"); - input.type = "button"; - input.value = "Run Fullscreen"; - input.style = "margin-top: 20px; display: block; margin-left: auto; margin-right: auto"; - input.onclick = toggleFullscreen; - b.appendChild(input); - - var appendFinishedMsg = function() { - var inter = document.getElementById('interactions'); - var finished = document.createElement('span'); - finished.id = "finished"; - finished.innerHTML = "The program has finished running, but only included definitions (which do not produce any output)."; - if(inter.children.length == 0) { - inter.appendChild(finished); - } - }; - - if (programCode) { - runner.runCompiledCode(programCode, permissions); - } else { - runner.runSourceCode("TEST PROGRAM", sourceCode, permissions); + var reportIfNoOutput = function() { + if(inter.children.length == 0) { + inter.innerHTML = "The program has finished running, but only included definitions (which do not produce any output)."; } - appendFinishedMsg(); }; - afterLoad(); + try { + runner.runSourceCode(null, cm.getValue(), null); // pass null for permissions and title + } catch(e) { + inter.innerHTML = "" + e.toString() + ""; + } finally { + reportIfNoOutput(); + } } \ No newline at end of file diff --git a/example/index.html b/example/index.html index 37c2995..3231740 100644 --- a/example/index.html +++ b/example/index.html @@ -1,19 +1,21 @@
-Write scheme code here...
And get compiled javascript here!
+get compiled bytecode here...
And see executed output here!
+and see output here!
+