hook up web to vm::rpc

web/public/src/data.ts

@@ -5,28 +5,16 @@ export type FlameGraphNode = {
     children: FlameGraphNode[];
 };
 
-export function flameGraphData(): FlameGraphNode {
+export async function flameGraphData(): Promise<FlameGraphNode> {
-    return JSON.parse(
+    return await fetch("/api/flame-graph")
-        `{"fn":0,"acc":257,"parent":0,"children":[{"fn":18,"acc":251,"parent":0,"children":[{"fn":12,"acc":30,"parent":1,"children":[]}]}]}`,
+        .then((v) => v.json())
-    );
+        .then((v) => v.flameGraph);
 }
 
-export function codeData() {
+export async function codeData(): Promise<string> {
-    return `\
+    return await fetch("/api/source")
-fn add(a, b) {
+        .then((v) => v.json())
-    + a b
+        .then((v) => v.text);
-}
-
-let result = 0;
-let i = 0;
-loop {
-    if >= i 10 {
-        break;
-    }
-    result = add(result, 5);
-    i = + i 1;
-}
-`;
 }
 
 export type CodeCovEntry = {
@@ -36,8 +24,8 @@ export type CodeCovEntry = {
     covers: number;
 };
 
-export function codeCoverageData(): CodeCovEntry[] {
+export async function codeCoverageData(): Promise<CodeCovEntry[]> {
-    return JSON.parse(
+    return await fetch("/api/code-coverage")
-        `[{"index":0,"line":1,"col":1,"covers":2},{"index":28,"line":5,"col":1,"covers":1},{"index":44,"line":6,"col":1,"covers":1},{"index":55,"line":7,"col":1,"covers":1},{"index":66,"line":8,"col":5,"covers":11},{"index":104,"line":11,"col":5,"covers":10},{"index":19,"line":2,"col":5,"covers":10},{"index":133,"line":12,"col":5,"covers":10},{"index":87,"line":9,"col":9,"covers":1}]`,
+        .then((v) => v.json())
-    );
+        .then((v) => v.codeCoveragea);
 }

web/public/src/index.ts

@@ -1,22 +1,16 @@
-import {
+import * as data from "./data.ts";
-    CodeCovEntry,
-    codeCoverageData,
-    codeData,
-    flameGraphData,
-    FlameGraphNode,
-} from "./data.ts";
 
 function loadCodeCoverage(
     text: string,
-    data: CodeCovEntry[],
+    data: data.CodeCovEntry[],
     container: HTMLPreElement,
     tooltip: HTMLElement,
 ) {
     const entries = data.toSorted((
-        a: CodeCovEntry,
+        a: data.CodeCovEntry,
-        b: CodeCovEntry,
+        b: data.CodeCovEntry,
     ) => b.index - a.index);
-    const charEntries: { [key: string]: CodeCovEntry } = {};
+    const charEntries: { [key: string]: data.CodeCovEntry } = {};
     const elements: HTMLElement[] = [];
     let line = 1;
     let col = 1;
@@ -97,7 +91,7 @@ function loadCodeCoverage(
 type FlameGraphFnNames = { [key: number]: string };
 
 function loadFlameGraph(
-    flameGraphData: FlameGraphNode,
+    flameGraphData: data.FlameGraphNode,
     fnNames: FlameGraphFnNames,
     flameGraphDiv: HTMLDivElement,
 ) {
@@ -127,10 +121,10 @@ function loadFlameGraph(
     const nodes: Node[] = [];
 
     function calculateNodeRects(
-        node: FlameGraphNode,
+        node: data.FlameGraphNode,
         depth: number,
-        totalAcc: FlameGraphNode["acc"],
+        totalAcc: data.FlameGraphNode["acc"],
-        offsetAcc: FlameGraphNode["acc"],
+        offsetAcc: data.FlameGraphNode["acc"],
     ) {
         const x = (offsetAcc / totalAcc) * canvas.width;
         const y = canvas.height - 30 * depth - 30;
@@ -194,7 +188,7 @@ function loadFlameGraph(
     });
 }
 
-function main() {
+async function main() {
     type RenderFns = {
         "source-code": () => void;
         "code-coverage": () => void;
@@ -224,14 +218,18 @@ function main() {
         return lineElement;
     }
 
+    const codeData = await data.codeData();
+    const codeCoverageData = await data.codeCoverageData();
+    const flameGraphData = await data.flameGraphData();
+
     const view = document.querySelector("#view")!;
     const renderFunctions: RenderFns = {
         "source-code": () => {
             const container = document.createElement("div");
             container.classList.add("code-container");
-            const lines = createLineElement(codeData());
+            const lines = createLineElement(codeData);
             const code = document.createElement("pre");
-            code.innerText = codeData();
+            code.innerText = codeData;
             container.append(lines, code);
             view.replaceChildren(container);
         },
@@ -242,8 +240,13 @@ function main() {
             tooltip.id = "covers-tooltip";
             tooltip.hidden = true;
             const code = document.createElement("pre");
-            loadCodeCoverage(codeData(), codeCoverageData(), code, tooltip);
+            loadCodeCoverage(
-            const lines = createLineElement(codeData());
+                codeData,
+                codeCoverageData,
+                code,
+                tooltip,
+            );
+            const lines = createLineElement(codeData);
             container.append(lines, code);
             const view = document.querySelector("#view")!;
             view.replaceChildren(container, tooltip);
@@ -252,7 +255,7 @@ function main() {
             const container = document.createElement("div");
             const view = document.querySelector("#view")!;
             view.replaceChildren(container);
-            loadFlameGraph(flameGraphData(), {
+            loadFlameGraph(flameGraphData, {
                 0: "<entry>",
                 12: "add",
                 18: "main",

web/runtime.ts

@@ -27,8 +27,9 @@ export class RuntimeConnection {
         while (true) {
             const buf = new Uint8Array(256);
             const readRes = await this.connection.read(buf);
-            result += new TextDecoder().decode(buf);
+            if (readRes != null) {
-            if (readRes == null) {
+                result += new TextDecoder().decode(buf.slice(0, readRes));
+            } else {
                 break;
             }
         }