Dinamically execute instructions on code samples

src/components/InteractiveCode.astro

@@ -1,6 +1,6 @@
 ---
 import { lex } from "../lexer/lexer";
-const {code} = Astro.props;
+const {code, steps} = Astro.props;
 
 /** 
  * Performs the following:
@@ -104,7 +104,7 @@ const codeHtml = highlightCode(trimAndDedent(code));
         line: 0,
         stdout: "",
         ip: 0,
-        inst: [["line", 5]],
+        inst: ${steps},
         done: false,
     }`}
 >
@@ -137,7 +137,7 @@ const codeHtml = highlightCode(trimAndDedent(code));
         line: number,
         stdout: string,
         ip: number,
-        inst: Array<[Instruction, number]>
+        inst: Array<Array<[Instruction, number]>>
         done: boolean,
     }
 
@@ -146,12 +146,15 @@ const codeHtml = highlightCode(trimAndDedent(code));
         const len = data.inst.length;
         const ip = data.ip;
         data.ip += 1;
-        
-        const instructionArr = data.inst[ip]!;
-        switch (instructionArr[0]) {
-            case "line": {
-                data.line = Number(instructionArr[1]);
-                break;
+
+        const instructions = data.inst[ip]!;
+        for (const instructionSet of instructions) {
+            const instructionArr = instructionSet;
+            switch (instructionArr[0]) {
+                case "line": {
+                    data.line = Number(instructionArr[1]);
+                    break;
+                }
             }
         }
 

src/pages/learn/basics/hello-world.mdx

@@ -38,26 +38,5 @@ f(x, y)
 
     f(x, y)
     `}
-    steps={`
-        step {
-            line 1
-        }
-        step {
-            line 1
-            set x 322
-        }
-        step {
-            line 2
-            set y 322
-        }
-        step {
-            line 8
-        }
-        step {
-            line 4
-            push f
-            set x 322
-            set y 322
-        }
-    `}
+    steps={`[ [["line", 1]], [["line", 2]] ]`}
 ></InteractiveCode>