feat: add file renaming (vuejs#63)

Co-authored-by: Evan You <[email protected]>

Author: skirtles-code

src/editor/FileSelector.vue

@@ -4,7 +4,7 @@ import { computed, inject, ref, VNode, Ref } from 'vue'
 
 const store = inject('store') as Store
 
-const pending = ref(false)
+const pending = ref<boolean | string>(false)
 const pendingFilename = ref('Comp.vue')
 const importMapFile = 'import-map.json'
 const showImportMap = inject('import-map') as Ref<boolean>
@@ -36,17 +36,18 @@ function startAddFile() {
   pending.value = true
 }
 
-function cancelAddFile() {
+function cancelNameFile() {
   pending.value = false
 }
 
 function focus({ el }: VNode) {
   ;(el as HTMLInputElement).focus()
 }
 
-function doneAddFile() {
+function doneNameFile() {
   if (!pending.value) return
   const filename = pendingFilename.value
+  const oldFilename = pending.value === true ? '' : pending.value
 
   if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
     store.state.errors = [
@@ -55,14 +56,28 @@ function doneAddFile() {
     return
   }
 
-  if (filename in store.state.files) {
+  if (filename !== oldFilename && filename in store.state.files) {
     store.state.errors = [`File "${filename}" already exists.`]
     return
   }
 
   store.state.errors = []
-  cancelAddFile()
-  store.addFile(filename)
+  cancelNameFile()
+
+  if (filename === oldFilename) {
+    return
+  }
+
+  if (oldFilename) {
+    store.renameFile(oldFilename, filename)
+  } else {
+    store.addFile(filename)
+  }
+}
+
+function editFileName(file: string) {
+  pendingFilename.value = file
+  pending.value = file
 }
 
 const fileSel = ref(null)
@@ -85,32 +100,35 @@ function horizontalScroll(e: WheelEvent) {
     @wheel="horizontalScroll"
     ref="fileSel"
   >
-    <div
-      v-for="(file, i) in files"
-      class="file"
-      :class="{ active: store.state.activeFile.filename === file }"
-      @click="store.setActive(file)"
-    >
-      <span class="label">{{
-        file === importMapFile ? 'Import Map' : file
-      }}</span>
-      <span v-if="i > 0" class="remove" @click.stop="store.deleteFile(file)">
-        <svg class="icon" width="12" height="12" viewBox="0 0 24 24">
-          <line stroke="#999" x1="18" y1="6" x2="6" y2="18"></line>
-          <line stroke="#999" x1="6" y1="6" x2="18" y2="18"></line>
-        </svg>
-      </span>
-    </div>
-    <div v-if="pending" class="file pending">
-      <input
-        v-model="pendingFilename"
-        spellcheck="false"
-        @blur="doneAddFile"
-        @keyup.enter="doneAddFile"
-        @keyup.esc="cancelAddFile"
-        @vue:mounted="focus"
-      />
-    </div>
+    <template v-for="(file, i) in files">
+      <div
+        v-if="pending !== file"
+        class="file"
+        :class="{ active: store.state.activeFile.filename === file }"
+        @click="store.setActive(file)"
+        @dblclick="i > 0 && editFileName(file)"
+      >
+        <span class="label">{{
+          file === importMapFile ? 'Import Map' : file
+        }}</span>
+        <span v-if="i > 0" class="remove" @click.stop="store.deleteFile(file)">
+          <svg class="icon" width="12" height="12" viewBox="0 0 24 24">
+            <line stroke="#999" x1="18" y1="6" x2="6" y2="18"></line>
+            <line stroke="#999" x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </span>
+      </div>
+      <div v-if="(pending === true && i === files.length - 1) || (pending === file)" class="file pending">
+        <input
+          v-model="pendingFilename"
+          spellcheck="false"
+          @blur="doneNameFile"
+          @keyup.enter="doneNameFile"
+          @keyup.esc="cancelNameFile"
+          @vue:mounted="focus"
+        />
+      </div>
+    </template>
     <button class="add" @click="startAddFile">+</button>
 
     <div v-if="showImportMap" class="import-map-wrapper">

src/store.ts

@@ -67,6 +67,7 @@ export interface Store {
   setActive: (filename: string) => void
   addFile: (filename: string | File) => void
   deleteFile: (filename: string) => void
+  renameFile: (oldFilename: string, newFilename: string) => void
   getImportMap: () => any
   initialShowOutput: boolean
   initialOutputMode: OutputModes
@@ -167,6 +168,42 @@ export class ReplStore implements Store {
     }
   }
 
+  renameFile(oldFilename: string, newFilename: string) {
+    const { files } = this.state
+    const file = files[oldFilename]
+
+    if (!file) {
+      this.state.errors = [`Could not rename "${oldFilename}", file not found`]
+      return
+    }
+
+    if (!newFilename || oldFilename === newFilename) {
+      this.state.errors = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
+      return
+    }
+
+    file.filename = newFilename
+
+    const newFiles: Record<string, File> = {}
+
+    // Preserve iteration order for files
+    for (const name in files) {
+      if (name === oldFilename) {
+        newFiles[newFilename] = file
+      } else {
+        newFiles[name] = files[name]
+      }
+    }
+
+    this.state.files = newFiles
+
+    if (this.state.mainFile === oldFilename) {
+      this.state.mainFile = newFilename
+    }
+
+    compileFile(this, file)
+  }
+
   serialize() {
     const files = this.getFiles()
     const importMap = files['import-map.json']