From 5765983351d815c8e5aa28fa469e0379946cea05 Mon Sep 17 00:00:00 2001
From: Andrew Morris <voltrevo@gmail.com>
Date: Fri, 1 Mar 2024 11:33:04 +1100
Subject: [PATCH] Render jsx output

---
 website/src/playground/files/index.ts                  | 2 +-
 website/src/playground/files/root/tutorial/alsoJsx.tsx | 7 +++++--
 website/src/playground/index.ts                        | 8 +++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/website/src/playground/files/index.ts b/website/src/playground/files/index.ts
index 55b7cbd0..04ecac20 100644
--- a/website/src/playground/files/index.ts
+++ b/website/src/playground/files/index.ts
@@ -3,8 +3,8 @@ import raw from "./raw.ts";
 
 export const orderedFiles = [
   "/tutorial/hello.ts",
-  "/tutorial/alsoJavaScript.js",
   "/tutorial/alsoJsx.tsx",
+  "/tutorial/alsoJavaScript.js",
   "/tutorial/valueSemantics.ts",
   "/tutorial/cantMutateCaptures.ts",
   "/tutorial/classBehavior.ts",
diff --git a/website/src/playground/files/root/tutorial/alsoJsx.tsx b/website/src/playground/files/root/tutorial/alsoJsx.tsx
index e92bd8a4..4f52865b 100644
--- a/website/src/playground/files/root/tutorial/alsoJsx.tsx
+++ b/website/src/playground/files/root/tutorial/alsoJsx.tsx
@@ -1,4 +1,4 @@
-// You can also use JSX.
+// ValueScript supports JSX 🚀.
 
 export default function main() {
   return greet("world");
@@ -8,7 +8,10 @@ function greet(name: string) {
   return (
     <h1>
       Hello
-      <span style="color: green;">{name}!</span>
+      <span style="color: green;">{name}</span>!
     </h1>
   );
 }
+
+// Note: This is not a react-like framework, it's just a literal evaluation.
+// The nature of frontends in ValueScript is still being explored.
diff --git a/website/src/playground/index.ts b/website/src/playground/index.ts
index 3901d8fd..a77c5682 100644
--- a/website/src/playground/index.ts
+++ b/website/src/playground/index.ts
@@ -174,7 +174,13 @@ let currentFile = "";
 
     renderJob(runJob, outcomeEl, (el, runResult) => {
       if ("Ok" in runResult.output) {
-        el.textContent = runResult.output.Ok;
+        if (/^\s*</.test(runResult.output.Ok)) {
+          el.style.whiteSpace = "normal";
+          el.innerHTML = runResult.output.Ok;
+        } else {
+          el.style.whiteSpace = "";
+          el.textContent = runResult.output.Ok;
+        }
       } else if ("Err" in runResult.output) {
         el.textContent = `Uncaught exception: ${runResult.output.Err}`;
       } else {