feat(ui): add the draft state * on code editor (#1131)

vitest-dev · Apr 21, 2022 · 571b94b · 571b94b
1 parent 4d1e0a0
commit 571b94b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
@@ -8,6 +8,7 @@ import type { ModuleGraphData } from '#types'
 
 const data = ref<ModuleGraphData>({ externalized: [], graph: {}, inlined: [] })
 const graph = ref<ModuleGraph>({ nodes: [], links: [] })
+const draft = ref(false)
 
 debouncedWatch(
   current,
@@ -32,6 +33,9 @@ const changeViewMode = (view: Params['view']) => {
 const consoleCount = computed(() => {
   return currentLogs.value?.reduce((s, { size }) => s + size, 0) ?? 0
 })
+function onDraft(value: boolean) {
+  draft.value = value
+}
 </script>
 
 <template>
@@ -72,7 +76,7 @@ const consoleCount = computed(() => {
           :class="{ 'tab-button-active': viewMode === 'editor' }"
           @click="changeViewMode('editor')"
         >
-          Code
+          {{ draft ? '*&#160;': '' }}Code
         </button>
         <button
           tab-button
@@ -86,7 +90,7 @@ const consoleCount = computed(() => {
 
     <div flex flex-col flex-1 overflow="hidden">
       <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
-      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" />
+      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" @draft="onDraft" />
       <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" />
       <ViewReport v-else-if="!viewMode" :file="current" />
     </div>

diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
@@ -8,15 +8,22 @@ import type { File } from '#types'
 const props = defineProps<{
   file?: File
 }>()
+const emit = defineEmits<{ (event: 'draft', value: boolean): void }>()
 
 const code = ref('')
+const serverCode = shallowRef<string | undefined>(undefined)
+const draft = ref(false)
 watch(() => props.file,
   async() => {
     if (!props.file || !props.file?.filepath) {
       code.value = ''
+      serverCode.value = code.value
+      draft.value = false
       return
     }
     code.value = await client.rpc.readFile(props.file.filepath)
+    serverCode.value = code.value
+    draft.value = false
   },
   { immediate: true },
 )
@@ -44,8 +51,16 @@ useResizeObserver(editor, () => {
   cm.value?.refresh()
 })
 
-watch([cm, failed], () => {
-  if (!cm.value) {
+function codemirrorChanges() {
+  draft.value = serverCode.value !== cm.value!.getValue()
+}
+
+watch(draft, (d) => {
+  emit('draft', d)
+}, { immediate: true })
+
+watch([cm, failed], ([cmValue]) => {
+  if (!cmValue) {
     clearListeners()
     return
   }
@@ -57,6 +72,8 @@ watch([cm, failed], () => {
     widgets.length = 0
     handles.length = 0
 
+    cmValue.on('changes', codemirrorChanges)
+
     failed.value.forEach((i) => {
       const e = i.result?.error
       const stacks = (e?.stacks || []).filter(i => i.file && i.file === props.file?.filepath)
@@ -86,13 +103,15 @@ watch([cm, failed], () => {
       }
     })
     if (!hasBeenEdited.value)
-      cm.value?.clearHistory() // Prevent getting access to initial state
+      cmValue.clearHistory() // Prevent getting access to initial state
   }, 100)
 }, { flush: 'post' })
 
 async function onSave(content: string) {
   hasBeenEdited.value = true
   await client.rpc.writeFile(props.file!.filepath, content)
+  serverCode.value = content
+  draft.value = false
 }
 </script>