fix(expressions): watchers

Kong · Feb 22, 2024 · fb1cf1b · fb1cf1b
1 parent 301c9a0
commit fb1cf1b
Showing 1 changed file with 58 additions and 56 deletions.
diff --git a/packages/core/expressions/src/components/ExpressionsEditor.vue b/packages/core/expressions/src/components/ExpressionsEditor.vue
@@ -11,7 +11,7 @@ import type { ParseResult, Schema } from '@kong/atc-router'
 import { Parser } from '@kong/atc-router'
 import type * as Monaco from 'monaco-editor'
 import * as monaco from 'monaco-editor'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { EMPTY_SCHEMA } from '../schema-presets'
 import { languageId, registerRouteExpression as setupMonaco, theme } from '../setup-monaco'
 
@@ -34,9 +34,14 @@ const emit = defineEmits<{
 const expression = defineModel<string>({ required: true })
 
 const root = ref(null)
-const parseResult = ref(parse(expression.value, props.schema ?? EMPTY_SCHEMA))
+const parseResult = ref<ParseResult | undefined>()
 
-onMounted(async () => {
+const editorClass = computed(() => [
+  'expression-editor',
+  { invalid: parseResult.value?.status !== 'ok' },
+])
+
+onMounted(() => {
   setupMonaco(monaco)
 
   editor = monaco.editor.create(root.value!, {
@@ -63,17 +68,14 @@ onMounted(async () => {
   })
 
   editorModel = editor.getModel()!
+
+  parseResult.value = parse(expression.value, props.schema ?? EMPTY_SCHEMA)
 })
 
 onBeforeUnmount(() => {
   editor?.dispose()
 })
 
-const editorClass = computed(() => [
-  'expression-editor',
-  { invalid: parseResult.value.status !== 'ok' },
-])
-
 watch([expression, () => props.schema], (() => {
   const cb = () => {
     parseResult.value = parse(expression.value, props.schema ?? EMPTY_SCHEMA)
@@ -86,70 +88,70 @@ watch([expression, () => props.schema], (() => {
   return debounce(cb, props.parseDebounce) as typeof cb
 })())
 
-watch(() => parseResult.value, (result) => {
-  emit('parse-result-update', result)
-
+watch(() => parseResult.value, (result?: ParseResult) => {
   let markers: Monaco.editor.IMarkerData[] = []
 
-  switch (result.status) {
-    case 'ok': {
-      break
-    }
-    case 'parseError': {
-      const { parseError } = result
-      const message =
+  if (result !== undefined) {
+    emit('parse-result-update', result)
+
+    switch (result.status) {
+      case 'ok': {
+        break
+      }
+      case 'parseError': {
+        const { parseError } = result
+        const message =
         'parsingError' in parseError.variant
           ? parseError.variant.parsingError
           : parseError.variant.customError
-      if ('pos' in parseError.lineCol) {
-        const [line, col] = parseError.lineCol.pos
-
-        markers = [
-          {
-            severity: monaco.MarkerSeverity.Error,
-            startLineNumber: line,
-            startColumn: col,
-            endLineNumber: line,
-            endColumn: col + 1,
-            message,
-          },
-        ]
-      } else {
-        const [[startLineNumber, startColumn], [endLineNumber, endColumn]] =
+        if ('pos' in parseError.lineCol) {
+          const [line, col] = parseError.lineCol.pos
+
+          markers = [
+            {
+              severity: monaco.MarkerSeverity.Error,
+              startLineNumber: line,
+              startColumn: col,
+              endLineNumber: line,
+              endColumn: col + 1,
+              message,
+            },
+          ]
+        } else {
+          const [[startLineNumber, startColumn], [endLineNumber, endColumn]] =
           parseError.lineCol.span
 
+          markers = [
+            {
+              severity: monaco.MarkerSeverity.Error,
+              startLineNumber,
+              startColumn,
+              endLineNumber,
+              endColumn,
+              message,
+            },
+          ]
+        }
+        break
+      }
+      case 'validationError': {
         markers = [
           {
             severity: monaco.MarkerSeverity.Error,
-            startLineNumber,
-            startColumn,
-            endLineNumber,
-            endColumn,
-            message,
+            startLineNumber: 0,
+            startColumn: 0,
+            endLineNumber: editorModel.getLineCount(),
+            endColumn: editorModel.getLineMaxColumn(editorModel.getLineCount()),
+            message: result.validationError,
           },
         ]
+        break
       }
-      break
-    }
-    case 'validationError': {
-      markers = [
-        {
-          severity: monaco.MarkerSeverity.Error,
-          startLineNumber: 0,
-          startColumn: 0,
-          endLineNumber: editorModel.getLineCount(),
-          endColumn: editorModel.getLineMaxColumn(editorModel.getLineCount()),
-          message: result.validationError,
-        },
-      ]
-      break
     }
   }
 
-  nextTick(() => {
-    monaco.editor.setModelMarkers(editorModel, 'kong-expressions-editor', markers)
-  })
-}, { immediate: true })
+  monaco.editor.setModelMarkers(editorModel, 'kong-expressions-editor', markers)
+})
 </script>
 
 <style lang="scss" scoped>