From 9e83b09344ecc90ad0e28024a9b260fff97ffccd 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: Thu, 11 Jan 2024 15:22:25 +0800
Subject: [PATCH] feat: mutable sfc options

---
 src/Repl.vue | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/Repl.vue b/src/Repl.vue
index 80b576a2..e0220233 100644
--- a/src/Repl.vue
+++ b/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'))