Feat: File explorer via navigation drawer

src/Repl.vue

@@ -5,6 +5,7 @@ import { Store, ReplStore, SFCOptions } from './store'
 import { provide, ref, toRef } from 'vue'
 import type { EditorComponentType } from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
+import FileExplorer from './editor/FileExplorer.vue'
 
 export interface Props {
   theme?: 'dark' | 'light'
@@ -90,19 +91,25 @@ defineExpose({ reload })
 
 <template>
   <v-theme-provider with-background class="vue-repl">
-    <SplitPane :layout="layout">
-      <template #left>
-        <EditorContainer :editorComponent="editor" />
-      </template>
-      <template #right>
-        <Output
-          ref="outputRef"
-          :editorComponent="editor"
-          :showCompileOutput="props.showCompileOutput"
-          :ssr="!!props.ssr"
-        />
-      </template>
-    </SplitPane>
+    <v-layout class="h-100">
+      <FileExplorer />
+
+      <v-main class="h-100">
+        <SplitPane :layout="layout">
+          <template #left>
+            <EditorContainer :editorComponent="editor" />
+          </template>
+          <template #right>
+            <Output
+              ref="outputRef"
+              :editorComponent="editor"
+              :showCompileOutput="props.showCompileOutput"
+              :ssr="!!props.ssr"
+            />
+          </template>
+        </SplitPane>
+      </v-main>
+    </v-layout>
   </v-theme-provider>
 </template>
 
@@ -121,8 +128,9 @@ defineExpose({ reload })
   margin: 0;
   overflow: hidden;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background-color: var(--bg-soft);
 }
 </style>

src/composables/useFileSelector.ts

