chore: tweaks

packages-private/sfc-playground/package.json

@@ -13,7 +13,7 @@
     "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "https://pkg.pr.new/@vue/repl@cc87b48",
+    "@vue/repl": "https://pkg.pr.new/@vue/repl@0c1d0f7",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"

packages-private/sfc-playground/src/App.vue

@@ -8,7 +8,7 @@ import {
   StoreState,
 } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import { ref, watchEffect, onMounted, computed } from 'vue'
+import { ref, watchEffect, onMounted, computed, watch } from 'vue'
 
 const replRef = ref<InstanceType<typeof Repl>>()
 
@@ -132,19 +132,17 @@ onMounted(() => {
 })
 
 const isVaporSupported = ref(false)
-function handleVueVersionChange(
-  version: string | null,
-  reload: boolean = true,
-) {
-  if (!version) {
-    isVaporSupported.value = true
-  } else {
-    const [major, minor] = version.split('.').map(Number)
+watch(
+  () => store.vueVersion,
+  (version, oldVersion) => {
+    const [major, minor] = (version || store.compiler.version)
+      .split('.')
+      .map(Number)
     isVaporSupported.value = major > 3 || (major === 3 && minor >= 6)
-  }
-  if (reload) reloadPage()
-}
-handleVueVersionChange(vueVersion.value, false)
+    if (oldVersion) reloadPage()
+  },
+  { immediate: true, flush: 'pre' },
+)
 
 const previewOptions = computed(() => ({
   customCode: {
@@ -174,7 +172,6 @@ const previewOptions = computed(() => ({
     @toggle-ssr="toggleSSR"
     @toggle-autosave="toggleAutoSave"
     @reload-page="reloadPage"
-    @change-vue-version="handleVueVersionChange"
   />
   <Repl
     ref="replRef"

packages-private/sfc-playground/src/Header.vue

@@ -24,7 +24,6 @@ const emit = defineEmits([
   'toggle-vapor',
   'toggle-autosave',
   'reload-page',
-  'change-vue-version',
 ])
 
 const { store } = props
@@ -39,12 +38,10 @@ const vueVersion = computed(() => {
 })
 
 async function setVueVersion(v: string) {
-  emit('change-vue-version', v)
   store.vueVersion = v
 }
 
 function resetVueVersion() {
-  emit('change-vue-version', null)
   store.vueVersion = null
 }
 

pnpm-lock.yaml

@@ -251,8 +251,8 @@ importers:
   packages-private/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: https://pkg.pr.new/@vue/repl@cc87b48
-        version: https://pkg.pr.new/@vue/repl@cc87b48
+        specifier: https://pkg.pr.new/@vue/repl@0c1d0f7
+        version: https://pkg.pr.new/@vue/repl@0c1d0f7
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1650,8 +1650,8 @@ packages:
   '@vue/reactivity@3.6.0-alpha.1':
     resolution: {integrity: sha512-h/Rscsd7OhcBM3YWKwEg4FG5iLSjASMZVl5ahPfma19xig/MhwKrUc9dE4tLNMtd3ZbocIPzZsV+O4fgoAZFdw==}
 
-  '@vue/repl@https://pkg.pr.new/@vue/repl@cc87b48':
-    resolution: {tarball: https://pkg.pr.new/@vue/repl@cc87b48}
+  '@vue/repl@https://pkg.pr.new/@vue/repl@0c1d0f7':
+    resolution: {tarball: https://pkg.pr.new/@vue/repl@0c1d0f7}
     version: 4.6.1
 
   '@vue/runtime-core@3.6.0-alpha.1':
@@ -4843,7 +4843,7 @@ snapshots:
     dependencies:
       '@vue/shared': 3.6.0-alpha.1
 
-  '@vue/repl@https://pkg.pr.new/@vue/repl@cc87b48': {}
+  '@vue/repl@https://pkg.pr.new/@vue/repl@0c1d0f7': {}
 
   '@vue/runtime-core@3.6.0-alpha.1':
     dependencies: