website(docs): More playground IDE features

website/package.json

@@ -18,6 +18,7 @@
 				"@astrojs/react": "^1.2.2",
 				"@astrojs/rss": "^1.0.3",
 				"@codemirror/lang-javascript": "^6.1.0",
+				"@codemirror/lint": "^6.0.0",
 				"@codemirror/state": "6.1.2",
 				"@codemirror/view": "6.4.0",
 				"@docsearch/css": "^3.3.0",
@@ -29,7 +30,6 @@
 				"@types/prettier": "^2.7.1",
 				"@types/react": "^17.0.33",
 				"@types/react-dom": "^17.0.10",
-				"@types/react-tabs": "^2.3.4",
 				"@uiw/react-codemirror": "^4.12.4",
 				"@vitejs/plugin-react": "^2.1.0",
 				"astro": "^1.6.7",
@@ -45,7 +45,6 @@
 				"prettier": "^2.7.1",
 				"react": "^17.0.2",
 				"react-dom": "^17.0.2",
-				"react-tabs": "^4.2.1",
 				"rehype-autolink-headings": "^6.1.1",
 				"rehype-slug": "^5.1.0",
 				"rehype-toc": "^3.0.2",

website/src/frontend-scripts/util.ts

@@ -8,8 +8,7 @@ export const matchesDark: undefined | MediaQueryList =
 export function getCurrentTheme(): ThemeName {
 	let currentScheme = window.localStorage.getItem("data-theme");
 	if (currentScheme == null) {
-		currentScheme =
-			matchesDark !== undefined && matchesDark.matches ? "dark" : "light";
+		currentScheme = matchesDark?.matches ? "dark" : "light";
 	}
 	return currentScheme === "dark" ? "dark" : "light";
 }

website/src/pages/playground.astro

@@ -1,7 +1,7 @@
 ---
 import BaseLayout from "/BaseLayout.astro";
 import NavigationSidebar from "/components/NavigationSidebar.astro";
-import "/styles/playground.scss";
+import "/playground/styles/index.scss";
 ---
 
 <BaseLayout title="Rome Playground" bodyClass="playground-body">

website/src/playground/CodeMirror.tsx

@@ -1,15 +1,112 @@
+import type { Diagnostic as RomeDiagnostic } from "@rometools/wasm-web";
 import type {
 	ReactCodeMirrorProps,
 	ReactCodeMirrorRef,
 } from "@uiw/react-codemirror";
+import type { Extension } from "@codemirror/state";
+import type { Diagnostic as CodeMirrorDiagnostic } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
 import RealCodeMirror from "@uiw/react-codemirror";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { useTheme } from "./utils";
+import { lintGutter, setDiagnostics } from "@codemirror/lint";
 
-export default forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>(
-	function CodeMirror(props, ref) {
-		const theme = useTheme();
+interface Props extends ReactCodeMirrorProps {
+	diagnostics?: RomeDiagnostic[];
+}
 
-		return <RealCodeMirror {...props} ref={ref} theme={theme} />;
-	},
-);
+function getDiagnosticMessage(diagnostic: RomeDiagnostic): string {
+	let buf = "";
+	for (const elem of diagnostic.message) {
+		buf += elem.content;
+	}
+	return buf;
+}
+
+function romeDiagnosticsToCodeMirror(
+	rome: RomeDiagnostic[],
+): CodeMirrorDiagnostic[] {
+	const codeMirror: CodeMirrorDiagnostic[] = [];
+
+	for (const diag of rome) {
+		const span = diag.location?.span;
+		if (span === undefined) {
+			continue;
+		}
+
+		let severity: CodeMirrorDiagnostic["severity"];
+		switch (diag.severity) {
+			case "Error":
+			case "Fatal": {
+				severity = "error";
+				break;
+			}
+
+			case "Information": {
+				severity = "info";
+				break;
+			}
+
+			case "Warning": {
+				severity = "warning";
+				break;
+			}
+
+			default: {
+				severity = "error";
+			}
+		}
+
+		codeMirror.push({
+			from: span[0],
+			to: span[1],
+			severity,
+			message: getDiagnosticMessage(diag),
+		});
+	}
+
+	return codeMirror;
+}
+
+function getDefaultExtensions(extensions: Extension[] = []) {
+	return [EditorView.lineWrapping, ...extensions];
+}
+
+export default forwardRef<ReactCodeMirrorRef, Props>(function CodeMirror(
+	{ diagnostics, ...props },
+	ref,
+) {
+	const theme = useTheme();
+
+	let [editor, setEditor] = useState<EditorView>();
+
+	function onCreateEditor(editor: EditorView) {
+		setEditor(editor);
+	}
+
+	const extensions = useMemo(() => {
+		if (diagnostics === undefined) {
+			return getDefaultExtensions(props.extensions);
+		}
+
+		return [lintGutter(), ...getDefaultExtensions(props.extensions)];
+	}, [diagnostics, props.extensions]);
+
+	useEffect(() => {
+		if (editor !== undefined && diagnostics !== undefined) {
+			editor.dispatch(
+				setDiagnostics(editor.state, romeDiagnosticsToCodeMirror(diagnostics)),
+			);
+		}
+	}, [editor, diagnostics]);
+
+	return (
+		<RealCodeMirror
+			{...props}
+			extensions={extensions}
+			onCreateEditor={onCreateEditor}
+			ref={ref}
+			theme={theme}
+		/>
+	);
+});

website/src/playground/Collapsible.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { classnames } from "./utils";
 
 interface Props {
 	className?: string;
@@ -10,19 +11,18 @@ export default function Collapsible(props: Props) {
 	const [visible, setVisible] = useState(true);
 
 	function onClick() {
-		setVisible;
-		//setVisible(!visible);
+		setVisible(!visible);
 	}
 
-	let className = visible ? "" : "collapsed";
-
-	if (props.className != null) {
-		className += ` ${props.className}`;
-	}
+	const className = classnames(!visible && "collapsed", props.className);
 
 	return (
-		<div className={`collapsible-container ${className}`}>
-			<h2 onClick={onClick} onKeyUp={onClick} className={`${className}`}>
+		<div className={classnames("collapsible-container", className)}>
+			<h2
+				onClick={onClick}
+				onKeyUp={onClick}
+				className={classnames("collapsible", className)}
+			>
 				{props.heading}
 			</h2>
 			{visible && <div className="collapsible-content">{props.children}</div>}