From 1f5486384ade05495617add29aa74c183cf3cb51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Fri, 12 Jan 2024 22:21:48 +0800
Subject: [PATCH 1/7] refactor

---
 src/Repl.vue                   |  14 +-
 src/SplitPane.vue              |   8 +-
 src/editor/EditorContainer.vue |  13 +-
 src/editor/FileSelector.vue    |  28 +-
 src/import-map.ts              |  50 +++
 src/index.ts                   |  10 +-
 src/monaco/Monaco.vue          |   9 +-
 src/monaco/env.ts              |  22 +-
 src/output/Output.vue          |  29 +-
 src/output/Preview.vue         |  22 +-
 src/output/moduleCompiler.ts   |  18 +-
 src/store.ts                   | 712 +++++++++++++++------------------
 src/transform.ts               |  39 +-
 src/types.ts                   |   5 +-
 test/main.ts                   |  31 +-
 15 files changed, 485 insertions(+), 525 deletions(-)
 create mode 100644 src/import-map.ts

diff --git a/src/Repl.vue b/src/Repl.vue
index 15e9dec9..961084e4 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
-import { ReplStore, type SFCOptions, type Store } from './store'
+import { type SFCOptions, type Store, useStore } from './store'
 import { computed, provide, ref, toRef, watchEffect } from 'vue'
-import type { EditorComponentType } from './types'
+import { type EditorComponentType, injectKeyStore } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 
 export interface Props {
@@ -32,7 +32,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   theme: 'light',
-  store: () => new ReplStore(),
+  store: () => useStore(),
   autoResize: true,
   showCompileOutput: true,
   showImportMap: true,
@@ -61,16 +61,16 @@ const outputRef = ref<InstanceType<typeof Output>>()
 
 watchEffect(() => {
   const { store } = props
-  const sfcOptions = (store.options = props.sfcOptions || {})
+  const sfcOptions = (store.sfcOptions = props.sfcOptions || store.sfcOptions)
   sfcOptions.script ||= {}
   sfcOptions.script.fs = {
     fileExists(file: string) {
       if (file.startsWith('/')) file = file.slice(1)
-      return !!store.state.files[file]
+      return !!store.files[file]
     },
     readFile(file: string) {
       if (file.startsWith('/')) file = file.slice(1)
-      return store.state.files[file].code
+      return store.files[file].code
     },
   }
 })
@@ -80,7 +80,7 @@ props.store.init()
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide('store', props.store)
+provide(injectKeyStore, props.store)
 provide('autoresize', props.autoResize)
 provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))
diff --git a/src/SplitPane.vue b/src/SplitPane.vue
index 662d2ba6..ac7e2964 100644
--- a/src/SplitPane.vue
+++ b/src/SplitPane.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref } from 'vue'
-import type { Store } from './store'
+import { computed, inject, reactive, ref, toRef } from 'vue'
+import { injectKeyStore } from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
@@ -8,8 +8,8 @@ const isVertical = computed(() => props.layout === 'vertical')
 const container = ref()
 
 // mobile only
