Remove newly unreferenced VariableDeclarators

I've noticed that a common pattern used to assign propTypes--first
define a variable for the propTypes, and then assign it to the component
by reference--ends up deoptimizing this plugin, which leads to larger
bundles in production than desired. The original hypothesis that
minification would clean up these dead references works well for the
simplest of propTypes, but unfortunately it doesn't hold up as
soon as you have a function call in the propTypes variable (such as is
the case for propTypes like `arrayOf`, `objectOf`, `shape`, etc.)
because the minfier does not know that the function call will not have
side-effects:

```js
const propTypes = {
  foo: PropTypes.arrayOf(PropTypes.number),
};
```

I believe this should be solved by this plugin because we can make the
assumption that function calls inside of propTypes have no side-effects.

There seems to be a weird issue where the transform adds a semicolon
when using in wrapped mode. For now, I decided to simply add the
additional semicolons in the test fixtures, since they will be minified
out anyway.

I don't have much experience working with Babel plugins yet, so it is
likely that I'm doing things in a weird or sub-optimal way here.

Author: lencioni

src/index.js

@@ -53,9 +53,39 @@ function isReactClass(superClass, scope, globalOptions) {
   return answer
 }
 
+function areSetsEqual(set1, set2) {
+  if (set1.size !== set2.size) {
+    return false
+  }
+
+  return !Array.from(set1).some(item => !set2.has(item))
+}
+
 export default function(api) {
   const { template, types, traverse } = api
 
+  const nestedIdentifiers = new Set()
+  const removedPaths = new Set()
+  const collectNestedIdentifiers = {
+    Identifier(path) {
+      if (path.parent.type === 'MemberExpression') {
+        // foo.bar
+        return
+      }
+
+      if (
+        path.parent.type === 'ObjectProperty' &&
+        (path.parent.key === path.node || path.parent.shorthand)
+      ) {
+        // { foo: 'bar' }
+        // { foo }
+        return
+      }
+
+      nestedIdentifiers.add(path.node.name)
+    },
+  }
+
   return {
     visitor: {
       Program(programPath, state) {
@@ -146,6 +176,8 @@ export default function(api) {
               })
 
               if (parent) {
+                path.traverse(collectNestedIdentifiers)
+                removedPaths.add(path)
                 remove(path, globalOptions, {
                   type: 'createClass',
                 })
@@ -160,6 +192,8 @@ export default function(api) {
               const pathClassDeclaration = scope.path
 
               if (isReactClass(pathClassDeclaration.get('superClass'), scope, globalOptions)) {
+                path.traverse(collectNestedIdentifiers)
+                removedPaths.add(path)
                 remove(path, globalOptions, {
                   type: 'class static',
                   pathClassDeclaration,
@@ -181,6 +215,8 @@ export default function(api) {
             const forceRemoval = isAnnotatedForRemoval(path.node.left)
 
             if (forceRemoval) {
+              path.traverse(collectNestedIdentifiers)
+              removedPaths.add(path)
               remove(path, globalOptions, { type: 'assign' })
               return
             }
@@ -196,14 +232,61 @@ export default function(api) {
               const superClass = binding.path.get('superClass')
 
               if (isReactClass(superClass, scope, globalOptions)) {
+                path.traverse(collectNestedIdentifiers)
+                removedPaths.add(path)
                 remove(path, globalOptions, { type: 'assign' })
               }
             } else if (isStatelessComponent(binding.path)) {
+              path.traverse(collectNestedIdentifiers)
+              removedPaths.add(path)
               remove(path, globalOptions, { type: 'assign' })
             }
           },
         })
 
+        let skippedIdentifiers = 0
+        const removeNewlyUnusedIdentifiers = {
+          VariableDeclarator(path) {
+            if (!nestedIdentifiers.has(path.node.id.name)) {
+              return
+            }
+
+            const { referencePaths } = path.scope.getBinding(path.node.id.name)
+
+            // Count the number of referencePaths that are not in the
+            // removedPaths Set. We need to do this in order to support the wrap
+            // option, which doesn't actually remove the references.
+            const hasRemainingReferencePaths = referencePaths.some(referencePath => {
+              const found = referencePath.find(p => removedPaths.has(p))
+              return !found
+            })
+
+            if (hasRemainingReferencePaths) {
+              // There are still references to this identifier, so we need to
+              // skip over it for now.
+              skippedIdentifiers += 1
+              return
+            }
+
+            removedPaths.add(path)
+            nestedIdentifiers.delete(path.node.id.name)
+            path.get('init').traverse(collectNestedIdentifiers)
+            remove(path, globalOptions, { type: 'declarator' })
+          },
+        }
+
+        let lastNestedIdentifiers = new Set()
+        while (
+          !areSetsEqual(nestedIdentifiers, lastNestedIdentifiers) &&
+          nestedIdentifiers.size > 0 &&
+          skippedIdentifiers < nestedIdentifiers.size
+        ) {
+          lastNestedIdentifiers = new Set(nestedIdentifiers)
+          skippedIdentifiers = 0
+          programPath.scope.crawl()
+          programPath.traverse(removeNewlyUnusedIdentifiers)
+        }
+
         if (globalOptions.removeImport) {
           if (globalOptions.mode === 'remove') {
             programPath.scope.crawl()

src/remove.js

@@ -101,6 +101,24 @@ export default function remove(path, globalOptions, options) {
         path.node[visitedKey] = true
         break
 
+      case 'declarator':
+        if (mode === 'unsafe-wrap') {
+          path.replaceWith(
+            unsafeWrapTemplate({
+              NODE: path.node,
+            })
+          )
+        } else {
+          path.replaceWith(
+            wrapTemplate({
+              LEFT: path.node.id,
+              RIGHT: path.node.init,
+            })
+          )
+        }
+        path.node[visitedKey] = true
+        break
+
       default:
         break
     }

test/fixtures/es-class-assign-property-variable/expected-remove-es5.js

@@ -1,9 +1,5 @@
 "use strict";
 
-var propTypes = {
-  foo: PropTypes.string
-};
-
 var Foo =
 /*#__PURE__*/
 function (_React$Component) {

test/fixtures/es-class-assign-property-variable/expected-remove-es6.js

@@ -1,7 +1,3 @@
-const propTypes = {
-  foo: PropTypes.string
-};
-
 class Foo extends React.Component {
   render() {}
 

test/fixtures/es-class-assign-property-variable/expected-wrap-es5.js

@@ -1,8 +1,8 @@
 "use strict";
 
-var propTypes = {
+var propTypes = process.env.NODE_ENV !== "production" ? {
   foo: PropTypes.string
-};
+} : {};;
 
 var Foo =
 /*#__PURE__*/

test/fixtures/es-class-assign-property-variable/expected-wrap-es6.js

@@ -1,6 +1,6 @@
-const propTypes = {
+const propTypes = process.env.NODE_ENV !== "production" ? {
   foo: PropTypes.string
-};
+} : {};;
 
 class Foo extends React.Component {
   render() {}

test/fixtures/variable-assignment/actual.js

@@ -0,0 +1,53 @@
+const propTypesBasic = {
+  foo: PropTypes.string
+};
+
+const FooBasic = () => (
+  <div />
+);
+
+FooBasic.propTypes = propTypesBasic;
+
+const extraReference = {
+  bar: PropTypes.string
+};
+
+const propTypesWithExtraReference = Object.assign({}, extraReference, {
+  foo: PropTypes.string
+});
+
+const FooExtraReference = () => (
+  <div />
+);
+
+FooExtraReference.propTypes = propTypesWithExtraReference;
+
+const propTypesWrapped = {
+  foo: PropTypes.string
+};
+
+const FooWrapped = () => (
+  <div />
+);
+
+FooWrapped.propTypes = someWrappingFunction(propTypesWrapped);
+
+const propTypesReferenced = {
+  foo: PropTypes.string
+};
+
+const FooReferenced = () => (
+  <div bar={propTypesReferenced} />
+);
+
+FooReferenced.propTypes = propTypesReferenced;
+
+export const propTypesExported = {
+  foo: PropTypes.string
+};
+
+const FooExported = () => (
+  <div />
+);
+
+FooExported.propTypes = propTypesExported;

test/fixtures/variable-assignment/expected-remove-es5.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypesExported = void 0;
+
+var FooBasic = function FooBasic() {
+  return React.createElement("div", null);
+};
+
+var FooExtraReference = function FooExtraReference() {
+  return React.createElement("div", null);
+};
+
+var FooWrapped = function FooWrapped() {
+  return React.createElement("div", null);
+};
+
+var propTypesReferenced = {
+  foo: PropTypes.string
+};
+
+var FooReferenced = function FooReferenced() {
+  return React.createElement("div", {
+    bar: propTypesReferenced
+  });
+};
+
+var propTypesExported = {
+  foo: PropTypes.string
+};
+exports.propTypesExported = propTypesExported;
+
+var FooExported = function FooExported() {
+  return React.createElement("div", null);
+};

test/fixtures/variable-assignment/expected-remove-es6.js

@@ -0,0 +1,17 @@
+const FooBasic = () => <div />;
+
+const FooExtraReference = () => <div />;
+
+const FooWrapped = () => <div />;
+
+const propTypesReferenced = {
+  foo: PropTypes.string
+};
+
+const FooReferenced = () => <div bar={propTypesReferenced} />;
+
+export const propTypesExported = {
+  foo: PropTypes.string
+};
+
+const FooExported = () => <div />;

test/fixtures/variable-assignment/expected-wrap-es5.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypesExported = void 0;
+var propTypesBasic = process.env.NODE_ENV !== "production" ? {
+  foo: PropTypes.string
+} : {};;
+
+var FooBasic = function FooBasic() {
+  return React.createElement("div", null);
+};
+
+FooBasic.propTypes = process.env.NODE_ENV !== "production" ? propTypesBasic : {};
+var extraReference = process.env.NODE_ENV !== "production" ? {
+  bar: PropTypes.string
+} : {};;
+var propTypesWithExtraReference = process.env.NODE_ENV !== "production" ? Object.assign({}, extraReference, {
+  foo: PropTypes.string
+}) : {};;
+
+var FooExtraReference = function FooExtraReference() {
+  return React.createElement("div", null);
+};
+
+FooExtraReference.propTypes = process.env.NODE_ENV !== "production" ? propTypesWithExtraReference : {};
+var propTypesWrapped = process.env.NODE_ENV !== "production" ? {
+  foo: PropTypes.string
+} : {};;
+
+var FooWrapped = function FooWrapped() {
+  return React.createElement("div", null);
+};
+
+FooWrapped.propTypes = process.env.NODE_ENV !== "production" ? someWrappingFunction(propTypesWrapped) : {};
+var propTypesReferenced = {
+  foo: PropTypes.string
+};
+
+var FooReferenced = function FooReferenced() {
+  return React.createElement("div", {
+    bar: propTypesReferenced
+  });
+};
+
+FooReferenced.propTypes = process.env.NODE_ENV !== "production" ? propTypesReferenced : {};
+var propTypesExported = {
+  foo: PropTypes.string
+};
+exports.propTypesExported = propTypesExported;
+
+var FooExported = function FooExported() {
+  return React.createElement("div", null);
+};
+
+FooExported.propTypes = process.env.NODE_ENV !== "production" ? propTypesExported : {};
+