fix: for of with iterableIsArray and shadowing variable (#16011)

* fix

* update tests

* review

* fix

* Update packages/babel-plugin-transform-for-of/src/index.ts

Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

* review

* review

---------

Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>

packages/babel-plugin-transform-for-of/package.json

@@ -17,7 +17,8 @@
     "babel-plugin"
   ],
   "dependencies": {
-    "@babel/helper-plugin-utils": "workspace:^"
+    "@babel/helper-plugin-utils": "workspace:^",
+    "@babel/helper-skip-transparent-expression-wrappers": "workspace:^"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0-0"

packages/babel-plugin-transform-for-of/src/index.ts

@@ -3,6 +3,7 @@ import { template, types as t } from "@babel/core";
 import type { NodePath } from "@babel/traverse";
 
 import transformWithoutHelper from "./no-helper-implementation.ts";
+import { skipTransparentExprWrapperNodes } from "@babel/helper-skip-transparent-expression-wrappers";
 
 export interface Options {
   allowArrayLike?: boolean;
@@ -89,13 +90,24 @@ export default declare((api, options: Options) => {
       visitor: {
         ForOfStatement(path) {
           const { scope } = path;
-          const { left, right, await: isAwait } = path.node;
+          const { left, await: isAwait } = path.node;
           if (isAwait) {
             return;
           }
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+          const right = skipTransparentExprWrapperNodes(
+            path.node.right,
+          ) as t.Expression;
           const i = scope.generateUidIdentifier("i");
           let array: t.Identifier | t.ThisExpression =
             scope.maybeGenerateMemoised(right, true);
+          if (
+            !array &&
+            t.isIdentifier(right) &&
+            path.get("body").scope.hasOwnBinding(right.name)
+          ) {
+            array = scope.generateUidIdentifier("arr");
+          }
 
           const inits = [t.variableDeclarator(i, t.numericLiteral(0))];
           if (array) {

packages/babel-plugin-transform-for-of/test/fixtures/assumption-iterableIsArray/for-of-modify-iterable/input.js

@@ -0,0 +1,3 @@
+for (let o of arr) {
+  arr = null;
+}

packages/babel-plugin-transform-for-of/test/fixtures/assumption-iterableIsArray/for-of-modify-iterable/output.js

@@ -0,0 +1,4 @@
+for (let _i = 0, _arr = arr; _i < _arr.length; _i++) {
+  let o = _arr[_i];
+  arr = null;
+}

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping-2/exec.js

@@ -0,0 +1,10 @@
+function x(e){
+  const r = [];
+  for (const s of e) {
+    e = null;
+    r.push(s);
+  }
+  return r;
+}
+
+expect(x([1, 2, 3])).toEqual([1, 2, 3]);

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping-2/input.js

@@ -0,0 +1,10 @@
+function x(e){
+  const r = [];
+  for (const s of e) {
+    e = null;
+    r.push(s);
+  }
+  return r;
+}
+
+expect(x([1, 2, 3])).toEqual([1, 2, 3]);

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping-2/options.json

@@ -0,0 +1,7 @@
+{
+  "assumptions": {
+    "iterableIsArray": true
+  },
+  "targets": "node 4.0",
+  "presets": ["env"]
+}

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping-2/output.js

@@ -0,0 +1,10 @@
+function x(e) {
+  var r = [];
+  for (var _i2 = 0, _e2 = e; _i2 < _e2.length; _i2++) {
+    var s = _e2[_i2];
+    e = null;
+    r.push(s);
+  }
+  return r;
+}
+expect(x([1, 2, 3])).toEqual([1, 2, 3]);

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping/exec.js

@@ -0,0 +1,10 @@
+function x(e){
+  const r = [];
+  for (const s of e) {
+    const e = s;
+    r.push(e);
+  }
+  return r;
+}
+
+expect(x([1, 2, 3])).toEqual([1, 2, 3]);

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping/input.js

@@ -0,0 +1,10 @@
+function x(e){
+  const r = [];
+  for (const s of e) {
+    const e = s;
+    r.push(e);
+  }
+  return r;
+}
+
+expect(x([1, 2, 3])).toEqual([1, 2, 3]);

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping/options.json

@@ -0,0 +1,7 @@
+{
+  "assumptions": {
+    "iterableIsArray": true
+  },
+  "targets": "node 4.0",
+  "presets": ["env"]
+}

packages/babel-preset-env/test/fixtures/plugins-integration/for-of-array-block-scoping/output.js

@@ -0,0 +1,10 @@
+function x(e) {
+  var r = [];
+  for (var _i2 = 0, _arr2 = e; _i2 < _arr2.length; _i2++) {
+    var s = _arr2[_i2];
+    var _e = s;
+    r.push(_e);
+  }
+  return r;
+}
+expect(x([1, 2, 3])).toEqual([1, 2, 3]);

yarn.lock

@@ -2725,6 +2725,7 @@ __metadata:
     "@babel/core": "workspace:^"
     "@babel/helper-plugin-test-runner": "workspace:^"
     "@babel/helper-plugin-utils": "workspace:^"
+    "@babel/helper-skip-transparent-expression-wrappers": "workspace:^"
   peerDependencies:
     "@babel/core": ^7.0.0-0
   languageName: unknown