refactor: move non import-map files under src for cleaner path

auto completion

Author: yyx990803

src/editor/FileSelector.vue

@@ -4,7 +4,16 @@ import { computed, inject, ref, VNode, Ref } from 'vue'
 
 const store = inject('store') as Store
 
+/**
+ * When `true`: indicates adding a new file
+ * When `string`: indicates renaming a file, and holds the old filename in case
+ * of cancel.
+ */
 const pending = ref<boolean | string>(false)
+/**
+ * Text shown in the input box when editing a file's name
+ * This is a display name so it should always strip off the `src/` prefix.
+ */
 const pendingFilename = ref('Comp.vue')
 const showImportMap = inject('import-map') as Ref<boolean>
 const files = computed(() =>
@@ -45,7 +54,8 @@ function focus({ el }: VNode) {
 
 function doneNameFile() {
   if (!pending.value) return
-  const filename = pendingFilename.value
+  // add back the src prefix
+  const filename = 'src/' + pendingFilename.value
   const oldFilename = pending.value === true ? '' : pending.value
 
   if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
@@ -75,10 +85,14 @@ function doneNameFile() {
 }
 
 function editFileName(file: string) {
-  pendingFilename.value = file
+  pendingFilename.value = stripSrcPrefix(file)
   pending.value = file
 }
 
+function stripSrcPrefix(file: string) {
+  return file.replace(/^src\//, '')
+}
+
 const fileSel = ref(null)
 function horizontalScroll(e: WheelEvent) {
   e.preventDefault()
@@ -108,7 +122,7 @@ function horizontalScroll(e: WheelEvent) {
         @dblclick="i > 0 && editFileName(file)"
       >
         <span class="label">{{
-          file === importMapFile ? 'Import Map' : file
+          file === importMapFile ? 'Import Map' : stripSrcPrefix(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">
@@ -117,7 +131,10 @@ function horizontalScroll(e: WheelEvent) {
           </svg>
         </span>
       </div>
-      <div v-if="(pending === true && i === files.length - 1) || (pending === file)" class="file pending">
+      <div
+        v-if="(pending === true && i === files.length - 1) || pending === file"
+        class="file pending"
+      >
         <input
           v-model="pendingFilename"
           spellcheck="false"

src/output/moduleCompiler.ts

@@ -132,9 +132,9 @@ function processModule(store: Store, src: string, filename: string) {
   }
 
   function defineImport(node: Node, source: string) {
-    const filename = resolveImport(source.replace(/^\.\/+/, ''))
+    const filename = resolveImport(source.replace(/^\.\/+/, 'src/'))
     if (!filename) {
-      throw new Error(`File "${filename}" does not exist.`)
+      throw new Error(`File "${source}" does not exist.`)
     }
     if (importedFiles.has(filename)) {
       return importToIdMap.get(filename)!

src/store.ts

@@ -119,17 +119,15 @@ export class ReplStore implements Store {
     showOutput = false,
     outputMode = 'preview'
   }: StoreOptions = {}) {
-    let files: StoreState['files'] = {}
+    const files: StoreState['files'] = {}
 
     if (serializedState) {
       const saved = JSON.parse(atou(serializedState))
       for (const filename in saved) {
-        files[filename] = new File(filename, saved[filename])
+        setFile(files, filename, saved[filename])
       }
     } else {
-      files = {
-        [defaultMainFile]: new File(defaultMainFile, welcomeCode)
-      }
+      setFile(files, defaultMainFile, welcomeCode)
     }
 
     this.defaultVueRuntimeURL = defaultVueRuntimeURL
@@ -245,18 +243,20 @@ export class ReplStore implements Store {
   getFiles() {
     const exported: Record<string, string> = {}
     for (const filename in this.state.files) {
-      exported[filename] = this.state.files[filename].code
+      const normalized =
+        filename === importMapFile ? filename : filename.replace(/^src\//, '')
+      exported[normalized] = this.state.files[filename].code
     }
     return exported
   }
 
   async setFiles(newFiles: Record<string, string>, mainFile = defaultMainFile) {
     const files: Record<string, File> = {}
     if (mainFile === defaultMainFile && !newFiles[mainFile]) {
-      files[mainFile] = new File(mainFile, welcomeCode)
+      setFile(files, mainFile, welcomeCode)
     }
     for (const filename in newFiles) {
-      files[filename] = new File(filename, newFiles[filename])
+      setFile(files, filename, newFiles[filename])
     }
     for (const file in files) {
       await compileFile(this, files[file])
@@ -360,6 +360,20 @@ export class ReplStore implements Store {
   }
 }
 
+function setFile(
+  files: Record<string, File>,
+  filename: string,
+  content: string
+) {
+  // prefix user files with src/
+  // for cleaner Volar path completion when using Monaco editor
+  const normalized =
+    filename !== importMapFile && !filename.startsWith('src/')
+      ? `src/${filename}`
+      : filename
+  files[normalized] = new File(normalized, content)
+}
+
 function fixURL(url: string) {
   return url.replace('https://sfc.vuejs', 'https://play.vuejs')
 }

test/main.ts

@@ -2,13 +2,12 @@ import { createApp, h, watchEffect } from 'vue'
 import { Repl, ReplStore } from '../src'
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
 // import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
-
 ;(window as any).process = { env: {} }
 
 const App = {
   setup() {
     const query = new URLSearchParams(location.search)
-    const store = new ReplStore({
+    const store = ((window as any).store = new ReplStore({
       serializedState: location.hash.slice(1),
       showOutput: query.has('so'),
       outputMode: query.get('om') || 'preview',
@@ -18,7 +17,7 @@ const App = {
       defaultVueServerRendererURL: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-server-renderer-dev-proxy`
-    })
+    }))
 
     watchEffect(() => history.replaceState({}, '', store.serialize()))
 
@@ -38,6 +37,7 @@ const App = {
     // store.setVueVersion('3.2.8')
 
     return () =>
+      //@ts-ignore
       h(Repl, {
         store,
         editor: MonacoEditor,