tapmach 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# tapmach
+
+**tapmach** tape-based programming language designed for visual execution and extreme simplicity. It focuses on manipulating a dynamic array of cells through a clean, terminal-inspired interface.
+
+>[!note]
+> All the claims of performance are restrained by the execution speed of javascript. So don't really think this can beat C or other high performance programming languages.
+
+---
+
+### 🚀 Getting Started
+
+To run the Tapmach environment, ensure you have **Bun** installed, then execute:
+
+```bash
+bun run index.ts
+```
+
+The server will start at `http://localhost:3000`. Use the built-in editor to write your code and hit the **Run** button to see the tape come to life. To stop the server, press `q` in your terminal.
+
+---
+
+### 📜 Language Reference
+
+Tapmach operates on a **Tape** (a sequence of cells). You interact with the "current" cell by creating, modifying, or destroying it.
+
+| Instruction | Description |
+| :--- | :--- |
+| `create_cell` | Appends a new cell to the end of the tape with an initial value of `0`. |
+| `add <number>` | Adds the specified integer to the value of the currently active cell. |
+| `destroy_cell`| Removes the current cell from the tape with a visual collapse animation. |
+
+>[!note]
+> Every line in Tapmach is treated as a distinct operation followed by a 1-second delay to allow the visual animations to complete.
+
+---
+
+### 🛠 Technical Architecture
+
+The project is built with a high-performance, "HTML-First" mindset:
+
+* **Runtime:** Powered by **Bun** for fast I/O and dev-server capabilities.
+* **Frontend:** Pure HTML/CSS/JS.
+* **Styling:** Features a minimalist UI.
+* **State:** Code is automatically persisted to `localStorage` using a debounced saving mechanism, ensuring you never lose your work.
+
+---
+
+### 🎨 Design Goals
+
+* **Minimalist UI:** No clutter, just the tape and the code.
+* **Performance:** Lightweight execution with minimal dependencies (`ansis` for terminal styling and `Bun.serve` for the backend).

package/dist/index.js

