Merge pull request #18 from aayush-tripathi/playground-bytecode

Playground bytecode

Author: aayush-tripathi

executor/src/main.rs

@@ -6,9 +6,9 @@ use serde::{Deserialize, Serialize};
 use std::net::SocketAddr;
 use std::sync::Arc;
 use tokio::net::TcpListener;
+use tower_http::cors::AllowOrigin;
 use tower_http::cors::{Any, CorsLayer};
 use tundra::run;
-use tower_http::cors::AllowOrigin;
 
 #[derive(Deserialize)]
 struct ExecReq {
@@ -21,6 +21,11 @@ struct ExecResp {
     stderr: String,
 }
 
+#[derive(Serialize)]
+struct DisasmResp {
+    bytecode: String,
+    stderr: String,
+}
 #[tokio::main]
 async fn main() -> anyhow::Result<()> {
     static ALLOWED: &[&str] = &[
@@ -38,6 +43,7 @@ async fn main() -> anyhow::Result<()> {
         .allow_headers(Any);
     let app = Router::new()
         .route("/execute", post(exec))
+        .route("/disassemble", post(disassemble))
         .layer(cors)
         .with_state(Arc::new(()));
 
@@ -61,3 +67,15 @@ async fn exec(State(_): State<Arc<()>>, Json(req): Json<ExecReq>) -> Json<ExecRe
         }),
     }
 }
+async fn disassemble(State(_): State<Arc<()>>, Json(req): Json<ExecReq>) -> Json<DisasmResp> {
+    match tundra::disassemble(&req.code) {
+        Ok(bc) => Json(DisasmResp {
+            bytecode: bc,
+            stderr: String::new(),
+        }),
+        Err(e) => Json(DisasmResp {
+            bytecode: String::new(),
+            stderr: e.to_string(),
+        }),
+    }
+}

playground/src/App.tsx

@@ -1,59 +1,52 @@
 import { useState } from "react";
 import { Editor } from "./Editor";
-import { exec } from "./api";
+import { exec, disassemble } from "./api";
 import { Analytics } from "@vercel/analytics/react"
 import "./styles.css";
 
-import {
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from "react-resizable-panels";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 const PlayIcon = () => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    style={{ marginRight: "8px", height: "16px", width: "16px" }}
-  >
+  <svg viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: 8, height: 16, width: 16 }}>
     <path d="M8 5v14l11-7z" />
   </svg>
 );
 
