feat: mutable sfc options

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'))