fix: debounce editor updates

Author: KaelWD

package.json

@@ -65,6 +65,7 @@
     "@microsoft/api-extractor": "^7.42.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@types/codemirror": "^5.60.15",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.25",
     "@types/prettier": "^2.7.3",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -79,6 +80,7 @@
     "fflate": "^0.8.2",
     "hash-sum": "^2.0.0",
     "lint-staged": "^15.5.1",
+    "lodash-es": "^4.17.21",
     "monaco-editor-core": "^0.46.0",
     "monaco-editor-textmate": "^4.0.0",
     "monaco-textmate": "^3.0.1",

pnpm-lock.yaml

@@ -21,6 +21,7 @@ import parserBabel from 'prettier/plugins/babel'
 import parserHtml from 'prettier/plugins/html'
 import parserPostcss from 'prettier/plugins/postcss'
 import prettier from 'prettier/standalone'
+import debounce from 'lodash-es/debounce'
 
 const props = withDefaults(
   defineProps<{
@@ -149,8 +150,21 @@ onMounted(async () => {
     store.state.showFileExplorer = !store.state.showFileExplorer
   })
 
-  editorInstance.onDidChangeModelContent(() => {
+  function onUpdate () {
     emit('change', editorInstance.getValue())
+  }
+
+  let debouncedUpdate = debounce(onUpdate, 2000)
+
+  watch(() => !!store.state.errors.length, hasErrors => {
+    debouncedUpdate.cancel()
+    debouncedUpdate = hasErrors
+      ? debounce(onUpdate, 5000)
+      : debounce(onUpdate, 2000)
+  })
+
+  editorInstance.onDidChangeModelContent(() => {
+    debouncedUpdate()
   })
 
   editorInstance.onDidBlurEditorWidget(async () => {
@@ -178,6 +192,7 @@ onMounted(async () => {
     } catch (err) {}
 
     if (code !== props.value) {
+      debouncedUpdate.cancel()
       emit('change', code)
     }
   })