spxls integration (#1145)

.github/workflows/validate.yml

@@ -28,11 +28,6 @@ jobs:
           cache: npm
           cache-dependency-path: spx-gui/package-lock.json
 
-      - name: Setup Go 1.21.3
-        uses: actions/setup-go@v4
-        with:
-          go-version: '1.21.3'
-
       - name: Install modules
         working-directory: spx-gui
         run: npm install
@@ -45,10 +40,24 @@ jobs:
         working-directory: spx-gui
         run: npm run lint
 
+      - name: Setup Go 1.21.3
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.21.3'
+
       - name: Build WASM
         working-directory: spx-gui
         run: npm run build-wasm
 
+      - name: Setup Go 1.23.4
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.23.4'
+
+      - name: Build WASM for spxls
+        working-directory: spx-gui
+        run: npm run build-spxls
+
       - name: Run Vitest
         working-directory: spx-gui
         run: npm run test

Dockerfile

@@ -1,10 +1,11 @@
 # All-in-one Dockerfile for building the SPX GUI
 
 ARG GOP_BASE_IMAGE=ghcr.io/goplus/gop:1.2
+ARG GO_BASE_IMAGE=golang:1.23.4
 ARG NODE_BASE_IMAGE=node:20.11.1
 ARG NGINX_BASE_IMAGE=nginx:1.27
 
-FROM ${GOP_BASE_IMAGE} AS go-builder
+FROM ${GOP_BASE_IMAGE} AS gop-builder
 
 WORKDIR /app
 
@@ -23,6 +24,12 @@ RUN ./build.sh
 WORKDIR /app/spx-backend
 RUN gop build -o spx-backend ./cmd/spx-backend
 
+FROM ${GO_BASE_IMAGE} AS go-builder
+
+# Build WASM for spxls
+WORKDIR /app/tools/spxls
+RUN ./build.sh
+
 FROM ${NODE_BASE_IMAGE} AS frontend-builder
 
 WORKDIR /app/spx-gui
@@ -36,16 +43,17 @@ RUN npm install
 COPY spx-gui .
 COPY docs ../docs
 COPY tools ../tools
-COPY --from=go-builder /app/tools/fmt/static/main.wasm /app/spx-gui/src/assets/format.wasm
-COPY --from=go-builder /app/tools/ispx/main.wasm /app/spx-gui/src/assets/ispx/main.wasm
+COPY --from=gop-builder /app/tools/fmt/static/main.wasm /app/spx-gui/src/assets/format.wasm
+COPY --from=gop-builder /app/tools/ispx/main.wasm /app/spx-gui/src/assets/ispx/main.wasm
+COPY --from=go-builder /app/tools/spxls/spxls.wasm /app/spx-gui/src/assets/spxls.wasm
 
 ARG NODE_ENV
 
 RUN npm run build
 
 FROM ${NGINX_BASE_IMAGE}
 
-COPY --from=go-builder /app/spx-backend/spx-backend /app/spx-backend/spx-backend
+COPY --from=gop-builder /app/spx-backend/spx-backend /app/spx-backend/spx-backend
 COPY --from=frontend-builder /app/spx-gui/dist /usr/share/nginx/html
 COPY scripts/nginx.conf /etc/nginx/conf.d/default.conf
 

spx-gui/build-spxls.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -e
+
+# Go v1.23.4 expected
+go version
+
+cd ../tools/spxls
+source ./build.sh
+cp spxls.wasm ../../spx-gui/src/assets/spxls.wasm

spx-gui/build-wasm.sh

@@ -1,6 +1,11 @@
 #!/bin/bash
+set -e
+
 echo Run this script from 'spx-gui' directory
 
+# Go v1.21.3 expected
+go version
+
 cd ../tools/fmt
 source ./build.sh
 

spx-gui/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vue-tsc --build --force && vite build --mode ${NODE_ENV:-production}",
     "build-wasm": "./build-wasm.sh",
+    "build-spxls": "./build-spxls.sh",
     "preview": "vite preview",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.ts --ignore-path .gitignore",
@@ -70,6 +71,7 @@
     "vite-plugin-vue-devtools": "^7.0.7",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.4.0",
+    "vscode-languageserver-protocol": "^3.17.5",
     "vue": "^3.3.11",
     "vue-konva": "^3.1.0",
     "vue-router": "^4.2.5",

spx-gui/src/components/editor/code-editor/CodeEditor.vue

@@ -3,7 +3,7 @@ import Emitter from '@/utils/emitter'
 import { useEditorCtx } from '../EditorContextProvider.vue'
 import { Copilot } from './copilot'
 import { DocumentBase } from './document-base'
-import { Spxlc } from './lsp'
+import { SpxLSPClient } from './lsp'
 import {
   CodeEditorUIComp,
   type ICodeEditorUI,
@@ -30,7 +30,8 @@ import {
   stringifyDefinitionId,
   DiagnosticSeverity,
   ResourceReferenceKind,
-  selection2Range
+  selection2Range,
+  toLSPPosition
 } from './common'
 import * as spxDocumentationItems from './document-base/spx'
 import * as gopDocumentationItems from './document-base/gop'
@@ -40,24 +41,28 @@ const allItems = Object.values({
   ...spxDocumentationItems,
   ...gopDocumentationItems
 })
-const allIds = allItems.map((item) => item.definition)
 
 const editorCtx = useEditorCtx()
 
 function handleUIInit(ui: ICodeEditorUI) {
+  // TODO: dispose these properly
   const copilot = new Copilot()
   const documentBase = new DocumentBase()
-  const spxlc = new Spxlc()
+  // TODO: reuse the same LSP client for all `CodeEditor` instances
+  const lspClient = new SpxLSPClient(editorCtx.project)
+  lspClient.init()
 
   ui.registerAPIReferenceProvider({
     async provideAPIReference(ctx, position) {
-      console.warn('TODO: get api references from LS', ctx, position, spxlc)
-      await new Promise<void>((resolve) => setTimeout(resolve, 100))
+      const definitions = await lspClient.getDefinitions({
+        // TODO: support signal
+        textDocument: ctx.textDocument.id,
+        position: toLSPPosition(position)
+      })
       ctx.signal.throwIfAborted()
-      const documentations = (await Promise.all(allIds.map((id) => documentBase.getDocumentation(id)))).filter(
-        () => Math.random() > 0.4
-      )
-      return documentations as DefinitionDocumentationItem[]
+      if (definitions == null) return []
+      const defWithDocs = await Promise.all(definitions.map(def => documentBase.getDocumentation(def)))
+      return defWithDocs.filter(d => d != null) as DefinitionDocumentationItem[]
     }
   })
 
@@ -189,11 +194,10 @@ function handleUIInit(ui: ICodeEditorUI) {
       const range = ctx.textDocument.getDefaultRange(position)
       let value = ctx.textDocument.getValueInRange(range)
       if (value.trim() === '') return null
-      const methodName = value[0].toUpperCase() + value.slice(1)
       // TODO: get definition ID from LS
       const definitionID: DefinitionIdentifier = {
         package: 'github.com/goplus/spx',
-        name: `Sprite.${methodName}`
+        name: `Sprite.${value}`
       }
       const definition = await documentBase.getDocumentation(definitionID)
       const contents: DefinitionDocumentationString[] = []

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

@@ -1,4 +1,5 @@
 import { mapValues } from 'lodash'
+import type * as lsp from 'vscode-languageserver-protocol'
 import type { LocaleMessage } from '@/utils/i18n'
 import type Emitter from '@/utils/emitter'
 
@@ -349,3 +350,10 @@ export function selection2Range(selection: Selection): Range {
     end: reversed ? selection.start : selection.position
   }
 }
+
+export function toLSPPosition(pos: Position): lsp.Position {
+  return {
+    line: pos.line - 1,
+    character: pos.column - 1
+  }
+}