Add compiler output to the notebook!

crates/percival-wasm/src/lib.rs

@@ -42,13 +42,23 @@ pub struct CompilerResult(Result<String, String>);
 
 #[wasm_bindgen]
 impl CompilerResult {
+    /// Returns the compiled JavaScript program.
+    pub fn ok(&self) -> Option<String> {
+        self.0.as_ref().ok().cloned()
+    }
+
     /// Returns a string representation of any errors during compilation.
     pub fn err(&self) -> Option<String> {
         self.0.as_ref().err().cloned()
     }
 
-    /// Returns the compiled JavaScript program.
-    pub fn ok(&self) -> Option<String> {
-        self.0.as_ref().ok().cloned()
+    /// Returns `true` if the result is `Ok`.
+    pub fn is_ok(&self) -> bool {
+        self.0.is_ok()
+    }
+
+    /// Returns `true` if the result is `Err`.
+    pub fn is_err(&self) -> bool {
+        self.0.is_err()
     }
 }

package.json

@@ -18,6 +18,7 @@
     "@fontsource/source-serif-pro": "^4.5.0",
     "@sveltejs/vite-plugin-svelte": "1.0.0-next.30",
     "@tsconfig/svelte": "^2.0.1",
+    "ansi_up": "^5.1.0",
     "autoprefixer": "^10.4.0",
     "cssnano": "^5.0.10",
     "katex": "^0.15.1",

src/components/cell/CellInput.svelte

@@ -57,7 +57,7 @@
 
 <div bind:this={editorParent} class:dirty={data.value !== currentValue} />
 
-<style>
+<style lang="postcss">
   .dirty :global(.cm-editor .cm-scroller) {
     @apply border-orange-200;
   }

src/components/cell/CellOutput.svelte

@@ -5,11 +5,21 @@
   import remarkRehype from "remark-rehype";
   import rehypeKatex from "rehype-katex";
   import rehypeStringify from "rehype-stringify";
+  import prettier from "prettier";
+  import parserBabel from "prettier/parser-babel";
+  import AnsiUp from "ansi_up";
+  import { compile } from "percival-wasm";
 
   import type { CellData } from "src/lib/notebook";
 
   export let data: CellData;
 
+  function prettify(code: string): string {
+    return prettier.format(code, { parser: "babel", plugins: [parserBabel] });
+  }
+
+  const ansi_up = new AnsiUp();
+
   const pipeline = unified()
     .use(remarkParse)
     .use(remarkMath)
@@ -19,17 +29,29 @@
 
   $: rendered =
     data.type === "markdown" ? pipeline.processSync(data.value) : null;
+
+  $: compiled = data.type === "code" ? compile(data.value) : null;
 </script>
 
 {#if data.type === "markdown"}
   <div class="markdown-output">
     {@html rendered}
   </div>
+{:else if compiled.is_ok()}
+  <pre class="output">{prettify(compiled.ok())}</pre>
 {:else}
-  <pre class="p-4">{data.value}</pre>
+  <pre class="error">{@html ansi_up.ansi_to_html(compiled.err())}</pre>
 {/if}
 
 <style lang="postcss">
+  .output {
+    @apply mb-1 p-3 rounded-sm bg-green-100 border border-green-300 max-h-64 overflow-y-auto;
+  }
+
+  .error {
+    @apply mb-1 p-3 rounded-sm bg-pink-100 border border-pink-300;
+  }
+
   .markdown-output {
     @apply px-2.5 font-serif text-base max-w-2xl leading-snug;
   }

vite.config.js

@@ -5,7 +5,7 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 export default defineConfig({
   build: {
     target: "esnext",
-    chunkSizeWarningLimit: 1500,
+    chunkSizeWarningLimit: 2500,
   },
   plugins: [svelte()],
   server: {