From c69dd1efb288d410b55c98753f9725eb8cfdd1fa Mon Sep 17 00:00:00 2001 From: Theis Pieter Hollebeek Date: Thu, 12 Dec 2024 11:56:22 +0100 Subject: [PATCH] hook up web to vm::rpc --- web/public/src/data.ts | 36 +++++++++++---------------------- web/public/src/index.ts | 45 ++++++++++++++++++++++------------------- web/runtime.ts | 5 +++-- 3 files changed, 39 insertions(+), 47 deletions(-) diff --git a/web/public/src/data.ts b/web/public/src/data.ts index e633291..484b7bc 100644 --- a/web/public/src/data.ts +++ b/web/public/src/data.ts @@ -5,28 +5,16 @@ export type FlameGraphNode = { children: FlameGraphNode[]; }; -export function flameGraphData(): FlameGraphNode { - return JSON.parse( - `{"fn":0,"acc":257,"parent":0,"children":[{"fn":18,"acc":251,"parent":0,"children":[{"fn":12,"acc":30,"parent":1,"children":[]}]}]}`, - ); +export async function flameGraphData(): Promise { + return await fetch("/api/flame-graph") + .then((v) => v.json()) + .then((v) => v.flameGraph); } -export function codeData() { - return `\ -fn add(a, b) { - + a b -} - -let result = 0; -let i = 0; -loop { - if >= i 10 { - break; - } - result = add(result, 5); - i = + i 1; -} -`; +export async function codeData(): Promise { + return await fetch("/api/source") + .then((v) => v.json()) + .then((v) => v.text); } export type CodeCovEntry = { @@ -36,8 +24,8 @@ export type CodeCovEntry = { covers: number; }; -export function codeCoverageData(): CodeCovEntry[] { - return JSON.parse( - `[{"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}]`, - ); +export async function codeCoverageData(): Promise { + return await fetch("/api/code-coverage") + .then((v) => v.json()) + .then((v) => v.codeCoveragea); } diff --git a/web/public/src/index.ts b/web/public/src/index.ts index 00e35e9..8a6555c 100644 --- a/web/public/src/index.ts +++ b/web/public/src/index.ts @@ -1,22 +1,16 @@ -import { - CodeCovEntry, - codeCoverageData, - codeData, - flameGraphData, - FlameGraphNode, -} from "./data.ts"; +import * as data from "./data.ts"; function loadCodeCoverage( text: string, - data: CodeCovEntry[], + data: data.CodeCovEntry[], container: HTMLPreElement, tooltip: HTMLElement, ) { const entries = data.toSorted(( - a: CodeCovEntry, - b: CodeCovEntry, + a: data.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"], - offsetAcc: FlameGraphNode["acc"], + totalAcc: data.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); - const lines = createLineElement(codeData()); + loadCodeCoverage( + 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: "", 12: "add", 18: "main", diff --git a/web/runtime.ts b/web/runtime.ts index 97fbbce..2970d7d 100644 --- a/web/runtime.ts +++ b/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; } }