feat: allow choosing vue version on creation (and in presets) (#5637)

Author: haoqunjiang

.eslintignore

@@ -1,5 +1,6 @@
 node_modules
 template
+template-vue3
 packages/test
 temp
 entry-wc.js

package.json

@@ -91,7 +91,6 @@
   },
   "resolutions": {
     "puppeteer": "1.11.0",
-    "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11",
     "vue-server-renderer": "^2.6.11"
   }

packages/@vue/babel-preset-app/README.md

@@ -88,7 +88,7 @@ Use this option when you have 3rd party dependencies that are not processed by B
 
 - Default: `true`.
 
-Set to `false` to disable JSX support. Or you can toggle [@vue/babel-preset-jsx](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx) features here.
+Set to `false` to disable JSX support. Or you can toggle [@vue/babel-preset-jsx](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx) (or [@ant-design-vue/babel-plugin-jsx](https://github.com/vueComponent/jsx) for Vue 3 projects) features here.
 
 ### loose
 

packages/@vue/babel-preset-app/index.js

@@ -112,7 +112,22 @@ module.exports = (context, options = {}) => {
 
   // JSX
   if (options.jsx !== false) {
-    presets.push([require('@vue/babel-preset-jsx'), typeof options.jsx === 'object' ? options.jsx : {}])
+    let jsxOptions = {}
+    if (typeof options.jsx === 'object') {
+      jsxOptions = options.jsx
+    }
+
+    let vueVersion = 2
+    try {
+      const Vue = require('vue')
+      vueVersion = semver.major(Vue.version)
+    } catch (e) {}
+
+    if (vueVersion === 2) {
+      presets.push([require('@vue/babel-preset-jsx'), jsxOptions])
+    } else if (vueVersion === 3) {
+      plugins.push([require('@ant-design-vue/babel-plugin-jsx'), jsxOptions])
+    }
   }
 
   const runtimePath = path.dirname(require.resolve('@babel/runtime/package.json'))

packages/@vue/babel-preset-app/package.json

@@ -22,6 +22,7 @@
   },
   "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/babel-preset-app#readme",
   "dependencies": {
+    "@ant-design-vue/babel-plugin-jsx": "^1.0.0-0",
     "@babel/core": "^7.9.6",
     "@babel/helper-compilation-targets": "^7.9.6",
     "@babel/helper-module-imports": "^7.8.3",
@@ -40,11 +41,15 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "core-js": "^3"
+    "core-js": "^3",
+    "vue": "^2 || ^3.0.0-0"
   },
   "peerDependenciesMeta": {
     "core-js": {
       "optional": true
+    },
+    "vue": {
+      "optional": true
     }
   }
 }

packages/@vue/cli-plugin-babel/__tests__/babelMigrator.spec.js

@@ -2,9 +2,6 @@ const create = require('@vue/cli-test-utils/createUpgradableProject')
 const { logs } = require('@vue/cli-shared-utils')
 
 jest.setTimeout(300000)
-beforeEach(() => {
-  process.env.VUE_CLI_TEST_DO_INSTALL_PLUGIN = true
-})
 
 test('upgrade: plugin-babel v3.5', async () => {
   const project = await create('plugin-babel-legacy', {

packages/@vue/cli-plugin-babel/__tests__/babel-runtime.spec.js renamed to packages/@vue/cli-plugin-babel/__tests__/babelRuntime.spec.js

@@ -63,6 +63,11 @@ beforeAll(async () => {
   )
 })
 
+afterAll(async () => {
+  // avoid the non-existent made-up deps interfere with other tests
+  await project.rm('package.json')
+})
+
 test('dep from node_modules should not been transpiled', async () => {
   await project.run('vue-cli-service build')
   expect(await readVendorFile()).toMatch('() => "__TEST__"')

packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js

@@ -1,10 +1,6 @@
 jest.setTimeout(300000)
 jest.mock('inquirer')
 
-beforeEach(() => {
-  process.env.VUE_CLI_TEST_DO_INSTALL_PLUGIN = true
-})
-
 const create = require('@vue/cli-test-utils/createUpgradableProject')
 const { expectPrompts } = require('inquirer')
 

packages/@vue/cli-plugin-eslint/__tests__/eslintMigrator.spec.js

@@ -0,0 +1,53 @@
+jest.setTimeout(300000)
+
+const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
+const createOutside = require('@vue/cli-test-utils/createUpgradableProject')
+
+test('Vue 3 base', async () => {
+  const { pkg } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('@vue/cli-service/generator'),
+      options: {
+        vueVersion: '3'
+      }
+    },
+    {
+      id: '@vue/cli-plugineslint',
+      apply: require('../generator'),
+      options: {}
+    }
+  ])
+
+  expect(pkg.scripts.lint).toBeTruthy()
+  expect(pkg.eslintConfig.extends).toEqual([
+    'plugin:vue/vue3-essential', 'eslint:recommended'
+  ])
+})
+
+test('Should allow fragments in Vue 3 projects', async () => {
+  const { write, run } = await createOutside('eslint-vue3-fragment', {
+    vueVersion: '3',
+    plugins: {
+      '@vue/cli-plugin-eslint': {}
+    }
+  })
+  await write('src/App.vue', `<template>
+  <img alt="Vue logo" src="./assets/logo.png">
+  <HelloWorld msg="Welcome to Your Vue.js App"/>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+`)
+
+  await run('vue-cli-service lint')
+})