Interpreter demo (#2018)

doc/astro.config.ts

@@ -111,6 +111,10 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: "Interpreter demo",
+          link: "/demo",
+        },
         {
           label: "Limitations",
           link: "/limitations",

doc/src/application/run.ts

@@ -0,0 +1,5 @@
+import { runWorker } from "../application/run-worker.js";
+import Worker from "./run/worker.js?worker";
+
+export const run = async (source: string): Promise<Uint8Array<ArrayBuffer>> =>
+  runWorker(() => new Worker(), source);

doc/src/application/run/worker.ts

@@ -0,0 +1,8 @@
+import init, { run } from "@raviqqe/stak";
+import { handleWorkerMessage } from "../handle-worker-message";
+
+const heapSize: number = 2 ** 20;
+
+handleWorkerMessage(init, (input: string) =>
+  run(input, new Uint8Array(), heapSize),
+);

doc/src/components/Button.module.css

@@ -1,5 +1,5 @@
 .container {
-  composes: boxShadow from "../system.css";
+  composes: boxShadow from "../system.module.css";
   display: flex;
   align-items: center;
   gap: 0.5rem;

doc/src/components/CompilerDemo.astro

@@ -0,0 +1,10 @@
+---
+import { DemoForm } from "./CompilerDemo/DemoForm.jsx";
+import { DemoIo } from "./CompilerDemo/DemoIo.jsx";
+import Demo from "./Demo.astro";
+---
+
+<Demo>
+  <DemoForm client:visible />
+  <DemoIo client:visible />
+</Demo>

doc/src/components/DemoForm.tsx → doc/src/components/CompilerDemo/DemoForm.tsx

@@ -1,14 +1,14 @@
 import { useStore } from "@nanostores/solid";
 import { Boxes, CirclePlay } from "lucide-solid";
 import type { JSX } from "solid-js";
-import * as store from "../stores/demo.js";
-import { Button } from "./Button.jsx";
-import { ButtonGroup } from "./ButtonGroup.jsx";
+import * as store from "../../stores/compiler-demo.js";
+import { Button } from "../Button.jsx";
+import { ButtonGroup } from "../ButtonGroup.jsx";
+import { ErrorMessage } from "../ErrorMessage.jsx";
+import { Field } from "../Field.jsx";
+import { Label } from "../Label.jsx";
+import { TextArea } from "../TextArea.jsx";
 import styles from "./DemoForm.module.css";
-import { ErrorMessage } from "./ErrorMessage.jsx";
-import { Field } from "./Field.jsx";
-import { Label } from "./Label.jsx";
-import { TextArea } from "./TextArea.jsx";
 
 export const DemoForm = (): JSX.Element => {
   const source = useStore(store.source);

doc/src/components/DemoIo.module.css → doc/src/components/CompilerDemo/DemoIo.module.css

@@ -6,7 +6,7 @@
 }
 
 .output {
-  composes: textArea from "../system.css";
+  composes: textArea from "../../system.module.css";
   overflow: auto;
   flex: 1;
   margin: 0;

doc/src/components/DemoIo.tsx → doc/src/components/CompilerDemo/DemoIo.tsx

@@ -1,12 +1,12 @@
 import { useStore } from "@nanostores/solid";
 import type { JSX } from "solid-js";
-import * as store from "../stores/demo.js";
+import * as store from "../../stores/compiler-demo.js";
+import { ErrorMessage } from "../ErrorMessage.jsx";
+import { Field } from "../Field.jsx";
+import { Label } from "../Label.jsx";
+import { Link } from "../Link.jsx";
+import { TextArea } from "../TextArea.jsx";
 import styles from "./DemoIo.module.css";
-import { ErrorMessage } from "./ErrorMessage.jsx";
-import { Field } from "./Field.jsx";
-import { Label } from "./Label.jsx";
-import { Link } from "./Link.jsx";
-import { TextArea } from "./TextArea.jsx";
 
 export const DemoIo = (): JSX.Element => {
   const input = useStore(store.input);

doc/src/components/Demo.astro

@@ -1,10 +1,8 @@
 ---
+import classNames from "classnames";
 import styles from "./Demo.module.css";
-import { DemoForm } from "./DemoForm.jsx";
-import { DemoIo } from "./DemoIo.jsx";
 ---
 
-<div class={styles.container}>
-  <DemoForm client:visible />
-  <DemoIo client:visible />
+<div class={classNames(styles.root, "not-content")}>
+  <slot />
 </div>

doc/src/components/Demo.module.css

@@ -1,7 +1,6 @@
-.container {
+.root {
   display: flex;
   gap: 1.5rem;
-  height: 100%;
 
   @media (max-width: 42rem) {
     flex-direction: column;

doc/src/components/InterpreterDemo.astro

@@ -0,0 +1,10 @@
+---
+import Demo from "./Demo.astro";
+import { DemoForm } from "./InterpreterDemo/DemoForm.jsx";
+import { DemoOutput } from "./InterpreterDemo/DemoOutput.jsx";
+---
+
+<Demo>
+  <DemoForm client:visible />
+  <DemoOutput client:visible />
+</Demo>

doc/src/components/InterpreterDemo/DemoForm.module.css

@@ -0,0 +1,13 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  min-height: 24rem;
+
+  > * {
+    flex: 1;
+  }
+}
+
+.textArea {
+  flex: 1;
+}

doc/src/components/InterpreterDemo/DemoForm.tsx

@@ -0,0 +1,25 @@
+import { useStore } from "@nanostores/solid";
+import type { JSX } from "solid-js";
+import * as store from "../../stores/interpreter-demo.js";
+import { Field } from "../Field.jsx";
+import { Label } from "../Label.jsx";
+import { TextArea } from "../TextArea.jsx";
+import styles from "./DemoForm.module.css";
+
+export const DemoForm = (): JSX.Element => {
+  const source = useStore(store.source);
+
+  return (
+    <form class={styles.root}>
+      <Field>
+        <Label for="source">Program</Label>
+        <TextArea
+          class={styles.textArea}
+          id="source"
+          onChange={(source) => store.source.set(source)}
+          value={source()}
+        />
+      </Field>
+    </form>
+  );
+};

doc/src/components/InterpreterDemo/DemoOutput.module.css

@@ -0,0 +1,18 @@
+.root {
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    flex: 1;
+  }
+}
+
+.output {
+  composes: textArea from "../../system.module.css";
+  flex: 1;
+  margin: 0;
+
+  > pre {
+    margin: 0;
+  }
+}

doc/src/components/InterpreterDemo/DemoOutput.tsx

@@ -0,0 +1,24 @@
+import { useStore } from "@nanostores/solid";
+import type { JSX } from "solid-js";
+import * as store from "../../stores/interpreter-demo.js";
+import { ErrorMessage } from "../ErrorMessage.js";
+import { Field } from "../Field.jsx";
+import { Label } from "../Label.jsx";
+import styles from "./DemoOutput.module.css";
+
+export const DemoOutput = (): JSX.Element => {
+  const output = useStore(store.output);
+  const error = useStore(store.error);
+
+  return (
+    <div class={styles.root}>
+      <Field>
+        <Label for="output">Output</Label>
+        <pre class={styles.output} id="output">
+          {output()}
+        </pre>
+        {error() && <ErrorMessage>{error()?.message}</ErrorMessage>}
+      </Field>
+    </div>
+  );
+};

doc/src/components/TextArea.module.css

@@ -1,5 +1,5 @@
 .container {
-  composes: textArea from "../system.css";
+  composes: textArea from "../system.module.css";
   overflow: auto;
   resize: none;
   font-size: inherit;

doc/src/components/TextArea.tsx

@@ -1,7 +1,9 @@
+import classNames from "classnames";
 import type { JSX } from "solid-js";
 import styles from "./TextArea.module.css";
 
 interface Props {
+  class?: string;
   id?: string;
   onChange: (value: string) => void;
   style?: JSX.CSSProperties;
@@ -10,9 +12,9 @@ interface Props {
 
 export const TextArea = (props: Props): JSX.Element => (
   <textarea
-    class={styles.container}
+    class={classNames(styles.container, props.class)}
     id={props.id}
-    onChange={(event) => props.onChange(event.currentTarget.value)}
+    onInput={(event) => props.onChange(event.currentTarget.value)}
     style={props.style}
     value={props.value}
   >

doc/src/content/docs/demo.mdx

@@ -0,0 +1,10 @@
+---
+title: Interpreter demo
+description: Stak Scheme interpreter demo running on web browsers.
+---
+
+import InterpreterDemo from "../../components/InterpreterDemo.astro";
+
+Stak Scheme can run on many platforms including web browsers. The following is the demo of Stak Scheme built in WASM running on a web page.
+
+<InterpreterDemo />

doc/src/pages/demo.astro → doc/src/pages/compiler-demo.astro

@@ -1,13 +1,13 @@
 ---
-import DemoComponent from "../components/Demo.astro";
+import CompilerDemoComponent from "../components/CompilerDemo.astro";
 ---
 
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href={`${import.meta.env.BASE_URL}/icon.svg`} />
-    <title>Stak Scheme demo</title>
+    <title>Stak Scheme compiler demo</title>
   </head>
   <body>
     <style>
@@ -40,8 +40,12 @@ import DemoComponent from "../components/Demo.astro";
         padding: 1.5rem;
         margin: 0;
         background-color: var(--primary-background-color);
+
+        > * {
+          height: 100%;
+        }
       }
     </style>
-    <DemoComponent />
+    <CompilerDemoComponent />
   </body>
 </html>

doc/src/stores/interpreter-demo.ts

@@ -0,0 +1,35 @@
+import { atom, computed, task } from "nanostores";
+import { run as runProgram } from "../application/run.js";
+
+export const source = atom(
+  `
+(import (scheme base) (scheme write))
+
+(define (fibonacci x)
+  (if (<= x 1)
+     1
+     (+ (fibonacci (- x 1)) (fibonacci (- x 2)))))
+
+(display "Answer: ")
+(write (fibonacci 10))
+(newline)
+  `.trim(),
+);
+
+const run = computed(source, (source) =>
+  task(async () => {
+    try {
+      return await runProgram(source);
+    } catch (error) {
+      return error as Error;
+    }
+  }),
+);
+
+export const output = computed(run, (output) =>
+  output instanceof Error ? null : new TextDecoder().decode(output),
+);
+
+export const error = computed(run, (error) =>
+  error instanceof Error ? error : null,
+);

doc/src/system.css → doc/src/system.module.css

@@ -4,6 +4,7 @@
 
 .textArea {
   composes: boxShadow;
+  font-family: monospace;
   padding: 1rem;
   box-sizing: border-box;
   overflow: auto;