-const store = inject('store') as Store
-const showOutput = ref(store.initialShowOutput)
+const store = inject(injectKeyStore)!
+const showOutput = toRef(store, 'showOutput')
 
 const state = reactive({
   dragging: false,
diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 1e58f106..4801adff 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -3,9 +3,8 @@ import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { inject, ref, watch } from 'vue'
-import type { Store } from '../store'
 import MessageToggle from './MessageToggle.vue'
-import type { EditorComponentType } from '../types'
+import { type EditorComponentType, injectKeyStore } from '../types'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 
@@ -13,11 +12,11 @@ const props = defineProps<{
   editorComponent: EditorComponentType
 }>()
 
-const store = inject('store') as Store
+const store = inject(injectKeyStore)!
 const showMessage = ref(getItem())
 
 const onChange = debounce((code: string) => {
-  store.state.activeFile.code = code
+  store.activeFile.code = code
 }, 250)
 
 function setItem() {
@@ -38,11 +37,11 @@ watch(showMessage, () => {
   <FileSelector />
   <div class="editor-container">
     <props.editorComponent
-      :value="store.state.activeFile.code"
-      :filename="store.state.activeFile.filename"
+      :value="store.activeFile.code"
+      :filename="store.activeFile.filename"
       @change="onChange"
     />
-    <Message v-show="showMessage" :err="store.state.errors[0]" />
+    <Message v-show="showMessage" :err="store.errors[0]" />
     <MessageToggle v-model="showMessage" />
   </div>
 </template>
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index ea209fa9..169cd770 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import {
-  type Store,
-  importMapFile,
-  stripSrcPrefix,
-  tsconfigFile,
-} from '../store'
+import { injectKeyStore } from '../../src/types'
+import { importMapFile, stripSrcPrefix, tsconfigFile } from '../store'
 import { type Ref, type VNode, computed, inject, ref } from 'vue'
 
-const store = inject('store') as Store
+const store = inject(injectKeyStore)!
 
 /**
  * When `true`: indicates adding a new file
@@ -23,7 +19,7 @@ const pendingFilename = ref('Comp.vue')
 const showTsConfig = inject<Ref<boolean>>('tsconfig')
 const showImportMap = inject<Ref<boolean>>('import-map')
 const files = computed(() =>
-  Object.entries(store.state.files)
+  Object.entries(store.files)
     .filter(
       ([name, file]) =>
         name !== importMapFile && name !== tsconfigFile && !file.hidden,
@@ -37,7 +33,7 @@ function startAddFile() {
 
   while (true) {
     let hasConflict = false
-    for (const filename in store.state.files) {
+    for (const filename in store.files) {
       if (stripSrcPrefix(filename) === name) {
         hasConflict = true
         name = `Comp${++i}.vue`
@@ -68,18 +64,18 @@ function doneNameFile() {
   const oldFilename = pending.value === true ? '' : pending.value
 
   if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
-    store.state.errors = [
+    store.errors = [
       `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
     ]
     return
   }
 
-  if (filename !== oldFilename && filename in store.state.files) {
-    store.state.errors = [`File "${filename}" already exists.`]
+  if (filename !== oldFilename && filename in store.files) {
+    store.errors = [`File "${filename}" already exists.`]
     return
   }
 
-  store.state.errors = []
+  store.errors = []
   cancelNameFile()
 
   if (filename === oldFilename) {
@@ -122,7 +118,7 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="pending !== file"
         class="file"
-        :class="{ active: store.state.activeFile.filename === file }"
+        :class="{ active: store.activeFile.filename === file }"
         @click="store.setActive(file)"
         @dblclick="i > 0 && editFileName(file)"
       >
@@ -156,7 +152,7 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="showTsConfig && store.state.files[tsconfigFile]"
         class="file"
-        :class="{ active: store.state.activeFile.filename === tsconfigFile }"
+        :class="{ active: store.activeFile.filename === tsconfigFile }"
         @click="store.setActive(tsconfigFile)"
       >
         <span class="label">tsconfig.json</span>
@@ -164,7 +160,7 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="showImportMap"
         class="file"
-        :class="{ active: store.state.activeFile.filename === importMapFile }"
+        :class="{ active: store.activeFile.filename === importMapFile }"
         @click="store.setActive(importMapFile)"
       >
         <span class="label">Import Map</span>
diff --git a/src/import-map.ts b/src/import-map.ts
new file mode 100644
index 00000000..b9d24d59
--- /dev/null
+++ b/src/import-map.ts
@@ -0,0 +1,50 @@
+import { computed, version as currentVersion, ref } from 'vue'
+
+export function useVueImportMap(
+  defaults: {
+    runtimeDev?: string
+    runtimeProd?: string
+    serverRenderer?: string
+  } = {},
+) {
+  const productionMode = ref(false)
+  const vueVersion = ref<string | undefined>()
+  const importMap = computed<ImportMap>(() => {
+    const vue =
+      (!vueVersion.value &&
+        (productionMode.value ? defaults.runtimeProd : defaults.runtimeDev)) ||
+      `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${
+        vueVersion.value || currentVersion
+      }/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
+
+    const serverRenderer =
+      (!vueVersion.value && defaults.serverRenderer) ||
+      `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${
+        vueVersion.value || currentVersion
+      }/dist/server-renderer.esm-browser.js`
+    return {
+      imports: {
+        vue,
+        'vue/server-renderer': serverRenderer,
+      },
+    }
+  })
+
+  return {
+    productionMode,
+    vueVersion,
+    importMap,
+  }
+}
+
+export interface ImportMap {
+  imports?: Record<string, string | undefined>
+  scopes?: Record<string, Record<string, string>>
+}
+
+export function mergeImportMap(a: ImportMap, b: ImportMap): ImportMap {
+  return {
+    imports: { ...a.imports, ...b.imports },
+    scopes: { ...a.scopes, ...b.scopes },
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index fc2c9e6d..2065c084 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,13 @@
 export { default as Repl } from './Repl.vue'
 export { default as Preview } from './output/Preview.vue'
-export { ReplStore, File } from './store'
+export {
+  useStore,
+  File,
+  type SFCOptions,
+  type StoreState,
+  type Store,
+} from './store'
+export { useVueImportMap, type ImportMap } from './import-map'
 export { compileFile } from './transform'
 export type { Props as ReplProps } from './Repl.vue'
-export type { Store, StoreOptions, SFCOptions, StoreState } from './store'
 export type { OutputModes } from './types'
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index 194ea6c8..dc4b18e8 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -13,8 +13,7 @@ import {
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
-import type { Store } from '../store'
-import type { EditorMode } from '../types'
+import { type EditorMode, injectKeyStore } from '../types'
 
 const props = withDefaults(
   defineProps<{
@@ -37,7 +36,7 @@ const emit = defineEmits<{
 const containerRef = ref<HTMLDivElement>()
 const ready = ref(false)
 const editor = shallowRef<monaco.editor.IStandaloneCodeEditor>()
-const store = inject<Store>('store')!
+const store = inject(injectKeyStore)!
 
 initMonaco(store)
 
@@ -113,7 +112,7 @@ onMounted(async () => {
       () => props.filename,
       (_, oldFilename) => {
         if (!editorInstance) return
-        const file = store.state.files[props.filename]
+        const file = store.files[props.filename]
         if (!file) return null
         const model = getOrCreateModel(
           monaco.Uri.parse(`file:///${props.filename}`),
@@ -121,7 +120,7 @@ onMounted(async () => {
           file.code,
         )
 
-        const oldFile = oldFilename ? store.state.files[oldFilename] : null
+        const oldFile = oldFilename ? store.files[oldFilename] : null
         if (oldFile) {
           oldFile.editorViewState = editorInstance.saveViewState()
         }
diff --git a/src/monaco/env.ts b/src/monaco/env.ts
index 5892f8da..a58d60ad 100644
--- a/src/monaco/env.ts
+++ b/src/monaco/env.ts
@@ -15,8 +15,8 @@ export function initMonaco(store: Store) {
 
   watchEffect(() => {
     // create a model for each file in the store
-    for (const filename in store.state.files) {
-      const file = store.state.files[filename]
+    for (const filename in store.files) {
+      const file = store.files[filename]
       if (editor.getModel(Uri.parse(`file:///${filename}`))) continue
       getOrCreateModel(
         Uri.parse(`file:///${filename}`),
@@ -28,7 +28,7 @@ export function initMonaco(store: Store) {
     // dispose of any models that are not in the store
     for (const model of editor.getModels()) {
       const uri = model.uri.toString()
-      if (store.state.files[uri.substring('file:///'.length)]) continue
+      if (store.files[uri.substring('file:///'.length)]) continue
       if (uri.startsWith(jsDelivrUriBase + '/')) continue
       if (uri.startsWith('inmemory://')) continue
 
@@ -46,7 +46,7 @@ export function initMonaco(store: Store) {
       const path = resource.path
       if (/^\//.test(path)) {
         const fileName = path.replace('/', '')
-        if (fileName !== store.state.activeFile.filename) {
+        if (fileName !== store.activeFile.filename) {
           store.setActive(fileName)
           return true
         }
@@ -70,7 +70,7 @@ export async function reloadLanguageTools(store: Store) {
   disposeVue?.()
 
   let dependencies: Record<string, string> = {
-    ...store.state.dependencyVersion,
+    ...store.dependencyVersion,
   }
 
   if (store.vueVersion) {
@@ -88,10 +88,10 @@ export async function reloadLanguageTools(store: Store) {
     }
   }
 
-  if (store.state.typescriptVersion) {
+  if (store.typescriptVersion) {
     dependencies = {
       ...dependencies,
-      typescript: store.state.typescriptVersion,
+      typescript: store.typescriptVersion,
     }
   }
 
@@ -106,9 +106,7 @@ export async function reloadLanguageTools(store: Store) {
   })
   const languageId = ['vue', 'javascript', 'typescript']
   const getSyncUris = () =>
-    Object.keys(store.state.files).map((filename) =>
-      Uri.parse(`file:///${filename}`),
-    )
+    Object.keys(store.files).map((filename) => Uri.parse(`file:///${filename}`))
   const { dispose: disposeMarkers } = volar.editor.activateMarkers(
     worker,
     languageId,
@@ -155,8 +153,8 @@ export function loadMonacoEnv(store: Store) {
           })
           worker.postMessage({
             event: 'init',
-            tsVersion: store.state.typescriptVersion,
-            tsLocale: store.state.typescriptLocale || store.state.locale,
+            tsVersion: store.typescriptVersion,
+            tsLocale: store.locale,
           } satisfies WorkerMessage)
         })
         await init
diff --git a/src/output/Output.vue b/src/output/Output.vue
index 1ab7e53b..da613737 100644
--- a/src/output/Output.vue
+++ b/src/output/Output.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import Preview from './Preview.vue'
-import type { Store } from '../store'
 import { computed, inject, ref } from 'vue'
-import type { EditorComponentType, OutputModes } from '../types'
+import {
+  type EditorComponentType,
+  type OutputModes,
+  injectKeyStore,
+} from '../types'
 
 const props = defineProps<{
   editorComponent: EditorComponentType
@@ -10,7 +13,7 @@ const props = defineProps<{
   ssr: boolean
 }>()
 
-const store = inject('store') as Store
+const store = inject(injectKeyStore)!
 const previewRef = ref<InstanceType<typeof Preview>>()
 const modes = computed(() =>
   props.showCompileOutput
@@ -18,11 +21,17 @@ const modes = computed(() =>
     : (['preview'] as const),
 )
 
-const mode = ref<OutputModes>(
-  (modes.value as readonly string[]).includes(store.initialOutputMode)
-    ? (store.initialOutputMode as OutputModes)
-    : 'preview',
-)
+const mode = computed<OutputModes>({
+  get: () =>
+    (modes.value as readonly string[]).includes(store.outputMode)
+      ? store.outputMode
+      : 'preview',
+  set(value) {
+    if ((modes.value as readonly string[]).includes(store.outputMode)) {
+      store.outputMode = value
+    }
+  },
+})
 
 function reload() {
   previewRef.value?.reload()
@@ -48,8 +57,8 @@ defineExpose({ reload })
     <props.editorComponent
       v-if="mode !== 'preview'"
       readonly
-      :filename="store.state.activeFile.filename"
-      :value="store.state.activeFile.compiled[mode]"
+      :filename="store.activeFile.filename"
+      :value="store.activeFile.compiled[mode]"
       :mode="mode"
     />
   </div>
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index 22476f66..c0bfd56d 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -13,16 +13,16 @@ import {
 import srcdoc from './srcdoc.html?raw'
 import { PreviewProxy } from './PreviewProxy'
 import { compileModulesForPreview } from './moduleCompiler'
-import type { Store } from '../store'
 import type { Props } from '../Repl.vue'
+import { injectKeyStore } from '../../src/types'
 
 const props = defineProps<{ show: boolean; ssr: boolean }>()
 
-const store = inject('store') as Store
-const clearConsole = inject('clear-console') as Ref<boolean>
-const theme = inject('theme') as Ref<'dark' | 'light'>
+const store = inject(injectKeyStore)!
+const clearConsole = inject<Ref<boolean>>('clear-console')!
+const theme = inject<Ref<'dark' | 'light'>>('theme')!
 
-const previewOptions = inject('preview-options') as Props['previewOptions']
+const previewOptions = inject<Props['previewOptions']>('preview-options')
 
 const container = ref()
 const runtimeError = ref()
@@ -42,14 +42,14 @@ watch(
     try {
       createSandbox()
     } catch (e: any) {
-      store.state.errors = [e as Error]
+      store.errors = [e as Error]
       return
     }
   },
 )
 
 // reset sandbox when version changes
-watch(() => store.state.resetFlip, createSandbox)
+// watch(() => store.resetFlip, createSandbox)
 
 // reset theme
 watch(
@@ -90,12 +90,6 @@ function createSandbox() {
   )
 
   const importMap = store.getImportMap()
-  if (!importMap.imports) {
-    importMap.imports = {}
-  }
-  if (!importMap.imports.vue) {
-    importMap.imports.vue = store.state.vueRuntimeURL
-  }
   const sandboxSrc = srcdoc
     .replace(/<html>/, `<html class="${theme.value}">`)
     .replace(/<!--IMPORT_MAP-->/, JSON.stringify(importMap))
@@ -193,7 +187,7 @@ async function updatePreview() {
   }
 
   try {
-    const mainFile = store.state.mainFile
+    const mainFile = store.mainFile
 
     // if SSR, generate the SSR bundle and eval it to render the HTML
     if (isSSR && mainFile.endsWith('.vue')) {
diff --git a/src/output/moduleCompiler.ts b/src/output/moduleCompiler.ts
index afe2c84e..536497ef 100644
--- a/src/output/moduleCompiler.ts
+++ b/src/output/moduleCompiler.ts
@@ -13,19 +13,13 @@ import type { ExportSpecifier, Identifier, Node } from '@babel/types'
 export function compileModulesForPreview(store: Store, isSSR = false) {
   const seen = new Set<File>()
   const processed: string[] = []
-  processFile(
-    store,
-    store.state.files[store.state.mainFile],
-    processed,
-    seen,
-    isSSR,
-  )
+  processFile(store, store.files[store.mainFile], processed, seen, isSSR)
 
   if (!isSSR) {
     // also add css files that are not imported
-    for (const filename in store.state.files) {
+    for (const filename in store.files) {
       if (filename.endsWith('.css')) {
-        const file = store.state.files[filename]
+        const file = store.files[filename]
         if (!seen.has(file)) {
           processed.push(
             `\nwindow.__css__.push(${JSON.stringify(file.compiled.css)})`,
@@ -96,14 +90,14 @@ function processChildFiles(
 ) {
   if (hasDynamicImport) {
     // process all files
-    for (const file of Object.values(store.state.files)) {
+    for (const file of Object.values(store.files)) {
       if (seen.has(file)) continue
       processFile(store, file, processed, seen, isSSR)
     }
   } else if (importedFiles.size > 0) {
     // crawl child imports
     for (const imported of importedFiles) {
-      processFile(store, store.state.files[imported], processed, seen, isSSR)
+      processFile(store, store.files[imported], processed, seen, isSSR)
     }
   }
 }
@@ -122,7 +116,7 @@ function processModule(store: Store, src: string, filename: string) {
   const importToIdMap = new Map<string, string>()
 
   function resolveImport(raw: string): string | undefined {
-    const files = store.state.files
+    const files = store.files
     let resolved = raw
     const file =
       files[resolved] ||
diff --git a/src/store.ts b/src/store.ts
index 0204f717..c6ed259e 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,4 +1,12 @@
-import { reactive, version, watch, watchEffect } from 'vue'
+import {
+  type ToRefs,
+  type UnwrapRef,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+} from 'vue'
 import * as defaultCompiler from 'vue/compiler-sfc'
 import { compileFile } from './transform'
 import { atou, utoa } from './utils'
@@ -9,486 +17,394 @@ import type {
 } from 'vue/compiler-sfc'
 import type { OutputModes } from './types'
 import type { editor } from 'monaco-editor-core'
-import welcomeCode from './template/welcome.vue?raw'
-import newSFCCode from './template/new-sfc.vue?raw'
+import { type ImportMap, mergeImportMap } from './import-map'
 
-const defaultMainFile = 'src/App.vue'
+import welcomeSFCCode from './template/welcome.vue?raw'
+import newSFCCode from './template/new-sfc.vue?raw'
 
 export const importMapFile = 'import-map.json'
 export const tsconfigFile = 'tsconfig.json'
 
-const tsconfig = {
-  compilerOptions: {
-    allowJs: true,
-    checkJs: true,
-    jsx: 'Preserve',
-    target: 'ESNext',
-    module: 'ESNext',
-    moduleResolution: 'Bundler',
-    allowImportingTsExtensions: true,
-  },
-  vueCompilerOptions: {
-    target: 3.3,
-  },
-}
-
-export class File {
-  filename: string
-  code: string
-  hidden: boolean
-  compiled = {
-    js: '',
-    css: '',
-    ssr: '',
-  }
-  editorViewState: editor.ICodeEditorViewState | null = null
-
-  constructor(filename: string, code = '', hidden = false) {
-    this.filename = filename
-    this.code = code
-    this.hidden = hidden
-  }
-
-  get language() {
-    if (this.filename.endsWith('.vue')) {
-      return 'vue'
-    }
-    if (this.filename.endsWith('.html')) {
-      return 'html'
-    }
-    if (this.filename.endsWith('.css')) {
-      return 'css'
-    }
-    if (this.filename.endsWith('.ts')) {
-      return 'typescript'
-    }
-    return 'javascript'
+export function useStore(
+  {
+    files = ref(Object.create(null)),
+    activeFile = undefined!, // set later
+    mainFile = ref('src/App.vue'),
+    template = ref({
+      welcomeSFC: welcomeSFCCode,
+      newSFC: newSFCCode,
+    }),
+    builtinImportMap = ref({}),
+
+    errors = ref([]),
+    showOutput = ref(false),
+    outputMode = ref('preview'),
+    sfcOptions = ref({}),
+    compiler = shallowRef(defaultCompiler),
+    vueVersion = ref(),
+
+    locale = ref(),
+    typescriptVersion = ref('latest'),
+    dependencyVersion = ref(Object.create(null)),
+    reloadLanguageTools = ref(),
+  }: Partial<StoreState> = {},
+  serializedState?: string,
+): ReplStore {
+  function setFile(filename: string, content: string) {
+    const normalized = addSrcPrefix(filename)
+    files.value[normalized] = new File(normalized, content)
   }
-}
 
-export interface StoreState {
-  mainFile: string
-  files: Record<string, File>
-  activeFile: File
-  errors: (string | Error)[]
-  vueRuntimeURL: string
-  vueServerRendererURL: string
-  typescriptVersion: string
-  /** @deprecated use `locale` instead */
-  typescriptLocale?: string | undefined
-  locale?: string | undefined
-  // used to force reset the sandbox
-  resetFlip: boolean
-  /** \{ dependencyName: version \} */
-  dependencyVersion?: Record<string, string>
-}
-
-export interface SFCOptions {
-  script?: Partial<SFCScriptCompileOptions>
-  style?: Partial<SFCAsyncStyleCompileOptions>
-  template?: Partial<SFCTemplateCompileOptions>
-}
-
-export interface Store {
-  state: StoreState
-  options?: SFCOptions
-  compiler: typeof defaultCompiler
-  vueVersion?: string
-  init: () => void
-  setActive: (filename: string) => void
-  addFile: (filename: string | File) => void
-  deleteFile: (filename: string) => void
-  renameFile: (oldFilename: string, newFilename: string) => void
-  getImportMap: () => any
-  getTsConfig?: () => any
-  reloadLanguageTools?: undefined | (() => void)
-  initialShowOutput: boolean
-  initialOutputMode: OutputModes
-  customElement: boolean | string | RegExp | (string | RegExp)[]
-}
-
-export interface StoreOptions {
-  serializedState?: string
-  showOutput?: boolean
-  // loose type to allow getting from the URL without inducing a typing error
-  outputMode?: OutputModes | string
-  productionMode?: boolean
-  defaultVueRuntimeURL?: string
-  defaultVueRuntimeProdURL?: string
-  defaultVueServerRendererURL?: string
-  customElement?: boolean | string | RegExp | (string | RegExp)[]
-  welcomeFileTemplate?: string
-  newSFCTemplate?: string
-}
-
-export class ReplStore implements Store {
-  state: StoreState
-  compiler = defaultCompiler
-  vueVersion?: string
-  productionMode = false
-  options?: SFCOptions
-  initialShowOutput: boolean
-  initialOutputMode: OutputModes
-  reloadLanguageTools: undefined | (() => void)
-  customElement: boolean | string | RegExp | (string | RegExp)[]
-
-  private defaultVueRuntimeDevURL: string
-  private defaultVueRuntimeProdURL: string
-  private defaultVueServerRendererURL: string
-  private pendingCompiler: Promise<any> | null = null
-  private welcomeFileTemplate?: string
-  private newSFCTemplate?: string
-
-  constructor({
-    serializedState = '',
-    defaultVueRuntimeURL = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`,
-    defaultVueRuntimeProdURL = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.prod.js`,
-    defaultVueServerRendererURL = `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js`,
-    showOutput = false,
-    outputMode = 'preview',
-    productionMode = false,
-    customElement = /\.ce\.vue$/,
-    welcomeFileTemplate = welcomeCode,
-    newSFCTemplate = newSFCCode,
-  }: StoreOptions = {}) {
-    const files: StoreState['files'] = {}
-    this.welcomeFileTemplate = welcomeFileTemplate
-    this.newSFCTemplate = newSFCTemplate
-
-    if (serializedState) {
-      const saved = JSON.parse(atou(serializedState))
-      for (const filename in saved) {
-        setFile(files, filename, saved[filename])
-      }
-    } else {
-      setFile(files, defaultMainFile, this.welcomeFileTemplate)
-    }
-
-    this.productionMode = productionMode
-    this.defaultVueRuntimeDevURL = defaultVueRuntimeURL
-    this.defaultVueRuntimeProdURL = defaultVueRuntimeProdURL
-    this.defaultVueServerRendererURL = defaultVueServerRendererURL
-    this.initialShowOutput = showOutput
-    this.customElement = customElement
-    this.initialOutputMode = outputMode as OutputModes
-
-    let mainFile = defaultMainFile
-    if (!files[mainFile]) {
-      mainFile = Object.keys(files)[0]
-    }
-    this.state = reactive({
-      mainFile,
-      files,
-      activeFile: files[mainFile],
-      errors: [],
-      vueRuntimeURL: this.defaultVueRuntimeURL,
-      vueServerRendererURL: this.defaultVueServerRendererURL,
-      typescriptVersion: 'latest',
-      typescriptLocale: undefined,
-      resetFlip: true,
-    })
-
-    this.initImportMap()
-    this.initTsConfig()
-  }
-
-  get defaultVueRuntimeURL(): string {
-    return this.productionMode
-      ? this.defaultVueRuntimeProdURL
-      : this.defaultVueRuntimeDevURL
-  }
-
-  // don't start compiling until the options are set
-  init() {
+  const init = () => {
     watchEffect(() =>
-      compileFile(this, this.state.activeFile).then(
-        (errs) => (this.state.errors = errs),
+      compileFile(store, activeFile.value).then(
+        (errs) => (errors.value = errs),
       ),
     )
 
     watch(
       () => [
-        this.state.files[tsconfigFile]?.code,
-        this.state.typescriptVersion,
-        this.state.typescriptLocale,
-        this.state.locale,
-        this.state.dependencyVersion,
+        files.value[tsconfigFile]?.code,
+        typescriptVersion.value,
+        locale.value,
+        dependencyVersion.value,
+        vueVersion.value,
       ],
-      () => this.reloadLanguageTools?.(),
+      () => reloadLanguageTools.value?.(),
       { deep: true },
     )
 
-    this.state.errors = []
-    for (const file in this.state.files) {
-      if (file !== defaultMainFile) {
-        compileFile(this, this.state.files[file]).then((errs) =>
-          this.state.errors.push(...errs),
-        )
+    watch(vueVersion, async (version) => {
+      if (version) {
+        const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
+        compiler.value = await import(/* @vite-ignore */ compilerUrl)
+        console.info(`[@vue/repl] Now using Vue version: ${version}`)
+      } else {
+        // reset to default
+        compiler.value = defaultCompiler
+        console.info(`[@vue/repl] Now using default Vue version`)
       }
-    }
-  }
-
-  private initTsConfig() {
-    if (!this.state.files[tsconfigFile]) {
-      this.setTsConfig(tsconfig)
-    }
-  }
+    })
 
-  setTsConfig(config: any) {
-    this.state.files[tsconfigFile] = new File(
-      tsconfigFile,
-      JSON.stringify(config, undefined, 2),
+    // init import map
+    const importMap = mergeImportMap(builtinImportMap.value, getImportMap())
+    setImportMap(importMap)
+    watch(
+      builtinImportMap,
+      () => {
+        setImportMap(mergeImportMap(getImportMap(), builtinImportMap.value))
+      },
+      { deep: true },
     )
-  }
 
-  getTsConfig() {
-    try {
-      return JSON.parse(this.state.files[tsconfigFile].code)
-    } catch {
-      return {}
+    // init tsconfig
+    if (!files.value[tsconfigFile]) {
+      files.value[tsconfigFile] = new File(
+        tsconfigFile,
+        JSON.stringify(tsconfig, undefined, 2),
+      )
     }
-  }
 
-  setActive(filename: string) {
-    this.state.activeFile = this.state.files[filename]
+    // compile rest of the files
+    errors.value = []
+    for (const [filename, file] of Object.entries(files.value)) {
+      if (filename !== mainFile.value) {
+        compileFile(store, file).then((errs) => errors.value.push(...errs))
+      }
+    }
   }
-
-  addFile(fileOrFilename: string | File): void {
+  const setActive: Store['setActive'] = (filename) => {
+    activeFile.value = files.value[filename]
+  }
+  const addFile: Store['addFile'] = (fileOrFilename) => {
     let file: File
     if (typeof fileOrFilename === 'string') {
       file = new File(
         fileOrFilename,
-        fileOrFilename.endsWith('.vue') ? this.newSFCTemplate : '',
+        fileOrFilename.endsWith('.vue') ? template.value.newSFC : '',
       )
     } else {
       file = fileOrFilename
     }
-    this.state.files[file.filename] = file
-    if (!file.hidden) this.setActive(file.filename)
+    files.value[file.filename] = file
+    if (!file.hidden) setActive(file.filename)
   }
-
-  deleteFile(filename: string) {
+  const deleteFile: Store['deleteFile'] = (filename) => {
     if (
-      confirm(`Are you sure you want to delete ${stripSrcPrefix(filename)}?`)
+      !confirm(`Are you sure you want to delete ${stripSrcPrefix(filename)}?`)
     ) {
-      if (this.state.activeFile.filename === filename) {
-        this.state.activeFile = this.state.files[this.state.mainFile]
-      }
-      delete this.state.files[filename]
+      return
     }
-  }
 
-  renameFile(oldFilename: string, newFilename: string) {
-    const { files } = this.state
-    const file = files[oldFilename]
+    if (activeFile.value.filename === filename) {
+      activeFile.value = files.value[mainFile.value]
+    }
+    delete files.value[filename]
+  }
+  const renameFile: Store['renameFile'] = (oldFilename, newFilename) => {
+    const file = files.value[oldFilename]
 
     if (!file) {
-      this.state.errors = [`Could not rename "${oldFilename}", file not found`]
+      errors.value = [`Could not rename "${oldFilename}", file not found`]
       return
     }
 
     if (!newFilename || oldFilename === newFilename) {
-      this.state.errors = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
+      errors.value = [`Cannot rename "${oldFilename}" to "${newFilename}"`]
       return
     }
 
     file.filename = newFilename
-
     const newFiles: Record<string, File> = {}
 
     // Preserve iteration order for files
-    for (const name in files) {
+    for (const [name, file] of Object.entries(files.value)) {
       if (name === oldFilename) {
         newFiles[newFilename] = file
       } else {
-        newFiles[name] = files[name]
+        newFiles[name] = file
       }
     }
 
-    this.state.files = newFiles
+    files.value = newFiles
 
-    if (this.state.mainFile === oldFilename) {
-      this.state.mainFile = newFilename
+    if (mainFile.value === oldFilename) {
+      mainFile.value = newFilename
     }
 
-    compileFile(this, file).then((errs) => (this.state.errors = errs))
+    compileFile(store, file).then((errs) => (errors.value = errs))
   }
-
-  serialize() {
-    const files = this.getFiles()
+  const getImportMap: Store['getImportMap'] = () => {
+    try {
+      return JSON.parse(files.value[importMapFile].code)
+    } catch (e) {
+      errors.value = [
+        `Syntax error in ${importMapFile}: ${(e as Error).message}`,
+      ]
+      return {}
+    }
+  }
+  const getTsConfig: Store['getTsConfig'] = () => {
+    try {
+      return JSON.parse(files.value[tsconfigFile].code)
+    } catch {
+      return {}
+    }
+  }
+  const getFiles = () => {
+    const exported: Record<string, string> = {}
+    for (const [filename, file] of Object.entries(files.value)) {
+      const normalized = stripSrcPrefix(filename)
+      exported[normalized] = file.code
+    }
+    return exported
+  }
+  const serialize: ReplStore['serialize'] = () => {
+    const files = getFiles()
     const importMap = files[importMapFile]
     if (importMap) {
-      const { imports, ...restImportMap } = JSON.parse(importMap)
-      if (imports['vue'] === this.defaultVueRuntimeURL) {
-        delete imports['vue']
+      const parsed = JSON.parse(importMap)
+      const builtin = builtinImportMap.value.imports || {}
+
+      if (parsed.imports) {
+        for (const [key, value] of Object.entries(parsed.imports)) {
+          if (builtin[key] === value) {
+            delete parsed.imports[key]
+          }
+        }
+        if (parsed.imports && !Object.keys(parsed.imports).length) {
+          delete parsed.imports
+        }
       }
-      if (imports['vue/server-renderer'] === this.defaultVueServerRendererURL) {
-        delete imports['vue/server-renderer']
+      if (parsed.scopes && !Object.keys(parsed.scopes).length) {
+        delete parsed.scopes
       }
-      if (!Object.keys(imports).length) {
-        delete files[importMapFile]
+      if (Object.keys(parsed).length) {
+        files[importMapFile] = JSON.stringify(parsed, null, 2)
       } else {
-        files[importMapFile] = JSON.stringify(
-          { imports, ...restImportMap },
-          null,
-          2,
-        )
+        delete files[importMapFile]
       }
     }
     return '#' + utoa(JSON.stringify(files))
   }
-
-  getFiles() {
-    const exported: Record<string, string> = {}
-    for (const filename in this.state.files) {
-      const normalized =
-        filename === importMapFile ? filename : stripSrcPrefix(filename)
-      exported[normalized] = this.state.files[filename].code
+  const deserialize = (serializedState: string) => {
+    if (serializedState.startsWith('#'))
+      serializedState = serializedState.slice(1)
+    const saved = JSON.parse(atou(serializedState))
+    for (const filename in saved) {
+      setFile(filename, saved[filename])
     }
-    return exported
   }
-
-  async setFiles(newFiles: Record<string, string>, mainFile = defaultMainFile) {
-    const files: Record<string, File> = {}
-    if (mainFile === defaultMainFile && !newFiles[mainFile]) {
-      setFile(files, mainFile, welcomeCode)
-    }
-    for (const filename in newFiles) {
-      setFile(files, filename, newFiles[filename])
-    }
-    const errors = []
-    for (const file in files) {
-      errors.push(...(await compileFile(this, files[file])))
-    }
-    this.state.errors = errors
-    this.state.mainFile = addSrcPrefix(mainFile)
-    this.state.files = files
-    this.initImportMap()
-    this.setActive(this.state.mainFile)
-    this.forceSandboxReset()
+  const setImportMap = (map: ImportMap) => {
+    if (map.imports)
+      for (const [key, value] of Object.entries(map.imports)) {
+        if (value) {
+          map.imports![key] = fixURL(value)
+        }
+      }
+    files.value[importMapFile] = new File(
+      importMapFile,
+      JSON.stringify(map, undefined, 2),
+    )
   }
 
-  private forceSandboxReset() {
-    this.state.resetFlip = !this.state.resetFlip
+  if (serializedState) {
+    deserialize(serializedState)
+  } else {
+    setFile(mainFile.value, template.value.welcomeSFC || welcomeSFCCode)
   }
+  activeFile ||= ref(
+    files.value[mainFile.value] || Object.values(files.value)[0],
+  )
+
+  const store = reactive({
+    files,
+    activeFile,
+    mainFile,
+    template,
+    builtinImportMap,
+
+    errors,
+    showOutput,
+    outputMode,
+    sfcOptions,
+    compiler,
+    vueVersion,
+
+    locale,
+    typescriptVersion,
+    dependencyVersion,
+    reloadLanguageTools,
+
+    init,
+    setActive,
+    addFile,
+    deleteFile,
+    renameFile,
+    getImportMap,
+    getTsConfig,
+    serialize,
+    deserialize,
+  })
+  return store
+}
 
-  private initImportMap() {
-    const map = this.state.files[importMapFile]
-    if (!map) {
-      this.state.files[importMapFile] = new File(
-        importMapFile,
-        JSON.stringify(
-          {
-            imports: {
-              vue: this.defaultVueRuntimeURL,
-              'vue/server-renderer': this.defaultVueServerRendererURL,
-            },
-          },
-          null,
-          2,
-        ),
-      )
-    } else {
-      try {
-        const json = JSON.parse(map.code)
-        if (!json.imports.vue) {
-          json.imports.vue = this.defaultVueRuntimeURL
-        } else {
-          json.imports.vue = fixURL(json.imports.vue)
-        }
-        if (!json.imports['vue/server-renderer']) {
-          json.imports['vue/server-renderer'] = this.defaultVueServerRendererURL
-        } else {
-          json.imports['vue/server-renderer'] = fixURL(
-            json.imports['vue/server-renderer'],
-          )
-        }
-        map.code = JSON.stringify(json, null, 2)
-      } catch {}
-    }
-  }
+const tsconfig = {
+  compilerOptions: {
+    allowJs: true,
+    checkJs: true,
+    jsx: 'Preserve',
+    target: 'ESNext',
+    module: 'ESNext',
+    moduleResolution: 'Bundler',
+    allowImportingTsExtensions: true,
+  },
+  vueCompilerOptions: {
+    target: 3.4,
+  },
+}
 
-  getImportMap() {
-    try {
-      return JSON.parse(this.state.files[importMapFile].code)
-    } catch (e) {
-      this.state.errors = [
-        `Syntax error in import-map.json: ${(e as Error).message}`,
-      ]
-      return {}
-    }
-  }
+export interface SFCOptions {
+  script?: Partial<SFCScriptCompileOptions>
+  style?: Partial<SFCAsyncStyleCompileOptions>
+  template?: Partial<SFCTemplateCompileOptions>
+}
 
-  setImportMap(map: {
-    imports: Record<string, string>
-    scopes?: Record<string, Record<string, string>>
-  }) {
-    this.state.files[importMapFile]!.code = JSON.stringify(map, null, 2)
-  }
+export type StoreState = ToRefs<{
+  files: Record<string, File>
+  activeFile: File
+  errors: (string | Error)[]
 
-  setTypeScriptVersion(version: string) {
-    this.state.typescriptVersion = version
-    console.info(`[@vue/repl] Now using TypeScript version: ${version}`)
-  }
+  // output
+  showOutput: boolean
+  outputMode: OutputModes
+  sfcOptions: SFCOptions
+  /** `@vue/compiler-sfc` */
+  compiler: typeof defaultCompiler
+  vueVersion: string | undefined
 
-  async setVueVersion(version: string) {
-    this.vueVersion = version
-    const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
-    // differentiate prod/dev for runtime
-    const runtimeUrl = `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser${
-      this.productionMode ? `.prod` : ``
-    }.js`
-    const ssrUrl = `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${version}/dist/server-renderer.esm-browser.js`
-    this.pendingCompiler = import(/* @vite-ignore */ compilerUrl)
-    this.compiler = await this.pendingCompiler
-    this.pendingCompiler = null
-    this.state.vueRuntimeURL = runtimeUrl
-    this.state.vueServerRendererURL = ssrUrl
-    const importMap = this.getImportMap()
-    const imports = importMap.imports || (importMap.imports = {})
-    imports.vue = runtimeUrl
-    imports['vue/server-renderer'] = ssrUrl
-    this.setImportMap(importMap)
-    this.forceSandboxReset()
-    this.reloadLanguageTools?.()
-    console.info(`[@vue/repl] Now using Vue version: ${version}`)
+  // volar-related
+  locale: string | undefined
+  typescriptVersion: string
+  /** \{ dependencyName: version \} */
+  dependencyVersion: Record<string, string>
+  reloadLanguageTools?: (() => void) | undefined
+
+  mainFile: string
+  template: {
+    welcomeSFC?: string
+    newSFC?: string
   }
 
-  resetVueVersion() {
-    this.vueVersion = undefined
-    this.compiler = defaultCompiler
-    this.state.vueRuntimeURL = this.defaultVueRuntimeURL
-    this.state.vueServerRendererURL = this.defaultVueServerRendererURL
-    const importMap = this.getImportMap()
-    const imports = importMap.imports || (importMap.imports = {})
-    imports.vue = this.defaultVueRuntimeURL
-    imports['vue/server-renderer'] = this.defaultVueServerRendererURL
-    this.setImportMap(importMap)
-    this.forceSandboxReset()
-    console.info(`[@vue/repl] Now using default Vue version`)
+  builtinImportMap: ImportMap
+}>
+
+export interface ReplStore extends UnwrapRef<StoreState> {
+  init: () => void
+  setActive: (filename: string) => void
+  addFile: (filename: string | File) => void
+  deleteFile: (filename: string) => void
+  renameFile: (oldFilename: string, newFilename: string) => void
+  getImportMap: () => ImportMap
+  getTsConfig?: () => Record<string, any>
+  serialize(): string
+}
+
+export type Store = Pick<
+  ReplStore,
+  | 'files'
+  | 'activeFile'
+  | 'errors'
+  | 'showOutput'
+  | 'outputMode'
+  | 'sfcOptions'
+  | 'compiler'
+  | 'vueVersion'
+  | 'locale'
+  | 'typescriptVersion'
+  | 'dependencyVersion'
+  | 'reloadLanguageTools'
+  | 'mainFile'
+  | 'init'
+  | 'setActive'
+  | 'addFile'
+  | 'deleteFile'
+  | 'renameFile'
+  | 'getImportMap'
+  | 'getTsConfig'
+>
+
+export class File {
+  compiled = {
+    js: '',
+    css: '',
+    ssr: '',
   }
+  editorViewState: editor.ICodeEditorViewState | null = null
 
-  toggleProduction() {
-    this.productionMode = !this.productionMode
-    if (this.vueVersion) {
-      this.setVueVersion(this.vueVersion)
-    } else {
-      this.resetVueVersion()
+  constructor(
+    public filename: string,
+    public code = '',
+    public hidden = false,
+  ) {}
+
+  get language() {
+    if (this.filename.endsWith('.vue')) {
+      return 'vue'
+    }
+    if (this.filename.endsWith('.html')) {
+      return 'html'
+    }
+    if (this.filename.endsWith('.css')) {
+      return 'css'
+    }
+    if (this.filename.endsWith('.ts')) {
+      return 'typescript'
     }
+    return 'javascript'
   }
 }
 
-function setFile(
-  files: Record<string, File>,
-  filename: string,
-  content: string,
-) {
-  // prefix user files with src/
-  // for cleaner Volar path completion when using Monaco editor
-  const normalized = addSrcPrefix(filename)
-  files[normalized] = new File(normalized, content)
-}
-
 function addSrcPrefix(file: string) {
   return file === importMapFile ||
     file === tsconfigFile ||
@@ -497,10 +413,10 @@ function addSrcPrefix(file: string) {
     : `src/${file}`
 }
 
-function fixURL(url: string) {
-  return url.replace('https://sfc.vuejs', 'https://play.vuejs')
-}
-
 export function stripSrcPrefix(file: string) {
   return file.replace(/^src\//, '')
 }
+
+function fixURL(url: string) {
+  return url.replace('https://sfc.vuejs', 'https://play.vuejs')
+}
diff --git a/src/transform.ts b/src/transform.ts
index dc6779ef..ad3ca37d 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -56,7 +56,7 @@ export async function compileFile(
   const { errors, descriptor } = store.compiler.parse(code, {
     filename,
     sourceMap: true,
-    templateParseOptions: store.options?.template?.compilerOptions,
+    templateParseOptions: store.sfcOptions?.template?.compilerOptions,
   })
   if (errors.length) {
     return errors
@@ -130,7 +130,8 @@ export async function compileFile(
   // only need dedicated compilation if not using <script setup>
   if (
     descriptor.template &&
-    (!descriptor.scriptSetup || store.options?.script?.inlineTemplate === false)
+    (!descriptor.scriptSetup ||
+      store.sfcOptions?.script?.inlineTemplate === false)
   ) {
     const clientTemplateResult = await doCompileTemplate(
       store,
@@ -168,27 +169,15 @@ export async function compileFile(
   }
 
   // styles
-  const ceFilter = store.customElement
+  const ceFilter = store.sfcOptions.script?.customElement || /\.ce\.vue$/
   function isCustomElement(filters: typeof ceFilter): boolean {
     if (typeof filters === 'boolean') {
       return filters
     }
-
-    if (typeof filters === 'string') {
-      return filters.includes(filename)
-    } else if (
-      !Array.isArray(filters) &&
-      Object.prototype.toString.call(filters) === '[object RegExp]'
-    ) {
-      return filters.test(filename)
-    }
-
-    if (Array.isArray(filters)) {
-      return filters.some((filter) => {
-        return isCustomElement(filter)
-      })
+    if (typeof filters === 'function') {
+      return filters(filename)
     }
-    return false
+    return filters.test(filename)
   }
   let isCE = isCustomElement(ceFilter)
 
@@ -200,7 +189,7 @@ export async function compileFile(
     }
 
     const styleResult = await store.compiler.compileStyleAsync({
-      ...store.options?.style,
+      ...store.sfcOptions?.style,
       source: style.content,
       filename,
       id,
@@ -211,7 +200,7 @@ export async function compileFile(
       // postcss uses pathToFileURL which isn't polyfilled in the browser
       // ignore these errors for now
       if (!styleResult.errors[0].message.includes('pathToFileURL')) {
-        store.state.errors = styleResult.errors
+        store.errors = styleResult.errors
       }
       // proceed even if css compile errors
     } else {
@@ -256,14 +245,14 @@ async function doCompileScript(
       : undefined
     const compiledScript = store.compiler.compileScript(descriptor, {
       inlineTemplate: true,
-      ...store.options?.script,
+      ...store.sfcOptions?.script,
       id,
       templateOptions: {
-        ...store.options?.template,
+        ...store.sfcOptions?.template,
         ssr,
         ssrCssVars: descriptor.cssVars,
         compilerOptions: {
-          ...store.options?.template?.compilerOptions,
+          ...store.sfcOptions?.template?.compilerOptions,
           expressionPlugins,
         },
       },
@@ -304,7 +293,7 @@ async function doCompileTemplate(
 ) {
   let { code, errors } = store.compiler.compileTemplate({
     isProd: false,
-    ...store.options?.template,
+    ...store.sfcOptions?.template,
     ast: descriptor.template!.ast,
     source: descriptor.template!.content,
     filename: descriptor.filename,
@@ -314,7 +303,7 @@ async function doCompileTemplate(
     ssr,
     ssrCssVars: descriptor.cssVars,
     compilerOptions: {
-      ...store.options?.template?.compilerOptions,
+      ...store.sfcOptions?.template?.compilerOptions,
       bindingMetadata,
       expressionPlugins: isTS ? ['typescript'] : undefined,
     },
diff --git a/src/types.ts b/src/types.ts
index 898f38d8..761f453b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,5 @@
-import type { Component } from 'vue'
+import type { Component, InjectionKey } from 'vue'
+import type { Store } from './store'
 
 export type EditorMode = 'js' | 'css' | 'ssr'
 export interface EditorProps {
@@ -13,3 +14,5 @@ export interface EditorEmits {
 export type EditorComponentType = Component<EditorProps>
 
 export type OutputModes = 'preview' | EditorMode
+
+export const injectKeyStore: InjectionKey<Store> = Symbol('store')
diff --git a/test/main.ts b/test/main.ts
index 53d64fe8..488a241e 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -1,24 +1,31 @@
-import { createApp, h, watchEffect } from 'vue'
-import { Repl, ReplStore } from '../src'
+import { createApp, h, ref, watchEffect } from 'vue'
+import { type OutputModes, Repl, useStore, useVueImportMap } from '../src'
 import MonacoEditor from '../src/editor/MonacoEditor.vue'
 // import CodeMirrorEditor from '../src/editor/CodeMirrorEditor.vue'
-;(window as any).process = { env: {} }
+
+const window = globalThis.window as any
+window.process = { env: {} }
 
 const App = {
   setup() {
     const query = new URLSearchParams(location.search)
-    const store = ((window as any).store = new ReplStore({
-      serializedState: location.hash.slice(1),
-      showOutput: query.has('so'),
-      outputMode: query.get('om') || 'preview',
-      defaultVueRuntimeURL: import.meta.env.PROD
+    const { importMap: builtinImportMap, vueVersion } = useVueImportMap({
+      runtimeDev: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-dev-proxy`,
-      defaultVueServerRendererURL: import.meta.env.PROD
+      serverRenderer: import.meta.env.PROD
         ? undefined
         : `${location.origin}/src/vue-server-renderer-dev-proxy`,
-    }))
-
+    })
+    const store = (window.store = useStore(
+      {
+        builtinImportMap,
+        vueVersion,
+        showOutput: ref(query.has('so')),
+        outputMode: ref((query.get('om') as OutputModes) || 'preview'),
+      },
+      location.hash,
+    ))
     console.info(store)
 
     watchEffect(() => history.replaceState({}, '', store.serialize()))
@@ -36,7 +43,7 @@ const App = {
     // )
     // }, 1000);
 
-    // store.setVueVersion('3.2.8')
+    store.vueVersion = '3.4.1'
 
     return () =>
       h(Repl, {

From 06f67b4528a823bc5b0d6268fc7dd3b7bbd46c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 13 Jan 2024 01:23:59 +0800
Subject: [PATCH 2/7] fix: don't show tsconfig

---
 src/editor/FileSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index 169cd770..06f9b98b 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -150,7 +150,7 @@ function horizontalScroll(e: WheelEvent) {
 
     <div class="import-map-wrapper">
       <div
-        v-if="showTsConfig && store.state.files[tsconfigFile]"
+        v-if="showTsConfig && store.files[tsconfigFile]"
         class="file"
         :class="{ active: store.activeFile.filename === tsconfigFile }"
         @click="store.setActive(tsconfigFile)"

From abbd541dbfd07261129fdd70d3d0c1c92c9b128e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 13 Jan 2024 01:24:28 +0800
Subject: [PATCH 3/7] feat: setFiles & getFiles

---
 src/import-map.ts      |  20 ++++--
 src/output/Preview.vue |   3 -
 src/store.ts           | 143 +++++++++++++++++++++++++++--------------
 test/main.ts           |  22 +++----
 4 files changed, 118 insertions(+), 70 deletions(-)

diff --git a/src/import-map.ts b/src/import-map.ts
index b9d24d59..4f0337c1 100644
--- a/src/import-map.ts
+++ b/src/import-map.ts
@@ -2,23 +2,30 @@ import { computed, version as currentVersion, ref } from 'vue'
 
 export function useVueImportMap(
   defaults: {
-    runtimeDev?: string
-    runtimeProd?: string
-    serverRenderer?: string
+    runtimeDev?: string | (() => string)
+    runtimeProd?: string | (() => string)
+    serverRenderer?: string | (() => string)
   } = {},
 ) {
+  function normalizeDefaults(defaults?: string | (() => string)) {
+    if (!defaults) return
+    return typeof defaults === 'string' ? defaults : defaults()
+  }
+
   const productionMode = ref(false)
   const vueVersion = ref<string | undefined>()
   const importMap = computed<ImportMap>(() => {
     const vue =
       (!vueVersion.value &&
-        (productionMode.value ? defaults.runtimeProd : defaults.runtimeDev)) ||
+        normalizeDefaults(
+          productionMode.value ? defaults.runtimeProd : defaults.runtimeDev,
+        )) ||
       `https://cdn.jsdelivr.net/npm/@vue/runtime-dom@${
         vueVersion.value || currentVersion
       }/dist/runtime-dom.esm-browser${productionMode.value ? `.prod` : ``}.js`
 
     const serverRenderer =
-      (!vueVersion.value && defaults.serverRenderer) ||
+      (!vueVersion.value && normalizeDefaults(defaults.serverRenderer)) ||
       `https://cdn.jsdelivr.net/npm/@vue/server-renderer@${
         vueVersion.value || currentVersion
       }/dist/server-renderer.esm-browser.js`
@@ -32,8 +39,9 @@ export function useVueImportMap(
 
   return {
     productionMode,
-    vueVersion,
     importMap,
+    vueVersion,
+    defaultVersion: currentVersion,
   }
 }
 
diff --git a/src/output/Preview.vue b/src/output/Preview.vue
index c0bfd56d..0c182031 100644
--- a/src/output/Preview.vue
+++ b/src/output/Preview.vue
@@ -48,9 +48,6 @@ watch(
   },
 )
 
-// reset sandbox when version changes
-// watch(() => store.resetFlip, createSandbox)
-
 // reset theme
 watch(
   () => theme.value,
diff --git a/src/store.ts b/src/store.ts
index c6ed259e..441a527e 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -50,12 +50,12 @@ export function useStore(
   }: Partial<StoreState> = {},
   serializedState?: string,
 ): ReplStore {
-  function setFile(filename: string, content: string) {
-    const normalized = addSrcPrefix(filename)
-    files.value[normalized] = new File(normalized, content)
+  function applyBuiltinImportMap() {
+    const importMap = mergeImportMap(builtinImportMap.value, getImportMap())
+    setImportMap(importMap)
   }
 
-  const init = () => {
+  function init() {
     watchEffect(() =>
       compileFile(store, activeFile.value).then(
         (errs) => (errors.value = errs),
@@ -86,9 +86,7 @@ export function useStore(
       }
     })
 
-    // init import map
-    const importMap = mergeImportMap(builtinImportMap.value, getImportMap())
-    setImportMap(importMap)
+    applyBuiltinImportMap()
     watch(
       builtinImportMap,
       () => {
@@ -113,6 +111,20 @@ export function useStore(
       }
     }
   }
+
+  function setImportMap(map: ImportMap) {
+    if (map.imports)
+      for (const [key, value] of Object.entries(map.imports)) {
+        if (value) {
+          map.imports![key] = fixURL(value)
+        }
+      }
+    files.value[importMapFile] = new File(
+      importMapFile,
+      JSON.stringify(map, undefined, 2),
+    )
+  }
+
   const setActive: Store['setActive'] = (filename) => {
     activeFile.value = files.value[filename]
   }
@@ -191,14 +203,6 @@ export function useStore(
       return {}
     }
   }
-  const getFiles = () => {
-    const exported: Record<string, string> = {}
-    for (const [filename, file] of Object.entries(files.value)) {
-      const normalized = stripSrcPrefix(filename)
-      exported[normalized] = file.code
-    }
-    return exported
-  }
   const serialize: ReplStore['serialize'] = () => {
     const files = getFiles()
     const importMap = files[importMapFile]
@@ -227,37 +231,63 @@ export function useStore(
     }
     return '#' + utoa(JSON.stringify(files))
   }
-  const deserialize = (serializedState: string) => {
+  const deserialize: ReplStore['deserialize'] = (serializedState: string) => {
     if (serializedState.startsWith('#'))
       serializedState = serializedState.slice(1)
     const saved = JSON.parse(atou(serializedState))
     for (const filename in saved) {
-      setFile(filename, saved[filename])
+      setFile(files.value, filename, saved[filename])
     }
   }
-  const setImportMap = (map: ImportMap) => {
-    if (map.imports)
-      for (const [key, value] of Object.entries(map.imports)) {
-        if (value) {
-          map.imports![key] = fixURL(value)
-        }
-      }
-    files.value[importMapFile] = new File(
-      importMapFile,
-      JSON.stringify(map, undefined, 2),
-    )
+  const getFiles: ReplStore['getFiles'] = () => {
+    const exported: Record<string, string> = {}
+    for (const [filename, file] of Object.entries(files.value)) {
+      const normalized = stripSrcPrefix(filename)
+      exported[normalized] = file.code
+    }
+    return exported
+  }
+  const setFiles: ReplStore['setFiles'] = async (
+    newFiles,
+    mainFile = store.mainFile,
+  ) => {
+    const files: Record<string, File> = Object.create(null)
+
+    mainFile = addSrcPrefix(mainFile)
+    if (!newFiles[mainFile]) {
+      setFile(files, mainFile, template.value.welcomeSFC || welcomeSFCCode)
+    }
+    for (const [filename, file] of Object.entries(newFiles)) {
+      setFile(files, filename, file)
+    }
+
+    const errors = []
+    for (const file of Object.values(files)) {
+      errors.push(...(await compileFile(store, file)))
+    }
+
+    store.mainFile = mainFile
+    store.files = files
+    store.errors = errors
+    applyBuiltinImportMap()
+    setActive(store.mainFile)
   }
 
   if (serializedState) {
     deserialize(serializedState)
   } else {
-    setFile(mainFile.value, template.value.welcomeSFC || welcomeSFCCode)
+    setFile(
+      files.value,
+      mainFile.value,
+      template.value.welcomeSFC || welcomeSFCCode,
+    )
   }
-  activeFile ||= ref(
-    files.value[mainFile.value] || Object.values(files.value)[0],
-  )
+  if (!files.value[mainFile.value]) {
+    mainFile.value = Object.keys(files.value)[0]
+  }
+  activeFile ||= ref(files.value[mainFile.value])
 
-  const store = reactive({
+  const store: ReplStore = reactive({
     files,
     activeFile,
     mainFile,
@@ -285,6 +315,8 @@ export function useStore(
     getTsConfig,
     serialize,
     deserialize,
+    getFiles,
+    setFiles,
   })
   return store
 }
@@ -313,14 +345,21 @@ export interface SFCOptions {
 export type StoreState = ToRefs<{
   files: Record<string, File>
   activeFile: File
-  errors: (string | Error)[]
+  mainFile: string
+  template: {
+    welcomeSFC?: string
+    newSFC?: string
+  }
+  builtinImportMap: ImportMap
 
   // output
+  errors: (string | Error)[]
   showOutput: boolean
   outputMode: OutputModes
   sfcOptions: SFCOptions
   /** `@vue/compiler-sfc` */
   compiler: typeof defaultCompiler
+  /* only apply for compiler-sfc */
   vueVersion: string | undefined
 
   // volar-related
@@ -329,31 +368,27 @@ export type StoreState = ToRefs<{
   /** \{ dependencyName: version \} */
   dependencyVersion: Record<string, string>
   reloadLanguageTools?: (() => void) | undefined
-
-  mainFile: string
-  template: {
-    welcomeSFC?: string
-    newSFC?: string
-  }
-
-  builtinImportMap: ImportMap
 }>
 
 export interface ReplStore extends UnwrapRef<StoreState> {
-  init: () => void
-  setActive: (filename: string) => void
-  addFile: (filename: string | File) => void
-  deleteFile: (filename: string) => void
-  renameFile: (oldFilename: string, newFilename: string) => void
-  getImportMap: () => ImportMap
-  getTsConfig?: () => Record<string, any>
+  init(): void
+  setActive(filename: string): void
+  addFile(filename: string | File): void
+  deleteFile(filename: string): void
+  renameFile(oldFilename: string, newFilename: string): void
+  getImportMap(): ImportMap
+  getTsConfig(): Record<string, any>
   serialize(): string
+  deserialize(serializedState: string): void
+  getFiles(): Record<string, string>
+  setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>
 }
 
 export type Store = Pick<
   ReplStore,
   | 'files'
   | 'activeFile'
+  | 'mainFile'
   | 'errors'
   | 'showOutput'
   | 'outputMode'
@@ -364,7 +399,6 @@ export type Store = Pick<
   | 'typescriptVersion'
   | 'dependencyVersion'
   | 'reloadLanguageTools'
-  | 'mainFile'
   | 'init'
   | 'setActive'
   | 'addFile'
@@ -420,3 +454,12 @@ export function stripSrcPrefix(file: string) {
 function fixURL(url: string) {
   return url.replace('https://sfc.vuejs', 'https://play.vuejs')
 }
+
+function setFile(
+  files: Record<string, File>,
+  filename: string,
+  content: string,
+) {
+  const normalized = addSrcPrefix(filename)
+  files[normalized] = new File(normalized, content)
+}
diff --git a/test/main.ts b/test/main.ts
index 488a241e..91d0bfc2 100644
--- a/test/main.ts
+++ b/test/main.ts
@@ -31,17 +31,17 @@ const App = {
     watchEffect(() => history.replaceState({}, '', store.serialize()))
 
     // setTimeout(() => {
-    // store.setFiles(
-    //   {
-    //     'index.html': '<h1>yo</h1>',
-    //     'main.js': 'document.body.innerHTML = "<h1>hello</h1>"',
-    //     'foo.js': 'document.body.innerHTML = "<h1>hello</h1>"',
-    //     'bar.js': 'document.body.innerHTML = "<h1>hello</h1>"',
-    //     'baz.js': 'document.body.innerHTML = "<h1>hello</h1>"'
-    //   },
-    //   'index.html'
-    // )
-    // }, 1000);
+    //   store.setFiles(
+    //     {
+    //       'src/index.html': '<h1>yo</h1>',
+    //       'src/main.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //       'src/foo.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //       'src/bar.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //       'src/baz.js': 'document.body.innerHTML = "<h1>hello</h1>"',
+    //     },
+    //     'src/index.html',
+    //   )
+    // }, 1000)
 
     store.vueVersion = '3.4.1'
 

From 85a0a13f6cbf8f94f092fd4feef8734c70f8cc62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 13 Jan 2024 01:50:08 +0800
Subject: [PATCH 4/7] feat: export ReplStore

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index 2065c084..ca8b83d6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,7 @@ export {
   type SFCOptions,
   type StoreState,
   type Store,
+  type ReplStore,
 } from './store'
 export { useVueImportMap, type ImportMap } from './import-map'
 export { compileFile } from './transform'

From 0bad78616fc0cdde72211debe9b9f47e1fc78537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 13 Jan 2024 01:55:30 +0800
Subject: [PATCH 5/7] fix: import map

---
 src/store.ts | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/store.ts b/src/store.ts
index 441a527e..c9436626 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -74,6 +74,14 @@ export function useStore(
       { deep: true },
     )
 
+    watch(
+      builtinImportMap,
+      () => {
+        setImportMap(mergeImportMap(getImportMap(), builtinImportMap.value))
+      },
+      { deep: true, immediate: true },
+    )
+
     watch(vueVersion, async (version) => {
       if (version) {
         const compilerUrl = `https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
@@ -86,15 +94,6 @@ export function useStore(
       }
     })
 
-    applyBuiltinImportMap()
-    watch(
-      builtinImportMap,
-      () => {
-        setImportMap(mergeImportMap(getImportMap(), builtinImportMap.value))
-      },
-      { deep: true },
-    )
-
     // init tsconfig
     if (!files.value[tsconfigFile]) {
       files.value[tsconfigFile] = new File(
@@ -287,6 +286,8 @@ export function useStore(
   }
   activeFile ||= ref(files.value[mainFile.value])
 
+  applyBuiltinImportMap()
+
   const store: ReplStore = reactive({
     files,
     activeFile,

From 5f61884b101a3077938388631bf1e365664dac4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 13 Jan 2024 02:15:49 +0800
Subject: [PATCH 6/7] refactor!: drop sfcOptions on component

---
 src/Repl.vue | 22 ++--------------------
 src/store.ts | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 961084e4..4b14ebfb 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
-import { type SFCOptions, type Store, useStore } from './store'
-import { computed, provide, ref, toRef, watchEffect } from 'vue'
+import { type Store, useStore } from './store'
+import { computed, provide, ref, toRef } from 'vue'
 import { type EditorComponentType, injectKeyStore } from './types'
 import EditorContainer from './editor/EditorContainer.vue'
 
@@ -15,7 +15,6 @@ export interface Props {
   showImportMap?: boolean
   showTsConfig?: boolean
   clearConsole?: boolean
-  sfcOptions?: SFCOptions
   layout?: 'horizontal' | 'vertical'
   layoutReverse?: boolean
   ssr?: boolean
@@ -49,7 +48,6 @@ const props = withDefaults(defineProps<Props>(), {
       useCode: '',
     },
   }),
-  sfcOptions: () => ({}),
   layout: 'horizontal',
 })
 
@@ -59,22 +57,6 @@ if (!props.editor) {
 
 const outputRef = ref<InstanceType<typeof Output>>()
 
-watchEffect(() => {
-  const { store } = props
-  const sfcOptions = (store.sfcOptions = props.sfcOptions || store.sfcOptions)
-  sfcOptions.script ||= {}
-  sfcOptions.script.fs = {
-    fileExists(file: string) {
-      if (file.startsWith('/')) file = file.slice(1)
-      return !!store.files[file]
-    },
-    readFile(file: string) {
-      if (file.startsWith('/')) file = file.slice(1)
-      return store.files[file].code
-    },
-  }
-})
-
 props.store.init()
 
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
diff --git a/src/store.ts b/src/store.ts
index c9436626..da521b28 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -94,6 +94,24 @@ export function useStore(
       }
     })
 
+    watch(
+      sfcOptions,
+      () => {
+        sfcOptions.value.script ||= {}
+        sfcOptions.value.script.fs = {
+          fileExists(file: string) {
+            if (file.startsWith('/')) file = file.slice(1)
+            return !!store.files[file]
+          },
+          readFile(file: string) {
+            if (file.startsWith('/')) file = file.slice(1)
+            return store.files[file].code
+          },
+        }
+      },
+      { immediate: true },
+    )
+
     // init tsconfig
     if (!files.value[tsconfigFile]) {
       files.value[tsconfigFile] = new File(

From 324ce89dc9ae8ce06bb684e677bf5597a57859cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sat, 13 Jan 2024 18:49:59 +0800
Subject: [PATCH 7/7] feat: export mergeImportMap

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index ca8b83d6..5ccf83bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,7 +8,7 @@ export {
   type Store,
   type ReplStore,
 } from './store'
-export { useVueImportMap, type ImportMap } from './import-map'
+export { useVueImportMap, mergeImportMap, type ImportMap } from './import-map'
 export { compileFile } from './transform'
 export type { Props as ReplProps } from './Repl.vue'
 export type { OutputModes } from './types'