Use tsgo for playground typechecking

Author: ushironoko

bun.lock

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1",
-    "build": "tsc -b && vite build",
+    "build": "tsgo -b && vite build",
     "preview": "vite preview --host 127.0.0.1"
   },
   "dependencies": {
@@ -16,10 +16,10 @@
   },
   "devDependencies": {
     "@tskm/compiler": "workspace:*",
+    "@typescript/native-preview": "7.0.0-dev.20260601.1",
     "@types/react": "19.2.0",
     "@types/react-dom": "19.2.0",
     "@vitejs/plugin-react": "5.1.1",
-    "typescript": "6.0.3",
     "vite": "8.0.16"
   }
 }

playgrounds/tskm/package.json

@@ -1,16 +1,17 @@
+import { execFile } from "node:child_process"
 import { mkdir, mkdtemp, readFile, rm, writeFile } from "node:fs/promises"
 import type { IncomingMessage, ServerResponse } from "node:http"
 import { tmpdir } from "node:os"
-import { join, relative } from "node:path"
+import { isAbsolute, join, relative, resolve } from "node:path"
 import { fileURLToPath, URL } from "node:url"
-import { generate } from "@tskm/compiler"
+import { generate, resolveTsgoExecutable } from "@tskm/compiler"
 import react from "@vitejs/plugin-react"
-import * as ts from "typescript"
 import { defineConfig, type Plugin } from "vite"
 
 const runtimeEntry = fileURLToPath(new URL("../../packages/tskm/src/index.ts", import.meta.url))
 const typegenEndpoint = "/__tskm_playground/typegen"
 const typecheckEndpoint = "/__tskm_playground/typecheck"
