feat: add language services

build/atomics/build-core-renderer.mjs

@@ -15,6 +15,8 @@ export default (versions) => buildRenderer(versions, options => {
   options.build.outDir = '../../dist/renderer'
   options.build.emptyOutDir = true
   options.define.__VUE_OPTIONS_API__ = JSON.stringify(false)
+  // Workaround for monaco-editor
+  options.define.__marked_exports = 'exports'
   options.build.rollupOptions.output.manualChunks = (id, { getModuleInfo }) => {
     if (id.includes('monaco-editor') && isInitial(id, { getModuleInfo })) {
       return 'monaco-editor'

env.d.ts

@@ -7,12 +7,17 @@ declare module '*.vue' {
   export default component
 }
 
+declare module '*?worker' {
+  const script: {
+    new(): Worker,
+  }
+  export default script
+}
+
 declare module 'commas:api/main' {
   export * from '@commas/api/main'
 }
 
 declare module 'commas:api/renderer' {
   export * from '@commas/api/renderer'
 }
-
-export {}

resources/examples/custom.css

@@ -5,6 +5,6 @@
 /* An example to customize your app */
 /*
 .title-bar {
-  background: rgb(var(--theme-background));
+  color: rgb(var(--theme-cyan));
 }
 */

src/renderer/assets/monaco-editor.ts

@@ -1,6 +1,33 @@
 import 'monaco-editor/esm/vs/basic-languages/css/css.contribution.js'
 import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js'
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js'
+import 'monaco-editor/esm/vs/language/css/monaco.contribution.js'
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution.js'
 import 'monaco-editor/esm/vs/editor/editor.all.js'
 
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker'
+import CSSWorker from 'monaco-editor/esm/vs/language/css/css.worker.js?worker'
+import TSWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker.js?worker'
+
 export * from 'monaco-editor/esm/vs/editor/editor.api.js'
+
+declare global {
+  interface Window {
+    MonacoEnvironment: {
+      getWorker(workerId: string, label: string): Worker,
+    },
+  }
+}
+
+window.MonacoEnvironment = {
+  getWorker(workerId, label) {
+    switch (label) {
+      case 'css':
+        return new CSSWorker()
+      case 'javascript':
+        return new TSWorker()
+      default:
+        return new EditorWorker()
+    }
+  },
+}