From 1daf84fa7842a2d251766855aefe92e305e924a7 Mon Sep 17 00:00:00 2001
From: Lesley Dreyer <lesley@terascope.io>
Date: Thu, 19 Feb 2026 16:26:35 -0700
Subject: [PATCH 1/3] update docs

---
 packages/monaco-graphql/README.md | 62 +++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 12 deletions(-)

diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md
index 68f2f934d6b..011d4e57798 100644
--- a/packages/monaco-graphql/README.md
+++ b/packages/monaco-graphql/README.md
@@ -516,26 +516,19 @@ then, in your application:
 ```ts
 // Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker';
 import GraphQLWorker from './my-graphql.worker?worker';
 
 globalThis.MonacoEnvironment = {
   getWorker(_workerId: string, label: string) {
-    return label === 'graphql' ? new GraphQLWorker() : new EditorWorker();
+    if (label === 'graphql') return new GraphQLWorker();
+    if (label === 'json') return new JsonWorker();
+    return new EditorWorker();
   },
 };
 ```
 
-or, if you have webpack configured for it:
-
-```ts
-globalThis.MonacoEnvironment = {
-  getWorkerUrl(_workerId: string, label: string) {
-    return label === 'graphql' ? 'my-graphql.worker.js' : 'editor.worker.js';
-  },
-};
-```
-
-with vite you just need:
+with vite, an alternative way is using a plugin like this:
 
 ```ts
 import { defineConfig } from 'vite';
@@ -547,6 +540,8 @@ export default defineConfig({
       customWorker: [
         {
           label: 'graphql',
+          // adjust if needed to be the path from node_modules
+          // i.e. ../src/my-graphql.worker.js
           entry: 'my-graphql.worker.js',
         },
       ],
@@ -555,6 +550,49 @@ export default defineConfig({
 });
 ```
 
+or, if you have webpack configured for it:
+
+```ts
+globalThis.MonacoEnvironment = {
+  getWorkerUrl(_workerId: string, label: string) {
+    if (label === 'graphql') return 'my-graphql.worker.js';
+    if (label === 'json') return 'json.worker.js';
+    return 'editor.worker.js';
+  },
+};
+```
+
+or, if you have esbuild configured for it:
+
+```ts
+// add entry points to the esbuild script
+const entryPoints = {
+  'my-graphql.worker': '../src/my-graphql.worker.ts',
+  'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+  'json.worker': 'monaco-editor/esm/vs/language/json/json.worker.js',
+};
+
+// add to editor file
+globalThis.MonacoEnvironment = {
+  getWorker(_workerId: any, label: any) {
+    const options: WorkerOptions = {
+      type: 'module',
+      name: label,
+    };
+    if (label === 'graphql') {
+      const url = new URL('./my-graphql.worker.js', import.meta.url);
+      return worker;
+    }
+    if (label === 'json') {
+      const url = new URL('./json.worker.js', import.meta.url);
+      return new Worker(url, options);
+    }
+    const url = new URL('./editor.worker.js', import.meta.url);
+    return new Worker(url, options);
+  },
+};
+```
+
 ## Monaco Editor Tips
 
 If you are familiar with Codemirror/Atom-era terminology and features, here's

From 620c679728755c47c6ebd7f7e9ffd5b1c1f6a342 Mon Sep 17 00:00:00 2001
From: Lesley Dreyer <lesley@terascope.io>
Date: Thu, 19 Feb 2026 17:01:12 -0700
Subject: [PATCH 2/3] lint fix

---
 packages/monaco-graphql/README.md | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md
index 011d4e57798..f35fce020a2 100644
--- a/packages/monaco-graphql/README.md
+++ b/packages/monaco-graphql/README.md
@@ -521,8 +521,12 @@ import GraphQLWorker from './my-graphql.worker?worker';
 
 globalThis.MonacoEnvironment = {
   getWorker(_workerId: string, label: string) {
-    if (label === 'graphql') return new GraphQLWorker();
-    if (label === 'json') return new JsonWorker();
+    if (label === 'graphql') {
+      return new GraphQLWorker();
+    }
+    if (label === 'json') {
+      return new JsonWorker();
+    }
     return new EditorWorker();
   },
 };
@@ -555,8 +559,12 @@ or, if you have webpack configured for it:
 ```ts
 globalThis.MonacoEnvironment = {
   getWorkerUrl(_workerId: string, label: string) {
-    if (label === 'graphql') return 'my-graphql.worker.js';
-    if (label === 'json') return 'json.worker.js';
+    if (label === 'graphql') {
+      return 'my-graphql.worker.js';
+    }
+    if (label === 'json') {
+      return 'json.worker.js';
+    }
     return 'editor.worker.js';
   },
 };

From b392a1c6701e4ddd8d7951013dfc3fcb39943ccc Mon Sep 17 00:00:00 2001
From: Lesley Dreyer <lesley@terascope.io>
Date: Thu, 19 Feb 2026 17:43:26 -0700
Subject: [PATCH 3/3] fix lint

---
 packages/monaco-graphql/README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md
index f35fce020a2..72598dfd1af 100644
--- a/packages/monaco-graphql/README.md
+++ b/packages/monaco-graphql/README.md
@@ -515,8 +515,9 @@ then, in your application:
 
 ```ts
 // Vite query suffixes https://vite.dev/guide/features.html#import-with-query-suffixes
+// eslint-disable-next-line import-x/default
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker';
 import GraphQLWorker from './my-graphql.worker?worker';
 
 globalThis.MonacoEnvironment = {
@@ -582,7 +583,7 @@ const entryPoints = {
 
 // add to editor file
 globalThis.MonacoEnvironment = {
-  getWorker(_workerId: any, label: any) {
+  getWorker(_workerId: string, label: string) {
     const options: WorkerOptions = {
       type: 'module',
       name: label,