feat: add transformation for element-ui (#84)

Author: wangsongc

src/__tests__/packageTransformation.spec.ts

@@ -85,3 +85,33 @@ let output =
     expect(pack.process(JSON.parse(input))).toStrictEqual(JSON.parse(output))
   })
 })
+
+describe('upgrade element-ui', () => {
+	let input =
+	`{
+		"dependencies": {
+			"vue": "^2.6.10",
+			"vue-i18n": "^8.14.0",
+			"vue-router": "^3.1.2",
+			"vuex": "^3.1.1",
+			"@vue/composition-api": "^1.0.0-rc.12",
+			"element-ui": "^1.0.0"
+		}
+	}
+	` 
+	let output =
+	`{
+		"dependencies": {
+			"vue": "^3.1.1",
+			"vue-i18n": "^9.1.6",
+			"vue-router": "^4.0.8",
+			"vuex": "^4.0.1",
+			"element-plus": "^1.0.2-beta.55"
+		}
+	}
+	` 
+	  it('upgread element-ui to element-plus', () => {
+		expect(pack.process(JSON.parse(input))).toStrictEqual(JSON.parse(output))
+	  })
+	})
+	

src/packageTransformation.ts

@@ -86,6 +86,10 @@ export function process(packageObj: any): any {
   if (packageObj?.eslintConfig?.parserOptions?.parser != undefined) {
     packageObj.eslintConfig.parserOptions.parser = '@babel/eslint-parser'
   }
+  if (packageObj?.dependencies['element-ui'] != undefined) {
+    delete packageObj.dependencies['element-ui']
+    packageObj.dependencies['element-plus'] = '^1.0.2-beta.55'
+  }
   return packageObj
 }
 /**

transformations/__tests__/element-plus-upgrade.spec.ts

@@ -0,0 +1,26 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+const transform = require('../element-plus-upgrade')
+
+defineInlineTest(
+  transform,
+  {},
+  `import ElementUI from "element-ui";`,
+  `import ElementUI from "element-plus";`,
+  'correctly transform default import from element-plus'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `import { MessageBox } from "element-ui";`,
+  `import { ElMessageBox as MessageBox } from "element-plus";`,
+  'correctly transform component import from element-plus'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `import ElementUI, { MessageBox } from "element-ui";`,
+  `import ElementUI, { ElMessageBox as MessageBox } from "element-plus";`,
+  'correctly transform multiple imports from element-plus'
+)

transformations/element-plus-upgrade.ts

@@ -0,0 +1,24 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+import { transformAST as elementPlusImport } from './element-plus/element-plus-import'
+import { transformAST as elementPlusComponentName } from './element-plus/element-plus-component-name'
+import { getCntFunc } from '../src/report'
+
+export const transformAST: ASTTransformation = context => {
+  const beforeCount = Object.keys(subRules).reduce(
+    (sum, key) => sum + subRules[key],
+    0
+  )
+  elementPlusImport(context)
+  elementPlusComponentName(context)
+  const afterCount = Object.keys(subRules).reduce(
+    (sum, key) => sum + subRules[key],
+    0
+  )
+  const change = afterCount - beforeCount
+  const cntFunc = getCntFunc('element-ui-upgrade', global.outputReport)
+  cntFunc(change)
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/element-plus/element-plus-component-name.ts

@@ -0,0 +1,49 @@
+import wrap from '../../src/wrapAstTransformation'
+import type { ASTTransformation } from '../../src/wrapAstTransformation'
+import type {
+  ImportSpecifier,
+  ImportDefaultSpecifier
+} from 'ast-types/gen/nodes'
+import { getCntFunc } from '../../src/report'
+
+/**
+ * Process component names that have been changed in element plus
+ * @param content
+ */
+export const transformAST: ASTTransformation = ({ root, j }) => {
+  // find element-ui import
+  const elementPlusImport = root.find(j.ImportDeclaration, {
+    source: {
+      value: 'element-plus'
+    }
+  })
+
+  if (elementPlusImport.length) {
+    elementPlusImport.forEach(({ node }) => {
+      let newSpecifier: (ImportSpecifier | ImportDefaultSpecifier)[] = []
+      node.specifiers.forEach(importNode => {
+        if (importNode.type === 'ImportSpecifier') {
+          newSpecifier.push(
+            j.importSpecifier(
+              j.identifier('El' + importNode.local?.name),
+              importNode.local
+            )
+          )
+          node.specifiers = newSpecifier
+        } else {
+          newSpecifier.push(
+            j.importDefaultSpecifier(j.identifier(importNode.local!.name))
+          )
+          node.specifiers = newSpecifier
+        }
+      })
+    })
+
+    // stats
+    const cntFunc = getCntFunc('observable', subRules)
+    cntFunc()
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/element-plus/element-plus-import.ts

@@ -0,0 +1,29 @@
+import wrap from '../../src/wrapAstTransformation'
+import type { ASTTransformation } from '../../src/wrapAstTransformation'
+import { getCntFunc } from '../../src/report'
+
+/**
+ * Upgrade element-ui to element-plus
+ * @param content
+ */
+export const transformAST: ASTTransformation = ({ root, j }) => {
+  // find element-ui import
+  const elementPlusImport = root.find(j.ImportDeclaration, {
+    source: {
+      value: 'element-ui'
+    }
+  })
+
+  if (elementPlusImport.length) {
+    elementPlusImport.forEach(({ node }) => {
+      node.source.value = 'element-plus'
+    })
+
+    // stats
+    const cntFunc = getCntFunc('observable', subRules)
+    cntFunc()
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/index.ts

@@ -26,6 +26,7 @@ const transformationMap: {
   'render-to-resolveComponent': require('./render-to-resolveComponent'),
   'vue-i18n-v9': require('./vue-i18n-v9'),
   'vuex-create-logger': require('./vuex-create-logger'),
+  'element-plus-import': require('./element-plus-upgrade'),
 
   // atomic ones
   'remove-contextual-h-from-render': require('./remove-contextual-h-from-render'),