fix: handle temporal deadzone for local variables shadowing parent function (#91)

Author: theKashey

src/babel/__tests__/unit.test.js

@@ -103,6 +103,95 @@ describe('babel plugin', () => {
     `);
   });
 
+  describe('shadowed variables', () => {
+    it('simple case: should remove', () => {
+      const input = `            
+      import LinkifyIt from 'linkify-it';
+      const linkify = (state) => {
+        // cannot refer to the function location ^ as there is a local variable shadowing it
+        const linkify = new LinkifyIt();
+      }
+    `;
+      expect(babel(input)).toMatchInlineSnapshot(`
+              "import { di as _di } from "react-magnetic-di";
+              import LinkifyIt from 'linkify-it';
+              const linkify = state => {
+                const [_LinkifyIt] = _di([LinkifyIt], null);
+                // cannot refer to the function location ^ as there is a local variable shadowing it
+                const linkify = new _LinkifyIt();
+              };"
+          `);
+    });
+
+    it('nested function case: should keep', () => {
+      const input = `            
+      import LinkifyIt from 'linkify-it';
+      const linkify = (state) => {
+        useEffect(() => {        
+          const linkify = new LinkifyIt();
+        });
+      }
+    `;
+      expect(babel(input)).toMatchInlineSnapshot(`
+        "import { di as _di } from "react-magnetic-di";
+        import LinkifyIt from 'linkify-it';
+        const linkify = state => {
+          const [_LinkifyIt] = _di([LinkifyIt], linkify);
+          useEffect(() => {
+            const [_LinkifyIt2] = _di([_LinkifyIt], null);
+            const linkify = new _LinkifyIt2();
+          });
+        };"
+      `);
+    });
+
+    it('block case: should keep', () => {
+      const input = `            
+      import LinkifyIt from 'linkify-it';
+      const linkify = (state) => {
+        if (ff('xx')) {   
+           const linkify = new LinkifyIt();
+        }
+      }
+    `;
+      expect(babel(input)).toMatchInlineSnapshot(`
+        "import { di as _di } from "react-magnetic-di";
+        import LinkifyIt from 'linkify-it';
+        const linkify = state => {
+          const [_LinkifyIt] = _di([LinkifyIt], linkify);
+          if (ff('xx')) {
+            const linkify = new _LinkifyIt();
+          }
+        };"
+      `);
+    });
+
+    it('mixed case: should keep', () => {
+      const input = `            
+      import LinkifyIt from 'linkify-it';
+      import LinkifyThat from 'linkify-it';
+      const linkify = (state) => {
+        const linkify = new LinkifyIt();
+        if (ff('xx')) {   
+           const linkify = new LinkifyThat();        
+        }
+      }
+    `;
+      expect(babel(input)).toMatchInlineSnapshot(`
+        "import { di as _di } from "react-magnetic-di";
+        import LinkifyIt from 'linkify-it';
+        import LinkifyThat from 'linkify-it';
+        const linkify = state => {
+          const [_LinkifyIt, _LinkifyThat] = _di([LinkifyIt, LinkifyThat], null);
+          const linkify = new _LinkifyIt();
+          if (ff('xx')) {
+            const linkify = new _LinkifyThat();
+          }
+        };"
+      `);
+    });
+  });
+
   it('should work and maintain location if manually declared', () => {
     const input = `
       import React from 'react';

src/babel/processor-di.js

@@ -4,19 +4,32 @@ function processReference(t, path, locationValue, state) {
   const self = getComponentDeclaration(t, path.scope);
   const bodyPath = path.get('body');
 
+  let shadowsOwnName = false;
+  if(self) {
+    const selfShadow = bodyPath.scope.getBinding(self.name);
+    if(selfShadow && selfShadow.scope===bodyPath.scope && selfShadow.path.node.id!==self){
+       shadowsOwnName = true;
+    }
+  }
   // Build list of dependencies
   // combining used imports/exports in this function block
   // with existing di expression (if any)
   const depNames = [];
+
   Array.from(locationValue.dependencyRefs).forEach((n) => {
     const name = n.node?.name;
     // quick check that the path is not detached
     if (!name || !n.parentPath) return;
     // Some babel plugins might rename imports (eg emotion) and references break
     // For now we skip, but ideally we would refresh the reference
     if (!bodyPath.scope.getBinding(name)) return;
-    // Ensure we do not duplicate and di() self name
-    if (depNames.includes(name) || name === self?.name) return;
+    // Ensure we do not di() self name
+    if (name === self?.name) {
+      shadowsOwnName = true;
+      return;
+    }
+    // Ensure we do not duplicate
+    if (depNames.includes(name)) return;
 
     depNames.push(name);
   });
@@ -37,7 +50,7 @@ function processReference(t, path, locationValue, state) {
       t.arrayPattern(elements),
       t.callExpression(t.identifier(state.diIdentifier.name), [
         t.arrayExpression(args),
-        self ? t.identifier(self.name) : t.nullLiteral(),
+        self && !shadowsOwnName ? t.identifier(self.name) : t.nullLiteral(),
       ])
     ),
   ]);