feat: reset editor files

Author: Dsaquel

src/App.vue

@@ -66,12 +66,16 @@ const refreshPreview = () => {
   replRef.value?.reload()
 }
 
+const resetFiles = () => {
+  store.resetFiles()
+}
+
 watch(autoSave, setAutoSaveState)
 </script>
 
 <template>
   <div v-if="!loading" antialiased>
-    <Header :store="store" @refresh="refreshPreview" />
+    <Header :store="store" @refresh="refreshPreview" @reset="resetFiles" />
     <Repl
       ref="replRef"
       v-model="autoSave"

src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']

src/components/Header.vue

@@ -13,8 +13,10 @@ const replVersion = import.meta.env.REPL_VERSION
 
 const emit = defineEmits<{
   (e: 'refresh'): void
+  (e: 'reset'): void
 }>()
 const nightly = ref(false)
+const showReset = ref(false)
 const dark = useDark()
 const toggleDark = useToggle(dark)
 
@@ -65,6 +67,10 @@ async function copyLink() {
 function refreshView() {
   emit('refresh')
 }
+function resetFiles() {
+  showReset.value = false
+  emit('reset')
+}
 </script>
 
 <template>
@@ -139,6 +145,26 @@ function refreshView() {
       </div>
 
       <div flex="~ gap-4" text-lg>
+        <el-popover
+          v-model:visible="showReset"
+          popper-class="flex flex-col gap-1"
+          trigger="click"
+          width="200px"
+        >
+          <div flex justify-center>Want to reset the editor ?</div>
+          <el-button
+            flex
+            self-end
+            size="small"
+            type="primary"
+            @click="resetFiles"
+          >
+            Yes
+          </el-button>
+          <template #reference>
+            <button i-ri-delete-bin-line hover:color-primary />
+          </template>
+        </el-popover>
         <button i-ri-refresh-line hover:color-primary @click="refreshView" />
         <button i-ri-share-line hover:color-primary @click="copyLink" />
         <button

src/composables/store.ts

@@ -231,13 +231,28 @@ export const useStore = (initial: Initial) => {
     }
   }
 
+  const resetFiles = () => {
+    const { files, addFile } = store
+
+    const isRandomFile = (filename: string) =>
+      ![MAIN_FILE, TSCONFIG, IMPORT_MAP, ELEMENT_PLUS_FILE, APP_FILE].includes(
+        filename,
+      )
+    for (const filename in files)
+      if (isRandomFile(filename)) delete files[filename]
+
+    const appFile = new File(APP_FILE, welcomeCode, false)
+    addFile(appFile)
+  }
+
   const utils = {
     versions,
     pr,
     setVersion,
     toggleNightly,
     serialize,
     init,
+    resetFiles,
   }
   Object.assign(store, utils)