fix(sfc-playground): conditionally import vaporInteropPlugin

diff --git a/packages-private/sfc-playground/package.json b/packages-private/sfc-playground/package.json
index 731ff944254f6ef4424eb128b240d8be44749d2c..9e529671ad19c547d424c8dc153f043b1a7a8b3f 100644 (file)
--- a/packages-private/sfc-playground/package.json
+++ b/packages-private/sfc-playground/package.json
@@ -13,7 +13,7 @@
     "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "^4.6.1",
+    "@vue/repl": "https://pkg.pr.new/@vue/repl@cc87b48",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"

diff --git a/packages-private/sfc-playground/src/App.vue b/packages-private/sfc-playground/src/App.vue
index be4b136012c951b65f771477e27e12b84b0745b6..9167af9e1b7ecfb5ee60bce783668c74aeba1bee 100644 (file)
--- a/packages-private/sfc-playground/src/App.vue
+++ b/packages-private/sfc-playground/src/App.vue
@@ -130,6 +130,36 @@ onMounted(() => {
   // @ts-expect-error process shim for old versions of @vue/compiler-sfc dependency
   window.process = { env: {} }
 })
+
+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)
+    isVaporSupported.value = major > 3 || (major === 3 && minor >= 6)
+  }
+  if (reload) reloadPage()
+}
+handleVueVersionChange(vueVersion.value, false)
+
+const previewOptions = computed(() => ({
+  customCode: {
+    importCode: `import { initCustomFormatter${isVaporSupported.value ? ', vaporInteropPlugin' : ''} } from 'vue'`,
+    useCode: `
+      ${isVaporSupported.value ? 'app.use(vaporInteropPlugin)' : ''}
+      if (window.devtoolsFormatters) {
+        const index = window.devtoolsFormatters.findIndex((v) => v.__vue_custom_formatter)
+        window.devtoolsFormatters.splice(index, 1)
+        initCustomFormatter()
+      } else {
+        initCustomFormatter()
+      }`,
+  },
+}))
 </script>
 
 <template>
