feat: implement tree-shaking-api transformation

Author: ygj6

transformations/__tests__/tree-shaking.spec.ts

@@ -0,0 +1,60 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+
+const nextTick = require('../next-tick')
+const observable = require('../observable')
+const version = require('../version')
+const treeShaking = require('../tree-shaking')
+
+// Vue.nextTick() => nextTick()
+defineInlineTest(
+  nextTick,
+  {},
+  `import Vue from 'vue'
+Vue.nextTick(() => {
+  console.log('foo')
+})
+`,
+  `import Vue, { nextTick } from 'vue';
+nextTick(() => {
+  console.log('foo')
+})
+`,
+  'tree-shaking (Vue.nextTick() to nextTick())'
+)
+
+// Vue.observable() => reactive()
+defineInlineTest(
+  observable,
+  {},
+  `import Vue from 'vue'
+const state = Vue.observable({ count: 0 })`,
+  `import Vue, { reactive } from 'vue';
+const state = reactive({ count: 0 })`,
+  'tree-shaking (Vue.observable to reactive)'
+)
+
+// Vue.version() => version()
+defineInlineTest(
+  version,
+  {},
+  `import Vue from 'vue'
+var version = Number(Vue.version.split('.')[0])`,
+  `import Vue, { version } from 'vue';
+var version = Number(version.split('.')[0])`,
+  'tree-shaking (Vue.version to version)'
+)
+
+defineInlineTest(
+  treeShaking,
+  {},
+  `import Vue from 'vue'
+Vue.nextTick(function() {})
+Vue.observable({ count: 0 })
+Vue.version`,
+  `import { nextTick, reactive, version } from 'vue';
+nextTick(function() {})
+reactive({ count: 0 })
+version
+`,
+  'tree-shaking'
+)

transformations/index.ts

@@ -20,6 +20,7 @@ const transformationMap: {
   'rename-lifecycle': require('./rename-lifecycle'),
   'add-emit-declaration': require('./add-emit-declaration'),
   'global-filter': require('./global-filter'),
+  'tree-shaking': require('./tree-shaking'),
 
   // atomic ones
   'remove-contextual-h-from-render': require('./remove-contextual-h-from-render'),

transformations/next-tick.ts

@@ -0,0 +1,33 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+
+export const transformAST: ASTTransformation = ({ root, j }) => {
+  // find the Vue.nextTick(...)
+  const nextTickCalls = root.find(j.CallExpression, n => {
+    return (
+      n.callee.type === 'MemberExpression' &&
+      n.callee.property.name === 'nextTick' &&
+      n.callee.object.name === 'Vue'
+    )
+  })
+
+  if (nextTickCalls.length) {
+    // add import nextTick
+    const addImport = require('./add-import')
+    addImport.transformAST({ root, j }, {
+      specifier: {
+        type: 'named',
+        imported: 'nextTick'
+      },
+      source: 'vue'
+    })
+
+    nextTickCalls.replaceWith(({ node }) => {
+      const el = node.arguments[0]
+      return j.callExpression(j.identifier('nextTick'), [el])
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/observable.ts

@@ -0,0 +1,33 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+
+export const transformAST: ASTTransformation = ({ root, j }) => {
+  // find the Vue.observable(state)
+  const observableCalls = root.find(j.CallExpression, n => {
+    return (
+      n.callee.type === 'MemberExpression' &&
+      n.callee.property.name === 'observable' &&
+      n.callee.object.name === 'Vue'
+    )
+  })
+
+  if (observableCalls.length) {
+    // add import reactive
+    const addImport = require('./add-import')
+    addImport.transformAST({ root, j }, {
+      specifier: {
+        type: 'named',
+        imported: 'reactive'
+      },
+      source: 'vue'
+    })
+
+    observableCalls.replaceWith(({ node }) => {
+      const el = node.arguments[0]
+      return j.callExpression(j.identifier('reactive'), [el])
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/tree-shaking.ts

@@ -0,0 +1,18 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+import { transformAST as nextTick } from './next-tick'
+import { transformAST as observable } from './observable'
+import { transformAST as version } from './version'
+import { transformAST as removeImport } from './remove-extraneous-import'
+
+export const transformAST: ASTTransformation = (context) => {
+  nextTick(context)
+  observable(context)
+  version(context)
+
+//  remove import 'Vue' from 'vue' if not used
+  removeImport(context, { localBinding: 'Vue' })
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/version.ts

@@ -0,0 +1,32 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+
+export const transformAST: ASTTransformation = ({ root, j }) => {
+  // find Vue.version
+  const versionCalls = root.find(j.MemberExpression, n => {
+    return (
+      n.property.name === 'version' &&
+      n.object.name === 'Vue'
+    )
+  })
+
+  if (versionCalls.length) {
+    const addImport = require('./add-import')
+    addImport.transformAST({ root, j }, {
+      specifier: {
+        type: 'named',
+        imported: 'version'
+      },
+      source: 'vue'
+    })
+
+    versionCalls.replaceWith(({ node }) => {
+      // @ts-ignore
+      const property = node.property.name
+      return j.identifier(property)
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'