-
 export default function App() {
   const [code, setCode] = useState('print("Hello, Tundra!")');
   const [output, setOutput] = useState("");
+  const [bytecode, setBytecode] = useState("");
   const [isRunning, setIsRunning] = useState(false);
 
   const runCode = async () => {
     setIsRunning(true);
     setOutput("⏳ running…");
+    setBytecode("⏳ compiling…");
     try {
-      const { stdout, stderr } = await exec(code);
-      setOutput(stderr || stdout);
+      const [execRes, disRes] = await Promise.all([exec(code), disassemble(code)]);
+      setOutput(execRes.stderr || execRes.stdout);
+      setBytecode(disRes.stderr || disRes.bytecode);
     } catch (error) {
       setOutput(`Failed to connect to executor: ${error}`);
+      setBytecode("");
     } finally {
       setIsRunning(false);
     }
   };
 
+  const wikiUrl = import.meta.env.VITE_WIKI_URL ?? "https://aayush-tripathi.github.io/tundra/";
+
   return (
     <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
       {/* Header / Toolbar */}
-      <header style={{ display: "flex", alignItems: "center", padding: "8px", borderBottom: "1px solid #30363d" }}>
-        <img
-  src="/tundra_base_logo.png"
-  alt="Tundra Logo"
-  className="logo"
-/>
-        <h1 style={{ fontSize: "1.1rem", fontWeight: 600, marginRight: "1rem" }}>
-          Tundra Playground
-        </h1>
+      <header style={{ display: "flex", alignItems: "center", gap: 12, padding: 8, borderBottom: "1px solid #30363d" }}>
+        <img src="/tundra_base_logo.png" alt="Tundra Logo" className="logo" />
+        <h1 style={{ fontSize: "1.1rem", fontWeight: 600, marginRight: "auto" }}>Tundra Playground</h1>
+
+        <a href={wikiUrl} target="_blank" rel="noreferrer" className="wiki-button">Wiki</a> 
+
         <button onClick={runCode} disabled={isRunning} className="run-button">
-          <PlayIcon />
-          Run
+          <PlayIcon /> Run
         </button>
       </header>
 
@@ -62,23 +55,39 @@ export default function App() {
         <Panel defaultSize={65} minSize={20}>
           <Editor code={code} setCode={setCode} />
         </Panel>
-        
-        <PanelResizeHandle className="resize-handle">
-            <div className="resize-handle-bar" />
-        </PanelResizeHandle>
+
+        <PanelResizeHandle className="resize-handle"><div className="resize-handle-bar" /></PanelResizeHandle>
 
         <Panel defaultSize={35} minSize={10}>
-          <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
-            <div style={{ padding: "8px", borderBottom: "1px solid #30363d", backgroundColor: "#161b22" }}>
-              <h2 style={{ margin: 0, fontSize: "0.9rem", fontWeight: 600 }}>Output</h2>
-            </div>
-            <pre style={{ flex: 1, margin: 0, padding: "12px", fontFamily: "monospace", whiteSpace: "pre-wrap", overflow: "auto" }}>
-              {output}
-            </pre>
-          </div>
+          {/*  Output | Bytecode  */}
+          <PanelGroup direction="horizontal" style={{ height: "100%" }}>
+            <Panel defaultSize={50} minSize={10}>
+              <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+                <div style={{ padding: 8, borderBottom: "1px solid #30363d", backgroundColor: "#161b22" }}>
+                  <h2 style={{ margin: 0, fontSize: "0.9rem", fontWeight: 600 }}>Output</h2>
+                </div>
+                <pre style={{ flex: 1, margin: 0, padding: 12, fontFamily: "monospace", whiteSpace: "pre-wrap", overflow: "auto" }}>
+                  {output}
+                </pre>
+              </div>
+            </Panel>
+
+            <PanelResizeHandle className="resize-handle vertical"><div className="resize-handle-bar" /></PanelResizeHandle>
+
+            <Panel defaultSize={50} minSize={10}>
+              <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+                <div style={{ padding: 8, borderBottom: "1px solid #30363d", backgroundColor: "#161b22" }}>
+                  <h2 style={{ margin: 0, fontSize: "0.9rem", fontWeight: 600 }}>Bytecode</h2>
+                </div>
+                <pre style={{ flex: 1, margin: 0, padding: 12, fontFamily: "monospace", whiteSpace: "pre", overflow: "auto" }}>
+                  {bytecode}
+                </pre>
+              </div>
+            </Panel>
+          </PanelGroup>
         </Panel>
       </PanelGroup>
       <Analytics />
     </div>
   );
-}
+}

playground/src/api.ts

@@ -6,3 +6,11 @@ export const exec = async (code: string): Promise<{ stdout: string; stderr: stri
   });
   return resp.json();
 };
+export const disassemble = async (code: string): Promise<{ bytecode: string; stderr: string }> => {
+  const resp = await fetch(import.meta.env.VITE_EXECUTOR_URL + "/disassemble", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ code }),
+  });
+  return resp.json();
+};

playground/src/styles.css

