|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <title>JS-Interpreter Babel Demo</title> |
| 6 | + <link href="style.css" rel="stylesheet" type="text/css"> |
| 7 | + <script src="../acorn.js"></script> |
| 8 | + <script src="../interpreter.js"></script> |
| 9 | + <script src="babel.min.js"></script> |
| 10 | + <script> |
| 11 | + var myInterpreter; |
| 12 | + function initAlert(interpreter, scope) { |
| 13 | + var wrapper = function alert(text) { |
| 14 | + return window.alert(arguments.length ? text : ''); |
| 15 | + }; |
| 16 | + interpreter.setProperty(scope, 'alert', |
| 17 | + interpreter.createNativeFunction(wrapper)); |
| 18 | + } |
| 19 | + |
| 20 | + function parseButton() { |
| 21 | + var code = document.getElementById('code').value; |
| 22 | + var options = { |
| 23 | + 'presets': ['es2015'] |
| 24 | + }; |
| 25 | + code = Babel.transform(code, options).code; |
| 26 | + |
| 27 | + alert('Code transpiled to:\n' + code); |
| 28 | + myInterpreter = new Interpreter(code, initAlert); |
| 29 | + disable(''); |
| 30 | + } |
| 31 | + |
| 32 | + function runButton() { |
| 33 | + disable('disabled'); |
| 34 | + if (myInterpreter.run()) { |
| 35 | + // Async function hit. There's more code to run. |
| 36 | + disable(''); |
| 37 | + } |
| 38 | + } |
| 39 | + |
| 40 | + function disable(disabled) { |
| 41 | + document.getElementById('runButton').disabled = disabled; |
| 42 | + } |
| 43 | + </script> |
| 44 | +</head> |
| 45 | +<body> |
| 46 | + <h1>JS-Interpreter Babel Demo</h1> |
| 47 | + |
| 48 | + <p>A transpiler is required to run ES6 or greater using the JS-Interpreter. |
| 49 | + Babel is a good option which can generate ES5 either client-side or server-side.</p> |
| 50 | + |
| 51 | + <p>For client-side transpiling, download |
| 52 | + <a href="https://unpkg.com/@babel/standalone/babel.min.js">@babel/standalone</a> |
| 53 | + and include it as a script tag on your page. Then convert your code like this:</p> |
| 54 | + |
| 55 | + <pre>code = Babel.transform(code, {'presets': ['es2015']}).code;</pre> |
| 56 | + |
| 57 | + <p>One issue is that highlighting the user's code as it executes won't work |
| 58 | + since it is the transpiled code that's actually being executed and the line |
| 59 | + numbers won't match.</p> |
| 60 | + |
| 61 | + <p>Type some ES6, click <em>Parse</em>, then click <em>Run</em> once. |
| 62 | + Open your browser's console for errors.</p> |
| 63 | + |
| 64 | + <p><textarea id="code" spellcheck="false"> |
| 65 | +const result = []; |
| 66 | +const fibonacci = (n, output) => { |
| 67 | + let a = 1, b = 1, sum; |
| 68 | + for (let i = 0; i < n; i++) { |
| 69 | + output.push(a); |
| 70 | + sum = a + b; |
| 71 | + a = b; |
| 72 | + b = sum; |
| 73 | + } |
| 74 | +} |
| 75 | +fibonacci(16, result); |
| 76 | +alert(result.join(', ')); |
| 77 | +</textarea><br> |
| 78 | + <button onclick="parseButton()">Parse</button> |
| 79 | + <button onclick="runButton()" id="runButton" disabled="disabled">Run</button> |
| 80 | + </p> |
| 81 | + |
| 82 | + <p>Back to the <a href="../docs.html">JS-Interpreter documentation</a>.</p> |
| 83 | + |
| 84 | +</body> |
| 85 | +</html> |
0 commit comments