feat(babel): transform preset names in the plugin migrator (#4629)

Author: haoqunjiang

.eslintignore

@@ -4,3 +4,4 @@ packages/test
 temp
 entry-wc.js
 dist
+__testfixtures__

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/customConfig.input.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@vue/app", {
+      polyfills: []
+    }]
+  ]
+}

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/customConfig.output.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@vue/cli-plugin-babel/preset", {
+      polyfills: []
+    }]
+  ]
+}

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/default.input.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/app"]
+}

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/default.output.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+}

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/require.input.js

@@ -0,0 +1,9 @@
+const config = {
+  presets: [
+    [require("@vue/babel-preset-app"), {
+      polyfills: []
+    }]
+  ]
+}
+
+module.exports = config

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/require.output.js

@@ -0,0 +1,9 @@
+const config = {
+  presets: [
+    [require("@vue/cli-plugin-babel/preset"), {
+      polyfills: []
+    }]
+  ]
+}
+
+module.exports = config

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/templateLiteral.input.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [`@vue/app`]
+}

packages/@vue/cli-plugin-babel/codemods/__testfixtures__/templateLiteral.output.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [`@vue/cli-plugin-babel/preset`]
+}

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

@@ -0,0 +1,9 @@
+jest.autoMockOff()
+
+const { defineTest } = require('jscodeshift/dist/testUtils')
+
+defineTest(__dirname, 'usePluginPreset', null, 'default')
+defineTest(__dirname, 'usePluginPreset', null, 'customConfig')
+defineTest(__dirname, 'usePluginPreset', null, 'require')
+defineTest(__dirname, 'usePluginPreset', null, 'templateLiteral')
+

packages/@vue/cli-plugin-babel/codemods/usePluginPreset.js

@@ -0,0 +1,41 @@
+module.exports = function (fileInfo, api) {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  root
+    .find(j.Literal, { value: '@vue/app' })
+    .forEach(({ node }) => {
+      node.value = '@vue/cli-plugin-babel/preset'
+    })
+  root
+    .find(j.Literal, { value: '@vue/babel-preset-app' })
+    .forEach(({ node }) => {
+      node.value = '@vue/cli-plugin-babel/preset'
+    })
+
+  const templateLiterals = root
+    .find(j.TemplateLiteral, {
+      expressions: { length: 0 }
+    })
+
+  templateLiterals
+    .find(j.TemplateElement, {
+      value: {
+        cooked: '@vue/app'
+      }
+    })
+    .forEach(({ node }) => {
+      node.value = { cooked: '@vue/cli-plugin-babel/preset', raw: '@vue/cli-plugin-babel/preset' }
+    })
+  templateLiterals
+    .find(j.TemplateElement, {
+      value: {
+        cooked: '@vue/babel-preset-app'
+      }
+    })
+    .forEach(({ node }) => {
+      node.value = { cooked: '@vue/cli-plugin-babel/preset', raw: '@vue/cli-plugin-babel/preset' }
+    })
+
+  return root.toSource()
+}

packages/@vue/cli-plugin-babel/migrator/index.js

@@ -1,23 +1,15 @@
 const { chalk } = require('@vue/cli-shared-utils')
 
 module.exports = (api) => {
-  // TODO: backport this part to v3
-  // if (api.fromVersion('<=3.5.3')) {
-  //   // add core-js@2 as dependency
-  //   api.extendPackage({
-  //     dependencies: {
-  //       'core-js': '^2.6.5'
-  //     }
-  //   })
-  // }
-
   if (api.fromVersion('^3')) {
     api.extendPackage({
       dependencies: {
         'core-js': '^3.1.2'
       }
     }, true)
 
+    api.transformScript('babel.config.js', require('../codemods/usePluginPreset'))
+
     // TODO: implement a codemod to migrate polyfills
     api.exitLog(`core-js has been upgraded from v2 to v3.
 If you have any custom polyfills defined in ${chalk.yellow('babael.config.js')}, please be aware their names may have been changed.

packages/@vue/cli-plugin-babel/package.json

@@ -29,6 +29,9 @@
   "peerDependencies": {
     "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
   },
+  "devDependencies": {
+    "jscodeshift": "^0.6.4"
+  },
   "publishConfig": {
     "access": "public"
   }