+const ansiEscapePattern = new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g")
 
 export default defineConfig({
   plugins: [react(), tskmPlaygroundTypegen()],
@@ -156,10 +157,13 @@ async function typecheckPlaygroundInput(schemaSource: string, inputSource: strin
     const inputText = `${inputPrefix}${inputSource}${inputSuffix}`
     await writeFile(inputFile, inputText)
 
+    const typecheckOutput = await runTsgoNoEmit(root)
+
     return {
       ok: true,
       diagnostics: collectTypecheckDiagnostics(
         root,
+        typecheckOutput,
         inputFile,
         inputText,
         inputPrefix.length,
@@ -172,79 +176,187 @@ async function typecheckPlaygroundInput(schemaSource: string, inputSource: strin
   }
 }
 
+interface CliDiagnostic {
+  readonly fileName: string
+  readonly line: number
+  readonly column: number
+  readonly code: number
+  readonly category: string
+  readonly message: string
+}
+
+function runTsgoNoEmit(root: string): Promise<string> {
+  return new Promise((resolveOutput, reject) => {
+    execFile(
+      resolveTsgoExecutable(),
+      ["--noEmit", "--pretty", "false", "-p", "tsconfig.json"],
+      {
+        cwd: root,
+        encoding: "utf8",
+        maxBuffer: 1024 * 1024,
+      },
+      (error, stdout, stderr) => {
+        const output = [stdout, stderr].filter(Boolean).join("\n")
+        if (!error || typeof error.code === "number") {
+          resolveOutput(output)
+          return
+        }
+        reject(error)
+      },
+    )
+  })
+}
+
 function collectTypecheckDiagnostics(
   root: string,
+  output: string,
   inputFile: string,
   inputText: string,
   inputStart: number,
   inputSource: string,
 ) {
-  const configPath = join(root, "tsconfig.json")
-  const config = ts.readConfigFile(configPath, ts.sys.readFile)
-  const parsed = ts.parseJsonConfigFileContent(config.config, ts.sys, root)
-  const program = ts.createProgram(parsed.fileNames, parsed.options)
-  const sourceFile = program.getSourceFile(inputFile)
-  if (!sourceFile) return []
-
   const inputEnd = inputStart + inputSource.length
-  return ts
-    .getPreEmitDiagnostics(program, sourceFile)
-    .filter((diagnostic) => diagnostic.file?.fileName === inputFile)
+  return parseTsgoDiagnostics(output)
+    .filter((diagnostic) => sameFile(root, diagnostic.fileName, inputFile))
     .map((diagnostic) =>
-      toEditorDiagnostic(diagnostic, sourceFile, inputText, inputSource, inputStart, inputEnd),
+      toEditorDiagnostic(diagnostic, inputText, inputSource, inputStart, inputEnd),
     )
 }
 
 function toEditorDiagnostic(
-  diagnostic: ts.Diagnostic,
-  sourceFile: ts.SourceFile,
+  diagnostic: CliDiagnostic,
   inputText: string,
   inputSource: string,
   inputStart: number,
   inputEnd: number,
 ) {
   const fallbackStart = firstNonWhitespaceOffset(inputSource)
-  const rawStart = diagnostic.start ?? inputStart
-  const rawEnd = rawStart + Math.max(diagnostic.length ?? 1, 1)
-  const startOffset =
+  const rawStart = positionToOffset(inputText, diagnostic.line - 1, diagnostic.column - 1)
+  const mappedStartOffset =
     rawStart >= inputStart && rawStart <= inputEnd ? rawStart - inputStart : fallbackStart
-  const endOffset =
-    rawEnd >= inputStart && rawEnd <= inputEnd
-      ? Math.max(rawEnd - inputStart, startOffset + 1)
-      : expandFallbackEnd(inputSource, startOffset)
+  const startOffset = valueStartForTypeMismatch(inputSource, mappedStartOffset, diagnostic.message)
+  const endOffset = expandDiagnosticEnd(inputSource, startOffset)
   const start = offsetToPosition(inputSource, startOffset)
   const end = offsetToPosition(inputSource, Math.min(endOffset, inputSource.length))
-  const sourcePosition =
-    diagnostic.start === undefined
-      ? undefined
-      : sourceFile.getLineAndCharacterOfPosition(Math.min(diagnostic.start, inputText.length))
 
   return {
     code: diagnostic.code,
-    category: ts.DiagnosticCategory[diagnostic.category].toLowerCase(),
-    message: ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+    category: diagnostic.category,
+    message: diagnostic.message,
     startOffset,
     endOffset: Math.min(endOffset, inputSource.length),
     line: start.line,
     column: start.column,
     endLine: end.line,
     endColumn: end.column,
-    sourceLine: sourcePosition ? sourcePosition.line : undefined,
-    sourceColumn: sourcePosition ? sourcePosition.character : undefined,
   }
 }
 
+function valueStartForTypeMismatch(text: string, startOffset: number, message: string): number {
+  if (!message.startsWith("Type ") || !message.includes(" is not assignable to type ")) {
+    return startOffset
+  }
+
+  const keyMatch = /"(?:\\.|[^"\\])*"/y
+  keyMatch.lastIndex = startOffset
+  const match = keyMatch.exec(text)
+  if (!match) return startOffset
+
+  let index = startOffset + match[0].length
+  index = skipWhitespace(text, index)
+  if (text[index] !== ":") return startOffset
+  index = skipWhitespace(text, index + 1)
+  return index < text.length ? index : startOffset
+}
+
+function parseTsgoDiagnostics(output: string): readonly CliDiagnostic[] {
+  const diagnostics: CliDiagnostic[] = []
+  let current: CliDiagnostic | undefined
+
+  for (const rawLine of output.split(/\r?\n/)) {
+    const line = stripAnsi(rawLine)
+    const match = /^(.*)\((\d+),(\d+)\):\s+(\w+)\s+TS(\d+):\s+(.*)$/.exec(line)
+    if (match) {
+      if (current) diagnostics.push(current)
+      current = {
+        fileName: match[1] ?? "",
+        line: Number(match[2]),
+        column: Number(match[3]),
+        category: match[4] ?? "error",
+        code: Number(match[5]),
+        message: match[6] ?? "",
+      }
+      continue
+    }
+
+    if (current && line.trim()) {
+      current = {
+        ...current,
+        message: `${current.message}\n${line.trim()}`,
+      }
+    }
+  }
+
+  if (current) diagnostics.push(current)
+  return diagnostics
+}
+
+function sameFile(root: string, diagnosticFileName: string, inputFile: string): boolean {
+  const absoluteDiagnosticFile = isAbsolute(diagnosticFileName)
+    ? diagnosticFileName
+    : resolve(root, diagnosticFileName)
+  return absoluteDiagnosticFile === inputFile
+}
+
 function firstNonWhitespaceOffset(text: string): number {
   const match = /\S/.exec(text)
   return match?.index ?? 0
 }
 
+function expandDiagnosticEnd(text: string, startOffset: number): number {
+  const tokenEnd = endOfToken(text, startOffset)
+  if (tokenEnd !== null) return tokenEnd
+  return expandFallbackEnd(text, startOffset)
+}
+
 function expandFallbackEnd(text: string, startOffset: number): number {
   const lineEnd = text.indexOf("\n", startOffset)
   const end = lineEnd === -1 ? text.length : lineEnd
   return Math.max(startOffset + 1, end)
 }
 
+function endOfToken(text: string, offset: number): number | null {
+  const start = Math.max(0, Math.min(offset, text.length))
+  const tokenPattern =
+    /"(?:\\.|[^"\\])*"|true|false|null|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[A-Za-z_$][\w$]*/g
+  for (const match of text.matchAll(tokenPattern)) {
+    const tokenStart = match.index
+    if (tokenStart === undefined) continue
+    const tokenEnd = tokenStart + match[0].length
+    if (tokenStart <= start && start < tokenEnd) return tokenEnd
+    if (start < tokenStart) return tokenEnd
+  }
+  return null
+}
+
+function skipWhitespace(text: string, offset: number): number {
+  let index = offset
+  while (/\s/.test(text[index] ?? "")) {
+    index += 1
+  }
+  return index
+}
+
+function positionToOffset(text: string, line: number, column: number): number {
+  const lines = text.split("\n")
+  const safeLine = Math.max(0, Math.min(line, lines.length - 1))
+  let offset = 0
+  for (let index = 0; index < safeLine; index += 1) {
+    offset += (lines[index]?.length ?? 0) + 1
+  }
+  return offset + Math.max(0, Math.min(column, lines[safeLine]?.length ?? 0))
+}
+
 function offsetToPosition(
   text: string,
   offset: number,
@@ -258,6 +370,10 @@ function offsetToPosition(
   }
 }
 
+function stripAnsi(text: string): string {
+  return text.replace(ansiEscapePattern, "")
+}
+
 function playgroundTsconfig(root: string): string {
   return `${JSON.stringify(
     {