From c568e75a9a4b41a1236de1d6b9a9478e4303af5d Mon Sep 17 00:00:00 2001
From: Tom Elliott <tomelliottnz@gmail.com>
Date: Thu, 30 Jan 2025 09:28:32 +1300
Subject: [PATCH] update demo code

---
 vignettes/simple-react-app.Rmd | 192 +++++++++++++++++++++++++++++++++
 1 file changed, 192 insertions(+)

diff --git a/vignettes/simple-react-app.Rmd b/vignettes/simple-react-app.Rmd
index e117026..ffe3765 100644
--- a/vignettes/simple-react-app.Rmd
+++ b/vignettes/simple-react-app.Rmd
@@ -38,6 +38,8 @@ That's it! We'll use `ts_compile()` later to create the server code and Typescri
 
 ## Create the React app
 
+I'm using [Vite](https://vitejs.dev/) to create the app, but you could use any framework. Whatever you use, you'll need to be able to bundle the code (including libraries such as [zod](https://zod.dev)).
+
 ```bash
 pnpm create vite faithful-demo --template vanilla-ts
 cd faithful-demo
@@ -72,5 +74,195 @@ The rest of the process simply requires writing TypeScript code. I won't go into
 
 ```typescript
 // main.ts
+import "./style.css";
 
+import RserveClient from "rserve-ts";
+import faithfulApp from "./faithful-app.rserve";
+import { z } from "zod";
+
+document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
+  <div>
+    <h1>Rserve and TypeScript</h1>
+    <div class="card">
+      Number of bins:
+      <input type="number" id="n" value="10" size="5" />
+      <button id="counter" type="button">Make histogram</button>
+    </div>
+    <div id="hist" style="display: flex; align-items: flex-end; gap: 2px;"></div>
+  </div>
+`;
+
+type FaithfulApp = z.infer<z.ZodObject<typeof faithfulApp>>;
+
+let getHist: FaithfulApp["get_hist"] | undefined = undefined;
+
+async function connectToRserve() {
+  const client = await RserveClient.create({ host: "ws://localhost:6311" });
+  const app = await client.ocap(faithfulApp);
+  console.log("Connected to Rserve: ", app);
+  getHist = app.get_hist;
+}
+connectToRserve();
+
+document
+  .querySelector<HTMLButtonElement>("#counter")!
+  .addEventListener("click", async () => {
+    if (!getHist) return;
+    const Nbin = parseInt(
+      document.querySelector<HTMLInputElement>("#n")!.value
+    );
+    const hist = await getHist(Nbin);
+    const maxY = Math.max(...hist.y);
+
+    const histDiv = document.querySelector<HTMLDivElement>("#hist")!;
+    histDiv.innerHTML = `
+      ${Array.from(hist.y)
+        .map(
+          (yi) =>
+            `<div style="height: ${
+              (yi / maxY) * 180
+            }px; flex: 1; background: pink;"></div>`
+        )
+        .join("")}
+    `;
+  });
 ```
+
+```css
+// style.css
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+input {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  color: #fff;
+  outline: none;
+}
+input:hover {
+  border-color: #646cff;
+}
+input:focus,
+input:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+  input {
+    background-color: #f9f9f9;
+    color: #000;
+  }
+}
+```
+
+## Run the app
+
+To run the app, start the Rserve server:
+
+```bash
+Rscript src/faithful-app.rserve.R
+```
+
+Then start the Vite server:
+
+```bash
+pnpm run dev
+```
+
+You should now be able to see the app running at `http://localhost:5173` (or similar, see the console output).