fix: better structuring

Author: HerringtonDarkholme

website/src/components/Playground.vue

@@ -17,6 +17,7 @@ const {
   state,
   mode,
   lang,
+  reset,
   // source code
   source,
   // config
@@ -95,7 +96,7 @@ let codeMode = shallowRef('code')
         <template #addon>
           <div class="action-bar">
             <SelectLang v-model="lang"/>
-            <ResetConfig v-model="state" />
+            <ResetConfig @reset="reset" />
           </div>
         </template>
       </Tabs>

website/src/components/ResetConfig.vue

@@ -1,22 +1,13 @@
 <script lang="ts" setup>
 import IconReset from '../icons/Reset.vue'
 
-import type { State } from './astGrep/state'
-import { config, query, rewrite } from './astGrep/state'
-
-const state = defineModel<State>({
-  required: true,
-})
-
-const onReset = () => {
-  state.value.config = config
-  state.value.query = query
-  state.value.rewrite = rewrite
-}
+const emits = defineEmits<{
+  reset: () => void
+}>()
 </script>
 
 <template>
-  <button class="reset" title="Reset your config" @click="onReset">
+  <button class="reset" title="Reset your config" @click="emits('reset')">
     <IconReset />
   </button>
 </template>

website/src/components/astGrep/state.ts

@@ -54,9 +54,9 @@ if (true) {
   console.debug('matched by YAML')
 }`
 
-export const query = 'console.log($MATCH)'
-export const rewrite = 'logger.log($MATCH)'
-export const config = `
+const query = 'console.log($MATCH)'
+const rewrite = 'logger.log($MATCH)'
+const config = `
 # YAML Rule is more powerful!
 # https://ast-grep.github.io/guide/rule-config.html#rule
 rule:
@@ -108,6 +108,17 @@ function storeStateInLocalStorage(state: State) {
   }
 }
 
+function resetState(state: ShallowReactive<State>) {
+  state.mode = Mode.Patch
+  state.query = query
+  state.rewrite = rewrite
+  state.config = config
+  state.source = source
+  state.strictness = 'smart'
+  state.selector = ''
+  state.lang = 'javascript'
+}
+
 export const astGrepStateKey = Symbol.for('ast-grep-state') as InjectionKey<ToRefs<ShallowReactive<State>>>
 
 export function useSgState() {
@@ -119,6 +130,7 @@ export function useSgState() {
   }, { deep: true })
   return {
     state,
+    reset: () => resetState(state),
     ...refs,
   }
-}
+}