npm - @user-synax/synax - Versions diffs - 0.0.1 - Mend

@user-synax/synax 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/synax.html ADDED Viewed

@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Synax — a small scripting language that compiles to JavaScript</title>
+<style>
+  :root {
+    --bg: #0f1115; --panel: #161a22; --border: #2a3040;
+    --text: #e6e9f0; --muted: #9aa3b5; --accent: #7aa2f7;
+    --error: #f7768e; --ok: #9ece6a; --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--text);
+         font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
+  main { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; }
+  h1 { font-size: 2rem; margin: 0 0 4px; }
+  h1 .accent { color: var(--accent); }
+  .tagline { color: var(--muted); margin: 0 0 28px; }
+  h2 { font-size: 1.25rem; margin: 36px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
+  code, pre { font-family: var(--mono); font-size: 0.92em; }
+  code { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
+  pre { background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
+        padding: 12px 14px; overflow-x: auto; line-height: 1.5; }
+  table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
+  th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
+  th { color: var(--muted); font-weight: 600; }
+  td code { white-space: nowrap; }
+  .playground { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
+  .pg-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
+  .pg-bar label { color: var(--muted); font-size: 0.9em; }
+  select, button {
+    font: inherit; background: var(--bg); color: var(--text);
+    border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px;
+  }
+  button { background: var(--accent); color: #0b0e14; font-weight: 600; cursor: pointer; border: none; }
+  .panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  @media (max-width: 760px) { .panes { grid-template-columns: 1fr; } }
+  .pane { display: flex; flex-direction: column; min-width: 0; }
+  .pane h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted);
+             text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
+  textarea, .output, .js, .diagnostic {
+    font-family: var(--mono); font-size: 13.5px; line-height: 1.5;
+    background: var(--bg); color: var(--text);
+    border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
+    white-space: pre; overflow: auto;
+  }
+  textarea { width: 100%; height: 300px; resize: vertical; }
+  .output, .js { min-height: 120px; max-height: 300px; }
+  .diagnostic { border-color: var(--error); color: var(--error); margin-top: 10px; display: none; }
+  .diagnostic.error { display: block; }
+  .footnote { color: var(--muted); font-size: 0.9em; margin-top: 8px; }
+  details summary { cursor: pointer; color: var(--accent); }
+  details pre { margin-top: 8px; }
+</style>
+</head>
+<body>
+<main>
+  <h1><span class="accent">synax</span> — no braces, no semicolons</h1>
+  <p class="tagline">A small scripting language that compiles to plain, readable JavaScript.
+     Reads closer to plain English than Python.</p>
+  <h2>Try it right here</h2>
+  <div class="playground">
+    <div class="pg-bar">
+      <label for="examples">Examples:</label>
+      <select id="examples">
+        <option>Hello World</option>
+        <option>Variables</option>
+        <option>If / else</option>
+        <option>Function</option>
+        <option>Loop</option>
+        <option>Fibonacci</option>
+        <option>FizzBuzz</option>
+      </select>
+      <button id="run" type="button">Run ▶</button>
+      <span class="footnote">The full compiler is inlined in this page — everything runs locally.</span>
+    </div>
+    <div class="panes">
+      <div class="pane">
+        <h3>program.snx</h3>
+        <textarea id="editor" spellcheck="false"></textarea>
+      </div>
+      <div class="pane">
+        <h3>JavaScript</h3>
+        <div id="js" class="js"></div>
+      </div>
+    </div>
+    <div id="diagnostic" class="diagnostic"></div>
+    <h3 style="margin-top:12px">Output</h3>
+    <div id="output" class="output">(press Run)</div>
+  </div>
+  <h2>Install &amp; run locally</h2>
+  <pre>npm install synax        # or: bun add synax
+synax program.snx        # prints JavaScript to stdout
+synax program.snx | node # compile and run it</pre>
+  <h2>The language in one table</h2>
+  <table>
+    <tr><th>Construct</th><th>Syntax</th><th>Compiles to</th></tr>
+    <tr><td>Declare / assign</td><td><code>set x = 5</code></td><td><code>let x = 5;</code> (later <code>set</code>s reassign)</td></tr>
+    <tr><td>Print</td><td><code>print e</code></td><td><code>console.log(e);</code></td></tr>
+    <tr><td>If / else</td><td><code>if c … else … end</code></td><td><code>if (c) { … } else { … }</code></td></tr>
+    <tr><td>Function</td><td><code>fn f(a, b) … end</code></td><td><code>function f(a, b) { … }</code></td></tr>
+    <tr><td>Loop</td><td><code>for i in 1..5 … end</code></td><td><code>for (let i = 1; i &lt;= 5; i++) { … }</code> — inclusive</td></tr>
+    <tr><td>Call</td><td><code>f(x, y)</code></td><td><code>f(x, y);</code></td></tr>
+    <tr><td>Comment</td><td><code># line &nbsp;/# block #/</code></td><td>stripped</td></tr>
+    <tr><td>Strings</td><td><code>"a\nb"</code></td><td><code>\n \t \" \\</code> escapes decoded</td></tr>
+    <tr><td>Operators</td><td><code>+ - * / == != &gt; &lt; &gt;= &lt;=</code></td><td>same precedence as JS; <code>+</code> coerces like JS</td></tr>
+  </table>
+  <h2>From source</h2>
+  <pre># clone the repo, then:
+bun install
+bun test                     # 158 tests
+bun run src/cli.ts examples/fizzbuzz.snx
+bun run scripts/build-docs.ts   # regenerate this page</pre>
+  <p class="footnote">Spec: <code>SPEC.md</code> · License: MIT · v0.0.1</p>
+</main>
+<script>(()=>{var C=Object.defineProperty;var O=(F)=>F;function P(F,j){this[F]=O.bind(null,j)}var L=(F,j)=>{for(var z in j)C(F,z,{get:j[z],enumerable:!0,configurable:!0,set:P.bind(j,z)})};var V={};L(V,{generate:()=>w,formatDiagnostic:()=>I,ParserError:()=>f,Parser:()=>K,LexerError:()=>$,Lexer:()=>G});var R={"==":1,"!=":1,">":1,"<":1,">=":1,"<=":1,"+":2,"-":2,"*":3,"/":3};function w(F){return new x().program(F)}class x{indentLevel=0;scope=new Set;program(F){return F.body.map((j)=>this.statement(j)).join(`
+`)}statement(F){switch(F.kind){case"VarDecl":return this.varDecl(F);case"PrintStmt":return this.printStmt(F);case"IfStmt":return this.ifStmt(F);case"FnDecl":return this.fnDecl(F);case"ForStmt":return this.forStmt(F);case"ExprStmt":return`${this.indent()}${this.expression(F.expression)};`}}varDecl(F){let j=this.expression(F.value);if(this.scope.has(F.name))return`${this.indent()}${F.name} = ${j};`;return this.scope.add(F.name),`${this.indent()}let ${F.name} = ${j};`}printStmt(F){return`${this.indent()}console.log(${this.expression(F.argument)});`}ifStmt(F){let z=`${this.indent()}if (${this.expression(F.condition)}) `+this.block(F.thenBranch);if(F.elseBranch!==null)z+=" else "+this.block(F.elseBranch);return z}fnDecl(F){let j=`${this.indent()}function ${F.name}(${F.params.join(", ")}) `,z=this.scope;this.scope=new Set(F.params);let J=this.block(F.body);return this.scope=z,j+J}forStmt(F){let{variable:j}=F,z=this.expression(F.start),J=this.expression(F.end);return`${this.indent()}for (let ${j} = ${z}; ${j} <= ${J}; ${j}++) `+this.block(F.body)}expression(F){switch(F.kind){case"NumberLiteral":return String(F.value);case"StringLiteral":return JSON.stringify(F.value);case"Identifier":return F.name;case"BinaryExpr":return this.binary(F,0,!1);case"FunctionCall":return`${F.callee}(${F.args.map((j)=>this.expression(j)).join(", ")})`}}binary(F,j,z){let J=R[F.operator],Q=this.operand(F.left,J,!1),X=this.operand(F.right,J,!0),Z=`${Q} ${F.operator} ${X}`;return J<j||J===j&&z?`(${Z})`:Z}operand(F,j,z){if(F.kind==="BinaryExpr")return this.binary(F,j,z);return this.expression(F)}block(F){if(F.length===0)return"{}";this.indentLevel++;let j=F.map((z)=>this.statement(z)).join(`
+`);return this.indentLevel--,`{
+${j}
+${this.indent()}}`}indent(){return"  ".repeat(this.indentLevel)}}function I(F,j){let{file:z,line:J,column:Q,length:X,reason:Z}=F,B=`${z}:${J}:${Q}: error: ${Z}`,M=j.split(/\r?\n/)[J-1];if(M===void 0||M.trim()==="")return B;let W=Math.max(0,Math.min(Q-1,M.length)),N=Math.max(1,Math.min(X,M.length-W)),S=String(J),_=" ".repeat(S.length),D=M.slice(0,W).replace(/[^\t]/g," "),b=`  ${S} | ${M}`,v=`  ${_} | ${D}${"^".repeat(N)}`;return`${B}
+${b}
+${v}`}var q={SET:"SET",PRINT:"PRINT",IF:"IF",ELSE:"ELSE",END:"END",FN:"FN",FOR:"FOR",IN:"IN",NUMBER:"NUMBER",STRING:"STRING",IDENT:"IDENT",EQUALS:"EQUALS",PLUS:"PLUS",MINUS:"MINUS",STAR:"STAR",SLASH:"SLASH",EQEQ:"EQEQ",BANGEQ:"BANGEQ",GT:"GT",LT:"LT",GTEQ:"GTEQ",LTEQ:"LTEQ",DOTDOT:"DOTDOT",LPAREN:"LPAREN",RPAREN:"RPAREN",COMMA:"COMMA",NEWLINE:"NEWLINE",EOF:"EOF"};class $ extends Error{line;column;length;reason;constructor(F,j,z,J=1){super(`${F} (line ${j})`);this.name="LexerError",this.reason=F,this.line=j,this.column=z,this.length=J}}var g=new Map([["set",q.SET],["print",q.PRINT],["if",q.IF],["else",q.ELSE],["end",q.END],["fn",q.FN],["for",q.FOR],["in",q.IN]]),u=new Map([["==",q.EQEQ],["!=",q.BANGEQ],[">=",q.GTEQ],["<=",q.LTEQ],["..",q.DOTDOT]]),E=new Map([["=",q.EQUALS],["+",q.PLUS],["-",q.MINUS],["*",q.STAR],["/",q.SLASH],[">",q.GT],["<",q.LT],["(",q.LPAREN],[")",q.RPAREN],[",",q.COMMA]]),m=new Map([["n",`
+`],["t","\t"],['"','"'],["\\","\\"]]);function U(F){return F!==void 0&&F>="0"&&F<="9"}function l(F){return F!==void 0&&(F>="a"&&F<="z"||F>="A"&&F<="Z")}function A(F){return l(F)||F==="_"}function h(F){return A(F)||U(F)}class G{source;index=0;line=1;lineStart=0;constructor(F){this.source=F}get column(){return this.index-this.lineStart+1}tokenize(){this.index=0,this.line=1,this.lineStart=0;let F=[];while(!0){let j=this.source[this.index];if(j===void 0)break;if(j===" "||j==="\t"||j==="\r"){this.index++;continue}if(j===`
+`){F.push({type:q.NEWLINE,lexeme:`
+`,line:this.line,column:this.column}),this.index++,this.line++,this.lineStart=this.index;continue}if(j==="#"){this.skipLineComment();continue}if(j==="/"&&this.source[this.index+1]==="#"){this.skipBlockComment();continue}if(j==='"'){F.push(this.readString());continue}if(U(j)){F.push(this.readNumber());continue}if(A(j)){F.push(this.readIdentifier());continue}let z=this.readOperator();if(z!==void 0){F.push(z);continue}throw new $(`Unexpected character ${JSON.stringify(j)}`,this.line,this.column)}return F.push({type:q.EOF,lexeme:"",line:this.line,column:this.column}),F}skipLineComment(){this.index++;while(!0){let F=this.source[this.index];if(F===void 0||F===`
+`)return;this.index++}}skipBlockComment(){let F=this.line,j=this.column;this.index+=2;while(!0){let z=this.source[this.index];if(z===void 0)throw new $("Unterminated multi-line comment",F,j,2);if(z==="#"&&this.source[this.index+1]==="/"){this.index+=2;return}if(z===`
+`){this.line++,this.index++,this.lineStart=this.index;continue}this.index++}}readString(){let F=this.line,j=this.column,z=this.index;this.index++;let J="";while(!0){let Q=this.source[this.index];if(Q===void 0||Q===`
+`)throw new $("Unterminated string",F,j);if(Q==='"'){this.index++;let X=this.source.slice(z,this.index);return{type:q.STRING,lexeme:X,value:J,line:F,column:j}}if(Q==="\\"){let X=this.source[this.index+1],Z=X===void 0?void 0:m.get(X);if(Z===void 0)throw new $(`Invalid escape sequence \\${X??""}`,this.line,this.column,2);J+=Z,this.index+=2;continue}J+=Q,this.index++}}readNumber(){let F=this.line,j=this.column,z=this.index;while(U(this.source[this.index]))this.index++;if(this.source[this.index]==="."&&U(this.source[this.index+1])){this.index++;while(U(this.source[this.index]))this.index++}let J=this.source.slice(z,this.index);return{type:q.NUMBER,lexeme:J,value:Number(J),line:F,column:j}}readIdentifier(){let F=this.line,j=this.column,z=this.index;while(h(this.source[this.index]))this.index++;let J=this.source.slice(z,this.index);return{type:g.get(J)??q.IDENT,lexeme:J,line:F,column:j}}readOperator(){let F=this.line,j=this.column,z=this.source.slice(this.index,this.index+2),J=u.get(z);if(J!==void 0)return this.index+=2,{type:J,lexeme:z,line:F,column:j};let Q=this.source[this.index];if(Q===void 0)return;let X=E.get(Q);if(X===void 0)return;return this.index+=1,{type:X,lexeme:Q,line:F,column:j}}}class f extends Error{line;column;length;reason;constructor(F,j,z,J=1){super(`${F} (line ${j})`);this.name="ParserError",this.reason=F,this.line=j,this.column=z,this.length=J}}var s=new Map([[q.GTEQ,">="],[q.LTEQ,"<="],[q.GT,">"],[q.LT,"<"],[q.EQEQ,"=="],[q.BANGEQ,"!="]]),i=new Map([[q.PLUS,"+"],[q.MINUS,"-"]]),y=new Map([[q.STAR,"*"],[q.SLASH,"/"]]),H=[q.END],c=[q.ELSE,q.END];function Y(F){switch(F.type){case q.EOF:return"end of input";case q.NEWLINE:return"end of line";default:return`'${F.lexeme}'`}}class K{tokens;index=0;constructor(F=[]){this.tokens=F}parse(){this.index=0;let F=this.peek(),j=this.parseStatements([]),z=this.peek();if(z.type!==q.EOF)throw this.error(z,`Unexpected ${Y(z)} after program`);return{kind:"Program",body:j,line:F.line}}parseStatements(F){let j=[];while(!0){this.skipNewlines();let z=this.peek();if(z.type===q.EOF||F.includes(z.type))return j;j.push(this.parseStatement());let J=this.peek();if(J.type!==q.NEWLINE&&J.type!==q.EOF&&!F.includes(J.type))throw this.error(J,`Expected end of statement but found ${Y(J)}`)}}parseStatement(){switch(this.peek().type){case q.SET:return this.parseVarDecl();case q.PRINT:return this.parsePrintStmt();case q.IF:return this.parseIfStmt();case q.FN:return this.parseFnDecl();case q.FOR:return this.parseForStmt();default:return this.parseExprStmt()}}parseVarDecl(){let F=this.expect(q.SET,"'set'"),j=this.expect(q.IDENT,"a variable name after 'set'");this.expect(q.EQUALS,"'=' after the variable name");let z=this.parseExpression();return{kind:"VarDecl",name:j.lexeme,value:z,line:F.line}}parsePrintStmt(){let F=this.expect(q.PRINT,"'print'");return{kind:"PrintStmt",argument:this.parseExpression(),line:F.line}}parseIfStmt(){let F=this.expect(q.IF,"'if'"),j=this.parseExpression(),z=this.parseStatements(c),J=null;if(this.peek().type===q.ELSE)this.advance(),J=this.parseStatements(H);return this.expect(q.END,"'end' to close the 'if'"),{kind:"IfStmt",condition:j,thenBranch:z,elseBranch:J,line:F.line}}parseFnDecl(){let F=this.expect(q.FN,"'fn'"),j=this.expect(q.IDENT,"a function name after 'fn'");this.expect(q.LPAREN,"'(' after the function name");let z=[];if(this.peek().type!==q.RPAREN){z.push(this.expect(q.IDENT,"a parameter name").lexeme);while(this.peek().type===q.COMMA)this.advance(),z.push(this.expect(q.IDENT,"a parameter name").lexeme)}this.expect(q.RPAREN,"')' after the parameter list");let J=this.parseStatements(H);return this.expect(q.END,"'end' to close the function body"),{kind:"FnDecl",name:j.lexeme,params:z,body:J,line:F.line}}parseForStmt(){let F=this.expect(q.FOR,"'for'"),j=this.expect(q.IDENT,"a loop variable after 'for'");this.expect(q.IN,"'in' after the loop variable");let z=this.parseExpression();this.expect(q.DOTDOT,"'..' between the range bounds");let J=this.parseExpression(),Q=this.parseStatements(H);return this.expect(q.END,"'end' to close the 'for' loop"),{kind:"ForStmt",variable:j.lexeme,start:z,end:J,body:Q,line:F.line}}parseExprStmt(){let F=this.parseExpression();return{kind:"ExprStmt",expression:F,line:F.line}}parseExpression(){return this.parseComparison()}parseComparison(){return this.parseBinary(()=>this.parseTerm(),s)}parseTerm(){return this.parseBinary(()=>this.parseFactor(),i)}parseFactor(){return this.parseBinary(()=>this.parsePrimary(),y)}parseBinary(F,j){let z=F();while(!0){let J=j.get(this.peek().type);if(J===void 0)return z;this.advance();let Q=F();z={kind:"BinaryExpr",operator:J,left:z,right:Q,line:z.line}}}parsePrimary(){let F=this.peek();switch(F.type){case q.NUMBER:return this.advance(),{kind:"NumberLiteral",value:typeof F.value==="number"?F.value:Number(F.lexeme),line:F.line};case q.STRING:return this.advance(),{kind:"StringLiteral",value:typeof F.value==="string"?F.value:F.lexeme.slice(1,-1),line:F.line};case q.IDENT:{if(this.advance(),this.peek().type===q.LPAREN)return this.finishFunctionCall(F);return{kind:"Identifier",name:F.lexeme,line:F.line}}case q.LPAREN:{this.advance();let j=this.parseExpression();return this.expect(q.RPAREN,"')' to close the group"),j}default:throw this.error(F,`Expected an expression but found ${Y(F)}`)}}finishFunctionCall(F){this.expect(q.LPAREN,"'('");let j=[];if(this.peek().type!==q.RPAREN){j.push(this.parseExpression());while(this.peek().type===q.COMMA)this.advance(),j.push(this.parseExpression())}return this.expect(q.RPAREN,"')' to close the argument list"),{kind:"FunctionCall",callee:F.lexeme,args:j,line:F.line}}peek(F=0){let j=this.tokens[this.index+F];if(j===void 0)throw Error("Parser ran past the end of the token stream");return j}advance(){let F=this.peek();return this.index++,F}expect(F,j){let z=this.peek();if(z.type!==F)throw this.error(z,`Expected ${j} but found ${Y(z)}`);return this.index++,z}skipNewlines(){while(this.peek().type===q.NEWLINE)this.advance()}error(F,j){return new f(j,F.line,F.column,Math.max(F.lexeme.length,1))}}globalThis.Synax=V;})();
+</script>
+<script>
+(function () {
+  "use strict";
+  var Synax = globalThis.Synax;
+  var EXAMPLES = {
+    "Hello World": 'print "Hello, World!"\n',
+    "Variables": "set x = 5\nprint x\n",
+    "If / else": [
+      "set age = 19",
+      "",
+      "if age >= 18",
+      '    print "adult"',
+      "else",
+      '    print "minor"',
+      "end",
+      ""
+    ].join("\n"),
+    "Function": [
+      "fn greet(name)",
+      '    print "Hello, " + name',
+      "end",
+      "",
+      'greet("Ayush")',
+      ""
+    ].join("\n"),
+    "Loop": "for i in 1..5\n    print i\nend\n",
+    "Fibonacci": [
+      "fn fib(a, b, n)",
+      "    if n > 0",
+      "        print a",
+      "        fib(b, a + b, n - 1)",
+      "    end",
+      "end",
+      "",
+      "fib(0, 1, 10)",
+      ""
+    ].join("\n"),
+    "FizzBuzz": [
+      "# FizzBuzz for 1..15.",
+      "set fizz = 0",
+      "set buzz = 0",
+      "for i in 1..15",
+      "    set fizz = fizz + 1",
+      "    set buzz = buzz + 1",
+      "    if fizz == 3",
+      "        set fizz = 0",
+      "    end",
+      "    if buzz == 5",
+      "        set buzz = 0",
+      "    end",
+      "    if fizz == 0",
+      "        if buzz == 0",
+      '            print "FizzBuzz"',
+      "        else",
+      '            print "Fizz"',
+      "        end",
+      "    else",
+      "        if buzz == 0",
+      '            print "Buzz"',
+      "        else",
+      "            print i",
+      "        end",
+      "    end",
+      "end",
+      ""
+    ].join("\n")
+  };
+  var $editor = document.getElementById("editor");
+  var $js = document.getElementById("js");
+  var $output = document.getElementById("output");
+  var $diagnostic = document.getElementById("diagnostic");
+  var $run = document.getElementById("run");
+  var $examples = document.getElementById("examples");
+  // Captured console.log calls from the executed program.
+  var captured = [];
+  function render() {
+    $js.textContent = "";
+    $diagnostic.textContent = "";
+    $diagnostic.className = "diagnostic";
+    try {
+      var ast = new Synax.Parser(new Synax.Lexer($editor.value).tokenize()).parse();
+      $js.textContent = Synax.generate(ast);
+    } catch (error) {
+      if (error && (error.name === "LexerError" || error.name === "ParserError")) {
+        $diagnostic.textContent = Synax.formatDiagnostic(
+          {
+            file: "program.snx",
+            line: error.line,
+            column: error.column,
+            length: error.length,
+            reason: error.reason,
+          },
+          $editor.value,
+        );
+        $diagnostic.className = "diagnostic error";
+      } else {
+        $diagnostic.textContent = "internal error: " + error;
+        $diagnostic.className = "diagnostic error";
+      }
+      $js.textContent = "";
+    }
+  }
+  function runProgram() {
+    $output.textContent = "";
+    if ($js.textContent.trim() === "") return;
+    captured = [];
+    var log = console.log;
+    console.log = function () {
+      for (var i = 0; i < arguments.length; i++) captured.push(String(arguments[i]));
+    };
+    try {
+      new Function($js.textContent)();
+    } catch (error) {
+      captured.push("RuntimeError: " + error.message);
+    } finally {
+      console.log = log;
+    }
+    $output.textContent = captured.length ? captured.join("\n") : "(no output)";
+    $output.className = "output";
+  }
+  function selectExample() {
+    var program = EXAMPLES[$examples.value];
+    if (program === undefined) return;
+    $editor.value = program;
+    render();
+    runProgram();
+  }
+  $editor.addEventListener("input", render);
+  $run.addEventListener("click", runProgram);
+  $examples.addEventListener("change", selectExample);
+  // Initial state: load an example so the page is alive on first open.
+  $examples.value = "If / else";
+  selectExample();
+})();
+</script>
+</body>
+</html>