fix ace editor production build issues

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "tsc": "tsc --noEmit",
+    "tsc": "tsc --noEmit && vue-tsc",
     "lint": "eslint --ext .js,.vue,.ts src",
     "test:e2e": "playwright test --project=chromium",
     "test:e2e:all": "playwright test",
@@ -32,6 +32,7 @@
     "@playwright/test": "^1.34.3",
     "@quasar/vite-plugin": "^1.3.3",
     "@tauri-apps/cli": "^1.3.1",
+    "@types/ace": "^0.0.48",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/tsconfig": "^0.4.0",

src-tauri/Cargo.toml

@@ -18,7 +18,7 @@ tauri-build = { version = "1", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "1.3", features = ["api-all"] }
-fetch_reqwest = { path = "../../../rust/fetch_reqwest" }
+fetch_reqwest = { git = "https://github.com/cars10/fetch_reqwest" }
 path-clean = "1"
 
 [features]

src/App.vue

@@ -2,10 +2,6 @@
   <q-layout view="hHh lpR fff" style="outline: none !important;">
     <app-header v-if="connectionStore.activeCluster" />
 
-    <q-card>
-      {{ DESKTOP_BUILD}}
-    </q-card>
-
     <q-page-container>
       <div class="q-ma-md">
         <router-view v-if="connectionStore.activeCluster?.status !== 'unknown' || route.name === 'settings'" />
@@ -36,7 +32,6 @@
   import NetworkError from './components/shared/NetworkError.vue'
   import { useThemeStore } from './store/theme.js'
   import { useConnectionStore } from './store/connection'
-  import { DESKTOP_BUILD } from './consts'
 
   const themeStore = useThemeStore()
   const connectionStore = useConnectionStore()

src/components/nodes/NodesTable.vue

@@ -80,7 +80,6 @@
 
   const filter = ref('')
   const items = computed(() => {
-    console.log(props.nodes)
     const results = filterItems(props.nodes, filter.value, ['name', 'ip'])
     return results.map(r => new ElasticsearchNode(r))
   })

src/composables/CodeEditor.js

@@ -1,13 +1,20 @@
 import { queryKeywords, querySnippets, queryValues } from '../autocomplete'
 
-import ace from 'ace-builds/src/ace'
+import ace from 'ace-builds/src-noconflict/ace'
+
+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url'
+import themeTomorrowNightUrl from 'ace-builds/src-noconflict/theme-tomorrow_night?url'
+import searchBoxUrl from 'ace-builds/src-noconflict/ext-searchbox?url'
+import languageToolsUrl from 'ace-builds/src-noconflict/ext-language_tools?url'
+
+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
+ace.config.setModuleUrl('ace/theme/tomorrow_night', themeTomorrowNightUrl)
+ace.config.setModuleUrl('ace/ext/searchbox', searchBoxUrl)
+ace.config.setModuleUrl('ace/ext/language_tools', languageToolsUrl)
+ace.config.setModuleUrl('ace/snippets', languageToolsUrl)
 
-import 'ace-builds/src/theme-tomorrow_night'
-import 'ace-builds/src/mode-json'
-import 'ace-builds/src/ext-searchbox'
-import 'ace-builds/src/ext-language_tools'
-import { useThemeStore } from '../store/theme'
 import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { useThemeStore } from '../store/theme'
 import { useCodeEditorStore } from '../store/code_editor'
 import { beautify } from '../helpers/beautify'
 import { writeToClipboard } from '../helpers/clipboard'
@@ -85,12 +92,7 @@ export const useCodeEditor = (editorRef, { readOnly, focus, initialValue, emit,
       }
     })
 
