Add jsx example to playground

valuescript_vm/src/jsx_element.rs

@@ -137,7 +137,7 @@ impl fmt::Display for JsxElement {
 
 fn write_attributes(f: &mut fmt::Formatter<'_>, attrs: &Vec<(String, Val)>) -> fmt::Result {
   for (key, val) in attrs {
-    write!(f, " {}=\x1b[33m\"{}\"\x1b[39m", key, val)?;
+    write!(f, " {}=\"{}\"", key, val)?;
   }
 
   Ok(())

website/.vscode/settings.json

@@ -4,7 +4,7 @@
     { "rule": "*", "severity": "warn" }
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "editor.tabSize": 2
 }

website/src/playground/files/index.ts

@@ -4,6 +4,7 @@ import raw from "./raw.ts";
 export const orderedFiles = [
   "/tutorial/hello.ts",
   "/tutorial/alsoJavaScript.js",
+  "/tutorial/alsoJsx.tsx",
   "/tutorial/valueSemantics.ts",
   "/tutorial/cantMutateCaptures.ts",
   "/tutorial/classBehavior.ts",

website/src/playground/files/root/tutorial/alsoJsx.tsx

@@ -0,0 +1,14 @@
+// You can also use JSX.
+
+export default function main() {
+  return greet("world");
+}
+
+function greet(name: string) {
+  return (
+    <h1>
+      Hello
+      <span style="color: green;">{name}!</span>
+    </h1>
+  );
+}

website/src/playground/monaco.ts

@@ -30,4 +30,5 @@ monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
 monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
   target: monaco.languages.typescript.ScriptTarget.ESNext,
   allowImportingTsExtensions: true,
+  jsx: monaco.languages.typescript.JsxEmit.Preserve,
 });