diff --git a/docs/integrate-esm.md b/docs/integrate-esm.md index bd10b807..5babbee0 100644 --- a/docs/integrate-esm.md +++ b/docs/integrate-esm.md @@ -192,28 +192,38 @@ Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built ```js import * as monaco from 'monaco-editor'; -import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; -import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'; -import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'; -import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'; -import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'; self.MonacoEnvironment = { - getWorker(_, label) { - if (label === 'json') { - return new jsonWorker(); - } - if (label === 'css' || label === 'scss' || label === 'less') { - return new cssWorker(); - } - if (label === 'html' || label === 'handlebars' || label === 'razor') { - return new htmlWorker(); - } - if (label === 'typescript' || label === 'javascript') { - return new tsWorker(); - } - return new editorWorker(); - } + getWorker: function(workerId, label) { + + const getWorkerModule = (moduleUrl, label) => { + return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), { + name: label, + type: 'module' + }); + }; + + switch (label) { + case 'json': + return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label); + case 'css': + case 'scss': + case 'less': + return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label); + case 'html': + case 'handlebars': + case 'razor': + return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label); + case 'typescript': + case 'javascript': + return getWorkerModule( + '/monaco-editor/esm/vs/language/typescript/ts.worker?worker', + label + ); + default: + return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label); + } + } }; monaco.editor.create(document.getElementById('container'), {