Get code-editor diagnostics from runtime (#1346)

Author: nighca

spx-gui/src/components/editor/code-editor/code-editor.ts

@@ -4,7 +4,7 @@ import Emitter from '@/utils/emitter'
 import { insertSpaces, tabSize } from '@/utils/spx/highlighter'
 import type { I18n } from '@/utils/i18n'
 import { packageSpx } from '@/utils/spx'
-import type { Runtime } from '@/models/runtime'
+import { RuntimeOutputKind, type Runtime } from '@/models/runtime'
 import type { Project } from '@/models/project'
 import { Copilot } from './copilot'
 import { DocumentBase } from './document-base'
@@ -59,7 +59,9 @@ import {
   type WorkspaceDiagnostics,
   type TextDocumentDiagnostics,
   fromLSPDiagnostic,
-  isTextDocumentStageCode
+  isTextDocumentStageCode,
+  DiagnosticSeverity,
+  textDocumentIdEq
 } from './common'
 import { TextDocument, createTextDocument } from './text-document'
 import { type Monaco } from './monaco'
@@ -127,17 +129,54 @@ class ResourceReferencesProvider implements IResourceReferencesProvider {
 
 class DiagnosticsProvider
   extends Emitter<{
-    didChangeDiagnostics: []
+    didChangeDiagnostics: void
   }>
   implements IDiagnosticsProvider
 {
   constructor(
     private runtime: Runtime,
-    private lspClient: SpxLSPClient
+    private lspClient: SpxLSPClient,
+    private project: Project
   ) {
     super()
+
+    this.addDisposer(
+      this.runtime.on('didChangeOutput', () => {
+        this.emit('didChangeDiagnostics')
+      })
+    )
   }
-  private adaptDiagnosticRange({ start, end }: Range, textDocument: ITextDocument) {
+
+  private adaptRuntimeDiagnosticRange({ start, end }: Range, textDocument: ITextDocument) {
+    // Expand the range to whole line because the range from runtime is not accurate.
+    // TODO: it's a workaround, should be fixed in the runtime (ispx) side
+    if (start.line !== end.line) return { start, end }
+    const line = textDocument.getLineContent(start.line)
+    const leadingSpaces = line.match(/^\s*/)?.[0] ?? ''
+    const lineStartPos: Position = { line: start.line, column: leadingSpaces.length + 1 }
+    const lineEndPos: Position = { line: start.line, column: line.length + 1 }
+    return { start: lineStartPos, end: lineEndPos }
+  }
+
+  private getRuntimeDiagnostics(ctx: DiagnosticsContext) {
+    const { outputs, filesHash } = this.runtime
+    if (filesHash !== this.project.filesHash) return []
+    const diagnostics: Diagnostic[] = []
+    for (const output of outputs) {
+      if (output.kind !== RuntimeOutputKind.Error) continue
+      if (output.source == null) continue
+      if (!textDocumentIdEq(output.source.textDocument, ctx.textDocument.id)) continue
+      const range = this.adaptRuntimeDiagnosticRange(output.source.range, ctx.textDocument)
+      diagnostics.push({
+        message: output.message,
+        range,
+        severity: DiagnosticSeverity.Error
+      })
+    }
+    return diagnostics
+  }
+
+  private adaptLSDiagnosticRange({ start, end }: Range, textDocument: ITextDocument) {
     // make sure the range is not empty, so that the diagnostic info can be displayed as inline decorations
     // TODO: it's a workaround, should be fixed in the server side
     if (positionEq(start, end)) {
@@ -165,8 +204,8 @@ class DiagnosticsProvider
     }
     return { start, end }
   }
-  async provideDiagnostics(ctx: DiagnosticsContext): Promise<Diagnostic[]> {
-    // TODO: get diagnostics from runtime. https://github.com/goplus/builder/issues/1256
+
+  private async getLSDiagnostics(ctx: DiagnosticsContext) {
     const diagnostics: Diagnostic[] = []
     const report = await this.lspClient.textDocumentDiagnostic({
       textDocument: ctx.textDocument.id
@@ -175,11 +214,15 @@ class DiagnosticsProvider
       throw new Error(`Report kind ${report.kind} not supported`)
     for (const item of report.items) {
       const diagnostic = fromLSPDiagnostic(item)
-      const range = this.adaptDiagnosticRange(diagnostic.range, ctx.textDocument)
+      const range = this.adaptLSDiagnosticRange(diagnostic.range, ctx.textDocument)
       diagnostics.push({ ...diagnostic, range })
     }
     return diagnostics
   }
+
+  async provideDiagnostics(ctx: DiagnosticsContext): Promise<Diagnostic[]> {
+    return [...this.getRuntimeDiagnostics(ctx), ...(await this.getLSDiagnostics(ctx))]
+  }
 }
 
 class HoverProvider implements IHoverProvider {
@@ -466,7 +509,7 @@ export class CodeEditor extends Disposable {
     this.completionProvider = new CompletionProvider(this.lspClient, this.documentBase)
     this.contextMenuProvider = new ContextMenuProvider(this.lspClient, this.documentBase)
     this.resourceReferencesProvider = new ResourceReferencesProvider(this.lspClient)
-    this.diagnosticsProvider = new DiagnosticsProvider(this.runtime, this.lspClient)
+    this.diagnosticsProvider = new DiagnosticsProvider(this.runtime, this.lspClient, this.project)
     this.hoverProvider = new HoverProvider(this.lspClient, this.documentBase)
   }
 

spx-gui/src/components/editor/code-editor/common.ts

@@ -198,6 +198,7 @@ export interface ITextDocument
   getOffsetAt(position: Position): number
   getPositionAt(offset: number): Position
   getValueInRange(range: Range): string
+  getLineContent(line: number): string
   getWordAtPosition(position: Position): WordAtPosition | null
   getDefaultRange(position: Position): Range
   pushEdits(edits: TextEdit[]): void

spx-gui/src/components/editor/code-editor/ui/diagnostics/index.ts

@@ -10,7 +10,7 @@ export type DiagnosticsContext = BaseContext
 
 export interface IDiagnosticsProvider
   extends Emitter<{
-    didChangeDiagnostics: []
+    didChangeDiagnostics: void
   }> {
   provideDiagnostics(ctx: DiagnosticsContext): Promise<Diagnostic[]>
 }
@@ -55,7 +55,7 @@ export class DiagnosticsController extends Disposable {
 
     this.addDisposer(
       watch(
-        () => this.ui.project.filesHash,
+        () => [this.ui.project.filesHash, this.ui.activeTextDocument],
         () => refreshDiagnostics(),
         { immediate: true }
       )

spx-gui/src/components/editor/preview/InPlaceRunner.vue

@@ -113,8 +113,8 @@ watch(
     const projectRunner = await untilNotNull(projectRunnerRef)
     signal.throwIfAborted()
     editorCtx.runtime.clearOutputs()
-    projectRunner.run().then(() => {
-      editorCtx.runtime.setRunning({ mode: 'debug', initializing: false })
+    projectRunner.run().then((filesHash) => {
+      editorCtx.runtime.setRunning({ mode: 'debug', initializing: false }, filesHash)
     })
     signal.addEventListener('abort', () => {
       projectRunner.stop()
@@ -128,8 +128,8 @@ defineExpose({
     editorCtx.runtime.setRunning({ mode: 'debug', initializing: true })
     const projectRunner = await untilNotNull(projectRunnerRef)
     editorCtx.runtime.clearOutputs()
-    await projectRunner.rerun()
-    editorCtx.runtime.setRunning({ mode: 'debug', initializing: false })
+    const filesHash = await projectRunner.rerun()
+    editorCtx.runtime.setRunning({ mode: 'debug', initializing: false }, filesHash)
   }
 })
 </script>

spx-gui/src/components/project/runner/v1/ProjectRunnerV1.vue

@@ -65,24 +65,27 @@ onUnmounted(() => {
   registered.onStopped()
 })
 
-async function getProjectZipData(signal?: AbortSignal) {
+async function getProjectData(signal?: AbortSignal) {
   const zip = new JSZip()
-  const [, files] = await props.project.export()
+  const [{ filesHash }, files] = await props.project.export()
   signal?.throwIfAborted()
   Object.entries(files).forEach(([path, file]) => {
     if (file == null) return
     zip.file(path, getZipEntry(file))
   })
-  return zip.generateAsync({ type: 'arraybuffer' })
+  const zipped = await zip.generateAsync({ type: 'arraybuffer' })
+  return { filesHash, zipped }
 }
 
 defineExpose({
   async run(signal?: AbortSignal) {
     loading.value = true
     registered.onStart()
-    zipData.value = await getProjectZipData(signal)
+    const projectData = await getProjectData(signal)
+    zipData.value = projectData.zipped
     signal?.throwIfAborted()
     await until(() => !loading.value)
+    return projectData.filesHash
   },
   stop() {
     zipData.value = null

spx-gui/src/components/project/runner/v2/ProjectRunnerV2.vue

@@ -56,11 +56,12 @@ watch(iframeRef, (iframe) => {
 
 async function getProjectData() {
   const zip = new JSZip()
-  const [, files] = await props.project.export()
+  const [{ filesHash }, files] = await props.project.export()
   Object.entries(files).forEach(([path, file]) => {
     if (file != null) zip.file(path, toNativeFile(file))
   })
-  return zip.generateAsync({ type: 'arraybuffer' })
+  const zipped = await zip.generateAsync({ type: 'arraybuffer' })
+  return { filesHash, zipped }
 }
 
 function withLog(methodName: string, promise: Promise<unknown>) {
@@ -113,9 +114,10 @@ defineExpose({
     signal?.throwIfAborted()
     const projectData = await getProjectData()
     signal?.throwIfAborted()
-    await withLog('startGame', iframeWindow.startGame(projectData, assetURLs))
+    await withLog('startGame', iframeWindow.startGame(projectData.zipped, assetURLs))
     signal?.throwIfAborted()
     loading.value = false
+    return projectData.filesHash
   },
   async stop() {
     const iframeWindow = iframeWindowRef.value
@@ -125,7 +127,7 @@ defineExpose({
   },
   async rerun() {
     await this.stop()
-    await this.run()
+    return this.run()
   }
 })
 </script>

spx-gui/src/models/runtime.ts

@@ -39,15 +39,18 @@ export class Runtime extends Emitter<{
 }> {
   running: RunningState = { mode: 'none' }
 
-  setRunning(running: RunningState) {
+  setRunning(running: RunningState, filesHash?: string) {
     this.running = running
+    if (running.mode === 'debug' && running.initializing === false) {
+      if (filesHash == null) throw new Error('filesHash is required when running in debug mode')
+      this.filesHash = filesHash
+    }
   }
 
+  /** Outputs of last debugging */
   outputs: RuntimeOutput[] = []
-
-  getOutputs(): RuntimeOutput[] {
-    return this.outputs
-  }
+  /** Project files' hash of last debugging */
+  filesHash: string | null = null
 
   addOutput(output: RuntimeOutput) {
     this.outputs.push(output)
@@ -75,7 +78,7 @@ export class Runtime extends Emitter<{
         () => reactiveThis.project.filesHash,
         async (_, oldHash) => {
           if (oldHash == null) return
-          await until(() => reactiveThis.running.mode === 'none')
+          await until(() => reactiveThis.running.mode !== 'debug')
           reactiveThis.clearOutputs()
         }
       )