Added speculative/preview to commands

src/lib/OpenBirchService.ts

@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 
 // Adds window.runEval into typescript env
-declare function runEval(expression: string): any;
+declare function runEval(expression: string, stopAssignments?: boolean): any;
 
 const OpenBirchHistory: OpenBirchConsoleEntry[] = [];
 
@@ -21,7 +21,14 @@ function createOpenBirchInstance(){
             set(OpenBirchHistory); // Publishes changes to subscribers
 
             //console.log(OpenBirchHistory);
-        }
+        },
+        speculateCommand: (command: string): string => {
+            try {
+                return runEval(command, true);
+            } catch (e) {
+                return '';
+            }
+        }, // TODO: Replace with actual implimentation
     }
 }
 

src/routes/console/+page.svelte

@@ -12,6 +12,12 @@
         if (event.key === 'Enter') {
             pushCommand();
         }
+
+        if (inputField.value == '' && event.key !== 'Enter') return;
+
+        setTimeout(() => {
+            updatePreviewCommand();
+        }, 25);
     }
 
     // Locally start sending command
@@ -19,6 +25,11 @@
         OpenBirch.sendCommand(inputField.value)
         inputField.value = '';
     }
+
+    let previewText: HTMLElement;
+    function updatePreviewCommand(){
+        previewText.innerHTML = OpenBirch.speculateCommand(inputField.value);
+    }
 </script>
 
 <div class="consoleContainer p-4">
@@ -37,16 +48,21 @@
     </div>
 
     <div class="pt-4 join">
-        <div class="input join-item input-bordered flex grow items-center gap-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="h-8 w-8 opacity-70 block m-auto fill-primary">
-              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
-            </svg>
-            <input autofocus type="text" class="grow text-primary" placeholder="" bind:this={inputField} on:keydown={handleKeydown} />
+        <div class="input join-item input-bordered flex items-center grow gap-2 h-20" style="cursor: text;">
+            <div class="w-full">
+                <div class="flex">
+                    <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="h-8 w-8 opacity-70 block m-auto fill-primary">
+                    <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
+                    </svg>
+                    <input autofocus type="text" class="text-primary grow" placeholder="" bind:this={inputField} on:keydown={handleKeydown} />
+                </div>
+                <div class="text-accent opacity-50 italic" bind:this={previewText} style="line-height: 1rem; height: 0;"></div>
+            </div>
         </div>
-        <button class="btn join-item btn-secondary" on:click={pushCommand}>Execute</button>
+        <button class="btn join-item btn-secondary h-20" on:click={pushCommand}>Execute</button>
     </div>
 </div>
 

static/OpenBirchWasm/OpenBirchWrapper.js

@@ -8,7 +8,7 @@ function str2C(s) {
 }
 
 window.runEval = function (inputText, stopAssignments = false) {
-    console.log("input: " + inputText);
+    if (!stopAssignments) console.log("input: " + inputText);
     var inputPtr = str2C(inputText);
     var resultPointer = Module._eval(inputPtr, stopAssignments);
 
@@ -25,7 +25,7 @@ window.runEval = function (inputText, stopAssignments = false) {
             i++;
         }
     }
-    console.log("Result from eval:", resultString);
+    if (!stopAssignments) console.log("Result from eval:", resultString);
 
     // Free allocated memory
     _free(resultPointer);