[Bug] How to disable worker loading

[qianmoQ]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

1. How to disable worker loading
2. How to set up a worker to load via cdn

Monaco Editor Playground Code

<template>
  <div ref="editorContainer"
       class="border w-full overflow-hidden"
       :style="{ height: calcSize(height) }"/>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import * as monaco from 'monaco-editor'
import { CodeEditorEmits, CodeEditorProps } from './types'
import { calcSize } from '@/utils/common.ts'
import { registerApiCompletion } from './feature/auto-completion.ts'
import { disableLanguageValidation } from './feature/disable_language_validation.ts'
import { registerContextMenu } from './feature/context-menu.ts'
import { registerSearchPanel } from './feature/search.ts'
import 'monaco-editor/min/vs/editor/editor.main.css'

const props = withDefaults(defineProps<CodeEditorProps>(), {
  height: 300,
  config: {
    language: 'javascript',
    fontSize: 18,
    tabSize: 2
  } as any,
  disableValidation: true,
  searchConfig: {
    caseSensitive: false,
    replace: true,
    matchWholeWord: false,
    useRegex: false,
    showHistory: false
  } as any
})

const emit = defineEmits<CodeEditorEmits>()

const editorContainer = ref<HTMLElement | null>(null)
let editor: monaco.editor.IStandaloneCodeEditor | null = null
let menuDisposable: { dispose: () => void } | null = null
let searchPanelDisposable: { dispose: () => void } | null = null

const initEditor = () => {
  if (!editorContainer.value) {
    return
  }

  if (props.disableValidation) {
    ['typescript', 'javascript', 'css', 'json'].forEach(language => disableLanguageValidation(language))
  }

  const options: monaco.editor.IStandaloneEditorConstructionOptions = {
    ...props.config,
    value: props.modelValue || '',
    contextmenu: false,
    suggest: {
      showMethods: false,
      showFunctions: false,
      showConstructors: false,
      showFields: false,
      showVariables: false,
      showClasses: false,
      showStructs: false,
      showInterfaces: false,
      showModules: false,
      showProperties: false,
      showEvents: false,
      showOperators: false,
      showUnits: false,
      showValues: false,
      showConstants: false,
      showEnums: false,
      showEnumMembers: false,
      showKeywords: false,
      showWords: false,
      showColors: false,
      showFiles: false,
      showReferences: false,
      showFolders: false,
      showTypeParameters: false,
      showSnippets: false
    },
    scrollBeyondLastLine: false
  }

  editor = monaco.editor.create(editorContainer.value, options)
  editor.addCommand(monaco.KeyCode.KeyF | monaco.KeyMod.CtrlCmd, () => {
  })

  if (props.contextMenuConfig) {
    menuDisposable = registerContextMenu(editor, props.contextMenuConfig)
  }

  if (props.searchConfig) {
    searchPanelDisposable = registerSearchPanel(editor, props.searchConfig)
  }

  editor.onDidChangeModelContent(() => {
    emit('update:modelValue', editor?.getValue())
    emit('on-change', editor?.getValue())
  })

  emit('on-created', editor)
}

const updateEditorOptions = () => {
  if (!editor) {
    return
  }

  editor.updateOptions(props.config)
}

const updateEditorContent = () => {
  if (!editor) {
    return
  }

  const currentValue = editor.getValue()
  if (currentValue !== props.modelValue) {
    editor.setValue(props.modelValue || '')
  }
}

watch(() => props.config, updateEditorOptions)
watch(() => props.modelValue, updateEditorContent)

const setupApiCompletion = () => {
  if (!editor || !props.autoCompleteConfig) {
    return
  }

  const disposable = registerApiCompletion(editor, props.autoCompleteConfig)

  onBeforeUnmount(() => {
    disposable.dispose()
  })
}

onMounted(() => {
  initEditor()
  setupApiCompletion()
})

onBeforeUnmount(() => {
  if (editor) {
    editor.dispose()
  }
  menuDisposable?.dispose()
  searchPanelDisposable?.dispose()
})
</script>

Reproduction Steps

No response

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

No response

[oldrich-s]

You can do something like:

const me = globalThis as any

  me.MonacoEnvironment = {
    getWorker: function (_moduleId: string, label: string) {
      const url = getWorkerUrl(label)
      return url ? new Worker(url, { name: label }) : undefined
    },
  }

[qianmoQ]

You can do something like:

const me = globalThis as any

  me.MonacoEnvironment = {
    getWorker: function (_moduleId: string, label: string) {
      const url = getWorkerUrl(label)
      return url ? new Worker(url, { name: label }) : undefined
    },
  }

const me = globalThis as any

me.MonacoEnvironment = {
  getWorker: undefined,
}

I have configured it, but the console still shows an error

[oldrich-s]

Try

const me = globalThis as any

me.MonacoEnvironment = {
  getWorker: () => undefined,
}

[qianmoQ]

Try

const me = globalThis as any

me.MonacoEnvironment = {
  getWorker: () => undefined,
}

Still can't disable worker