refactor

Author: yyx990803

src/codemirror/CodeMirror.vue

@@ -47,8 +47,12 @@ onMounted(() => {
   })
 
   watchEffect(() => {
-    editor.setValue(props.value)
+    const cur = editor.getValue()
+    if (props.value !== cur) {
+      editor.setValue(props.value)
+    }
   })
+
   watchEffect(() => {
     editor.setOption('mode', props.mode)
   })
@@ -58,9 +62,12 @@ onMounted(() => {
   }, 50)
 
   if (needAutoResize) {
-    window.addEventListener('resize', debounce(() => {
-      editor.refresh()
-    }))
+    window.addEventListener(
+      'resize',
+      debounce(() => {
+        editor.refresh()
+      })
+    )
   }
 })
 </script>

src/editor/Editor.vue

@@ -9,11 +9,11 @@ import { ReplStore } from '../store'
 const store = inject('store') as ReplStore
 
 const onChange = debounce((code: string) => {
-  store.activeFile.code = code
+  store.state.activeFile.code = code
 }, 250)
 
 const activeMode = computed(() =>
-  store.state.activeFilename.endsWith('.vue') ? 'htmlmixed' : 'javascript'
+  store.state.activeFile.filename.endsWith('.vue') ? 'htmlmixed' : 'javascript'
 )
 </script>
 
@@ -22,7 +22,7 @@ const activeMode = computed(() =>
   <div class="editor-container">
     <CodeMirror
       @change="onChange"
-      :value="store.state.activeCode"
+      :value="store.state.activeFile.code"
       :mode="activeMode"
     />
     <Message :err="store.state.errors[0]" />

src/editor/FileSelector.vue

@@ -49,7 +49,7 @@ function doneAddFile() {
     <div
       v-for="(file, i) in files"
       class="file"
-      :class="{ active: store.state.activeFilename === file }"
+      :class="{ active: store.state.activeFile.filename === file }"
       @click="store.setActive(file)"
     >
       <span class="label">{{ file }}</span>
@@ -73,7 +73,7 @@ function doneAddFile() {
     <div
       v-if="showImportMap"
       class="file import-map"
-      :class="{ active: store.state.activeFilename === importMapFile }"
+      :class="{ active: store.state.activeFile.filename === importMapFile }"
       @click="store.setActive(importMapFile)"
     >
       <span class="label">Import Map</span>

src/output/Output.vue

@@ -34,7 +34,7 @@ const mode = ref<Modes>('preview')
       v-else
       readonly
       :mode="mode === 'css' ? 'css' : 'javascript'"
-      :value="store.activeFile.compiled[mode]"
+      :value="store.state.activeFile.compiled[mode]"
     />
   </div>
 </template>

src/store.ts

@@ -33,8 +33,7 @@ export class File {
 
 export interface StoreState {
   files: Record<string, File>
-  activeFilename: string
-  activeCode: string
+  activeFile: File
   errors: (string | Error)[]
   vueRuntimeURL: string
 }
@@ -69,15 +68,14 @@ export class ReplStore {
 
     this.state = reactive({
       files,
-      activeFilename: MAIN_FILE,
-      activeCode: files[MAIN_FILE].code,
+      activeFile: files[MAIN_FILE],
       errors: [],
       vueRuntimeURL: this.defaultVueRuntimeURL
     })
 
     this.initImportMap()
 
-    watchEffect(() => compileFile(this, this.activeFile))
+    watchEffect(() => compileFile(this, this.state.activeFile))
 
     for (const file in this.state.files) {
       if (file !== MAIN_FILE) {
@@ -86,13 +84,8 @@ export class ReplStore {
     }
   }
 
-  get activeFile() {
-    return this.state.files[this.state.activeFilename]
-  }
-
   setActive(filename: string) {
-    this.state.activeFilename = filename
-    this.state.activeCode = this.activeFile.code
+    this.state.activeFile = this.state.files[filename]
   }
 
   addFile(filename: string) {
@@ -102,8 +95,8 @@ export class ReplStore {
 
   deleteFile(filename: string) {
     if (confirm(`Are you sure you want to delete ${filename}?`)) {
-      if (this.state.activeFilename === filename) {
-        this.state.activeFilename = MAIN_FILE
+      if (this.state.activeFile.filename === filename) {
+        this.state.activeFile = this.state.files[MAIN_FILE]
       }
       delete this.state.files[filename]
     }

test/main.ts

@@ -13,11 +13,11 @@ const App = {
 
     watchEffect(() => history.replaceState({}, '', store.serialize()))
 
-    setTimeout(() => {
+    setInterval(() => {
       store.setFiles({
         'App.vue': '<template>Force update files</template>'
       })
-    }, 1000);
+    }, 5000);
 
     // store.setVueVersion('3.2.8')