feat: add autoSave toggle button

src/Repl.vue

@@ -2,7 +2,7 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { type Store, useStore } from './store'
-import { computed, provide, toRefs, useTemplateRef } from 'vue'
+import { computed, provide, toRefs, useTemplateRef, ref } from 'vue'
 import {
   type EditorComponentType,
   injectKeyPreviewRef,
@@ -17,7 +17,6 @@ export interface Props {
   editor: EditorComponentType
   store?: Store
   autoResize?: boolean
-  autoSave?: boolean // auto save and compile, default to true, if false, user need to press ctrl + s to save and compile
   showCompileOutput?: boolean
   showImportMap?: boolean
   showTsConfig?: boolean
@@ -42,12 +41,16 @@ export interface Props {
   }
 }
 
+const autoSave = defineModel<boolean>()
+const switchAutoSave = () => {
+  autoSave.value = !autoSave.value
+}
+
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
   previewTheme: false,
   store: () => useStore(),
   autoResize: true,
-  autoSave: true,
   showCompileOutput: true,
   showImportMap: true,
   showTsConfig: true,
@@ -63,14 +66,18 @@ if (!props.editor) {
   throw new Error('The "editor" prop is now required.')
 }
 
-const outputRef = useTemplateRef('output')
+const outputRef = useTemplateRef<typeof Output>('output')
 
 props.store.init()
 
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide(injectKeyProps, toRefs(props))
+provide(injectKeyProps, {
+  ...toRefs(props),
+  autoSave,
+  switchAutoSave: ref(switchAutoSave),
+})
 provide(
   injectKeyPreviewRef,
   computed(() => outputRef.value?.previewRef?.container ?? null),

src/codemirror/CodeMirror.vue

@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<(e: 'change', value: string) => void>()
 
-const el = useTemplateRef('container')
+const el = useTemplateRef<HTMLElement>('container')
 const { autoResize, autoSave } = inject(injectKeyProps)!
 let editor: CodeMirror.Editor
 

src/editor/EditorContainer.vue

@@ -3,7 +3,7 @@ import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
-import MessageToggle from './MessageToggle.vue'
+import ToggleButton from './ToggleButton.vue'
 import { type EditorComponentType, injectKeyProps } from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
@@ -12,8 +12,9 @@ const props = defineProps<{
   editorComponent: EditorComponentType
 }>()
 
-const { store } = inject(injectKeyProps)!
+const { store, autoSave, switchAutoSave } = inject(injectKeyProps)!
 const showMessage = ref(getItem())
+const auto_save = ref(autoSave.value)
 
 const onChange = debounce((code: string) => {
   store.value.activeFile.code = code
@@ -31,6 +32,8 @@ function getItem() {
 watch(showMessage, () => {
   setItem()
 })
+
+watch(auto_save, switchAutoSave.value)
 </script>
 
 <template>
@@ -42,7 +45,8 @@ watch(showMessage, () => {
       @change="onChange"
     />
     <Message v-show="showMessage" :err="store.errors[0]" />
-    <MessageToggle v-model="showMessage" />
+    <ToggleButton v-model="showMessage" />
+    <ToggleButton v-model="auto_save" text="Auto Save" bottom="48px" />
   </div>
 </template>
 

src/editor/MessageToggle.vue → src/editor/ToggleButton.vue

@@ -2,13 +2,24 @@
 import { inject } from 'vue'
 import { injectKeyProps } from '../../src/types'
 
+withDefaults(
+  defineProps<{
+    text?: string
+    bottom?: string
+  }>(),
+  {
+    text: 'Show Error',
+    bottom: '18px',
+  },
+)
+
 const { editorOptions } = inject(injectKeyProps)!
-const visible = defineModel<boolean>()
+const active = defineModel<boolean>()
 </script>
 
 <template>
-  <div class="wrapper" @click="visible = !visible">
-    <span>{{ editorOptions?.showErrorText || 'Show Error' }}</span>
+  <div class="wrapper" @click="active = !active">
+    <span>{{ editorOptions?.showErrorText || text }}</span>
     <div class="toggle" :class="[{ active: modelValue }]">
       <div class="indicator" />
     </div>
@@ -18,7 +29,7 @@ const visible = defineModel<boolean>()
 <style scoped>
 .wrapper {
   position: absolute;
-  bottom: 8px;
+  bottom: v-bind(bottom);
   right: 15px;
   z-index: 11;
   display: flex;

src/types.ts

@@ -15,8 +15,16 @@ export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | EditorMode
 
-export const injectKeyProps: InjectionKey<ToRefs<Required<Props>>> =
-  Symbol('props')
+export const injectKeyProps: InjectionKey<
+  ToRefs<
+    Required<
+      Props & {
+        autoSave: boolean | undefined
+        switchAutoSave: () => void
+      }
+    >
+  >
+> = Symbol('props')
 export const injectKeyPreviewRef: InjectionKey<
   ComputedRef<HTMLDivElement | null>
 > = Symbol('preview-ref')