@@ -0,0 +1,565 @@
+// @bun
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+
+// node_modules/ansis/index.cjs
+var require_ansis = __commonJS((exports, module) => {
+  var e;
+  var t;
+  var r;
+  var { defineProperty: l, setPrototypeOf: n, create: o, keys: s } = Object;
+  var i = "";
+  var { round: c, max: a } = Math;
+  var p = (e2) => {
+    let t2 = /([a-f\d]{3,6})/i.exec(e2)?.[1], r2 = t2?.length, l2 = parseInt(6 ^ r2 ? 3 ^ r2 ? "0" : t2[0] + t2[0] + t2[1] + t2[1] + t2[2] + t2[2] : t2, 16);
+    return [l2 >> 16 & 255, l2 >> 8 & 255, 255 & l2];
+  };
+  var u = (e2, t2, r2) => e2 ^ t2 || t2 ^ r2 ? 16 + 36 * c(e2 / 51) + 6 * c(t2 / 51) + c(r2 / 51) : 8 > e2 ? 16 : e2 > 248 ? 231 : c(24 * (e2 - 8) / 247) + 232;
+  var d = (e2) => {
+    let t2, r2, l2, n2, o2;
+    return 8 > e2 ? 30 + e2 : 16 > e2 ? e2 - 8 + 90 : (232 > e2 ? (o2 = (e2 -= 16) % 36, t2 = (e2 / 36 | 0) / 5, r2 = (o2 / 6 | 0) / 5, l2 = o2 % 6 / 5) : t2 = r2 = l2 = (10 * (e2 - 232) + 8) / 255, n2 = 2 * a(t2, r2, l2), n2 ? 30 + (c(l2) << 2 | c(r2) << 1 | c(t2)) + (2 ^ n2 ? 0 : 60) : 30);
+  };
+  var f = (() => {
+    let r2 = (e2) => o2.some((t2) => e2.test(t2)), l2 = globalThis, n2 = l2.process ?? {}, o2 = n2.argv ?? [], i2 = n2.env ?? {}, c2 = -1;
+    try {
+      e = "," + s(i2).join(",");
+    } catch (e2) {
+      i2 = {}, c2 = 0;
+    }
+    let a2 = "FORCE_COLOR", p2 = { false: 0, 0: 0, 1: 1, 2: 2, 3: 3 }[i2[a2]] ?? -1, u2 = a2 in i2 && p2 || r2(/^--color=?(true|always)?$/);
+    return u2 && (c2 = p2), ~c2 || (c2 = ((r3, l3, n3) => (t = r3.TERM, { "24bit": 3, truecolor: 3, ansi256: 2, ansi: 1 }[r3.COLORTERM] || (r3.CI ? /,GITHUB/.test(e) ? 3 : 1 : l3 && t !== "dumb" ? n3 ? 3 : /-256/.test(t) ? 2 : 1 : 0)))(i2, !!i2.PM2_HOME || i2.NEXT_RUNTIME?.includes("edge") || !!n2.stdout?.isTTY, n2.platform === "win32")), !p2 || i2.NO_COLOR || r2(/^--(no-color|color=(false|never))$/) ? 0 : l2.window?.chrome || u2 && !c2 ? 3 : c2;
+  })();
+  var g = { open: i, close: i };
+  var h = 39;
+  var b = 49;
+  var O = {};
+  var m = ({ p: e2 }, { open: t2, close: l2 }) => {
+    let o2 = (e3, ...r2) => {
+      if (!e3) {
+        if (t2 && t2 === l2)
+          return t2;
+        if ((e3 ?? i) === i)
+          return i;
+      }
+      let n2, s3 = e3.raw ? String.raw({ raw: e3 }, ...r2) : i + e3, c3 = o2.p, a2 = c3.o, p2 = c3.c;
+      if (s3.includes("\x1B"))
+        for (;c3; c3 = c3.p) {
+          let { open: e4, close: t3 } = c3, r3 = t3.length, l3 = i, o3 = 0;
+          if (r3)
+            for (;~(n2 = s3.indexOf(t3, o3)); o3 = n2 + r3)
+              l3 += s3.slice(o3, n2) + e4;
+          s3 = l3 + s3.slice(o3);
+        }
+      return a2 + (s3.includes(`
+`) ? s3.replace(/(\r?\n)/g, p2 + "$1" + a2) : s3) + p2;
+    }, s2 = t2, c2 = l2;
+    return e2 && (s2 = e2.o + t2, c2 = l2 + e2.c), n(o2, r), o2.p = { open: t2, close: l2, o: s2, c: c2, p: e2 }, o2.open = s2, o2.close = c2, o2;
+  };
+  var w = new function e2(t2 = f) {
+    let s2 = { Ansis: e2, level: t2, isSupported: () => a2, strip: (e3) => e3.replace(/[\u001B\u009B][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, i), extend(e3) {
+      for (let t3 in e3) {
+        let r2 = e3[t3], l2 = (typeof r2)[0];
+        l2 === "s" ? (c2(t3, T(...p(r2))), c2(_(t3), v(...p(r2)))) : c2(t3, r2, l2 === "f");
+      }
+      return r = o({}, O), n(s2, r), s2;
+    } }, c2 = (e3, t3, r2) => {
+      O[e3] = { get() {
+        let n2 = r2 ? (...e4) => m(this, t3(...e4)) : m(this, t3);
+        return l(this, e3, { value: n2 }), n2;
+      } };
+    }, a2 = t2 > 0, w2 = (e3, t3) => a2 ? { open: `\x1B[${e3}m`, close: `\x1B[${t3}m` } : g, y = (e3) => (t3) => e3(...p(t3)), R = (e3, t3) => (r2, l2, n2) => w2(`${e3}8;2;${r2};${l2};${n2}`, t3), $ = (e3, t3) => (r2, l2, n2) => w2(((e4, t4, r3) => d(u(e4, t4, r3)))(r2, l2, n2) + e3, t3), x = (e3) => (t3, r2, l2) => e3(u(t3, r2, l2)), T = R(3, h), v = R(4, b), C = (e3) => w2("38;5;" + e3, h), E = (e3) => w2("48;5;" + e3, b);
+    t2 === 2 ? (T = x(C), v = x(E)) : t2 === 1 && (T = $(0, h), v = $(10, b), C = (e3) => w2(d(e3), h), E = (e3) => w2(d(e3) + 10, b));
+    let M, I = { fg: C, bg: E, rgb: T, bgRgb: v, hex: y(T), bgHex: y(v), visible: g, reset: w2(0, 0), bold: w2(1, 22), dim: w2(2, 22), italic: w2(3, 23), underline: w2(4, 24), inverse: w2(7, 27), hidden: w2(8, 28), strikethrough: w2(9, 29) }, _ = (e3) => "bg" + e3[0].toUpperCase() + e3.slice(1), k = "Bright";
+    return "black,red,green,yellow,blue,magenta,cyan,white,gray".split(",").map((e3, t3) => {
+      M = _(e3), 8 > t3 ? (I[e3 + k] = w2(90 + t3, h), I[M + k] = w2(100 + t3, b)) : t3 = 60, I[e3] = w2(30 + t3, h), I[M] = w2(40 + t3, b);
+    }), s2.extend(I);
+  };
+  module.exports = w, w.default = w;
+});
+
+// node_modules/ansis/index.mjs
+var import__ = __toESM(require_ansis(), 1);
+var ansis_default = import__.default;
+
+// src/utils.ts
+async function exit_gracefully(server) {
+  if (process.stdin.isTTY) {
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding("utf8");
+    process.stdin.on("data", async (key) => {
+      if (key.toLowerCase() == "q") {
+        await server.stop();
+        if (process.stdin.isTTY) {
+          process.stdin.setRawMode(false);
+          process.stdin.pause();
+        }
+        process.exit(0);
+      }
+    });
+  }
+}
+
+// src/main.html
+var main_default = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>tapmach</title>
+    <script>
+        const sleep = (ms) => new Promise(res => setTimeout(res, ms));
+    </script>
+    
+    <style>
+        /* Root Colors */
+        :root {
+            --bg: #24273a;
+            --cell-bg: #363a4f;
+            --text: #cad3f5;
+            --size: 40px;
+        }
+
+        /* Body */
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'JetBrains Mono', monospace;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
+        }
+
+        /* Textarea Styles */
+        #textarea {
+            width: 100%;
+            position: absolute;
+            box-sizing: border-box;
+            bottom: 0px;
+            left: 0px;
+            padding: 5px;
+            margin: 0;
+        }
+        textarea {
+            display: block;
+            box-sizing: border-box;
+            width: 100%;
+
+            line-height: 1.6rem;
+            letter-spacing: 0.5%;
+
+            background: #121212;
+            color: #e0e0e0;
+            border: 1px solid #2a2a2a;
+            border-radius: 6px;
+            padding: 10px;
+
+            outline: none;
+            resize: none;
+
+            font-size: 14pt;
+            font-family: "JetBrains Mono", monospace;
+            
+        }
+        textarea:focus {
+            border-color: #444;
+        }
+
+        /* Run Button */
+        .run-btn {
+            background-color: var(--cell-bg);
+            color: var(--text);
+
+            border: 1px solid rgba(202, 211, 245, 0.1);
+            border-radius: 6px;
+            padding: 8px 10px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            outline: none;
+
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            transform-origin: center;
+
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        .run-btn:hover {
+            background-color: #494d64;
+            border-color: var(--text);
+        }
+        .run-btn:active {
+            transform: scale(1.2);
+        }
+
+        /* Speed Control */
+        .speed-control {
+            position: absolute;
+            top: 12px;
+            right: 60px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+            color: var(--text);
+        }
+        .speed-control input {
+            background: var(--cell-bg);
+            color: var(--text);
+            border: 1px solid rgba(202, 211, 245, 0.1);
+            border-radius: 4px;
+            padding: 4px;
+            width: 60px;
+            font-family: 'JetBrains Mono', monospace;
+            outline: none;
+        }
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        /* Scrolling Container */
+        #viewport {
+            width: 98vw;
+            max-height: 45vh;
+            height: 45vh;
+            margin-top: 8vh;
+            overflow-y: auto;
+            white-space: nowrap;
+            padding: 10px;
+            scroll-behavior: smooth;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 4px;
+        }
+        #tape {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, var(--size));
+            gap: 4px;
+            justify-content: center;
+            padding-left: 0;
+            padding-right: 0;
+            gap: 0;
+        }
+
+        /* Cell Styling */
+        .cell {
+            width: var(--size);
+            height: var(--size);
+            background: var(--cell-bg);
+            border: 1px solid var(--bg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            box-sizing: border-box;
+            flex-shrink: 0;
+        }
+        .cell.active {
+            border: 1px solid #a6da95;
+        }
+
+        /* Animations */
+        @keyframes create {
+            0% { transform: scale(0); opacity: 0; background: var(--cell-bg); }
+            100% { transform: scale(1); opacity: 1; background: var(--cell-bg); }
+        }
+        .animate-create {
+            animation: create 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        @keyframes update {
+            0% { box-shadow: none; transform: scale(1); }
+            50% { box-shadow: none; transform: scale(1.2); z-index: 10; background: #494d64; }
+            100% { box-shadow: none; transform: scale(1); }
+        }
+        .animate-update { animation: update 0.5s ease-out; }
+
+        @keyframes destroy {
+            0% { transform: scale(1); opacity: 1; }
+            100% { transform: scale(0); opacity: 0; width: 0; }
+        }
+        .animate-destroy { animation: destroy 0.3s forwards;}
+
+        /* Styling Of Scrollbars */
+        #viewport::-webkit-scrollbar {
+            width: 3px;
+        }
+        #viewport::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.2);
+        }
+        #viewport::-webkit-scrollbar-thumb {
+            background: #494d64;
+            border-radius: 6px;
+        }
+
+        textarea::-webkit-scrollbar {
+            width: 3px;
+        }
+        textarea::-webkit-scrollbar-track {
+            background-color: #121212;
+            border-radius: 6px;
+        }
+        textarea::-webkit-scrollbar-thumb {
+            background-color: #494d64;
+            border-radius: 6px;
+        }
+    </style>
+</head>
+<body>
+    <div class="speed-control">
+        <label for="speed">Interval (ms):</label>
+        <input type="number" id="speed" value="1000" min="0" step="100">
+    </div>
+    <button class="run-btn">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8 5v14l11-7z"/>
+        </svg>
+    </button>
+
+    <div id="viewport">
+        <div id="tape"></div>
+    </div>
+
+    <div id="textarea">
+        <textarea name="main" id="main-textarea" rows="15" spellcheck="false" autocorrect="off" autofocus></textarea>
+    </div>
+
+    <script>
+        // parse and convert the text to a string
+
+        function parse(text) {
+            const lines = text.split(/\\r?\\n/).filter(str => str.trim() !== "");
+            let tokens = [];
+
+            for (let i = 0; i < lines.length; i++) {
+                let current_tokens = lines[i].split(/\\s+/);
+
+                if (current_tokens.includes('line_end')) {
+                    throw Error("Invalid token in your code -> line_end");
+                }
+
+                current_tokens.map((token) => {
+                    tokens.push(token);
+                })
+
+                tokens.push('line_end')
+            }
+
+            return tokens;
+        }
+
+        function tokenToCode(code, currentToken, nextToken, speed) {
+            if (currentToken === 'create_cell') {
+                code.push('create_cell(');
+            } else if (currentToken === 'destroy_cell') {
+                code.push('destroy_cell(');
+            } else if (currentToken === 'add') {
+                code.push('add(')
+            } else if (currentToken === 'move') {
+                code.push('move(')
+            } else if (!isNaN(currentToken) && currentToken.trim() !== "") {
+                if (nextToken !== 'line_end') {
+                    code.push(\`\${currentToken},\`)
+                } else {
+                    code.push(\`\${currentToken}\`)
+                }
+            } else if (currentToken === 'line_end') {
+                code.push(\`); await sleep(\${speed});\`);
+            } else {
+                throw Error(\`Can't parse the code, wrong instruction: \${currentToken}\`);
+            }
+        }
+
+        function convertToCode(text) {
+            let tokens = parse(text);
+            const speed = document.getElementById('speed').value || 1000;
+            let code = ['(async () => {'];
+
+            for (let i = 0; i < tokens.length; i++) {
+                tokenToCode(code, tokens[i], tokens[i+1], speed);
+            }
+            
+            code.push('})();')
+            code = code.join('');
+
+            return code;
+        }
+    </script>
+    
+    <script id="textarea-content-save">
+        const textarea = document.querySelector('textarea#main-textarea');
+        let lastSavedValue = localStorage.getItem('text-content') || '';
+
+        textarea.value = lastSavedValue;
+
+        function debounce(func, timeout = 500) {
+            let timer;
+            return (...args) => {
+                clearTimeout(timer);
+                timer = setTimeout(() => { func.apply(this, args); }, timeout);
+            }
+        }
+
+        const saveContent = debounce((value) => {
+            if (value === lastSavedValue) return;
+            localStorage.setItem('text-content', value);
+            lastSavedValue = value;
+        }, 1000);
+
+        textarea.addEventListener('input', (e) => saveContent(e.target.value))
+    </script>
+    <script>
+        const inputField = document.getElementById('speed');
+
+        window.addEventListener("load", function() {
+            inputField.value = localStorage.getItem('speed');
+        });
+
+
+        inputField.addEventListener('input', (e) => {
+            localStorage.setItem('speed', e.target.value);
+        })
+    </script>
+
+    <script>
+        const tape = document.getElementById('tape');
+        const viewport = document.getElementById('viewport');
+        let cells = [];
+        let current_cell = 0;
+        let list = [];
+
+        async function update() {
+            if (cells.length === 0) return;
+
+            const target = cells[current_cell];
+
+            target.textContent = list[current_cell];
+
+            target.classList.remove('animate-update');
+            void target.offsetWidth;
+
+            target.classList.add('animate-update')
+        }
+
+        async function create_cell() {
+            const val = 0;
+            const div = document.createElement('div');
+            div.classList.add('cell', 'animate-create', \`i\${list.length+1}\`);
+            div.textContent = val;
+            
+            list.push(val);
+            tape.appendChild(div);
+            cells.push(div);
+            if (list.length === 1) cells[current_cell].classList.add('active');
+
+            viewport.scrollTo({
+                left: viewport.scrollHeight,
+                behavior: 'smooth'
+            });
+        }
+
+        function add(number) {
+            list[current_cell] += number;
+
+            update();
+        }
+
+        async function destroy_cell() {
+            const target = cells[current_cell];
+            if (typeof target === null) return;
+
+            target.classList.add('animate-destroy');
+
+            setTimeout(() => target.remove(), 300);
+            move(-1);
+        }
+
+        async function move(index) {
+            if (current_cell+index < 0 || current_cell+index >= cells.length) return;
+
+            previous_cell = current_cell;
+            current_cell += index;
+            const target = cells[current_cell];
+
+            const rect = target.getBoundingClientRect();
+            const viewportRect = viewport.getBoundingClientRect();
+
+            if (rect.left >= viewportRect.left && rect.right <= viewportRect.right) {
+                cells[previous_cell].classList.remove('active');
+                cells[current_cell].classList.add('active');
+            } else {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                    inline: 'nearest',
+                });
+
+                
+                cells[previous_cell].classList.remove('active');
+                cells[current_cell].classList.add('active');
+            }
+        }
+    </script>
+
+    <script>
+        const button = document.querySelector('.run-btn');
+        button.addEventListener('click', async (e) => {
+            let text = localStorage.getItem('text-content');
+            eval(convertToCode(text));
+        })
+    </script>
+</body>
+</html>
+`;
+
+// src/index.ts
+console.clear();
+var server = Bun.serve({
+  routes: {
+    "/": new Response(main_default, {
+      headers: { "Content-Type": "text/html" }
+    })
+  }
+});
+console.log(`Server running at ${ansis_default.blue.underline(server.url)}`);
+console.log(`Press q to exit...`);
+await exit_gracefully(server);

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tapmach",
+  "version": "0.1.0",
+  "module": "./src/index.ts",
+  "type": "module",
+  "private": false,
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "bun run ./src/index.ts",
+    "build": "bun build ./src/index.ts --outdir ./dist --target bun"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "ansis": "^4.2.0"
+  }
+}