stone-lang 0.1.0

package/cli/test-compiler.js

@@ -0,0 +1,181 @@
+/**
+ * Compiler Integration Tests
+ *
+ * Tests the Stone compiler with all backends.
+ */
+
+import {
+  compile,
+  compileToWasm,
+  compileToC,
+  compileToHIR,
+  CompilationTarget,
+  StoneCompilerOptions,
+} from '../compiler.js';
+import { OptimizationLevel } from '../optimization/optimization-manager.js';
+
+// ============================================================================
+// TEST UTILITIES
+// ============================================================================
+
+function test(name, fn) {
+  try {
+    fn();
+    console.log(`✓ ${name}`);
+    return true;
+  } catch (error) {
+    console.error(`✗ ${name}`);
+    console.error(`  ${error.message}`);
+    return false;
+  }
+}
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || 'Assertion failed');
+  }
+}
+
+// ============================================================================
+// TESTS
+// ============================================================================
+
+const testSource = `
+fn add(a, b) = a + b
+fn mul(x, y) = x * y
+result = add(3, 4) + mul(2, 5)
+`;
+
+const tests = [
+  // Basic compilation tests
+  () => test('compile() returns success', () => {
+    const result = compile(testSource);
+    assert(result.success, 'Compilation should succeed');
+    assert(result.output, 'Should have output');
+    assert(result.metadata, 'Should have metadata');
+  }),
+
+  () => test('compile() returns timings', () => {
+    const result = compile(testSource);
+    assert(result.metadata.timings.parse !== undefined, 'Should have parse timing');
+    assert(result.metadata.timings.hir !== undefined, 'Should have hir timing');
+    assert(result.metadata.totalTime >= 0, 'Should have total time');
+  }),
+
+  // Target-specific tests
+  () => test('compileToWasm() produces WASM binary', () => {
+    const result = compileToWasm(testSource);
+    assert(result.success, 'WASM compilation should succeed');
+    assert(result.output.binary instanceof Uint8Array, 'Should produce binary');
+    // Check WASM magic number
+    assert(result.output.binary[0] === 0x00, 'Should have WASM magic');
+    assert(result.output.binary[1] === 0x61, 'Should have WASM magic');
+  }),
+
+  () => test('compileToC() produces C source', () => {
+    const result = compileToC(testSource);
+    assert(result.success, 'C compilation should succeed');
+    assert(typeof result.output.source === 'string', 'Should produce source');
+    assert(result.output.source.includes('#include'), 'Should have includes');
+    assert(result.output.source.includes('int main'), 'Should have main');
+    assert(result.output.makefile, 'Should have Makefile');
+  }),
+
+  () => test('compileToHIR() produces HIR text', () => {
+    const result = compileToHIR(testSource);
+    assert(result.success, 'HIR compilation should succeed');
+    assert(typeof result.output.text === 'string', 'Should produce text');
+    assert(result.output.hir, 'Should have HIR module');
+  }),
+
+  // Optimization level tests
+  () => test('O0 optimization level works', () => {
+    const result = compile(testSource, {
+      optimizationLevel: OptimizationLevel.NONE,
+    });
+    assert(result.success, 'Should compile with O0');
+  }),
+
+  () => test('O3 optimization level works', () => {
+    const result = compile(testSource, {
+      optimizationLevel: OptimizationLevel.AGGRESSIVE,
+    });
+    assert(result.success, 'Should compile with O3');
+  }),
+
+  // Error handling tests
+  () => test('compile() handles syntax errors', () => {
+    const badSource = 'fn broken( = )';
+    const result = compile(badSource);
+    assert(!result.success, 'Should fail on syntax error');
+    assert(result.error, 'Should have error info');
+    assert(result.error.stage === 'parse', 'Should fail at parse stage');
+  }),
+
+  // Complex source tests
+  () => test('compiles functions with blocks', () => {
+    const source = `
+fn compute(x) {
+  y = x * 2
+  z = y + 1
+  return z
+}
+`;
+    const result = compile(source);
+    assert(result.success, 'Should compile block functions');
+  }),
+
+  () => test('compiles conditionals', () => {
+    const source = `
+fn max(a, b) = if (a > b) { a } else { b }
+`;
+    const result = compile(source);
+    assert(result.success, 'Should compile conditionals');
+  }),
+
+  // Options tests
+  () => test('printHIR option works', () => {
+    const result = compile(testSource, { printHIR: true });
+    assert(result.success, 'Should compile with printHIR');
+  }),
+
+  () => test('different targets produce different outputs', () => {
+    const wasmResult = compileToWasm(testSource);
+    const cResult = compileToC(testSource);
+    const hirResult = compileToHIR(testSource);
+
+    assert(wasmResult.success, 'WASM should succeed');
+    assert(cResult.success, 'C should succeed');
+    assert(hirResult.success, 'HIR should succeed');
+
+    // Verify they're different
+    assert(wasmResult.output.binary, 'WASM has binary');
+    assert(cResult.output.source, 'C has source');
+    assert(hirResult.output.text, 'HIR has text');
+  }),
+];
+
+// ============================================================================
+// RUN TESTS
+// ============================================================================
+
+console.log('Stone Compiler Integration Tests');
+console.log('='.repeat(50));
+console.log('');
+
+let passed = 0;
+let failed = 0;
+
+for (const testFn of tests) {
+  if (testFn()) {
+    passed++;
+  } else {
+    failed++;
+  }
+}
+
+console.log('');
+console.log('='.repeat(50));
+console.log(`Results: ${passed} passed, ${failed} failed`);
+
+process.exit(failed > 0 ? 1 : 0);

