Use Monaco for playground typechecking

Author: ushironoko

bun.lock

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@tskm/core": "workspace:*",
+    "monaco-editor": "0.55.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "shiki": "4.2.0",
-    "typescript": "6.0.3"
+    "shiki": "4.2.0"
   },
   "devDependencies": {
     "@tskm/compiler": "workspace:*",

playgrounds/tskm/package.json

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react"
 import { Button } from "./components/Button.tsx"
-import { CodeEditor } from "./components/CodeEditor.tsx"
+import { MonacoEditor } from "./components/MonacoEditor.tsx"
 import { Pane } from "./components/Pane.tsx"
 import { ResultView } from "./components/ResultView.tsx"
 import { SegmentedControl } from "./components/SegmentedControl.tsx"
@@ -171,11 +171,10 @@ export function App() {
               </div>
             }
           >
-            <CodeEditor
+            <MonacoEditor
               label="tskm schema expression"
               value={schemaSource}
               language="typescript"
-              highlighter={highlighter}
               onChange={setSchemaSource}
               minLines={19}
             />
@@ -190,11 +189,10 @@ export function App() {
               </div>
             }
           >
-            <CodeEditor
+            <MonacoEditor
               label="JSON input"
               value={inputSource}
               language="json"
-              highlighter={highlighter}
               diagnostics={inputTypecheck.diagnostics}
               onChange={setInputSource}
               minLines={19}

playgrounds/tskm/src/App.tsx

@@ -0,0 +1,153 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.main.js"
+import { useEffect, useId, useRef } from "react"
+import type { InputTypecheckDiagnostic } from "../lib/typecheck.ts"
+
+interface MonacoEditorProps {
+  readonly label: string
+  readonly value: string
+  readonly language: "typescript" | "json"
+  readonly diagnostics?: readonly InputTypecheckDiagnostic[]
+  readonly onChange: (value: string) => void
+  readonly minLines?: number
+}
+
+const markerOwner = "tskm-playground"
+
+export function MonacoEditor({
+  label,
+  value,
+  language,
+  diagnostics = [],
+  onChange,
+  minLines = 16,
+}: MonacoEditorProps) {
+  const id = useId().replaceAll(":", "-")
+  const containerRef = useRef<HTMLDivElement>(null)
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
+  const modelRef = useRef<monaco.editor.ITextModel | null>(null)
+  const initialValueRef = useRef(value)
+  const onChangeRef = useRef(onChange)
+  const lastValueRef = useRef(value)
+
+  useEffect(() => {
+    onChangeRef.current = onChange
+  }, [onChange])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const extension = language === "typescript" ? "ts" : "json"
+    const uri = monaco.Uri.parse(`file:///tskm-playground/${id}.${extension}`)
+    const model = monaco.editor.createModel(initialValueRef.current, language, uri)
+    const editor = monaco.editor.create(container, {
+      model,
+      ariaLabel: label,
+      automaticLayout: true,
+      bracketPairColorization: { enabled: true },
+      folding: false,
+      fontFamily:
+        'ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Yu Gothic", "YuGothic", monospace',
+      fontLigatures: false,
+      fontSize: 13,
+      lineDecorationsWidth: 10,
+      lineHeight: 20,
+      lineNumbers: "off",
+      minimap: { enabled: false },
+      overviewRulerBorder: false,
+      padding: { top: 14, bottom: 14 },
+      renderLineHighlight: "none",
+      scrollbar: {
+        alwaysConsumeMouseWheel: false,
+        horizontalScrollbarSize: 10,
+        verticalScrollbarSize: 10,
+      },
+      scrollBeyondLastLine: false,
+      tabSize: 2,
+      theme: "tskm-light",
+      wordWrap: "off",
+    })
+    const subscription = editor.onDidChangeModelContent(() => {
+      const nextValue = model.getValue()
+      lastValueRef.current = nextValue
+      onChangeRef.current(nextValue)
+    })
+
+    modelRef.current = model
+    editorRef.current = editor
+
+    return () => {
+      subscription.dispose()
+      editor.dispose()
+      model.dispose()
+      editorRef.current = null
+      modelRef.current = null
+    }
+  }, [id, label, language])
+
+  useEffect(() => {
+    const model = modelRef.current
+    if (!model || value === lastValueRef.current) return
+    lastValueRef.current = value
+    model.setValue(value)
+  }, [value])
+
+  useEffect(() => {
+    const model = modelRef.current
+    if (!model) return
+    monaco.editor.setModelMarkers(model, markerOwner, diagnostics.map(toMarker))
+  }, [diagnostics])
+
+  return (
+    <div
+      ref={containerRef}
+      className="monaco-code-editor"
+      style={{ minHeight: `${minLines * 1.55}rem` }}
+    />
+  )
+}
+
+export function defineTskmMonacoTheme() {
+  monaco.editor.defineTheme("tskm-light", {
+    base: "vs",
+    inherit: true,
+    rules: [
+      { token: "identifier", foreground: "202428" },
+      { token: "string", foreground: "1d6b4f" },
+      { token: "number", foreground: "7356a6" },
+      { token: "keyword", foreground: "7b3f64" },
+      { token: "delimiter", foreground: "68706a" },
+    ],
+    colors: {
+      "editor.background": "#fffefb",
+      "editor.foreground": "#202428",
+      "editor.lineHighlightBackground": "#00000000",
+      "editorGutter.background": "#fffefb",
+      "editorIndentGuide.background1": "#d6d9d1",
+      "editorOverviewRuler.border": "#00000000",
+      "editorWarning.foreground": "#c7891e",
+      "editorError.foreground": "#c63c2f",
+      focusBorder: "#2d6f6d",
+    },
+  })
+}
+
+function toMarker(diagnostic: InputTypecheckDiagnostic): monaco.editor.IMarkerData {
+  const endLineNumber = diagnostic.endLine + 1
+  const endColumn =
+    diagnostic.endLine === diagnostic.line
+      ? Math.max(diagnostic.endColumn + 1, diagnostic.column + 2)
+      : diagnostic.endColumn + 1
+  return {
+    code: String(diagnostic.code),
+    message: diagnostic.message,
+    severity:
+      diagnostic.category === "warning"
+        ? monaco.MarkerSeverity.Warning
+        : monaco.MarkerSeverity.Error,
+    startLineNumber: diagnostic.line + 1,
+    startColumn: diagnostic.column + 1,
+    endLineNumber,
+    endColumn,
+  }
+}