@@ -31,8 +31,8 @@ body {
 }
 
 .logo {
-  height: 5rem;        /* tweak size */
-  margin-right: 0.75rem; /* space before the title */
+  height: 6rem;      
+  margin-right: 0.75rem; 
 }
 .run-button {
   display: flex;
@@ -56,4 +56,32 @@ body {
   background-color: #555;
   border-color: #666;
   cursor: not-allowed;
-}
+}
+.wiki-button {
+  border: 1px solid #1b839e;
+  background: #1b839e;
+  color: #c9d1d9;
+  padding: 6px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 600;
+}
+.wiki-button:hover { background: #0d6179; }
+
+.run-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #238636;
+  background: #238636;
+  color: #c9d1d9;
+  margin-right: 4px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-weight: 600;
+}
+.run-button:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.resize-handle { display: flex; align-items: center; justify-content: center; }
+.resize-handle.vertical { width: 6px; cursor: col-resize; }
+.resize-handle-bar { width: 60%; height: 2px; background: #30363d; border-radius: 2px; }

tundra/src/bytecode/debug.rs

@@ -1,13 +1,21 @@
 // bytecode/debug.rs
 
 use crate::bytecode::chunk::Chunk;
-
+use std::fmt::Write as _;
 /// A one‐pass disassembler
 pub fn disassemble_chunk(chunk: &Chunk, name: &str) {
     println!("== {} ==", name);
     for (offset, instr) in chunk.code.iter().enumerate() {
         let line = chunk.get_line(offset).unwrap_or(-1);
-        // Use {:?} since OpCode implements Debug, not Display
         println!("{:04} Line {:4}    {:?}", offset, line, instr);
     }
 }
+pub fn disassemble_to_string(chunk: &Chunk, name: &str) -> String {
+    let mut s = String::new();
+    let _ = writeln!(s, "== {} ==", name);
+    for (offset, instr) in chunk.code.iter().enumerate() {
+        let line = chunk.get_line(offset).unwrap_or(-1);
+        let _ = writeln!(s, "{:04} Line {:4}    {:?}", offset, line, instr);
+    }
+    s
+}

tundra/src/lib.rs

@@ -6,51 +6,59 @@ pub mod lexer;
 pub mod vm;
 
 pub use crate::vm::interpretresult::InterpretResult;
+
 use crate::{
-    bytecode::chunk::Chunk, compiler::compiler::Compiler, lexer::scanner::Scanner, vm::vm::VM,
+    bytecode::chunk::Chunk,
+    bytecode::debug::disassemble_to_string, 
+    compiler::compiler::Compiler,
+    lexer::scanner::Scanner,
+    vm::vm::VM,
 };
 use anyhow::{anyhow, Result};
 use std::cell::RefCell;
 use std::rc::Rc;
 
-/// A custom Write implementation that captures output to a shared buffer
 struct OutputCapture {
     buffer: Rc<RefCell<Vec<u8>>>,
 }
-
 impl OutputCapture {
     fn new(buffer: Rc<RefCell<Vec<u8>>>) -> Self {
         Self { buffer }
     }
 }
-
 impl std::io::Write for OutputCapture {
     fn write(&mut self, buf: &[u8]) -> std::io::Result<usize> {
         self.buffer.borrow_mut().extend_from_slice(buf);
         Ok(buf.len())
     }
-
     fn flush(&mut self) -> std::io::Result<()> {
         Ok(())
     }
 }
 
-pub fn run(src: &str) -> Result<String> {
-    //  a shared buffer for capturing output
-    let output_buffer = Rc::new(RefCell::new(Vec::<u8>::new()));
-
-    let output_capture = Box::new(OutputCapture::new(output_buffer.clone()));
-    let output_ref: &'static mut dyn std::io::Write = Box::leak(output_capture);
-
-    // ---------- compile ----------
+pub fn compile_only(src: &str) -> Result<Rc<RefCell<Chunk>>> {
     let _tokens = Scanner::new(src.to_string()).scan_tokens();
     let chunk = Rc::new(RefCell::new(Chunk::new()));
     let mut compiler = Compiler::new(chunk.clone());
     if !compiler.compile(src) {
         return Err(anyhow!("compile error"));
     }
+    Ok(chunk)
+}
+
+pub fn disassemble(src: &str) -> Result<String> {
+    let chunk = compile_only(src)?;
+    let s = disassemble_to_string(&chunk.borrow(), "Disassembled Bytecode");
+    Ok(s)
+}
 
-    // ---------- execute ----------
+pub fn run(src: &str) -> Result<String> {
+    // capture stdout
+    let output_buffer = Rc::new(RefCell::new(Vec::<u8>::new()));
+    let output_capture = Box::new(OutputCapture::new(output_buffer.clone()));
+    let output_ref: &'static mut dyn std::io::Write = Box::leak(output_capture);
+    let chunk = compile_only(src)?;
+    // run
     let result = {
         let mut vm = VM::new_interpreter_only(chunk, output_ref);
         match vm.run() {
@@ -59,10 +67,8 @@ pub fn run(src: &str) -> Result<String> {
             InterpretResult::CompileError => unreachable!(),
         }
     };
-    let output_bytes = {
-        let buffer = output_buffer.borrow();
-        buffer.clone()
-    };
+
+    let output_bytes = output_buffer.borrow().clone();
     let output_string = String::from_utf8(output_bytes).unwrap_or_default();
     result.map(|_| output_string)
 }