refactor(generator): router codemod

Author: Guillaume Chau

generator/codemod/router.js

@@ -0,0 +1,54 @@
+const { parse, types: { namedTypes, builders }, print } = require('recast')
+const { isVueGlobalCall } = require('./util')
+
+exports.wrapRouterToExportedFunction = (contents) => {
+  // @TODO remove when esprima supports dynamic imports
+  contents = contents.replace(/import\(/g, '__webpack_dynamic_import__(')
+  const ast = parse(contents)
+
+  const outside = []
+  const inside = []
+  let origDefaultExportDeclaration
+
+  ast.program.body.forEach(node => {
+    if (namedTypes.ExportDefaultDeclaration.check(node)) {
+      origDefaultExportDeclaration = node
+    } else if (
+      namedTypes.ImportDeclaration.check(node) ||
+      namedTypes.ExportAllDeclaration.check(node) ||
+      namedTypes.ExportNamedDeclaration.check(node) ||
+      namedTypes.ExportDeclaration.check(node) ||
+      isVueGlobalCall(node)
+    ) {
+      outside.push(node)
+    } else {
+      inside.push(node)
+    }
+  })
+
+  const returnStatement = builders.returnStatement(
+    origDefaultExportDeclaration.declaration,
+  )
+
+  const functionDeclaration = builders.functionDeclaration(
+    builders.identifier('createRouter'),
+    [],
+    builders.blockStatement([
+      ...inside,
+      returnStatement,
+    ]),
+  )
+
+  const newProgram = builders.program([
+    ...outside,
+    builders.exportNamedDeclaration(
+      functionDeclaration,
+    ),
+  ])
+
+  contents = print(newProgram).code
+
+  // @TODO remove when esprima supports dynamic imports
+  contents = contents.replace(/__webpack_dynamic_import__\(/g, 'import(')
+  return contents
+}

generator/codemod/util.js

@@ -0,0 +1,13 @@
+const { types: { namedTypes } } = require('recast')
+
+exports.isVueGlobalCall = (node) => {
+  if (namedTypes.ExpressionStatement.check(node)) {
+    node = node.expression
+    if (namedTypes.CallExpression.check(node)) {
+      if (node.callee.object.name === 'Vue') {
+        return true
+      }
+    }
+  }
+  return false
+}

generator/index.js

@@ -82,32 +82,36 @@ module.exports = (api, options, rootOptions) => {
     }
 
     // Router
-    {
+    try {
       const file = getFile(api, './src/router.js')
       if (file) {
         let contents = fs.readFileSync(file, { encoding: 'utf8' })
-        contents = contents.replace(/export default new Router\({((.|\s)+)}\)/, `export function createRouter () {
-          return new Router({
-            ${contents.includes('mode:') ? '' : 'mode: \'history\','}$1})
-        }`)
+        const { wrapRouterToExportedFunction } = require('./codemod/router')
+        contents = wrapRouterToExportedFunction(contents)
         contents = contents.replace(/mode:\s*("|')(hash|abstract)("|'),/, '')
         fs.writeFileSync(file, contents, { encoding: 'utf8' })
       }
+    } catch (e) {
+      console.error('An error occured while transforming router code', e.stack)
     }
 
     // Vuex
     if (api.hasPlugin('vuex')) {
-      const file = getFile(api, './src/store.js')
-      if (file) {
-        let contents = fs.readFileSync(file, { encoding: 'utf8' })
-        contents = contents.replace(/export default new Vuex\.Store\({((.|\s)+)}\)/, `export function createStore () {
-          return new Vuex.Store({$1})
-        }`)
-        contents = contents.replace(/state:\s*{((.|\s)*?)},\s*(getters|mutations|actions|modules|namespaced):/, `state () {
-          return {$1}
-        },
-        $3:`)
-        fs.writeFileSync(file, contents, { encoding: 'utf8' })
+      try {
+        const file = getFile(api, './src/store.js')
+        if (file) {
+          let contents = fs.readFileSync(file, { encoding: 'utf8' })
+          contents = contents.replace(/export default new Vuex\.Store\({((.|\s)+)}\)/, `export function createStore () {
+            return new Vuex.Store({$1})
+          }`)
+          contents = contents.replace(/state:\s*{((.|\s)*?)},\s*(getters|mutations|actions|modules|namespaced):/, `state () {
+            return {$1}
+          },
+          $3:`)
+          fs.writeFileSync(file, contents, { encoding: 'utf8' })
+        }
+      } catch (e) {
+        console.error('An error occured while transforming vuex code', e.stack)
       }
     }
 

package.json

@@ -42,6 +42,7 @@
     "memory-fs": "^0.5.0",
     "portfinder": "^1.0.25",
     "querystring": "^0.2.0",
+    "recast": "^0.18.5",
     "rimraf": "^3.0.0",
     "serve-favicon": "^2.5.0",
     "webpack-dev-middleware": "^3.7.2",

yarn.lock

@@ -1291,6 +1291,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.13.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
+  integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3127,7 +3132,7 @@ esprima@^2.6.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
   integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
 
-esprima@^4.0.0:
+esprima@^4.0.0, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -6573,7 +6578,7 @@ prismjs@^1.13.0:
   optionalDependencies:
     clipboard "^2.0.0"
 
-private@^0.1.6:
+private@^0.1.6, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
   integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
@@ -6836,6 +6841,16 @@ readdirp@^2.0.0:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+recast@^0.18.5:
+  version "0.18.5"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.5.tgz#9d5adbc07983a3c8145f3034812374a493e0fe4d"
+  integrity sha512-sD1WJrpLQAkXGyQZyGzTM75WJvyAd98II5CHdK3IYbt/cZlU0UzCRVU11nUFNXX9fBVEt4E9ajkMjBlUlG+Oog==
+  dependencies:
+    ast-types "0.13.2"
+    esprima "~4.0.0"
+    private "^0.1.8"
+    source-map "~0.6.1"
+
 redent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"