-    const { completer } = initializeSnippets()
-    aceEditor.setOptions({
-      enableBasicAutocompletion: [completer],
-      enableLiveAutocompletion: true,
-      enableSnippets: true
-    })
+    initializeSnippets(aceEditor)
 
     if (emit) {
       aceEditor.on('change', () => {
@@ -130,72 +132,72 @@ export const useCodeEditor = (editorRef, { readOnly, focus, initialValue, emit,
   }
 }
 
-export const initializeSnippets = () => {
-  let snippetManager
-
+export const initializeSnippets = aceEditor => {
   ace.config.loadModule('ace/snippets', m => {
-    snippetManager = m.snippetManager
+    const snippetManager = m.snippetManager
     const parsedSnippets = snippetManager.parseSnippetFile(querySnippets)
     snippetManager.register(parsedSnippets, 'json')
-  })
 
-  const snippets = snippetManager.snippetMap.json.map(snip => {
-    return {
-      caption: snip.name,
-      snippet: snip.content,
-      meta: '[Snip]',
-      type: 'snippet',
-      score: 1,
-      docHTML: snip.content
-    }
-  })
+    const snippets = snippetManager.snippetMap.json.map(snip => {
+      return {
+        caption: snip.name,
+        snippet: snip.content,
+        meta: '[Snip]',
+        type: 'snippet',
+        score: 1,
+        docHTML: snip.content
+      }
+    })
 
-  const completer = {
-    getCompletions: function (editor, session, pos, prefix, callback) {
-      const token = session.getTokenAt(pos.row, pos.col)
-      const row = session.getLine(pos.row)
-      const addQuotes = token && token.type === 'text' && token.value.indexOf('"') === -1
-      const isKey = row && row.indexOf('":') === -1
-
-      const keywords = queryKeywords.map(word => {
-        let actualWord = word
-        if (addQuotes && isKey) {
-          actualWord = `"${word}": `
-        } else if (addQuotes) {
-          actualWord = `"${word}"`
-        }
-
-        return {
-          caption: word,
-          value: actualWord
-        }
-      })
+    const completer = {
+      getCompletions: function (editor, session, pos, prefix, callback) {
+        const token = session.getTokenAt(pos.row, pos.col)
+        const row = session.getLine(pos.row)
+        const addQuotes = token && token.type === 'text' && token.value.indexOf('"') === -1
+        const isKey = row && row.indexOf('":') === -1
+
+        const keywords = queryKeywords.map(word => {
+          let actualWord = word
+          if (addQuotes && isKey) {
+            actualWord = `"${word}": `
+          } else if (addQuotes) {
+            actualWord = `"${word}"`
+          }
 
-      const values = queryValues.map(word => {
-        if (addQuotes) {
           return {
             caption: word,
-            value: `"${word}"`
+            value: actualWord
           }
-        } else {
-          return {
-            caption: word,
-            value: word
+        })
+
+        const values = queryValues.map(word => {
+          if (addQuotes) {
+            return {
+              caption: word,
+              value: `"${word}"`
+            }
+          } else {
+            return {
+              caption: word,
+              value: word
+            }
           }
-        }
-      })
+        })
 
-      let allCompletions = []
+        let allCompletions = []
 
-      if (isKey && addQuotes) allCompletions = snippets
-      if (isKey) allCompletions = allCompletions.concat(keywords)
-      if (!isKey) allCompletions = allCompletions.concat(values)
+        if (isKey && addQuotes) allCompletions = snippets
+        if (isKey) allCompletions = allCompletions.concat(keywords)
+        if (!isKey) allCompletions = allCompletions.concat(values)
 
-      return callback(null, allCompletions)
+        return callback(null, allCompletions)
+      }
     }
-  }
 
-  return {
-    completer
-  }
+    aceEditor.setOptions({
+      enableBasicAutocompletion: [completer],
+      enableLiveAutocompletion: true,
+      enableSnippets: true
+    })
+  })
 }

src/consts.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-export const DESKTOP_BUILD = true// !!import.meta.env.VUE_APP_DESKTOP_BUILD
+export const DESKTOP_BUILD = !!import.meta.env.VITE_APP_DESKTOP_BUILD
 
 export const SHOW_CORS_HINT = true
 export const REQUEST_DEFAULT_HEADERS = {

tsconfig.json

@@ -1,21 +1,26 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
     "lib": [
-      "ESNext",
-      "DOM"
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
     ],
     "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
     "noEmit": true,
-    "allowJs": true
+    "jsx": "preserve",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src/**/*.ts",

tsconfig.node.json

@@ -1,7 +1,12 @@
 {
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
-  }
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
 }

yarn.lock

@@ -317,6 +317,11 @@
     "@tauri-apps/cli-win32-ia32-msvc" "1.3.1"
     "@tauri-apps/cli-win32-x64-msvc" "1.3.1"
 
+"@types/ace@^0.0.48":
+  version "0.0.48"
+  resolved "https://registry.yarnpkg.com/@types/ace/-/ace-0.0.48.tgz#1cb81872a282da1b49de16976d39e767e5ca435d"
+  integrity sha512-esV6hOWiDOZ6d7w5S11iLu6LQsPGe/9RPzhri7gNNLdrK1LFpO9/m7IZhQL6dat0JHICJ7l51zvHAiCgnPLLHA==
+
 "@types/json-schema@^7.0.9":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"