From: daiwei Date: Tue, 15 Jul 2025 10:11:36 +0000 (+0800) Subject: fix(sfc-playground): conditionally import vaporInteropPlugin X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=65e37bcea88053cba350163a1865779f023da49a;p=thirdparty%2Fvuejs%2Fcore.git fix(sfc-playground): conditionally import vaporInteropPlugin --- diff --git a/packages-private/sfc-playground/package.json b/packages-private/sfc-playground/package.json index 731ff94425..9e529671ad 100644 --- 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 be4b136012..9167af9e1b 100644 --- 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() + }`, + }, +})) diff --git a/packages-private/sfc-playground/src/Header.vue b/packages-private/sfc-playground/src/Header.vue index 132453e986..1c24b9ab30 100644 --- 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 c777d8238f..cbaee656b3 100644 --- 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