playgrounds/tskm/src/components/MonacoEditor.tsx

@@ -0,0 +1,14 @@
+declare module "monaco-editor/esm/vs/editor/editor.worker?worker" {
+  const worker: new () => Worker
+  export default worker
+}
+
+declare module "monaco-editor/esm/vs/language/json/json.worker?worker" {
+  const worker: new () => Worker
+  export default worker
+}
+
+declare module "monaco-editor/esm/vs/language/typescript/ts.worker?worker" {
+  const worker: new () => Worker
+  export default worker
+}

playgrounds/tskm/src/env.d.ts

@@ -1,23 +1,28 @@
 import { expect, test } from "bun:test"
-import { typecheckInputInBrowser } from "./typecheck.ts"
+import { createTypecheckInputText, toEditorDiagnostic } from "./typecheck.ts"
 
-test("typechecks playground input with the browser fallback compiler", async () => {
+test("maps Monaco TypeScript diagnostics back to playground input", () => {
   const inputSource = `{
   "role": "guest",
   "count": "1"
 }`
-  const result = await typecheckInputInBrowser(
-    `object({
-  role: picklist(["owner", "viewer"]),
-  count: number(),
-})`,
+  const inputText = createTypecheckInputText(inputSource)
+
+  const diagnostic = toEditorDiagnostic(
+    {
+      start: inputText.indexOf('"guest"'),
+      length: '"guest"'.length,
+      messageText: 'Type \'"guest"\' is not assignable to type \'"owner" | "viewer"\'.',
+      category: 1,
+      code: 2322,
+    },
     inputSource,
   )
 
-  expect(result.status).toBe("ready")
-  expect(result.diagnostics).toHaveLength(2)
-  expect(result.diagnostics[0]?.message).toContain('"guest"')
-  expect(result.diagnostics[0]?.startOffset).toBe(inputSource.indexOf('"guest"'))
-  expect(result.diagnostics[1]?.message).toContain("string")
-  expect(result.diagnostics[1]?.startOffset).toBe(inputSource.indexOf('"1"'))
+  expect(inputText).toContain(inputSource)
+  expect(diagnostic.category).toBe("error")
+  expect(diagnostic.code).toBe(2322)
+  expect(diagnostic.message).toContain('"guest"')
+  expect(diagnostic.startOffset).toBe(inputSource.indexOf('"guest"'))
+  expect(diagnostic.endOffset).toBe(inputSource.indexOf('"guest"') + '"guest"'.length)
 })