refactor(*): make build result CSP compliant

Author: sumimakito

package.json

@@ -45,7 +45,7 @@
     "@material-design-icons/font": "^0.14.13",
     "axios": "^1.7.7",
     "dayjs": "^1.11.13",
-    "monaco-editor": "0.52.0",
+    "monaco-editor": "0.52.2",
     "pinia": "^3.0.1",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
@@ -76,7 +76,6 @@
     "typescript": "^5.4.5",
     "vite": "^5.4.12",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-monaco-editor": "^1.1.0",
     "vue-tsc": "^2.1.4"
   },
   "browserslist": [

pnpm-lock.yaml

@@ -7,6 +7,9 @@ import { registerGlobalComponents } from './registerGlobalComponents'
 import './styles/index'
 import { createPinia } from 'pinia'
 
+// This only sets up worker initializers. They will be lazy-loaded when needed.
+import '@/monaco-workers'
+
 const i18n = createI18n<typeof english>('en-us', english, { isGlobal: true })
 
 const app = createApp(App)

src/main.ts

@@ -0,0 +1,9 @@
+// Injecting workers for monaco-editor
+
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+
+self.MonacoEnvironment = {
+  getWorker() {
+    return new EditorWorker()
+  },
+}

src/monaco-workers.ts

@@ -9,12 +9,13 @@
       "tests/*": ["tests/*"],
       "config": ["src/config.ts"]
     },
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "allowJs": true,
     "noImplicitAny": false,
     "types": [
-      "vite/client"
+      "vite/client",
+      "monaco-editor",
     ]
   },
   "exclude": ["node_modules", "dist", "coverage", "tests"]

tsconfig.json

@@ -4,7 +4,6 @@ import path from 'path'
 import autoprefixer from 'autoprefixer'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import { visualizer } from 'rollup-plugin-visualizer'
-import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 const basePath = process.env.NODE_ENV !== 'production' || process.env.DISABLE_BASE_PATH === 'true' ? '/' : '/__km_base__/'
 
@@ -33,11 +32,6 @@ export default defineConfig({
         },
       },
     }),
-    // See: https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ((monacoEditorPlugin as any).default as typeof monacoEditorPlugin)({
-      languageWorkers: ['editorWorkerService'],
-    }),
     visualizer({
       filename: path.resolve(__dirname, 'bundle-analyzer/stats-treemap.html'),
       template: 'treemap', // sunburst|treemap|network