package/cli/viewer/index.html

@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stone Viewer</title>
+  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #0d1117;
+      color: #e6edf3;
+      min-height: 100vh;
+    }
+    header {
+      background: #161b22;
+      border-bottom: 1px solid #30363d;
+      padding: 12px 20px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    header h1 {
+      font-size: 16px;
+      font-weight: 500;
+      color: #e6edf3;
+    }
+    header .session-id {
+      font-family: monospace;
+      font-size: 12px;
+      color: #7d8590;
+      background: #21262d;
+      padding: 4px 8px;
+      border-radius: 4px;
+    }
+    .container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+      gap: 20px;
+      padding: 20px;
+    }
+    .terminal {
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .terminal-header {
+      background: #21262d;
+      padding: 10px 14px;
+      border-bottom: 1px solid #30363d;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .terminal-type {
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: #7d8590;
+      background: #30363d;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+    .terminal-title {
+      font-size: 13px;
+      font-weight: 500;
+      color: #e6edf3;
+    }
+    .terminal-body {
+      padding: 14px;
+    }
+    .console-lines {
+      font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+      font-size: 13px;
+      max-height: 400px;
+      overflow-y: auto;
+      line-height: 1.5;
+    }
+    .console-line {
+      padding: 1px 0;
+      color: #e6edf3;
+    }
+    .graph {
+      min-height: 350px;
+    }
+    .status {
+      position: fixed;
+      bottom: 16px;
+      right: 16px;
+      padding: 8px 14px;
+      background: #21262d;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #7d8590;
+    }
+    .status.connected .status-dot { background: #3fb950; }
+    .status.disconnected .status-dot { background: #f85149; }
+    .status.connecting .status-dot { background: #d29922; animation: pulse 1s infinite; }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    .empty-state {
+      text-align: center;
+      padding: 60px 20px;
+      color: #7d8590;
+    }
+    .empty-state h2 {
+      font-size: 18px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: #e6edf3;
+    }
+    .empty-state p {
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Stone Viewer</h1>
+    <span class="session-id" id="session-id"></span>
+  </header>
+
+  <div class="container" id="terminals">
+    <div class="empty-state" id="empty-state">
+      <h2>Waiting for output...</h2>
+      <p>Terminals will appear here as they are created by your script.</p>
+    </div>
+  </div>
+
+  <div class="status connecting" id="status">
+    <div class="status-dot"></div>
+    <span id="status-text">Connecting...</span>
+  </div>
+
+  <script>
+    // Extract session ID from URL
+    const sessionId = window.location.pathname.split('/')[2];
+    document.getElementById('session-id').textContent = sessionId;
+
+    const container = document.getElementById('terminals');
+    const emptyState = document.getElementById('empty-state');
+    const statusEl = document.getElementById('status');
+    const statusText = document.getElementById('status-text');
+    let terminals = {};
+    let hasTerminals = false;
+
+    // WebSocket connection
+    const wsUrl = `ws://${location.host}/ws/${sessionId}`;
+    let ws;
+    let reconnectAttempts = 0;
+    const maxReconnectAttempts = 10;
+
+    function connect() {
+      ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {
+        reconnectAttempts = 0;
+        statusEl.className = 'status connected';
+        statusText.textContent = 'Connected';
+      };
+
+      ws.onclose = () => {
+        statusEl.className = 'status disconnected';
+        statusText.textContent = 'Disconnected';
+
+        if (reconnectAttempts < maxReconnectAttempts) {
+          reconnectAttempts++;
+          const delay = Math.min(1000 * Math.pow(2, reconnectAttempts - 1), 10000);
+          statusText.textContent = `Reconnecting in ${delay/1000}s...`;
+          setTimeout(connect, delay);
+        }
+      };
+
+      ws.onerror = () => {
+        statusEl.className = 'status disconnected';
+        statusText.textContent = 'Connection error';
+      };
+
+      ws.onmessage = (e) => {
+        const msg = JSON.parse(e.data);
+        handleMessage(msg);
+      };
+    }
+
+    function handleMessage(msg) {
+      switch (msg.type) {
+        case 'init':
+          for (const [id, data] of Object.entries(msg.terminals || {})) {
+            createTerminal(id, data.type, data.config);
+            if (data.data && data.data.length > 0) {
+              updateTerminal(id, data.type, data.data, false);
+            }
+          }
+          break;
+
+        case 'terminal:create':
+          createTerminal(msg.id, msg.terminalType, msg.config);
+          break;
+
+        case 'terminal:add':
+          updateTerminal(msg.id, terminals[msg.id]?.type, msg.data, true);
+          break;
+
+        case 'terminal:set':
+          updateTerminal(msg.id, terminals[msg.id]?.type, msg.data, false);
+          break;
+
+        case 'terminal:clear':
+          clearTerminal(msg.id);
+          break;
+      }
+    }
+
+    function createTerminal(id, type, config) {
+      if (terminals[id]) return;
+
+      // Hide empty state
+      if (!hasTerminals) {
+        hasTerminals = true;
+        emptyState.style.display = 'none';
+      }
+
+      const div = document.createElement('div');
+      div.className = 'terminal';
+      div.id = `terminal-${id}`;
+
+      const header = document.createElement('div');
+      header.className = 'terminal-header';
+
+      const typeLabel = document.createElement('span');
+      typeLabel.className = 'terminal-type';
+      typeLabel.textContent = type;
+      header.appendChild(typeLabel);
+
+      const title = document.createElement('span');
+      title.className = 'terminal-title';
+      title.textContent = config.title || id;
+      header.appendChild(title);
+
+      div.appendChild(header);
+
+      const body = document.createElement('div');
+      body.className = 'terminal-body';
+
+      if (type === 'console') {
+        const lines = document.createElement('div');
+        lines.className = 'console-lines';
+        lines.id = `lines-${id}`;
+        body.appendChild(lines);
+      } else {
+        const graph = document.createElement('div');
+        graph.className = 'graph';
+        graph.id = `graph-${id}`;
+        body.appendChild(graph);
+      }
+
+      div.appendChild(body);
+      container.appendChild(div);
+      terminals[id] = { type, config, element: div, data: [] };
+    }
+
+    function updateTerminal(id, type, data, append) {
+      const terminal = terminals[id];
+      if (!terminal) return;
+
+      const items = Array.isArray(data) ? data : [data];
+
+      if (append) {
+        terminal.data.push(...items);
+      } else {
+        terminal.data = items;
+      }
+
+      if (type === 'console') {
+        renderConsole(id, terminal.data, append);
+      } else if (type === 'graph2d') {
+        renderGraph2D(id, terminal.data, terminal.config);
+      } else if (type === 'graph3d') {
+        renderGraph3D(id, terminal.data, terminal.config);
+      }
+    }
+
+    function clearTerminal(id) {
+      const terminal = terminals[id];
+      if (!terminal) return;
+
+      terminal.data = [];
+
+      if (terminal.type === 'console') {
+        const linesEl = document.getElementById(`lines-${id}`);
+        if (linesEl) linesEl.innerHTML = '';
+      } else {
+        const graphEl = document.getElementById(`graph-${id}`);
+        if (graphEl) Plotly.purge(graphEl);
+      }
+    }
+
+    function renderConsole(id, lines, append) {
+      const linesEl = document.getElementById(`lines-${id}`);
+      if (!linesEl) return;
+
+      if (!append) linesEl.innerHTML = '';
+
+      const itemsToRender = append ? lines.slice(-lines.length) : lines;
+      for (const item of itemsToRender) {
+        const line = document.createElement('div');
+        line.className = 'console-line';
+        line.textContent = String(item);
+        linesEl.appendChild(line);
+      }
+      linesEl.scrollTop = linesEl.scrollHeight;
+    }
+
+    // Convert StoneArray to regular JS array
+    function stoneArrayToJS(arr) {
+      if (!arr || arr._type !== 'StoneArray') return arr;
+      const data = arr.data;
+      // Handle both typed array (ArrayBuffer) and serialized object format
+      if (ArrayBuffer.isView(data)) {
+        return Array.from(data);
+      } else if (Array.isArray(data)) {
+        return data;
+      } else if (typeof data === 'object') {
+        // Serialized JSON format: {"0": val, "1": val, ...}
+        const size = arr.size || Object.keys(data).length;
+        const result = [];
+        for (let i = 0; i < size; i++) {
+          result.push(data[i]);
+        }
+        return result;
+      }
+      return [];
+    }
+
+    // Process Stone plot data to Plotly format
+    function processPlotData(plot) {
+      const type = plot.type || 'line';
+
+      // Extract x/y data - handle y-only case by auto-generating x
+      let x = plot.x;
+      let y = plot.y;
+
+      // Handle StoneArray format first
+      if (x && x._type === 'StoneArray') {
+        x = stoneArrayToJS(x);
+      }
+      if (y && y._type === 'StoneArray') {
+        y = stoneArrayToJS(y);
+      }
+
+      // If only y is provided, generate x as indices
+      if (y && !x) {
+        const yArr = Array.isArray(y) ? y : [];
+        x = yArr.map((_, i) => i);
+      }
+
+      // Convert Stone types to Plotly types
+      const color = plot.style?.color || plot.color || null;
+
+      switch (type) {
+        case 'line':
+          return {
+            x: x || [],
+            y: y || [],
+            type: 'scatter',
+            mode: 'lines+markers',
+            name: plot.title || plot.name || plot.label || 'Line',
+            line: { color: color, width: plot.style?.lineWidth || 2 },
+            marker: { color: color, size: plot.style?.markerSize || 5 }
+          };
+        case 'scatter':
+          return {
+            x: x || [],
+            y: y || [],
+            type: 'scatter',
+            mode: 'markers',
+            name: plot.title || plot.name || plot.label || 'Scatter',
+            marker: { color: color, size: plot.style?.markerSize || 8 }
+          };
+        case 'bar':
+          return {
+            x: x || plot.labels || [],
+            y: y || plot.values || [],
+            type: 'bar',
+            name: plot.title || plot.name || plot.label || 'Bar',
+            marker: { color: color }
+          };
+        case 'area':
+          return {
+            x: x || [],
+            y: y || [],
+            type: 'scatter',
+            mode: 'lines',
+            fill: 'tozeroy',
+            name: plot.title || plot.name || plot.label || 'Area',
+            line: { color: color }
+          };
+        default:
+          // Pass through for already-Plotly-formatted data
+          return {
+            x: x || [],
+            y: y || [],
+            type: plot.type || 'scatter',
+            mode: plot.mode || 'lines+markers',
+            name: plot.title || plot.name || plot.label || 'Plot',
+            line: plot.line || { color: color },
+            marker: plot.marker || { color: color }
+          };
+      }
+    }
+
+    function renderGraph2D(id, plots, config) {
+      const graphEl = document.getElementById(`graph-${id}`);
+      if (!graphEl) return;
+
+      const traces = plots.map((plot, i) => {
+        const processed = processPlotData(plot);
+        if (!processed.name || processed.name === 'Line' || processed.name === 'Plot') {
+          processed.name = `Series ${i + 1}`;
+        }
+        return processed;
+      });
+
+      const layout = {
+        title: { text: config.title || '', font: { color: '#e6edf3', size: 14 } },
+        xaxis: {
+          title: config.x_label || 'x',
+          color: '#7d8590',
+          gridcolor: '#30363d',
+          zerolinecolor: '#30363d',
+        },
+        yaxis: {
+          title: config.y_label || 'y',
+          color: '#7d8590',
+          gridcolor: '#30363d',
+          zerolinecolor: '#30363d',
+        },
+        paper_bgcolor: '#161b22',
+        plot_bgcolor: '#161b22',
+        font: { color: '#e6edf3' },
+        margin: { t: 50, r: 30, b: 50, l: 60 },
+        legend: { font: { color: '#e6edf3' } },
+      };
+
+      Plotly.react(graphEl, traces, layout, { responsive: true });
+    }
+
+    function renderGraph3D(id, objects, config) {
+      const graphEl = document.getElementById(`graph-${id}`);
+      if (!graphEl) return;
+
+      const traces = objects.map((obj, i) => ({
+        x: obj.x || [],
+        y: obj.y || [],
+        z: obj.z || [],
+        name: obj.label || `Object ${i + 1}`,
+        type: 'scatter3d',
+        mode: obj.mode || 'markers',
+        marker: { size: obj.size || 3, color: obj.color },
+      }));
+
+      const layout = {
+        title: { text: config.title || '', font: { color: '#e6edf3', size: 14 } },
+        paper_bgcolor: '#161b22',
+        scene: {
+          bgcolor: '#161b22',
+          xaxis: { title: 'x', gridcolor: '#30363d', color: '#7d8590' },
+          yaxis: { title: 'y', gridcolor: '#30363d', color: '#7d8590' },
+          zaxis: { title: 'z', gridcolor: '#30363d', color: '#7d8590' },
+        },
+        font: { color: '#e6edf3' },
+        margin: { t: 50, r: 30, b: 30, l: 30 },
+      };
+
+      Plotly.react(graphEl, traces, layout, { responsive: true });
+    }
+
+    // Start connection
+    connect();
+  </script>
+</body>
+</html>