refactor: extract store interface (#12)

src/Repl.vue

@@ -2,11 +2,11 @@
 import SplitPane from './SplitPane.vue'
 import Editor from './editor/Editor.vue'
 import Output from './output/Output.vue'
-import { ReplStore, SFCOptions } from './store'
+import { Store, ReplStore, SFCOptions } from './store'
 import { provide, toRef } from 'vue'
 
 interface Props {
-  store?: ReplStore
+  store?: Store
   autoResize?: boolean
   showCompileOutput?: boolean
   showImportMap?: boolean

src/editor/Editor.vue

@@ -4,9 +4,9 @@ import CodeMirror from '../codemirror/CodeMirror.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { computed, inject } from 'vue'
-import { ReplStore } from '../store'
+import { Store } from '../store'
 
-const store = inject('store') as ReplStore
+const store = inject('store') as Store
 
 const onChange = debounce((code: string) => {
   store.state.activeFile.code = code

src/editor/FileSelector.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ReplStore } from '../store'
+import { Store } from '../store'
 import { computed, inject, ref, VNode, Ref } from 'vue'
 
-const store = inject('store') as ReplStore
+const store = inject('store') as Store
 
 const pending = ref(false)
 const pendingFilename = ref('Comp.vue')

src/index.ts

@@ -1,3 +1,3 @@
 export { default as Repl } from './Repl.vue'
 export { ReplStore, File } from './store'
-export type { SFCOptions, StoreState } from './store'
+export type { Store, SFCOptions, StoreState } from './store'

src/output/Output.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
 import CodeMirror from '../codemirror/CodeMirror.vue'
-import { ReplStore } from '../store'
+import { Store } from '../store'
 import { inject, ref, computed } from 'vue'
 
 const props = defineProps<{
   showCompileOutput?: boolean
 }>()
 
-const store = inject('store') as ReplStore
+const store = inject('store') as Store
 const modes = computed(() =>
   props.showCompileOutput
     ? (['preview', 'js', 'css', 'ssr'] as const)

src/output/Preview.vue

@@ -13,11 +13,11 @@ import {
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
-import { ReplStore } from '../store'
+import { Store } from '../store'
 
 defineProps<{ show: boolean }>()
 
-const store = inject('store') as ReplStore
+const store = inject('store') as Store
 const clearConsole = inject('clear-console') as Ref<boolean>
 const container = ref()
 const runtimeError = ref()

src/output/moduleCompiler.ts

@@ -1,4 +1,4 @@
-import { File, ReplStore } from '../store'
+import { File, Store } from '../store'
 import {
   babelParse,
   MagicString,
@@ -10,7 +10,7 @@ import {
 } from 'vue/compiler-sfc'
 import { ExportSpecifier, Identifier, Node } from '@babel/types'
 
-export function compileModulesForPreview(store: ReplStore) {
+export function compileModulesForPreview(store: Store) {
   const seen = new Set<File>()
   const processed: string[] = []
   processFile(store, store.state.files[store.state.mainFile], processed, seen)
@@ -37,7 +37,7 @@ const moduleKey = `__module__`
 
 // similar logic with Vite's SSR transform, except this is targeting the browser
 function processFile(
-  store: ReplStore,
+  store: Store,
   file: File,
   processed: string[],
   seen: Set<File>
@@ -71,7 +71,7 @@ function processFile(
 }
 
 function processModule(
-  store: ReplStore,
+  store: Store,
   src: string,
   filename: string
 ): [string, Set<string>] {
@@ -270,7 +270,7 @@ const scriptModuleRE =
   /<script\b[^>]*type\s*=\s*(?:"module"|'module')[^>]*>([^]*?)<\/script>/gi
 
 function processHtmlFile(
-  store: ReplStore,
+  store: Store,
   src: string,
   filename: string,
   processed: string[],

src/store.ts

@@ -52,7 +52,17 @@ export interface SFCOptions {
   template?: SFCTemplateCompileOptions
 }
 
-export class ReplStore {
+export interface Store {
+  state: StoreState
+  options?: SFCOptions
+  compiler: typeof import('vue/compiler-sfc')
+  setActive: (filename: string) => void
+  addFile: (filename: string) => void
+  deleteFile: (filename: string) => void
+  getImportMap: () => any
+}
+
+export class ReplStore implements Store {
   state: StoreState
   compiler = defaultCompiler
   options?: SFCOptions

src/transform.ts

@@ -1,4 +1,4 @@
-import { ReplStore, File } from './store'
+import { Store, File } from './store'
 import {
   SFCDescriptor,
   BindingMetadata,
@@ -17,7 +17,7 @@ async function transformTS(src: string) {
 }
 
 export async function compileFile(
-  store: ReplStore,
+  store: Store,
   { filename, code, compiled }: File
 ) {
   if (!code.trim()) {
@@ -207,7 +207,7 @@ export async function compileFile(
 }
 
 async function doCompileScript(
-  store: ReplStore,
+  store: Store,
   descriptor: SFCDescriptor,
   id: string,
   ssr: boolean,
@@ -263,7 +263,7 @@ async function doCompileScript(
 }
 
 function doCompileTemplate(
-  store: ReplStore,
+  store: Store,
   descriptor: SFCDescriptor,
   id: string,
   bindingMetadata: BindingMetadata | undefined,