From c5ea44ca1e6b44f2173eec3b9baa6df115d8f61a Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Thu, 10 Apr 2025 13:32:20 +0000
Subject: [PATCH] chore: update ace-builds integration and fix initialization
 errors

---
 app/package.json                               |  4 ++--
 app/pnpm-lock.yaml                             |  6 +++---
 app/src/components/CodeEditor/CodeEditor.vue   |  9 ++++++++-
 .../components/ConfigHistory/DiffViewer.vue    | 18 ++++++++++++++----
 app/src/composables/useSSE.ts                  |  1 +
 app/src/version.json                           |  2 +-
 app/vite.config.ts                             |  1 -
 7 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/app/package.json b/app/package.json
index b80b4a92..4020fc7d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "build": "vite build",
-    "preview": "vite preview",
+    "preview": "vite preview --host",
     "gettext:extract": "vue-gettext-extract"
   },
   "dependencies": {
@@ -25,6 +25,7 @@
     "@xterm/addon-attach": "^0.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
+    "ace-builds": "^1.39.1",
     "ant-design-vue": "^4.2.6",
     "apexcharts": "^4.5.0",
     "axios": "^1.8.4",
@@ -67,7 +68,6 @@
     "@vitejs/plugin-vue-jsx": "^4.1.2",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/tsconfig": "^0.7.0",
-    "ace-builds": "^1.39.1",
     "autoprefixer": "^10.4.21",
     "eslint": "9.24.0",
     "eslint-plugin-sonarjs": "^3.0.2",
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 49424e3f..7436d312 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@xterm/xterm':
         specifier: ^5.5.0
         version: 5.5.0
+      ace-builds:
+        specifier: ^1.39.1
+        version: 1.39.1
       ant-design-vue:
         specifier: ^4.2.6
         version: 4.2.6(vue@3.5.13(typescript@5.8.3))
@@ -165,9 +168,6 @@ importers:
       '@vue/tsconfig':
         specifier: ^0.7.0
         version: 0.7.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
-      ace-builds:
-        specifier: ^1.39.1
-        version: 1.39.1
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.3)
diff --git a/app/src/components/CodeEditor/CodeEditor.vue b/app/src/components/CodeEditor/CodeEditor.vue
index 7eb159ab..4491a807 100644
--- a/app/src/components/CodeEditor/CodeEditor.vue
+++ b/app/src/components/CodeEditor/CodeEditor.vue
@@ -23,7 +23,14 @@ const value = computed({
   },
 })
 
-ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl)
+onMounted(() => {
+  try {
+    ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl)
+  }
+  catch (error) {
+    console.error('Failed to initialize Ace editor:', error)
+  }
+})
 </script>
 
 <template>
diff --git a/app/src/components/ConfigHistory/DiffViewer.vue b/app/src/components/ConfigHistory/DiffViewer.vue
index e0afd875..a4bd2804 100644
--- a/app/src/components/ConfigHistory/DiffViewer.vue
+++ b/app/src/components/ConfigHistory/DiffViewer.vue
@@ -3,11 +3,11 @@ import type { ConfigBackup } from '@/api/config'
 import type { Ace } from 'ace-builds'
 import { formatDateTime } from '@/lib/helper'
 import ace from 'ace-builds'
-import 'ace-builds/src-noconflict/mode-nginx'
-import 'ace-builds/src-noconflict/theme-monokai'
-
 // Import required modules
-import 'ace-builds/src-min-noconflict/ext-language_tools'
+import extLanguageToolsUrl from 'ace-builds/src-min-noconflict/ext-language_tools?url'
+import 'ace-builds/src-noconflict/mode-nginx'
+
+import 'ace-builds/src-noconflict/theme-monokai'
 
 const props = defineProps<{
   records: ConfigBackup[]
@@ -33,6 +33,16 @@ const originalTitle = ref('')
 const modifiedTitle = ref('')
 const errorMessage = ref('')
 
+// Initialize ace language tools
+onMounted(() => {
+  try {
+    ace.config.setModuleUrl('ace/ext/language_tools', extLanguageToolsUrl)
+  }
+  catch (error) {
+    console.error('Failed to initialize Ace editor language tools:', error)
+  }
+})
+
 // Check if there is content to display
 function hasContent() {
   return originalText.value && modifiedText.value
diff --git a/app/src/composables/useSSE.ts b/app/src/composables/useSSE.ts
index 9ad9a0dd..e62afc74 100644
--- a/app/src/composables/useSSE.ts
+++ b/app/src/composables/useSSE.ts
@@ -5,6 +5,7 @@ import { onUnmounted, shallowRef } from 'vue'
 export interface SSEOptions {
   url: string
   token: string
+  // eslint-disable-next-line ts/no-explicit-any
   onMessage?: (data: any) => void
   onError?: () => void
   parseData?: boolean
diff --git a/app/src/version.json b/app/src/version.json
index dabeb50b..17718a74 100644
--- a/app/src/version.json
+++ b/app/src/version.json
@@ -1 +1 @@
-{"version":"2.0.0-rc.5","build_id":13,"total_build":407}
\ No newline at end of file
+{"version":"2.0.0-rc.5","build_id":19,"total_build":413}
\ No newline at end of file
diff --git a/app/vite.config.ts b/app/vite.config.ts
index d1aa52da..00bada71 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -107,7 +107,6 @@ export default defineConfig(({ mode }) => {
         output: {
           manualChunks: {
             'ace-editor': ['ace-builds'],
-            'ace-ext': ['ace-builds/src-min-noconflict/ext-language_tools'],
           },
         },
       },