feat: use a codemod to transform entryFile, rather than replace it

Author: haoqunjiang

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  semi: false,
+  singleQuote: true
+}

generator/codemods/rfc09-global-api/__testfixtures__/hello.input.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');

generator/codemods/rfc09-global-api/__testfixtures__/hello.output.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp().mount(App, '#app');

generator/codemods/rfc09-global-api/__tests__/rfc09-test.js

@@ -0,0 +1,5 @@
+jest.autoMockOff()
+
+const { defineTest } = require('jscodeshift/dist/testUtils')
+
+defineTest(__dirname, 'index', null, 'hello')

generator/codemods/rfc09-global-api/index.js

@@ -0,0 +1,28 @@
+const removeProductionTip = require('./remove-production-tip')
+const transformMount = require('./transformMount')
+
+module.exports = function(fileInfo, api) {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  // add a `createApp` import
+  const vueImportExpr = root.find(j.ImportDeclaration, {
+    source: {
+      value: 'vue'
+    }
+  })
+  vueImportExpr.forEach(({ node }) => {
+    node.specifiers.push(j.importSpecifier(j.identifier('createApp')))
+  })
+
+  removeProductionTip(j, root)
+  transformMount(j, root)
+
+  // remove extraneous Vue import
+  const localVueUsages = root.find(j.Identifier, { name: 'Vue' })
+  if (localVueUsages.length === 1) {
+    localVueUsages.closest(j.ImportDefaultSpecifier).remove()
+  }
+
+  return root.toSource({ lineTerminator: '\n' })
+}

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

@@ -0,0 +1,13 @@
+module.exports = function removeProductionTip(j, root) {
+  const productionTipAssignment = root.find(
+    j.AssignmentExpression,
+    n =>
+      n.left.type === 'MemberExpression' &&
+      n.left.property.name === 'productionTip' &&
+      n.left.object.property.name === 'config' &&
+      n.left.object.object.name === 'Vue'
+  )
+  productionTipAssignment.remove()
+
+  return root
+}

generator/codemods/rfc09-global-api/transformMount.js

@@ -0,0 +1,37 @@
+module.exports = function transformMount(j, root) {
+  // new Vue(...).$mount()
+  const mountCalls = root.find(j.CallExpression, n => {
+    return (
+      n.callee.type === 'MemberExpression' &&
+      n.callee.property.name === '$mount' &&
+      n.callee.object.type === 'NewExpression' &&
+      n.callee.object.callee.name === 'Vue'
+    )
+  })
+
+  mountCalls.replaceWith(({ node }) => {
+    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]
+    }
+
+    return j.callExpression(
+      j.memberExpression(
+        j.callExpression(j.identifier('createApp'), []),
+        j.identifier('mount')
+      ),
+      [options, el]
+    )
+  })
+
+  return root
+}

generator/index.js

@@ -8,8 +8,7 @@ module.exports = (api) => {
     }
   })
 
-  // TODO: transformScript main.js
-  api.render('./template')
+  api.transformScript(api.entryFile, require('./codemods/rfc09-global-api'))
 
   // TODO: uninstall vue-template-compiler (need to fix @vue/cli-service first)
 }

package.json

@@ -9,11 +9,19 @@
   },
   "author": "Haoqun Jiang",
   "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
   "dependencies": {
     "vue-loader": "^16.0.0-alpha.1"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.0.0-alpha.1",
     "vue": "^3.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "jest": "^24.9.0",
+    "jscodeshift": "^0.7.0",
+    "prettier": "^1.19.1"
   }
 }