diff --git a/website/src/playground/files/index.ts b/website/src/playground/files/index.ts index 55b7cbd..04ecac2 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 e92bd8a..4f52865 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 (

Hello - {name}! + {name}!

); } + +// 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 3901d8f..a77c568 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*