feat: mutable sfc options

Author: sxzz

src/Repl.vue

@@ -2,7 +2,7 @@
 import SplitPane from './SplitPane.vue'
 import Output from './output/Output.vue'
 import { Store, ReplStore, SFCOptions } from './store'
-import { provide, ref, toRef, computed } from 'vue'
+import { provide, ref, toRef, computed, watchEffect } from 'vue'
 import type { EditorComponentType } from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
 
@@ -56,29 +56,29 @@ if (!props.editor) {
 }
 
 const outputRef = ref<InstanceType<typeof Output>>()
-const { store } = props
-const sfcOptions = (store.options = props.sfcOptions || {})
-if (!sfcOptions.script) {
-  sfcOptions.script = {}
-}
-// @ts-ignore only needed in 3.3
-sfcOptions.script.fs = {
-  fileExists(file: string) {
-    if (file.startsWith('/')) file = file.slice(1)
-    return !!store.state.files[file]
-  },
-  readFile(file: string) {
-    if (file.startsWith('/')) file = file.slice(1)
-    return store.state.files[file].code
-  },
-}
 
-store.init()
+watchEffect(() => {
+  const { store } = props
+  const sfcOptions = (store.options = props.sfcOptions || {})
+  sfcOptions.script ||= {}
+  sfcOptions.script.fs = {
+    fileExists(file: string) {
+      if (file.startsWith('/')) file = file.slice(1)
+      return !!store.state.files[file]
+    },
+    readFile(file: string) {
+      if (file.startsWith('/')) file = file.slice(1)
+      return store.state.files[file].code
+    },
+  }
+})
+
+props.store.init()
 
 const editorSlotName = computed(() => (props.layoutReverse ? 'right' : 'left'))
 const outputSlotName = computed(() => (props.layoutReverse ? 'left' : 'right'))
 
-provide('store', store)
+provide('store', props.store)
 provide('autoresize', props.autoResize)
 provide('import-map', toRef(props, 'showImportMap'))
 provide('tsconfig', toRef(props, 'showTsConfig'))