@@ -144,6 +174,7 @@ onMounted(() => {
     @toggle-ssr="toggleSSR"
     @toggle-autosave="toggleAutoSave"
     @reload-page="reloadPage"
+    @change-vue-version="handleVueVersionChange"
   />
   <Repl
     ref="replRef"
@@ -160,20 +191,7 @@ onMounted(() => {
     :showOpenSourceMap="true"
     :autoResize="true"
     :clearConsole="false"
-    :preview-options="{
-      customCode: {
-        importCode: `import { initCustomFormatter, vaporInteropPlugin } from 'vue'`,
-        useCode: `
-  app.use(vaporInteropPlugin)
-  if (window.devtoolsFormatters) {
-    const index = window.devtoolsFormatters.findIndex((v) => v.__vue_custom_formatter)
-    window.devtoolsFormatters.splice(index, 1)
-    initCustomFormatter()
-  } else {
-    initCustomFormatter()
-  }`,
-      },
-    }"
+    :preview-options="previewOptions"
   />
 </template>
 

diff --git a/packages-private/sfc-playground/src/Header.vue b/packages-private/sfc-playground/src/Header.vue
index 132453e986d4ba91a984e4a926c8ff0d84b17c59..1c24b9ab30056239ff7460beb52dfd776af14cf9 100644 (file)
--- a/packages-private/sfc-playground/src/Header.vue
+++ b/packages-private/sfc-playground/src/Header.vue
@@ -24,6 +24,7 @@ const emit = defineEmits([
   'toggle-vapor',
   'toggle-autosave',
   'reload-page',
+  'change-vue-version',
 ])
 
 const { store } = props
@@ -38,10 +39,12 @@ 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
 }
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c777d8238f38b3c30bfdfe5afadfec0aa09f95d3..cbaee656b3f254d8eeee3ff66207780715c8cb61 100644 (file)
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -187,7 +187,7 @@ importers:
     dependencies:
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 5.2.4(vite@6.3.5(@types/node@22.16.0)(sass@1.89.2)(yaml@2.8.0))(vue@3.5.17(typescript@5.6.3))
+        version: 5.2.4(vite@6.3.5(@types/node@22.16.0)(sass@1.89.2)(yaml@2.8.0))(vue@3.6.0-alpha.1(typescript@5.6.3))
       connect:
         specifier: ^3.7.0
         version: 3.7.0
@@ -251,8 +251,8 @@ importers:
   packages-private/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^4.6.1
-        version: 4.6.1
+        specifier: https://pkg.pr.new/@vue/repl@cc87b48
+        version: https://pkg.pr.new/@vue/repl@cc87b48
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -1628,41 +1628,50 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@vue/compiler-core@3.5.17':
-    resolution: {integrity: sha512-Xe+AittLbAyV0pabcN7cP7/BenRBNcteM4aSDCtRvGw0d9OL+HG1u/XHLY/kt1q4fyMeZYXyIYrsHuPSiDPosA==}
+  '@vue/compiler-core@3.6.0-alpha.1':
+    resolution: {integrity: sha512-6Nimayca+s9D73UC9wET40Yog7mI2+v3JZbtZXs+ARbI/QDpnsQXPmebE57Dnra8UKttXRJjcLPxELb64dB9Ow==}
 
-  '@vue/compiler-dom@3.5.17':
-    resolution: {integrity: sha512-+2UgfLKoaNLhgfhV5Ihnk6wB4ljyW1/7wUIog2puUqajiC29Lp5R/IKDdkebh9jTbTogTbsgB+OY9cEWzG95JQ==}
+  '@vue/compiler-dom@3.6.0-alpha.1':
+    resolution: {integrity: sha512-uaEkyelv3oIL5iNjsB8Fl7US706w06KB+Q8ZNBO+us5+BGTyt5ChBawiirhHdra57tPgTSxMkjkpNgGmLKIBEQ==}
 
-  '@vue/compiler-sfc@3.5.17':
-    resolution: {integrity: sha512-rQQxbRJMgTqwRugtjw0cnyQv9cP4/4BxWfTdRBkqsTfLOHWykLzbOc3C4GGzAmdMDxhzU/1Ija5bTjMVrddqww==}
+  '@vue/compiler-sfc@3.6.0-alpha.1':
+    resolution: {integrity: sha512-ZHXzwJh/CrWEUEFzUNoV8dJWFe94UCGHZpLpAFJQjd6lSKf3focAmYMhgz3bnYKO/KQg4sKqNRGOtPBFCrwbig==}
 
-  '@vue/compiler-ssr@3.5.17':
-    resolution: {integrity: sha512-hkDbA0Q20ZzGgpj5uZjb9rBzQtIHLS78mMilwrlpWk2Ep37DYntUz0PonQ6kr113vfOEdM+zTBuJDaceNIW0tQ==}
+  '@vue/compiler-ssr@3.6.0-alpha.1':
+    resolution: {integrity: sha512-I6ODpN9BYI/E7YZ8bygmfEgNwMCIYnzHBPe+1vptY5ry2ocgWC60r3O5vi2hOsuEYElSHAdwegIWJ8Q1/0q6/Q==}
+
+  '@vue/compiler-vapor@3.6.0-alpha.1':
+    resolution: {integrity: sha512-h4jdbZksWUSCCW3OseJaG43L7NJjMp6KnS6Ic81DNOMcbu9Cn+iQUULWseACTHuwjoTRDigoPGAqpxd2V8T4rQ==}
 
   '@vue/consolidate@1.0.0':
     resolution: {integrity: sha512-oTyUE+QHIzLw2PpV14GD/c7EohDyP64xCniWTcqcEmTd699eFqTIwOmtDYjcO1j3QgdXoJEoWv1/cCdLrRoOfg==}
     engines: {node: '>= 0.12.0'}
 
-  '@vue/reactivity@3.5.17':
-    resolution: {integrity: sha512-l/rmw2STIscWi7SNJp708FK4Kofs97zc/5aEPQh4bOsReD/8ICuBcEmS7KGwDj5ODQLYWVN2lNibKJL1z5b+Lw==}
+  '@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}
+    version: 4.6.1
 
-  '@vue/repl@4.6.1':
-    resolution: {integrity: sha512-tgeEa+QXzqbFsAIbq/dCXzOJxIW2Nq1F79KXRjbKyPt1ODpCx86bDbFgNzFcBEK3In2/mjPTMpN7fSD6Ig0Qsw==}
+  '@vue/runtime-core@3.6.0-alpha.1':
+    resolution: {integrity: sha512-HYCDiD2GrkiOqc+XHSDCOFeg2grCvFK0xw6gsPgUa8g0CK/vx+Ks3Qba6sBTdjwP9NNWWXtyAoHzd7uySlgBXg==}
 
-  '@vue/runtime-core@3.5.17':
-    resolution: {integrity: sha512-QQLXa20dHg1R0ri4bjKeGFKEkJA7MMBxrKo2G+gJikmumRS7PTD4BOU9FKrDQWMKowz7frJJGqBffYMgQYS96Q==}
+  '@vue/runtime-dom@3.6.0-alpha.1':
+    resolution: {integrity: sha512-jpVyR9WNaft6xvL3dxA1bO7AnXFHw8IMdgru/XmmVIxpGQMQ+yXrXkjggO1GCDwkyjRz0mvZPXBEvY/aCizRoQ==}
 
-  '@vue/runtime-dom@3.5.17':
-    resolution: {integrity: sha512-8El0M60TcwZ1QMz4/os2MdlQECgGoVHPuLnQBU3m9h3gdNRW9xRmI8iLS4t/22OQlOE6aJvNNlBiCzPHur4H9g==}
+  '@vue/runtime-vapor@3.6.0-alpha.1':
+    resolution: {integrity: sha512-K2WGUY5pNhzVi9QKqcwRv/zvAebcdjMFdmn1vC4/QJY/zP4hx9zRBWhS1mHwZsyj+NS9SDUV/tOrax6sWFO1BQ==}
+    peerDependencies:
+      '@vue/runtime-dom': 3.6.0-alpha.1
 
-  '@vue/server-renderer@3.5.17':
-    resolution: {integrity: sha512-BOHhm8HalujY6lmC3DbqF6uXN/K00uWiEeF22LfEsm9Q93XeJ/plHTepGwf6tqFcF7GA5oGSSAAUock3VvzaCA==}
+  '@vue/server-renderer@3.6.0-alpha.1':
+    resolution: {integrity: sha512-TPAt4lNfGLrhncSImLqQQ1BmjIptW6lYtUbCCLeq8PvGVz19G4H1aC0vT1IyqjftV/lZuh7CyYohaEbdi4STFg==}
     peerDependencies:
-      vue: 3.5.17
+      vue: 3.6.0-alpha.1
 
-  '@vue/shared@3.5.17':
-    resolution: {integrity: sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==}
+  '@vue/shared@3.6.0-alpha.1':
+    resolution: {integrity: sha512-3GhFAnJdh5vqmqCwNqxc/SRHSjnw6eQyDK1/8pRS7cgddt+ko8RLz7gjDqZuOfCut8xBPLxXjPDT9fmSVgXxIQ==}
 
   '@vueuse/core@11.3.0':
     resolution: {integrity: sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==}
@@ -3794,8 +3803,8 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  vue@3.5.17:
-    resolution: {integrity: sha512-LbHV3xPN9BeljML+Xctq4lbz2lVHCR6DtbpTf5XIO6gugpXUN49j2QQPcMj086r9+AkJ0FfUT8xjulKKBkkr9g==}
+  vue@3.6.0-alpha.1:
+    resolution: {integrity: sha512-DZjYvysI4pp2o+y/Qeswe+8rWe/eYY13NLB9Bei2Ba5ecz+G1n3Uch2LI7IBa1favAqX8fZ4GJ5+XPBbPWwwxQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -4697,10 +4706,10 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.10.1':
     optional: true
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.16.0)(sass@1.89.2)(yaml@2.8.0))(vue@3.5.17(typescript@5.6.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.16.0)(sass@1.89.2)(yaml@2.8.0))(vue@3.6.0-alpha.1(typescript@5.6.3))':
     dependencies:
       vite: 6.3.5(@types/node@22.16.0)(sass@1.89.2)(yaml@2.8.0)
-      vue: 3.5.17(typescript@5.6.3)
+      vue: 3.6.0-alpha.1(typescript@5.6.3)
 
   '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.16.0)(sass@1.89.2)(yaml@2.8.0))(vue@packages+vue)':
     dependencies:
@@ -4789,63 +4798,78 @@ snapshots:
       loupe: 3.1.4
       tinyrainbow: 2.0.0
 
-  '@vue/compiler-core@3.5.17':
+  '@vue/compiler-core@3.6.0-alpha.1':
     dependencies:
       '@babel/parser': 7.28.0
-      '@vue/shared': 3.5.17
+      '@vue/shared': 3.6.0-alpha.1
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.17':
+  '@vue/compiler-dom@3.6.0-alpha.1':
     dependencies:
-      '@vue/compiler-core': 3.5.17
-      '@vue/shared': 3.5.17
+      '@vue/compiler-core': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
 
-  '@vue/compiler-sfc@3.5.17':
+  '@vue/compiler-sfc@3.6.0-alpha.1':
     dependencies:
       '@babel/parser': 7.28.0
-      '@vue/compiler-core': 3.5.17
-      '@vue/compiler-dom': 3.5.17
-      '@vue/compiler-ssr': 3.5.17
-      '@vue/shared': 3.5.17
+      '@vue/compiler-core': 3.6.0-alpha.1
+      '@vue/compiler-dom': 3.6.0-alpha.1
+      '@vue/compiler-ssr': 3.6.0-alpha.1
+      '@vue/compiler-vapor': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
       estree-walker: 2.0.2
       magic-string: 0.30.17
       postcss: 8.5.6
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.17':
+  '@vue/compiler-ssr@3.6.0-alpha.1':
+    dependencies:
+      '@vue/compiler-dom': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
+
+  '@vue/compiler-vapor@3.6.0-alpha.1':
     dependencies:
-      '@vue/compiler-dom': 3.5.17
-      '@vue/shared': 3.5.17
+      '@babel/parser': 7.28.0
+      '@vue/compiler-dom': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
 
   '@vue/consolidate@1.0.0': {}
 
-  '@vue/reactivity@3.5.17':
+  '@vue/reactivity@3.6.0-alpha.1':
     dependencies:
-      '@vue/shared': 3.5.17
+      '@vue/shared': 3.6.0-alpha.1
 
-  '@vue/repl@4.6.1': {}
+  '@vue/repl@https://pkg.pr.new/@vue/repl@cc87b48': {}
 
-  '@vue/runtime-core@3.5.17':
+  '@vue/runtime-core@3.6.0-alpha.1':
     dependencies:
-      '@vue/reactivity': 3.5.17
-      '@vue/shared': 3.5.17
+      '@vue/reactivity': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
 
-  '@vue/runtime-dom@3.5.17':
+  '@vue/runtime-dom@3.6.0-alpha.1':
     dependencies:
-      '@vue/reactivity': 3.5.17
-      '@vue/runtime-core': 3.5.17
-      '@vue/shared': 3.5.17
+      '@vue/reactivity': 3.6.0-alpha.1
+      '@vue/runtime-core': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.17(vue@3.5.17(typescript@5.6.3))':
+  '@vue/runtime-vapor@3.6.0-alpha.1(@vue/runtime-dom@3.6.0-alpha.1)':
+    dependencies:
+      '@vue/reactivity': 3.6.0-alpha.1
+      '@vue/runtime-dom': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
+
+  '@vue/server-renderer@3.6.0-alpha.1(vue@3.6.0-alpha.1(typescript@5.6.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.17
-      '@vue/shared': 3.5.17
-      vue: 3.5.17(typescript@5.6.3)
+      '@vue/compiler-ssr': 3.6.0-alpha.1
+      '@vue/shared': 3.6.0-alpha.1
+      vue: 3.6.0-alpha.1(typescript@5.6.3)
 
-  '@vue/shared@3.5.17': {}
+  '@vue/shared@3.6.0-alpha.1': {}
 
   '@vueuse/core@11.3.0(vue@packages+vue)':
     dependencies:
@@ -7106,13 +7130,14 @@ snapshots:
     dependencies:
       vue: link:packages/vue
 
-  vue@3.5.17(typescript@5.6.3):
+  vue@3.6.0-alpha.1(typescript@5.6.3):
     dependencies:
-      '@vue/compiler-dom': 3.5.17
-      '@vue/compiler-sfc': 3.5.17
-      '@vue/runtime-dom': 3.5.17
-      '@vue/server-renderer': 3.5.17(vue@3.5.17(typescript@5.6.3))
-      '@vue/shared': 3.5.17
+      '@vue/compiler-dom': 3.6.0-alpha.1
+      '@vue/compiler-sfc': 3.6.0-alpha.1
+      '@vue/runtime-dom': 3.6.0-alpha.1
+      '@vue/runtime-vapor': 3.6.0-alpha.1(@vue/runtime-dom@3.6.0-alpha.1)
+      '@vue/server-renderer': 3.6.0-alpha.1(vue@3.6.0-alpha.1(typescript@5.6.3))
+      '@vue/shared': 3.6.0-alpha.1
     optionalDependencies:
       typescript: 5.6.3