refactor: optimize Monaco editor integration and improve JSON handling

- Updated nuxt.config.ts to conditionally set animations based on the development environment.
- Modified useDebug composable to disable the minimap in the Monaco editor.
- Replaced JSON.stringify calls with a new stringifyForEditor method across multiple components to enhance performance and caching of JSON data.
- Introduced an editorJsonCache to store serialized JSON for improved efficiency in rendering editor content.

Author: tacxou

apps/web/nuxt.config.ts

@@ -198,7 +198,7 @@ export default defineNuxtConfig({
       },
     },
     extras: {
-      animations: 'all',
+      animations: IS_DEV ? 'all' : [],
     },
   },
   monacoEditor: {

apps/web/src/composables/useDebug.ts

@@ -61,7 +61,7 @@ export function useDebug() {
       theme: $q.dark.isActive ? 'vs-dark' : 'vs-light',
       readOnly: true,
       minimap: {
-        enabled: true,
+        enabled: false,
       },
       largeFileOptimizations: true,
       scrollBeyondLastColumn: 0,

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

@@ -61,9 +61,9 @@ div
             q-separator(v-if="tabs[keyCompute + '_' + key]")
             q-tab-panels.overflow-auto(v-model="tabs[keyCompute + '_' + key]")
               q-tab-panel(name="params")
-                MonacoEditor(style="height: 45vh; width: 100%" :model-value="JSON.stringify(job.params, null, 2)" :options="monacoOptions" lang="json")
+                MonacoEditor(style="height: 45vh; width: 100%" :model-value="stringifyForEditor(job.params)" :options="monacoOptions" lang="json")
               q-tab-panel(name="result")
-                MonacoEditor(style="height: 45vh; width: 100%;" :model-value="JSON.stringify(job.result, null, 2)" :options="monacoOptions" lang="json")
+                MonacoEditor(style="height: 45vh; width: 100%;" :model-value="stringifyForEditor(job.result)" :options="monacoOptions" lang="json")
       q-timeline-entry.text-h5(v-if='empty' icon='mdi-flag-off' title='Fin de la liste...' color="red")
 </template>
 
@@ -73,6 +73,7 @@ export default defineNuxtComponent({
   data() {
     return {
       tabs: {},
+      editorJsonCache: new WeakMap<object, string>(),
       jobsByOptions: [
         { label: 'Jour', value: 'DD/MM/YYYY' },
         { label: 'Mois', value: 'MM/YYYY' },
@@ -161,6 +162,27 @@ export default defineNuxtComponent({
           return 'mdi-help'
       }
     },
+    stringifyForEditor(payload: unknown): string {
+      if (payload && typeof payload === 'object') {
+        const cached = this.editorJsonCache.get(payload as object)
+        if (cached) {
+          return cached
+        }
+      }
+
+      let value = ''
+      try {
+        value = JSON.stringify(payload ?? null, null, 2) ?? 'null'
+      } catch {
+        value = String(payload)
+      }
+
+      if (payload && typeof payload === 'object') {
+        this.editorJsonCache.set(payload as object, value)
+      }
+
+      return value
+    },
   },
 })
 </script>

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

@@ -57,9 +57,9 @@ div
             q-separator(v-if="tabs[keyCompute + '_' + key]")
             q-tab-panels.overflow-auto(v-model="tabs[keyCompute + '_' + key]")
               q-tab-panel(name="params")
-                MonacoEditor(style="height: 45vh; width: 100%" :model-value="JSON.stringify(job.params, null, 2)" :options="monacoOptions" lang="json")
+                MonacoEditor(style="height: 45vh; width: 100%" :model-value="stringifyForEditor(job.params)" :options="monacoOptions" lang="json")
               q-tab-panel(name="result")
-                MonacoEditor(style="height: 45vh; width: 100%;" :model-value="JSON.stringify(job.result, null, 2)" :options="monacoOptions" lang="json")
+                MonacoEditor(style="height: 45vh; width: 100%;" :model-value="stringifyForEditor(job.result)" :options="monacoOptions" lang="json")
       q-timeline-entry.text-h5(v-if='empty' icon='mdi-flag-off' title='Fin de la liste...' color="red")
 </template>
 
@@ -69,6 +69,7 @@ export default defineComponent({
   data() {
     return {
       tabs: {},
+      editorJsonCache: new WeakMap<object, string>(),
       jobsByOptions: [
         { label: 'Jour', value: 'DD/MM/YYYY' },
         { label: 'Mois', value: 'MM/YYYY' },
@@ -157,6 +158,27 @@ export default defineComponent({
           return 'mdi-help'
       }
     },
+    stringifyForEditor(payload: unknown): string {
+      if (payload && typeof payload === 'object') {
+        const cached = this.editorJsonCache.get(payload as object)
+        if (cached) {
+          return cached
+        }
+      }
+
+      let value = ''
+      try {
+        value = JSON.stringify(payload ?? null, null, 2) ?? 'null'
+      } catch {
+        value = String(payload)
+      }
+
+      if (payload && typeof payload === 'object') {
+        this.editorJsonCache.set(payload as object, value)
+      }
+
+      return value
+    },
   },
 })
 </script>

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

@@ -110,7 +110,7 @@ q-page.container.q-pa-sm
         q-td(colspan="100%" style="padding: 0")
           MonacoEditor(
             style="height: 45vh; width: 100%"
-            :model-value="JSON.stringify(props.row?.result, null, 2)"
+            :model-value="stringifyForEditor(props.row?.result)"
             :options="monacoOptions"
             lang="json"
           )
@@ -123,6 +123,7 @@ export default defineComponent({
   data() {
     return {
       expanded: [] as string[],
+      editorJsonCache: new WeakMap<object, string>(),
       foptions: [
         { label: 'Ok', value: '9' },
         { label: 'En erreur', value: '-1' },
@@ -288,6 +289,27 @@ export default defineComponent({
     open(path): void {
       window.open(path, '_blank')
     },
+    stringifyForEditor(payload: unknown): string {
+      if (payload && typeof payload === 'object') {
+        const cached = this.editorJsonCache.get(payload as object)
+        if (cached) {
+          return cached
+        }
+      }
+
+      let value = ''
+      try {
+        value = JSON.stringify(payload ?? null, null, 2) ?? 'null'
+      } catch {
+        value = String(payload)
+      }
+
+      if (payload && typeof payload === 'object') {
+        this.editorJsonCache.set(payload as object, value)
+      }
+
+      return value
+    },
     expandRow(props): void {
       this.expanded = this.expanded.includes(props.row.jobId) ? [] : [props.row.jobId]
     },

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

@@ -96,7 +96,7 @@
         q-tr(v-if="props.expand" :props="props")
           q-td(colspan="100%" style="padding: 0;")
             MonacoEditor(
-              :model-value="JSON.stringify(props.row, null, 2)"
+              :model-value="stringifyForEditor(props.row)"
               lang="json"
               :options="monacoOptions"
               style="height: 35vh; width: 100%"
@@ -111,6 +111,7 @@ export default defineComponent({
     return {
       filter: ref(''),
       expanded: ref<any[]>([]),
+      editorJsonCache: new WeakMap<object, string>(),
     }
   },
   async setup() {
@@ -234,6 +235,27 @@ export default defineComponent({
     expandRow(props) {
       this.expanded = this.expanded.includes(props.row._id) ? [] : [props.row._id]
     },
+    stringifyForEditor(payload: unknown): string {
+      if (payload && typeof payload === 'object') {
+        const cached = this.editorJsonCache.get(payload as object)
+        if (cached) {
+          return cached
+        }
+      }
+
+      let value = ''
+      try {
+        value = JSON.stringify(payload ?? null, null, 2) ?? 'null'
+      } catch {
+        value = String(payload)
+      }
+
+      if (payload && typeof payload === 'object') {
+        this.editorJsonCache.set(payload as object, value)
+      }
+
+      return value
+    },
     open(path) {
       window.open(path, '_blank')
     },