feat(wip): restructure the codemods directory

Author: haoqunjiang

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

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

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

@@ -0,0 +1,7 @@
+import { createApp, h } from 'vue';
+import App from './App.vue';
+
+createApp({
+  myOption: 'hello!',
+  render: () => h(App),
+}).mount('#app');

generator/codemods/global-api/__testfixtures__/custom-root-option.input.js

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

generator/codemods/global-api/__testfixtures__/custom-root-option.output.js

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

generator/codemods/global-api/__testfixtures__/el.input.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import Vuex from 'vuex';
+
+import App from './App.vue';
+import store from './store';
+
+const app = createApp(App)
+app.use(store)
+app.mount('#app');

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

@@ -0,0 +1,14 @@
+import { Store } from 'vuex'
+
+const store = new Store({
+  state: {
+    count: 0
+  },
+  mutations: {
+    increment (state) {
+      state.count++
+    }
+  }
+})
+
+export default store

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

@@ -0,0 +1,11 @@
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state () {
+    return {
+      count: 1
+    }
+  }
+})
+
+export default store

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

@@ -0,0 +1,10 @@
+jest.autoMockOff()
+
+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')

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

@@ -1,4 +1,6 @@
-module.exports = function transformMount(j, root) {
+module.exports = function createAppMount(context) {
+  const { j, root } = context
+
   // new Vue(...).$mount()
   const mountCalls = root.find(j.CallExpression, n => {
     return (
@@ -22,6 +24,17 @@ module.exports = function transformMount(j, root) {
       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(
@@ -32,6 +45,4 @@ module.exports = function transformMount(j, root) {
       [el]
     )
   })
-
-  return root
 }

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

@@ -0,0 +1,22 @@
+module.exports = function(fileInfo, api) {
+  const j = api.jscodeshift
+  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('./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' })
+  if (localVueUsages.length === 1) {
+    localVueUsages.closest(j.ImportDefaultSpecifier).remove()
+  }
+
+  return root.toSource({ lineTerminator: '\n' })
+}

generator/codemods/global-api/__testfixtures__/vuex-store.input.js

@@ -0,0 +1,23 @@
+const addImport = require('./utilities/add-import')
+
+// replace `render: h => h(App)` with `render: () => h(App)
+module.exports = function removeContextualH (context) {
+  const { j, root } = context
+  
+  const renderFns = (root.find(j.Property, {
+    key: {
+      name: 'render'
+    },
+    value: {
+      type: 'ArrowFunctionExpression'
+    }
+  }))
+  if (renderFns.length) {
+    addImport(context, { imported: 'h' }, 'vue')
+    renderFns.forEach(({ node }) => {
+      node.value.params.shift()
+    })
+  }
+
+  // TODO: render methods
+}

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

@@ -1,4 +1,4 @@
-module.exports = function removeProductionTip(j, root) {
+module.exports = function removeProductionTip({ j, root }) {
   const productionTipAssignment = root.find(
     j.AssignmentExpression,
     n =>
@@ -8,6 +8,4 @@ module.exports = function removeProductionTip(j, root) {
       n.left.object.object.name === 'Vue'
   )
   productionTipAssignment.remove()
-
-  return root
 }

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

@@ -0,0 +1,5 @@
+// It is expected to be run after the `createApp` transformataion
+module.exports = function removeTrivialRender({ j, root }) {
+  // TODO:
+  // const rootComponent = 
+}

generator/codemods/rfc09-global-api/transformMount.js renamed to generator/codemods/global-api/create-app-mount.js

@@ -0,0 +1,3 @@
+module.exports = function (context) {
+  // TODO:
+}

generator/codemods/global-api/index.js

@@ -0,0 +1,55 @@
+// specifier should be in the form of `Vue` or `{ imported: 'h' }` or `{ imported: 'h', local: 'createElement' }`
+module.exports = function addImport(context, specifier, source) {
+  const { j, root } = context
+
+  const isDefaultImport = typeof specifier === 'string'
+  const localName = isDefaultImport
+    ? specifier
+    : specifier.local || specifier.imported
+
+  const duplicate = root.find(j.ImportDeclaration, {
+    specifiers: arr => arr.some(s => s.local.name === localName),
+    source: {
+      value: source
+    }
+  })
+  if (duplicate.length) {
+    return
+  }
+
+  let newImportSpecifier
+  if (isDefaultImport) {
+    newImportSpecifier = j.importDefaultSpecifier(j.identifier(specifier))
+  } else {
+    newImportSpecifier = j.importSpecifier(
+      j.identifier(specifier.imported),
+      j.identifier(specifier.local || specifier.imported)
+    )
+  }
+
+  const matchedDecl = root.find(j.ImportDeclaration, {
+    source: {
+      value: source
+    }
+  })
+  if (matchedDecl.length) {
+    // add new specifier to the existing import declaration
+    matchedDecl.get(0).node.specifiers.push(newImportSpecifier)
+  } else {
+    const newImportDecl = j.ImportDeclaration(
+      [newImportSpecifier],
+      j.stringLiteral(source)
+    )
+
+    const lastImportDecl = root.find(j.ImportDeclaration).at(-1)
+    if (lastImportDecl.length) {
+      // add the new import declaration after all other import declarations
+      lastImportDecl.insertAfter(newImportDecl)
+    } else {
+      // add new import declaration at the beginning of the file
+      root.get().node.program.body.unshift(newImportDecl)
+    }
+  }
+
+  return root
+}

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

@@ -0,0 +1,3 @@
+module.exports = function (context) {
+  // TODO:
+}

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

@@ -93,5 +93,5 @@ module.exports = (api) => {
     // * Partial support of per-component navigation guards. No `beforeRouteEnter`
   }
 
-  api.transformScript(api.entryFile, require('./codemods/rfc09-global-api'))
+  api.transformScript(api.entryFile, require('./codemods/global-api'))
 }