refactor(sfc-playground): upgrade `@vue/repl`

packages/sfc-playground/package.json

@@ -13,7 +13,7 @@
     "vite": "^5.0.12"
   },
   "dependencies": {
-    "@vue/repl": "4.0.0-alpha.1",
+    "@vue/repl": "^4.0.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"

packages/sfc-playground/src/Header.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import type { ReplStore } from '@vue/repl'
 import { downloadProject } from './download/download'
-import { ref } from 'vue'
 import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 import Reload from './icons/Reload.vue'
-import type { ReplStore } from '@vue/repl'
 import VersionSelect from './VersionSelect.vue'
 
 const props = defineProps<{
@@ -27,23 +27,20 @@ const emit = defineEmits([
 const { store } = props
 
 const currentCommit = __COMMIT__
-const vueVersion = ref(`@${currentCommit}`)
 
-const vueURL = store.getImportMap().imports?.vue
-if (vueURL && !vueURL.startsWith(location.origin)) {
-  const versionMatch = vueURL.match(/runtime-dom@([^/]+)/)
-  if (versionMatch) vueVersion.value = versionMatch[1]
-}
+const vueVersion = computed(() => {
+  if (store.loading) {
+    return 'loading...'
+  }
+  return store.vueVersion || `@${__COMMIT__}`
+})
 
 async function setVueVersion(v: string) {
-  vueVersion.value = `loading...`
   store.vueVersion = v
-  vueVersion.value = v
 }
 
 function resetVueVersion() {
-  store.vueVersion = undefined
-  vueVersion.value = `@${currentCommit}`
+  store.vueVersion = null
 }
 
 async function copyLink(e: MouseEvent) {

pnpm-lock.yaml

@@ -374,8 +374,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: 4.0.0-alpha.1
-        version: 4.0.0-alpha.1
+        specifier: ^4.0.0
+        version: 4.0.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1896,8 +1896,8 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@4.0.0-alpha.1:
-    resolution: {integrity: sha512-BK9D7AgpYAWVrtd7Kkc3CotU/ox8l+mPjsLgK16ZP+Ldj8jXPrJtzYQ2rTQNRJOxVSVx5acftDTLDLENFhQdDw==}
+  /@vue/repl@4.0.0:
+    resolution: {integrity: sha512-/C4moGPnuc/t7JdBdEAOn/9MkdLH0KzY8zhZN33gfKY6E7ln0I2umsTjQAxvjTFuPS01oAOlATvaWz5cW8HLgQ==}
     dev: false
 
   /@vueuse/core@10.7.2(vue@packages+vue):