Add demo support for C

Author: tmr232

bun.lockb

@@ -11,6 +11,7 @@
     "web-tree-sitter": "^0.23.0"
   },
   "devDependencies": {
+    "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-go": "^6.0.1",
     "@eslint/js": "^9.9.1",
     "@rollup/plugin-wasm": "^6.2.2",

package.json

@@ -1,10 +1,11 @@
 <script>
   import Demo from "../../frontend/src/lib/Demo.svelte";
-  import demoCode from "./assets/demo.go?raw";
+  import demoCodeGo from "./assets/demo.go?raw";
+  import demoCodeC from "./assets/demo.c?raw";
 </script>
 
 <main>
-  <Demo code={demoCode} />
+  <Demo codeGo={demoCodeGo} codeC={demoCodeC} />
 </main>
 
 <style>

src/demo/src/App.svelte

@@ -0,0 +1,42 @@
+struct tm *getdate(const char *s) {
+    static struct tm tmbuf;
+    struct tm *ret = 0;
+    char *datemsk = getenv("DATEMSK");
+    FILE *f = 0;
+    char fmt[100], *p;
+    int cs;
+
+    pthread_setcancelstate(PTHREAD_CANCEL_DEFERRED, &cs);
+
+    if (!datemsk) {
+        getdate_err = 1;
+        goto out;
+    }
+
+    f = fopen(datemsk, "rbe");
+    if (!f) {
+        if (errno == ENOMEM)
+            getdate_err = 6;
+        else
+            getdate_err = 2;
+        goto out;
+    }
+
+    while (fgets(fmt, sizeof fmt, f)) {
+        p = strptime(s, fmt, &tmbuf);
+        if (p && !*p) {
+            ret = &tmbuf;
+            goto out;
+        }
+    }
+
+    if (ferror(f))
+        getdate_err = 5;
+    else
+        getdate_err = 7;
+out:
+    if (f)
+        fclose(f);
+    pthread_setcancelstate(cs, 0);
+    return ret;
+}

src/demo/src/assets/demo.c

@@ -1,9 +1,32 @@
 <script lang="ts">
   import CodeMirror from "svelte-codemirror-editor";
   import { go } from "@codemirror/lang-go";
+  import { cpp } from "@codemirror/lang-cpp";
   import Graph from "./Graph.svelte";
+  import type { Language } from "../../../control-flow/cfg";
 
-  export let code = "func Example() {\n\tif x {\n\t\treturn\n\t}\n}";
+  export let codeGo = "func Example() {\n\tif x {\n\t\treturn\n\t}\n}";
+  export let codeC = "void main() {\n\tif (x) {\n\t\treturn;\n\t}\n}";
+
+  let languages: {
+    language: Language;
+    text: string;
+  }[] = [
+    { language: "Go" as Language, text: "Go" },
+    { language: "C" as Language, text: "C" },
+  ];
+  let selection = languages[0];
+  let code = codeGo;
+  $: {
+    switch (selection.language) {
+      case "C":
+        code = codeC;
+        break;
+      case "Go":
+        code = codeGo;
+        break;
+    }
+  }
 
   let simplify = true;
   let flatSwitch = false;
@@ -20,14 +43,32 @@
       >
     </div>
   </header>
-  <div>
-    <div class="editor">
-      <CodeMirror
-        bind:value={code}
-        lang={go()}
-        tabSize={4}
-        lineWrapping={true}
-      />
+  <div class="editor">
+    <div class="controls">
+      <select bind:value={selection} on:change={(e) => console.log(selection)}>
+        {#each languages as language}
+          <option value={language}>
+            {language.text}
+          </option>
+        {/each}
+      </select>
+    </div>
+    <div class="codemirror">
+      {#if selection.language === "Go"}
+        <CodeMirror
+          bind:value={codeGo}
+          lang={go()}
+          tabSize={4}
+          lineWrapping={true}
+        />
+      {:else}
+        <CodeMirror
+          bind:value={codeC}
+          lang={cpp()}
+          tabSize={4}
+          lineWrapping={true}
+        />
+      {/if}
     </div>
   </div>
   <div class="graph">
@@ -38,7 +79,7 @@
       <input type="checkbox" id="flatSwitch" bind:checked={flatSwitch} />
       <label for="flatSwitch">Flat Switch</label>
     </div>
-    <Graph {code} {simplify} {flatSwitch} />
+    <Graph {code} language={selection.language} {simplify} {flatSwitch} />
   </div>
 </main>
 
@@ -66,6 +107,10 @@
     margin-top: 1rem;
     margin-left: 1rem;
   }
+
+  .codemirror {
+    padding-top: 1rem;
+  }
   .graph,
   .editor {
     background-color: white;

src/frontend/src/lib/Demo.svelte

@@ -1,29 +1,24 @@
 <script lang="ts">
   import Parser from "web-tree-sitter";
-  import { newCFGBuilder } from "../../../control-flow/cfg";
+  import { newCFGBuilder, type Language } from "../../../control-flow/cfg";
   import { mergeNodeAttrs } from "../../../control-flow/cfg-defs";
   import { graphToDot } from "../../../control-flow/render";
   import { simplifyCFG, trimFor } from "../../../control-flow/graph-ops";
   import { Graphviz } from "@hpcc-js/wasm-graphviz";
-  import { getFirstFunction, initializeParser } from "./utils";
+  import { getFirstFunction, initializeParsers, type Parsers } from "./utils";
 
-  let parser: Parser;
+  let parsers: Parsers;
   let graphviz: Graphviz;
-  let svg: string = "";
-  let ast: string = "";
-  let dot: string = "";
   export let code: string;
+  export let language: Language;
   export let verbose: boolean = false;
   export let simplify: boolean = true;
   export let trim: boolean = true;
   export let flatSwitch: boolean = false;
-  export let showDot: boolean = false;
-  export let showAST: boolean = false;
 
   async function initialize() {
-    parser = await initializeParser();
+    parsers = await initializeParsers();
     graphviz = await Graphviz.load();
-    return { parser, graphviz };
   }
 
   interface RenderOptions {
@@ -33,40 +28,34 @@
     readonly flatSwitch: boolean;
   }
 
-  function renderCode(code: string, options: RenderOptions) {
-    const { trim, simplify, verbose } = options;
-    const tree = parser.parse(code);
+  function renderCode(
+    code: string,
+    language: Language,
+    options: RenderOptions,
+  ) {
+    const { trim, simplify, verbose, flatSwitch } = options;
+    const tree = parsers[language].parse(code);
+    const functionSyntax = getFirstFunction(tree);
+    const builder = newCFGBuilder(language, { flatSwitch });
 
-    const functionNode = getFirstFunction(tree);
+    let cfg = builder.buildCFG(functionSyntax);
 
-    ast = functionNode
-      .toString()
-      .replaceAll(
-        "(",
-        "<div style='margin-left:10px;border-left: 1px #888 solid;'>",
-      )
-      .replaceAll(")", "</div>");
-    console.log(functionNode.childForFieldName("name").text);
-    let builder = newCFGBuilder("Go", { flatSwitch });
-    let cfg = builder.buildCFG(functionNode);
-    if (!cfg) {
-      return;
-    }
+    if (!cfg) return "";
+    if (trim) cfg = trimFor(cfg);
+    if (simplify) cfg = simplifyCFG(cfg, mergeNodeAttrs);
 
-    if (trim) {
-      cfg = trimFor(cfg);
-    }
+    const dot = graphToDot(cfg, verbose);
 
-    if (simplify) {
-      cfg = simplifyCFG(cfg, mergeNodeAttrs);
-    }
-    dot = graphToDot(cfg, verbose);
     return graphviz.dot(dot);
   }
 
-  function renderWrapper(code: string, options: RenderOptions) {
+  function renderWrapper(
+    code: string,
+    language: Language,
+    options: RenderOptions,
+  ) {
     try {
-      return renderCode(code, options);
+      return renderCode(code, language, options);
     } catch (error) {
       return `<p style='border: 2px red solid;'>${error.toString()}</p>`;
     }
@@ -76,23 +65,14 @@
 <div class="results">
   {#await initialize() then}
     <div class="graph">
-      {@html renderWrapper(code, { simplify, verbose, trim, flatSwitch })}
+      {@html renderWrapper(code, language, {
+        simplify,
+        verbose,
+        trim,
+        flatSwitch,
+      })}
     </div>
   {/await}
-  {#if showAST}
-    <br />
-    <details>
-      <summary>AST</summary>
-      {@html ast}
-    </details>
-  {/if}
-  {#if showDot}
-    <br />
-    <details>
-      <summary>DOT</summary>
-      <pre>{dot}</pre>
-    </details>
-  {/if}
 </div>
 
 <style>