feat: implement root-option-to-use transformation

Author: haoqunjiang

generator/codemods/global-api/__testfixtures__/vue-router.input.js

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

generator/codemods/global-api/__testfixtures__/vue-router.output.js

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

generator/codemods/global-api/__testfixtures__/vuex-basic-2.input.js

@@ -1,12 +1,14 @@
 import Vue from 'vue';
-import Vuex from 'vuex';
-
 import App from './App.vue';
 import store from './store';
-
-Vue.use(Vuex)
+import anotherStore from './another-store';
 
 new Vue({
   store,
   render: h => h(App),
 }).$mount('#app');
+
+new Vue({
+  store: anotherStore,
+  render: h => h(App),
+}).$mount('#app');

generator/codemods/global-api/__testfixtures__/vuex-basic-2.output.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import store from './store';
+import anotherStore from './another-store';
+
+createApp(App).use(store).mount('#app');
+
+createApp(App).use(anotherStore).mount('#app');

generator/codemods/global-api/__testfixtures__/vuex-basic.output.js

@@ -5,6 +5,5 @@ const { defineTest } = require('jscodeshift/dist/testUtils')
 defineTest(__dirname, 'index', null, 'basic')
 defineTest(__dirname, 'index', null, 'custom-root-option')
 // defineTest(__dirname, 'index', null, 'el')
-// defineTest(__dirname, 'index', null, 'vuex-basic')
-// defineTest(__dirname, 'index', null, 'vuex-basic-2')
-// defineTest(__dirname, 'index', null, 'vuex-store')
+defineTest(__dirname, 'index', null, 'vue-router')
+defineTest(__dirname, 'index', null, 'vuex')

generator/codemods/global-api/__testfixtures__/vuex-basic.input.js renamed to generator/codemods/global-api/__testfixtures__/vuex.input.js

@@ -16,6 +16,13 @@ module.exports = function createAppMount(context) {
     )
   })
 
+  if (!mountCalls.length) {
+    return
+  }
+
+  const addImport = require('../utils/add-import')
+  addImport(context, { imported: 'createApp' }, 'vue')
+
   mountCalls.replaceWith(({ node }) => {
     let options = node.callee.object.arguments[0]
     const el = node.arguments[0]

generator/codemods/global-api/__testfixtures__/vuex.output.js

@@ -4,12 +4,9 @@ module.exports = function(fileInfo, api) {
   const root = j(fileInfo.source)
   const context = { j, root }
 
-  const addImport = require('./utilities/add-import')
-  addImport(context, { imported: 'createApp' }, 'vue')
-
   require('./create-app-mount')(context)
-  require('./vuex')(context)
-  require('./router')(context)
+  require('./root-option-to-use')(context, 'store')
+  require('./root-option-to-use')(context, 'router')
   require('./remove-trivial-root')(context)
   require('./remove-production-tip')(context)
   require('./remove-contextual-h')(context)

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

@@ -1,22 +1,22 @@
-const addImport = require('./utilities/add-import')
+const addImport = require('../utils/add-import')
 
 /**
  * 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) {
+module.exports = function removeContextualH(context) {
   const { j, root } = context
-  
-  const renderFns = (root.find(j.Property, {
+
+  const renderFns = root.find(j.Property, {
     key: {
       name: 'render'
     },
     value: {
       type: 'ArrowFunctionExpression'
     }
-  }))
+  })
   if (renderFns.length) {
     addImport(context, { imported: 'h' }, 'vue')
     renderFns.forEach(({ node }) => {

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

@@ -0,0 +1,37 @@
+/**
+ * Expected to be run after the `createApp` transformation.
+ * Transforms expressions like `createApp({ router })` to `createApp().use(router)`
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
+module.exports = function rootOptionToUse(context, rootOptionName) {
+  const { j, root } = context
+
+  const appRoots = root.find(j.CallExpression, {
+    callee: { name: 'createApp' },
+    arguments: args =>
+      args.length === 1 &&
+      args[0].type === 'ObjectExpression' &&
+      args[0].properties.find(p => p.key.name === rootOptionName)
+  })
+
+  appRoots.replaceWith(({ node: createAppCall }) => {
+    const rootOptions = createAppCall.arguments[0]
+    const propertyIndex = rootOptions.properties.findIndex(
+      p => p.key.name === rootOptionName
+    )
+    const [{ value: pluginInstance }] = rootOptions.properties.splice(
+      propertyIndex,
+      1
+    )
+
+    return j.callExpression(
+      j.memberExpression(
+        j.callExpression(j.identifier('createApp'), [rootOptions]),
+        j.identifier('use')
+      ),
+      [pluginInstance]
+    )
+  })
+}

generator/codemods/global-api/index.js

@@ -0,0 +1,9 @@
+/** @type {import('jscodeshift').Transform} */
+module.exports = function(fileInfo, api) {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  // TODO: Vue.use(router) might be in either`router/index.js` or `main.js`
+
+  return root.toSource({ lineTerminator: '\n' })
+}

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

@@ -0,0 +1,7 @@
+/** @type {import('jscodeshift').Transform} */
+module.exports = function(fileInfo, api) {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  return root.toSource({ lineTerminator: '\n' })
+}