Working console in svelte version!!!

jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "target": "ES2020",
+        "jsx": "react",
+        "allowImportingTsExtensions": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}

src/app.html

@@ -9,6 +9,8 @@
 		<!-- IMPORTANT: Remove before production!!! -->
 		<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
 		<script src="https://cdn.tailwindcss.com"></script>
+		<script src="src/lib/OpenBirchWasm/OpenBirchWrapper.js"></script>
+		<script src="src/lib/OpenBirchWasm/OpenBirch.js"></script>
 
 
 	</head>

src/lib/OpenBirchService.ts

@@ -0,0 +1,43 @@
+import { writable } from 'svelte/store';
+
+// Adds window.runEval into typescript env
+declare function runEval(expression: string): any;
+
+const OpenBirchHistory: OpenBirchConsoleEntry[] = [];
+
+
+function createOpenBirchInstance(){
+    const {subscribe, set, update } = writable(OpenBirchHistory);
+
+    return {
+        subscribe,
+        sendCommand: (command: string) => {
+            OpenBirchHistory.push(new OpenBirchConsoleEntry(ConsoleSender.User, command));
+            set(OpenBirchHistory); // Publishes changes to subscribers
+
+            let result: string = runEval(command);
+
+            OpenBirchHistory.push(new OpenBirchConsoleEntry(ConsoleSender.System, result));
+            set(OpenBirchHistory); // Publishes changes to subscribers
+
+            console.log(OpenBirchHistory);
+        }
+    }
+}
+
+export const OpenBirch = createOpenBirchInstance();
+
+class OpenBirchConsoleEntry {
+    sender: ConsoleSender;
+    message: string;
+
+    constructor(sender: ConsoleSender, message: string){
+        this.sender = sender;
+        this.message = message;
+    }
+}
+
+enum ConsoleSender {
+    User,
+    System
+}

src/lib/OpenBirchWasm/OpenBirchWrapper.js

@@ -0,0 +1,34 @@
+// This is old code but works, so i won't touch it ¯\_(ツ)_/¯
+
+function str2C(s) {
+    var size = lengthBytesUTF8(s) + 1;
+    var ret = _malloc(size);
+    stringToUTF8Array(s, HEAP8, ret, size);
+    return ret;
+}
+
+window.runEval = function (inputText) {
+    console.log("input: " + inputText);
+    var inputPtr = str2C(inputText);
+    var resultPointer = Module2._eval(inputPtr);
+
+    var resultString = "";
+
+    // Convert resultPointer (char*) to JavaScript string
+    // Here, we treat it as ASCII and convert byte by byte
+    if (resultPointer) {
+        var i = 0;
+        while (true) {
+            var charCode = Module2.getValue(resultPointer + i, 'i8');
+            if (charCode === 0) break;
+            resultString += String.fromCharCode(charCode);
+            i++;
+        }
+    }
+    console.log("Result from eval:", resultString);
+
+    // Free allocated memory
+    _free(resultPointer);
+
+    return resultString;
+}

src/routes/console/+page.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
+    import { OpenBirch } from "$lib/OpenBirchService";
+
     var test: string[] = ["> bruh", "bruh", "> Ping", "Pong"];
     test = test.concat(test);
     test = test.concat(test);
     test = test.concat(test);
     test = test.concat(test);
+
+    let inputValue: string;
+    async function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Enter') {
+            OpenBirch.sendCommand(inputValue)
+            inputValue = '';
+        }
+    }
 </script>
 
-<div class="consoleContainer" style="height: 92vh;">
+<div class="consoleContainer p-4" style="height: 92vh;">
-    <div class="overflow-auto" style="">
+    <div class="overflow-auto p-4" style="background-color: #191724;">
         <ul>
-            {#each test as item}
+            {#each $OpenBirch as consoleEntry}
-                <li>{item}</li>
+                {#if consoleEntry.sender == 0}
+                    <li>{consoleEntry.message}</li>
+                {:else}
+                    <li>&gt;{" " + consoleEntry.message}</li>
+                {/if}
             {/each}
         </ul>
     </div>
@@ -24,7 +38,7 @@
               class="h-8 w-8 opacity-70 block m-auto">
               <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
             </svg>
-            <input type="text" class="grow" placeholder="Search" />
+            <input type="text" class="grow" placeholder="Search" bind:value={inputValue} on:keydown={handleKeydown} />
           </label>
     </div>
 </div>