feat: intégrer les options de Monaco Editor dans plusieurs composants pour une meilleure gestion de l'éditeur

Author: tacxou

apps/web/nuxt.config.ts

@@ -1,6 +1,5 @@
 import { resolve } from 'path'
 import { readFileSync, writeFileSync } from 'fs'
-import pugPlugin from 'vite-plugin-pug'
 import openapiTS, { astToString, COMMENT_HEADER } from 'openapi-typescript'
 import { defineNuxtConfig } from 'nuxt/config'
 import { parse } from 'yaml'
@@ -216,13 +215,15 @@ export default defineNuxtConfig({
     define: {
       'process.env.DEBUG': process.env.NODE_ENV === 'development',
     },
-    plugins: [
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      pugPlugin(<any>{
-        pretty: true,
-        compilerOptions: {},
-      }),
-    ],
+    vue: {
+      template: {
+        preprocessOptions: {
+          pug: {
+            pretty: true,
+          },
+        },
+      },
+    },
   },
   alias: {
     cookie: resolve(__dirname, '../node_modules/cookie'),

apps/web/src/composables/useDebug.ts

@@ -1,4 +1,7 @@
+import * as Monaco from 'monaco-editor'
+
 export function useDebug() {
+  const $q = useQuasar()
   const route = useRoute()
   const cachedDebug = ref<boolean | null>(null)
 
@@ -47,5 +50,17 @@ export function useDebug() {
     }
   }
 
-  return { debug, initDebug }
+  const monacoOptions = computed<Monaco.editor.IStandaloneEditorConstructionOptions>(() => {
+    return {
+      theme: $q.dark.isActive ? 'vs-dark' : 'vs-light',
+      readOnly: true,
+      minimap: {
+        enabled: true,
+      },
+      scrollBeyondLastColumn: 0,
+      scrollBeyondLastLine: false,
+    }
+  })
+
+  return { debug, initDebug, monacoOptions }
 }

apps/web/src/pages/identities/table/[_id]/debug.vue

@@ -30,8 +30,9 @@ export default defineNuxtComponent({
   },
   setup() {
     const { toPlainAndCrush } = useIdentityUtils()
+    const { monacoOptions } = useDebug()
 
-    return { toPlainAndCrush }
+    return { toPlainAndCrush, monacoOptions }
   },
   computed: {
     crushedIdentity(): Record<string, any> {
@@ -40,15 +41,6 @@ export default defineNuxtComponent({
       }
       return this.identity as Record<string, any>
     },
-    monacoOptions() {
-      return {
-        theme: this.$q.dark.isActive ? 'vs-dark' : 'vs-light',
-        readOnly: true,
-        minimap: {
-          enabled: true,
-        },
-      }
-    },
   },
 })
 </script>

apps/web/src/pages/identities/table/[_id]/jobs.vue

@@ -85,24 +85,15 @@ export default defineNuxtComponent({
   setup() {
     const empty = ref(false)
     const jobs = ref<any>([])
+    const { monacoOptions } = useDebug()
 
     return {
       empty,
       jobs,
+      monacoOptions,
     }
   },
   computed: {
-    monacoOptions() {
-      return <Monaco.editor.IStandaloneEditorConstructionOptions>{
-        theme: this.$q.dark.isActive ? 'vs-dark' : 'vs-light',
-        readOnly: true,
-        minimap: {
-          enabled: true,
-        },
-        scrollBeyondLastColumn: 0,
-        scrollBeyondLastLine: false,
-      }
-    },
     jobsBy: {
       get() {
         return this.$route.query.jobsBy ? `${this.$route.query.jobsBy}` : 'DD/MM/YYYY'

apps/web/src/pages/jobs/details.vue

@@ -82,6 +82,7 @@ export default defineComponent({
     const empty = ref(false)
     const jobs = ref<any>([])
     const $route = useRoute()
+    const { monacoOptions } = useDebug()
 
     const load = async (index, done) => {
       const offset = (index - 1) * 10
@@ -100,23 +101,13 @@ export default defineComponent({
     }
 
     return {
+      monacoOptions,
       empty,
       jobs,
       load,
     }
   },
   computed: {
-    monacoOptions() {
-      return <Monaco.editor.IStandaloneEditorConstructionOptions>{
-        theme: this.$q.dark.isActive ? 'vs-dark' : 'vs-light',
-        readOnly: true,
-        minimap: {
-          enabled: true,
-        },
-        scrollBeyondLastColumn: 0,
-        scrollBeyondLastLine: false,
-      }
-    },
     jobsBy: {
       get() {
         return this.$route.query.jobsBy ? `${this.$route.query.jobsBy}` : 'DD/MM/YYYY'

apps/web/src/pages/jobs/table.vue

@@ -112,6 +112,7 @@ export default defineComponent({
     }
   },
   async setup() {
+    const { monacoOptions } = useDebug()
     const $route = useRoute()
     const query = computed(() => {
       return {
@@ -140,6 +141,7 @@ export default defineComponent({
     })
 
     return {
+      monacoOptions,
       rows,
       pending,
       error,
@@ -177,17 +179,6 @@ export default defineComponent({
     stateFilter(): string {
       return (this.$route.query['filters[:state]'] as string) || '9'
     },
-    monacoOptions(): Monaco.editor.IStandaloneEditorConstructionOptions {
-      return <Monaco.editor.IStandaloneEditorConstructionOptions>{
-        theme: this.$q.dark.isActive ? 'vs-dark' : 'vs-light',
-        readOnly: true,
-        minimap: {
-          enabled: true,
-        },
-        scrollBeyondLastColumn: 0,
-        scrollBeyondLastLine: false,
-      }
-    },
   },
   methods: {
     updateStateFilter(selection: { value: string | null }): void {

apps/web/src/pages/lifecycles/table.vue

@@ -72,6 +72,7 @@ export default defineComponent({
     }
   },
   async setup() {
+    const { monacoOptions } = useDebug()
     const route = useRoute()
     const router = useRouter()
 
@@ -108,6 +109,7 @@ export default defineComponent({
     })
 
     return {
+      monacoOptions,
       pagination,
 
       getLifecycleName,
@@ -151,17 +153,6 @@ export default defineComponent({
         },
       ]
     },
-    monacoOptions(): Monaco.editor.IStandaloneEditorConstructionOptions {
-      return <Monaco.editor.IStandaloneEditorConstructionOptions>{
-        theme: this.$q.dark.isActive ? 'vs-dark' : 'vs-light',
-        readOnly: true,
-        minimap: {
-          enabled: true,
-        },
-        scrollBeyondLastColumn: 0,
-        scrollBeyondLastLine: false,
-      }
-    },
   },
   methods: {
     async onRequest(props) {

apps/web/src/pages/settings/agents/[_id]/debug.vue

@@ -24,16 +24,11 @@ export default defineNuxtComponent({
       required: true,
     },
   },
-  computed: {
-    monacoOptions() {
-      return {
-        theme: this.$q.dark.isActive ? 'vs-dark' : 'vs-light',
-        readOnly: true,
-        minimap: {
-          enabled: true,
-        },
-      }
-    },
+  setup() {
+    const { monacoOptions } = useDebug()
+    return {
+      monacoOptions,
+    }
   },
 })
 </script>