feat: reset editor files

src/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -25,6 +26,7 @@ declare global {
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
@@ -296,6 +298,9 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
+  // @ts-ignore
+  export type { Initial, VersionKey, Versions, UserOptions, SerializeState, Store } from './composables/store'
+  import('./composables/store')
 }

src/components.d.ts

@@ -2,11 +2,13 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 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']
@@ -19,7 +21,7 @@ declare module 'vue' {
     Header: typeof import('./components/Header.vue')['default']
     Settings: typeof import('./components/Settings.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

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
+  store.resetFiles()
+}
 </script>
 
 <template>
@@ -149,6 +155,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"
+            plain
+            @click="resetFiles"
+          >
+            Yes
+          </el-button>
+          <template #reference>
+            <button i-ri-delete-bin-line hover:color-primary />
+          </template>
+        </el-popover>
         <button
           i-ri-refresh-line
           title="Refresh sandbox"

src/composables/store.ts

@@ -249,6 +249,20 @@ export const useStore = (initial: Initial) => {
     }
   }
 
+  const resetFiles = () => {
+    const { files, addFile } = store
+
+    const isRandomFile = (filename: string) =>
+      ![MAIN_FILE, TSCONFIG, IMPORT_MAP, ELEMENT_PLUS_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,
@@ -257,6 +271,7 @@ export const useStore = (initial: Initial) => {
     serialize,
     init,
     vuePr,
+    resetFiles,
   }
   Object.assign(store, utils)