fix: avoid conflicts between defined variables and imported specifier (#64)

Author: Alan Wang

transformations/__testfixtures__/vue-router-v4/rename-create-router.input.js

@@ -0,0 +1,24 @@
+import VueRouter from 'vue-router';
+import Home from '../views/Home.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home,
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+];
+const createRouter = () => new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+});
+
+const router = createRouter()
+
+export default router;

transformations/__testfixtures__/vue-router-v4/rename-create-router.output.js

@@ -0,0 +1,23 @@
+import { createRouter as newCreateRouter, createWebHistory } from 'vue-router';
+import Home from '../views/Home.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home,
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+];
+const createRouter = () => newCreateRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+});
+
+const router = createRouter()
+
+export default router;

transformations/__tests__/vue-router-v4.spec.ts

@@ -3,9 +3,7 @@ jest.autoMockOff()
 import { defineTest } from 'jscodeshift/src/testUtils'
 
 defineTest(__dirname, 'vue-router-v4', {}, 'vue-router-v4/create-router')
-
 defineTest(__dirname, 'vue-router-v4', {}, 'vue-router-v4/create-history')
-
+defineTest(__dirname, 'vue-router-v4', {}, 'vue-router-v4/rename-create-router')
 defineTest(__dirname, 'router/router4-onready-to-isready', {}, 'vue-router-v4/router-ready')
-
 defineTest(__dirname, 'router/router-update-addRoute', {}, 'vue-router-v4/router-addRoute')

transformations/vue-router-v4.ts

@@ -26,10 +26,28 @@ export const transformAST: ASTTransformation = context => {
       }
     })
 
-    addImport(context, {
-      specifier: { type: 'named', imported: 'createRouter' },
-      source: 'vue-router'
+    let localCreateRouter = 'createRouter'
+    // find whether createRouter has been used
+    const createRouterIdentifiers = root.find(j.Identifier, {
+      name: 'createRouter'
     })
+    if (createRouterIdentifiers.length) {
+      // rename createRouter to newCreateRouter
+      localCreateRouter = 'newCreateRouter'
+      addImport(context, {
+        specifier: {
+          type: 'named',
+          imported: 'createRouter',
+          local: localCreateRouter
+        },
+        source: 'vue-router'
+      })
+    } else {
+      addImport(context, {
+        specifier: { type: 'named', imported: 'createRouter' },
+        source: 'vue-router'
+      })
+    }
     newVueRouter.replaceWith(({ node }) => {
       // mode: 'history' -> history: createWebHistory(), etc
       let historyMode = 'createWebHashHistory'
@@ -89,7 +107,7 @@ export const transformAST: ASTTransformation = context => {
         )
       )
 
-      return j.callExpression(j.identifier('createRouter'), node.arguments)
+      return j.callExpression(j.identifier(localCreateRouter), node.arguments)
     })
 
     // VueRouter.START_LOCATION => import {START_LOCATION} from 'vue-router'