Render jsx output

voltrevo · Mar 1, 2024 · 5765983 · 5765983
1 parent 06735e2
commit 5765983
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 {