feat: extract remove-trivial-root

Author: haoqunjiang

generator/codemods/global-api/create-app-mount.js

@@ -1,3 +1,8 @@
+/**
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
 module.exports = function createAppMount(context) {
   const { j, root } = context
 
@@ -15,28 +20,6 @@ module.exports = function createAppMount(context) {
     let options = node.callee.object.arguments[0]
     const el = node.arguments[0]
 
-    // if it's a simple option, like `{ render: h => h(App) }`,
-    // then just use the App variable
-    if (
-      options.properties.length === 1 &&
-      options.properties[0].key.name === 'render' &&
-      options.properties[0].value.type === 'ArrowFunctionExpression' &&
-      options.properties[0].value.body.type === 'CallExpression'
-    ) {
-      options = options.properties[0].value.body.arguments[0]
-    } else {
-      // replace `render: h => h(App)` with `render: () => h(App)
-      // and add an `h` import
-      const renderFn = options.properties.find(p => p.key.name === 'render' && p.value.type === 'ArrowFunctionExpression')
-      if (renderFn) {
-        const addImport = require('./utilities/add-import')
-        addImport(context, { imported: 'h' }, 'vue')
-
-        // remove the `h` parameter
-        renderFn.value.params.shift()
-      }
-    }
-
     return j.callExpression(
       j.memberExpression(
         j.callExpression(j.identifier('createApp'), [options]),

generator/codemods/global-api/index.js

@@ -1,3 +1,4 @@
+/** @type {import('jscodeshift').Transform} */
 module.exports = function(fileInfo, api) {
   const j = api.jscodeshift
   const root = j(fileInfo.source)
@@ -7,10 +8,11 @@ module.exports = function(fileInfo, api) {
   addImport(context, { imported: 'createApp' }, 'vue')
 
   require('./create-app-mount')(context)
+  require('./vuex')(context)
+  require('./router')(context)
+  require('./remove-trivial-root')(context)
   require('./remove-production-tip')(context)
   require('./remove-contextual-h')(context)
-  require('./remove-trivial-render')(context)
-  require('./vuex')(context)
 
   // remove extraneous Vue import
   const localVueUsages = root.find(j.Identifier, { name: 'Vue' })

generator/codemods/global-api/remove-contextual-h.js

@@ -1,6 +1,11 @@
 const addImport = require('./utilities/add-import')
 
-// replace `render: h => h(App)` with `render: () => h(App)
+/**
+ * replace `render: h => h(App)` with `render: () => h(App)
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
 module.exports = function removeContextualH (context) {
   const { j, root } = context
 

generator/codemods/global-api/remove-production-tip.js

@@ -1,8 +1,13 @@
+/**
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
 module.exports = function removeProductionTip({ j, root }) {
   const productionTipAssignment = root.find(
     j.AssignmentExpression,
     n =>
-      n.left.type === 'MemberExpression' &&
+      j.MemberExpression.check(n.left) &&
       n.left.property.name === 'productionTip' &&
       n.left.object.property.name === 'config' &&
       n.left.object.object.name === 'Vue'

generator/codemods/global-api/remove-trivial-render.js

@@ -0,0 +1,30 @@
+/**
+ * It is expected to be run after the `createApp` transformataion
+ * if a root component is trivial, that is, it contains only one simple option,
+ * like `{ render: h => h(App) }`, then just use the `App` variable
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
+module.exports = function removeTrivialRoot({ j, root }) {
+  const appRoots = root.find(j.CallExpression, {
+    callee: { name: 'createApp' },
+    arguments: args => args.length === 1 && args[0].type === 'ObjectExpression'
+  })
+  appRoots.forEach(({ node: createAppCall }) => {
+    const { properties } = createAppCall.arguments[0]
+    if (
+      properties.length === 1 &&
+      properties[0].key.name === 'render' &&
+      j.ArrowFunctionExpression.check(properties[0].value)
+    ) {
+      const renderFnBody = properties[0].value.body
+      const isTrivial =
+        j.CallExpression.check(renderFnBody) &&
+        renderFnBody.arguments.length === 1
+      if (isTrivial) {
+        createAppCall.arguments[0] = renderFnBody.arguments[0]
+      }
+    }
+  })
+}

generator/codemods/global-api/remove-trivial-root.js

@@ -20,6 +20,7 @@
     "vue": "^3.0.0-alpha.4"
   },
   "devDependencies": {
+    "@types/jscodeshift": "^0.7.0",
     "jest": "^25.1.0",
     "jscodeshift": "^0.7.0",
     "prettier": "^1.19.1"

package.json

@@ -1054,6 +1054,14 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/jscodeshift@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@types/jscodeshift/-/jscodeshift-0.7.0.tgz#796bf05a420c5d3e95b196b1fa01cc75f10c41b2"
+  integrity sha512-W59Y/fnztfJ/5gP4m2ZSWHvb4JPl9SXXn5ne3/6kYP5twRek9DTyKB6xbPIeg0RXbcNTHPBXHNLcKw3AlCrjTw==
+  dependencies:
+    ast-types "0.12.1"
+    recast "0.17.2"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1206,6 +1214,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+[email protected]:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.1.tgz#55d3737a8a68e1ccde131067005ce7ee3dd42b99"
+  integrity sha512-H2izJAyT2xwew4TxShpmxe6f9R5hHgJQy1QloLiUC2yrJMtyraBWNJL7903rpeCY9keNUipORR/zIUC2XcYKng==
+
 [email protected]:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
@@ -3451,7 +3464,7 @@ pretty-format@^25.1.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-private@^0.1.8:
+private@^0.1.8, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
@@ -3499,6 +3512,16 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+[email protected]:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.17.2.tgz#f18f18cf20bf3fad4522621a7f9c2ada37276814"
+  integrity sha512-YHFvn4rBXl8eIjALjUiOV/AP3xFpyGNGNHDw9mAncAWuIdgnBKjbZQ9+P3VlsKcNaNapRVFlTEX1dvDRlYwyxg==
+  dependencies:
+    ast-types "0.12.1"
+    esprima "~4.0.0"
+    private "~0.1.5"
+    source-map "~0.6.1"
+
 recast@^0.18.1:
   version "0.18.7"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.7.tgz#56338a6d803c8c3b9113344440dc70d13c8a1ef7"