blob: 169e696afc0d0ddf6f5c1b0d5c13088ca1986bc1 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baba Yaga Structural Editor - Advanced AST Editing</title>
<link rel="stylesheet" href="styles.css">
<!-- CodeMirror for text editing -->
<link rel="stylesheet" href="../../node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="../../node_modules/codemirror/theme/monokai.css">
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../node_modules/codemirror/addon/edit/closebrackets.js"></script>
<script src="../../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
<script src="../../node_modules/codemirror/addon/fold/foldcode.js"></script>
<script src="../../node_modules/codemirror/addon/fold/foldgutter.js"></script>
<script src="../../node_modules/codemirror/addon/fold/brace-fold.js"></script>
<script src="../../node_modules/codemirror/addon/fold/indent-fold.js"></script>
<!-- Baba Yaga Language Components -->
<script type="module">
// Import Baba Yaga components and make them globally available
import { createLexer, tokenTypes } from '../../lexer.js';
import { createParser } from '../../parser.js';
import { createInterpreter } from '../../interpreter.js';
// Make them globally available
window.createLexer = createLexer;
window.createParser = createParser;
window.createInterpreter = createInterpreter;
window.tokenTypes = tokenTypes;
console.log('Baba Yaga modules loaded and made globally available');
</script>
<!-- Baba Yaga Language Mode - Load after CodeMirror -->
<script src="js/baba-yaga-mode.js"></script>
<!-- Tree-sitter for parsing (optional for now) -->
<script src="https://unpkg.com/tree-sitter@0.20.6/dist/tree-sitter.js"></script>
</head>
<body>
<div class="editor-container">
<!-- Header -->
<header class="editor-header">
<h1>Baba Yaga Structural Editor</h1>
<div class="header-controls">
<button id="parse-btn">Parse</button>
<button id="format-btn">Format</button>
<button id="run-btn">Run</button>
<a href="index.html" style="text-decoration: none; display: inline-block; background-color: #8b5cf6; color: white; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#7c3aed'" onmouseout="this.style.backgroundColor='#8b5cf6'">▶ Code Runner</a>
</div>
</header>
<!-- Main editor area -->
<div class="editor-main">
<!-- Top row: Code editor and AST tree view side by side -->
<div class="top-row">
<!-- Code editor (50% width) -->
<div class="code-editor-panel">
<h3>Code Editor <span id="parse-status" class="parse-status"></span><button id="retry-syntax-btn" class="retry-btn" title="Retry loading syntax highlighting">🔄</button></h3>
<div class="code-editor-container">
<textarea id="code-editor" placeholder="Enter your Baba Yaga code here..."></textarea>
</div>
</div>
<!-- AST Tree View/Editor (50% width) -->
<div class="ast-editor-panel">
<h3>AST Tree Editor <button id="add-function-btn" class="add-btn">+ Function</button><button id="add-when-btn" class="add-btn">+ When</button><button id="add-with-btn" class="add-btn">+ With</button></h3>
<div class="tree-editor-container">
<div id="tree-view"></div>
</div>
</div>
</div>
<!-- Bottom row: Output panel -->
<div class="output-panel">
<h3>Output</h3>
<div class="output-tabs">
<button class="tab-btn active" data-tab="output">Output</button>
<button class="tab-btn" data-tab="errors">Errors</button>
<button class="tab-btn" data-tab="ast-json">AST JSON</button>
</div>
<div class="output-content">
<div id="output-tab" class="tab-pane active">
<pre id="output-text"></pre>
</div>
<div id="errors-tab" class="tab-pane">
<pre id="errors-text"></pre>
</div>
<div id="ast-json-tab" class="tab-pane">
<pre id="ast-json-text"></pre>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/tree-sitter-baba-yaga.js"></script>
<script src="js/editor.js"></script>
<script src="js/ast-synchronizer.js"></script>
<script src="js/main.js"></script>
</body>
</html>
|