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,
     }
 
@@ -147,13 +147,16 @@ const codeHtml = highlightCode(trimAndDedent(code));
         const ip = data.ip;
         data.ip += 1;
 
-        const instructionArr = data.inst[ip]!;
+        const instructions = data.inst[ip]!;
+        for (const instructionSet of instructions) {
+            const instructionArr = instructionSet;
             switch (instructionArr[0]) {
                 case "line": {
                     data.line = Number(instructionArr[1]);
                     break;
                 }
             }
+        }
 
         if (data.ip >= len) {
             console.log("done");

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

@@ -38,26 +38,5 @@ f(x, y)
 
     f(x, y)
     `}
-    steps={`
+    steps={`[ [["line", 1]], [["line", 2]] ]`}
-        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
-        }
-    `}
 ></InteractiveCode>