Theme not loading and worker not being created

[Mw3y]

Hello,

While trying to use the wrapper with nuxt.js, I've encountered an issue:

The theme is not loaded and the worker isn't being created.

Here's my code:

<script lang="ts" setup>
  import {
    MonacoEditorLanguageClientWrapper,
    type UserConfig,
  } from "monaco-editor-wrapper"

  import "@codingame/monaco-vscode-python-default-extension"

  const props = withDefaults(
    defineProps<{
      userConfig: UserConfig
      modelValue?: string
    }>(),
    {
      modelValue: (_) => "",
    }
  )

  const emit = defineEmits<{
    (e: "update:modelValue", changes: string): void
    (e: "load", wrapper: MonacoEditorLanguageClientWrapper): void
    (e: "error", error: any): void
  }>()

  const monacoEditorRef = ref<HTMLDivElement>()
  const wrapper = new MonacoEditorLanguageClientWrapper()

  // Initialize the monaco editor
  await wrapper.init(props.userConfig)
  // Start the monaco editor
  onMounted(async () => {
    if (monacoEditorRef.value) {
      await wrapper.start(monacoEditorRef.value)
      // Initial sync with the v-model value
      wrapper.getEditor()?.setValue(props.modelValue)
      // Propagate a text change to the v-model
      handleTextChange()
    }
  })

  watch(
    () => props.modelValue,
    (_) => {
      const textModels = wrapper.getTextModels()
      if (textModels?.text?.getValue() !== props.modelValue) {
        textModels?.text?.setValue(props.modelValue)
      }
    }
  )

  function handleTextChange() {
    const textModels = wrapper.getTextModels()
    if (textModels?.text) {
      textModels.text.onDidChangeContent(() => {
        console.log(textModels?.text?.getValue())
        emit("update:modelValue", textModels.text?.getValue() ?? "")
      })
    }
  }

  onUnmounted(() => wrapper.dispose())
</script>

<template>
  <div ref="monacoEditorRef" style="height: 100vh" />
</template>

[CGNonofr]

does nuxt.js support the new URL(..., import.meta.url) syntax?

[Mw3y]

does nuxt.js support the new URL(..., import.meta.url) syntax?

I don't think so... I tried using @codingame/esbuild-import-meta-url-plugin but it still doesn't work.

[kaisalmen]

Hi @Mw3y does this repo and the examples work successful in your environment? My other suggestion is to reduce complexity: First start without a framework and just do a simple hello world with HTML/JS and see that it works. Then try to wrap it in vue compoent, then try nuxt...

We want to add a vue verify example (see #416), but nobody volunteered for it, yet. 🙂

[Mw3y]

Hey @kaisalmen,

Using a normal vite + vue environment works well! I managed to get the editor running, sadly without any color highlighting (I don't know why). The issue is with nuxt.js specifically, but it's not that important for now... My ultimate goal is to add c++, java and python language servers to an app with code exercises for students.

Concerning the vue example, I could make it but I need to understand the library a bit more before 😅.

[kaisalmen]

Hey @Mw3y if you are interested take a look at the Angular example: https://github.com/TypeFox/monaco-languageclient/blob/main/verify/angular/src/app/app.component.ts

In all verification examples we use the json client and server. The vite example with HTML+JS is probably the easiest: https://github.com/TypeFox/monaco-languageclient/tree/main/verify/vite and could also be a template for a vue example.

[Mw3y]

Thanks!

[Mw3y]

Hey @kaisalmen,

I've managed to make a web worker running a jedi language server for python. It has a method which takes a language server request object and sends a response.

I'm having trouble into connecting it to the monaco wrapper. How make a 'bridge' between the worker and the wrapper without a websocket? I tried using vscode-languageclient/browser without success...

[kaisalmen]

@Mw3y you can load the worker and then just configure it like this: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/langium/langium-dsl/config/extendedConfig.ts#L81-L84

These are the two worker config options: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/src/commonTypes.ts#L42-L54

The bridging to the language server worker is part of vscode-languageclient. The wiring is done here: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/wrapper/src/languageClientWrapper.ts#L170-L177

[Mw3y]

Hey @kaisalmen,

I'm still having some trouble making it work... I'm now trying to use your build of pyright for the web. I don't really now what would be the problem. Still no completion from the language server and no syntax highlighting.

Here's my code: https://haste.androz2091.fr/setevanomi.xml

NB: I used https://github.com/mitmedialab/monaco-workspace-import-error a lot to try to understand what's happening.

Logs:

[kaisalmen]

@Mw3y try to import import '@codingame/monaco-vscode-python-default-extension';. That is the need for syntax higlighting.

If the languageclient still does not show any code completion you have to see what the reader and writer does (add log statements there).

Apart from that I don't see anything being wrong with your config.

[Mw3y]

Thanks! Can't believe I forgot that...

[Mw3y]

Hey @kaisalmen,

I'm now trying to use the clangd web assembly build but I'm having this error:

which comes from

clangd.FS.writeFile('/workspace/main.cpp', '')
clangd.FS.writeFile(
  `/workspace/.clangd`,
  JSON.stringify({ CompileFlags: { Add: flags } })
)

I don't really know how to fix it...

I used the code provided at https://github.com/TypeFox/clangd-in-browser Here's the code:

• worker: https://haste.androz2091.fr/ubagajenil.typescript
• vue component: https://haste.androz2091.fr/otigumiyil.xml

[kaisalmen]

Hi @Mw3y I don't know. Does the directory exists? Have you considered asking the maintainer of https://github.com/Guyutongxue/clangd-in-browser ? We forked the project to perform the upgrade to the latest major version the libraries from this repo.

[Mw3y]

Alright, I'll contact him. I don't really know how the vscode filesystem works. I'll dig deeper. Thanks!

[CGNonofr]

I don't know how clangd-in-browser works, but note that VSCode implemented the WASI api (including filesystem backed on the virtual VSCode filesystem) in the extension host via an experimental extension (https://www.npmjs.com/package/@vscode/wasm-wasi / https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-wasi-core)

[Mw3y]

Thank you for your suggestion but the issue was that the folder I was trying to use was not created by default. More details here: https://github.com/Guyutongxue/clangd-in-browser/issues/7#issuecomment-2202768498

[kaisalmen]

@Mw3y good news and thanks for reporting back. I think this issue is now resolved. If you agree, please close it.