feat: implement remove-vue-set-and-delete

Author: haoqunjiang

transformations/__tests__/remove-vue-set-and-delete.spec.ts

@@ -0,0 +1,86 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+const transform = require('../remove-vue-set-and-delete')
+
+defineInlineTest(
+  transform,
+  {},
+  `Vue.set(vm.someObject, 'b', 2);`,
+  `vm.someObject['b'] = 2;`,
+  'Remove Vue.set'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `export default {
+    methods: {
+      modify() {
+        this.$set(this.someObject, 'b', 2);
+      }
+    }
+  };`,
+  `export default {
+    methods: {
+      modify() {
+        this.someObject['b'] = 2;
+      }
+    }
+  };`,
+  'Remove this.$set'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `export default {
+    created () {
+      const vm = this;
+      this.$on('some-event', function () {
+        vm.$set(vm.someObject, 'b', 2);
+      })
+    }
+  };`,
+  `export default {
+    created () {
+      const vm = this;
+      this.$on('some-event', function () {
+        vm.someObject['b'] = 2;
+      })
+    }
+  };`,
+  'Remove vm.$set when vm is an alias to this'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `export default {
+    created () {
+      var vm = this;
+      vm = { $set: () => {} }
+      this.$on('some-event', function () {
+        vm.$set(vm.someObject, 'b', 2);
+      })
+    }
+  };`,
+  `export default {
+    created () {
+      var vm = this;
+      vm = { $set: () => {} }
+      this.$on('some-event', function () {
+        vm.$set(vm.someObject, 'b', 2);
+      })
+    }
+  };`,
+  `Don't remove vm.$set when we are not sure if vm is an alias to this`
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `value.$set('a', 1)`,
+  `value.$set('a', 1)`,
+  `don't remove random .$set functions`
+)
+
+// TODO: delete

transformations/remove-vue-set-and-delete.ts

@@ -0,0 +1,91 @@
+// To remove:
+// Vue.set / Vue.delete
+// this.$set / this.$delete
+// vm = this; this.$set / this.$delete
+
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+import type * as N from 'jscodeshift'
+
+export const transformAST: ASTTransformation = (context) => {
+  const { root, j } = context
+
+  const isVue = (node: N.ASTNode) => {
+    return j.Identifier.check(node) && node.name === 'Vue'
+  }
+
+  const setCalls = root
+    .find(j.CallExpression, (n: N.CallExpression) => {
+      if (
+        !j.MemberExpression.check(n.callee) ||
+        !j.Identifier.check(n.callee.property)
+      ) {
+        return false
+      }
+
+      if (n.callee.property.name === 'set' && isVue(n.callee.object)) {
+        return true
+      }
+
+      if (n.callee.property.name === '$set') {
+        // we need the path & scope to check if the object is `this`
+        // so leave it to the filter function
+        return true
+      }
+
+      return false
+    })
+    .filter((path) => {
+      // @ts-ignore
+      if (path.node.callee.property.name !== '$set') {
+        return true
+      }
+
+      const obj = (path.node.callee as N.MemberExpression).object
+
+      if (j.ThisExpression.check(obj)) {
+        return true
+      }
+
+      if (!j.Identifier.check(obj)) {
+        return false
+      }
+
+      const decls = j(path).getVariableDeclarators((p) => obj.name)
+      if (decls && decls.length === 1) {
+        const declPath = decls.paths()[0]
+        const declNode = declPath.node
+        const declStmt = declPath.parent.node
+
+        return (
+          j.VariableDeclarator.check(declNode) &&
+          (declStmt as N.VariableDeclaration).kind === 'const' &&
+          j.Identifier.check(declNode.id) &&
+          j.ThisExpression.check(declNode.init)
+        )
+      }
+
+      return false
+    })
+
+  setCalls.replaceWith(({ node }) => {
+    if (
+      node.arguments.length !== 3 ||
+      node.arguments.some((arg) => j.SpreadElement.check(arg))
+    ) {
+      // TODO: add a comment to inform the user that this kind of usage can't be transformed
+      return node
+    }
+
+    return j.assignmentExpression(
+      '=',
+      // @ts-ignore
+      j.memberExpression(node.arguments[0], node.arguments[1], true),
+      // @ts-ignore
+      node.arguments[2]
+    )
+  })
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'