From fff382788f3231e673ba0c78bf2c0e665107ffeb Mon Sep 17 00:00:00 2001 From: Victor Alvelais <6127592+victoralvelais@users.noreply.github.com> Date: Wed, 27 Mar 2024 15:32:12 -0500 Subject: [PATCH] Update Parcel integration docs --- docs/integrate-esm.md | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/docs/integrate-esm.md b/docs/integrate-esm.md index d4b11cc946..5d6ee48038 100644 --- a/docs/integrate-esm.md +++ b/docs/integrate-esm.md @@ -136,28 +136,33 @@ module.exports = { A full working sample is available at https://github.com/microsoft/monaco-editor/tree/main/samples/browser-esm-parcel -When using parcel, we need to use the `getWorkerUrl` function and build the workers seperately from our main source. To simplify things, we can write a tiny bash script to build the workers for us. +When using parcel, we need to use the `getWorkerUrl` function to map the workers we import as URLs. - `index.js` ```js -import * as monaco from 'monaco-editor'; +import JSONWorker from 'url:monaco-editor/esm/vs/language/json/json.worker.js'; +import CSSWorker from 'url:monaco-editor/esm/vs/language/css/css.worker.js'; +import HTMLWorker from 'url:monaco-editor/esm/vs/language/html/html.worker.js'; +import TSWorker from 'url:monaco-editor/esm/vs/language/typescript/ts.worker.js'; +import EditorWorker from 'url:monaco-editor/esm/vs/editor/editor.worker.js'; +import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'; self.MonacoEnvironment = { getWorkerUrl: function (moduleId, label) { if (label === 'json') { - return './json.worker.js'; + return JSONWorker; } if (label === 'css' || label === 'scss' || label === 'less') { - return './css.worker.js'; + return CSSWorker; } if (label === 'html' || label === 'handlebars' || label === 'razor') { - return './html.worker.js'; + return HTMLWorker; } if (label === 'typescript' || label === 'javascript') { - return './ts.worker.js'; + return TSWorker; } - return './editor.worker.js'; + return EditorWorker; } }; @@ -167,23 +172,6 @@ monaco.editor.create(document.getElementById('container'), { }); ``` -- `build_workers.sh` - -```sh -ROOT=$PWD/node_modules/monaco-editor/esm/vs -OPTS="--no-source-maps --log-level 1" # Parcel options - See: https://parceljs.org/cli.html - -parcel build $ROOT/language/json/json.worker.js $OPTS -parcel build $ROOT/language/css/css.worker.js $OPTS -parcel build $ROOT/language/html/html.worker.js $OPTS -parcel build $ROOT/language/typescript/ts.worker.js $OPTS -parcel build $ROOT/editor/editor.worker.js $OPTS -``` - -Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the workers into the same directory as your main bundle (usually `./dist`). If you want to change the `--out-dir` of the workers, you must change the paths in `index.js` to reflect their new location. - -_note - the `getWorkerUrl` paths are relative to the build directory of your src bundle_ - --- ### Using Vite