@@ -0,0 +1,119 @@
+import { Store, importMapFile, tsconfigFile, stripSrcPrefix } from '../store'
+import { computed, inject, ref, VNode, Ref } from 'vue'
+
+export function useFileSelector() {
+  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 linksFile = 'links.json'
+  const showTsConfig = inject<Ref<boolean>>('tsconfig')
+  const showImportMap = inject('import-map') as Ref<boolean>
+  const files = computed(() =>
+    Object.entries(store.state.files)
+      .filter(
+        ([name, file]) =>
+          ![importMapFile, linksFile, tsconfigFile].includes(name) &&
+          !file.hidden
+      )
+      .map(([name]) => name)
+  )
+
+  function startAddFile() {
+    let i = 0
+    let name = `Comp.vue`
+
+    while (true) {
+      let hasConflict = false
+      for (const filename in store.state.files) {
+        if (stripSrcPrefix(filename) === name) {
+          hasConflict = true
+          name = `Comp${++i}.vue`
+          break
+        }
+      }
+      if (!hasConflict) {
+        break
+      }
+    }
+
+    pendingFilename.value = name
+    pending.value = true
+  }
+
+  function cancelNameFile() {
+    pending.value = false
+  }
+
+  function focus({ el }: VNode) {
+    ;(el as HTMLInputElement).focus()
+  }
+
+  function doneNameFile() {
+    if (!pending.value) return
+    // 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)) {
+      store.state.errors = [
+        `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
+      ]
+      return
+    }
+
+    if (filename !== oldFilename && filename in store.state.files) {
+      store.state.errors = [`File "${filename}" already exists.`]
+      return
+    }
+
+    store.state.errors = []
+    cancelNameFile()
+
+    if (filename === oldFilename) {
+      return
+    }
+
+    if (oldFilename) {
+      store.renameFile(oldFilename, filename)
+    } else {
+      store.addFile(filename)
+    }
+  }
+
+  const fileSel = ref(null)
+
+  const activeFile = computed({
+    get: () => store.state.activeFile.filename,
+    set: (val) => {
+      if (!pending.value) store.setActive(val)
+    },
+  })
+
+  return {
+    files,
+    pending,
+    pendingFilename,
+    startAddFile,
+    cancelNameFile,
+    focus,
+    doneNameFile,
+    fileSel,
+    activeFile,
+    showTsConfig,
+    showImportMap,
+    linksFile,
+    tsconfigFile,
+    importMapFile,
+    stripSrcPrefix,
+  }
+}

src/editor/EditorContainer.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import WrapToggle from './WrapToggle.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
 import { Store } from '../store'
 import MessageToggle from './MessageToggle.vue'
 import type { EditorComponentType } from './types'
+import FileSelector from './FileSelector.vue'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 const TOGGLE_WRAP_KEY = 'repl_toggle_wrap'
@@ -45,7 +45,7 @@ watch(
 
 <template>
   <FileSelector />
-  <div class="editor-container">
+  <div class="overflow-hidden position-relative editor-container">
     <props.editorComponent
       @change="onChange($event, store.state.activeFile.filename)"
       :value="store.state.activeFile.code"
@@ -59,8 +59,6 @@ watch(
 
 <style scoped>
 .editor-container {
-  height: calc(100% - var(--header-height));
-  overflow: hidden;
-  position: relative;
+  height: calc(100% - 44px);
 }
 </style>

src/editor/FileExplorer.vue

@@ -0,0 +1,125 @@
+<template>
+  <v-navigation-drawer v-model="store.state.showFileExplorer" :width="220">
+    <v-list-item title="Explorer" height="43px">
+      <template v-slot:append>
+        <v-icon-btn
+          :icon="`svg:${mdiFilePlus}`"
+          size="20px"
+          icon-size="20px"
+          @click="startAddFile"
+        />
+      </template>
+    </v-list-item>
+
+    <v-divider />
+
+    <v-list
+      :selected="[activeFile]"
+      class="py-1 px-1 overflow-y-scroll"
+      density="compact"
+      :style="{ 'max-height': 'calc(100% - 44px)' }"
+    >
+      <v-list-item
+        v-for="file in files"
+        :key="file"
+        :value="file"
+        rounded
+        slim
+        :prepend-icon="`svg:${mdiFileCode}`"
+        @click="activeFile = file"
+      >
+        <v-list-item-title :title="stripSrcPrefix(file)">
+          {{ stripSrcPrefix(file) }}
+        </v-list-item-title>
+        <template v-slot:append>
+          <v-icon-btn
+            icon="$close"
+            size="26px"
+            icon-size="20px"
+            variant="text"
+            @click.stop="store.deleteFile(file)"
+          />
+        </template>
+      </v-list-item>
+
+      <v-list-item v-if="pending" :prepend-icon="`svg:${mdiFileCode}`" slim>
+        <v-list-item-title>
+          <v-text-field
+            v-model="pendingFilename"
+            density="compact"
+            hide-details
+            autofocus
+            single-line
+            @blur="doneNameFile"
+            @keyup.enter="doneNameFile"
+            @keyup.esc="cancelNameFile"
+          />
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+
+    <template v-slot:append>
+      <v-divider />
+      <v-list
+        :selected="[activeFile]"
+        @update:selected="activeFile = $event[0] ?? activeFile"
+        density="compact"
+        class="px-1"
+        slim
+      >
+        <v-list-item v-if="showTsConfig" :value="tsconfigFile" rounded>
+          <template v-slot:prepend>
+            <v-icon size="small" :icon="`svg:${mdiLanguageTypescript}`" />
+          </template>
+          <v-list-item-title>tsconfig.json</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item v-if="showImportMap" :value="importMapFile" rounded>
+          <template v-slot:prepend>
+            <v-icon size="small" :icon="`svg:${mdiMap}`" />
+          </template>
+          <v-list-item-title>import-map.json</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item v-if="linksFile" :value="linksFile" rounded>
+          <template v-slot:prepend>
+            <v-icon size="small" :icon="`svg:${mdiLink}`" />
+          </template>
+          <v-list-item-title>links.json</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import type { Store } from 'src/store'
+import { inject } from 'vue'
+import { useFileSelector } from '../composables/useFileSelector'
+import { VIconBtn } from 'vuetify/labs/components'
+import {
+  mdiFilePlus,
+  mdiFileCode,
+  mdiLanguageTypescript,
+  mdiMap,
+  mdiLink,
+} from '@mdi/js'
+
+const store = inject('store') as Store
+
+const {
+  activeFile,
+  showImportMap,
+  files,
+  stripSrcPrefix,
+  pending,
+  pendingFilename,
+  doneNameFile,
+  cancelNameFile,
+  startAddFile,
+  tsconfigFile,
+  showTsConfig,
+  importMapFile,
+  linksFile,
+} = useFileSelector()
+</script>