fix(compile-sfc): correctly handle variable shadowing in for-of and for-in loops for defineProps destructuring.

Author: edison1105

packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap

@@ -192,6 +192,32 @@ return () => {}
 }"
 `;
 
+exports[`sfc reactive props destructure > for-of loop variable shadowing 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Props {
+        msg: string;
+        input: string[];
+      }
+      
+export default /*@__PURE__*/_defineComponent({
+  props: {
+    msg: { type: String, required: true },
+    input: { type: Array, required: true }
+  },
+  setup(__props: any) {
+
+      
+      for (const msg of __props.input) {
+        console.log('MESSAGE', msg);
+      }
+      console.log('NOT FAIL', { msg: __props.msg });
+      
+return () => {}
+}
+
+})"
+`;
+
 exports[`sfc reactive props destructure > handle function parameters with same name as destructured props 1`] = `
 "
 export default {

packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts

@@ -68,6 +68,28 @@ describe('sfc reactive props destructure', () => {
     })
   })
 
+  test('for-of loop variable shadowing', () => {
+    const { content } = compile(`
+      <script setup lang="ts">
+      interface Props {
+        msg: string;
+        input: string[];
+      }
+      const { msg, input } = defineProps<Props>();
+      for (const msg of input) {
+        console.log('MESSAGE', msg);
+      }
+      console.log('NOT FAIL', { msg });
+      </script>
+    `)
+    // inside loop: should use local variable
+    expect(content).toMatch(`for (const msg of __props.input)`)
+    expect(content).toMatch(`console.log('MESSAGE', msg)`)
+    // after loop: should restore to prop reference
+    expect(content).toMatch(`console.log('NOT FAIL', { msg: __props.msg })`)
+    assertCode(content)
+  })
+
   test('default values w/ array runtime declaration', () => {
     const { content } = compile(`
       <script setup>

packages/compiler-sfc/src/script/definePropsDestructure.ts

@@ -147,11 +147,6 @@ export function transformDestructuredProps(
       ) {
         if (stmt.declare || !stmt.id) continue
         registerLocalBinding(stmt.id)
-      } else if (
-        (stmt.type === 'ForOfStatement' || stmt.type === 'ForInStatement') &&
-        stmt.left.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.left)
       } else if (
         stmt.type === 'ExportNamedDeclaration' &&
         stmt.declaration &&
@@ -269,6 +264,18 @@ export function transformDestructuredProps(
         return
       }
 
+      // for-of / for-in loops: loop variable should be scoped to the loop
+      if (node.type === 'ForOfStatement' || node.type === 'ForInStatement') {
+        pushScope()
+        if (node.left.type === 'VariableDeclaration') {
+          walkVariableDeclaration(node.left)
+        }
+        if (node.body.type === 'BlockStatement') {
+          walkScope(node.body)
+        }
+        return
+      }
+
       // non-function block scopes
       if (node.type === 'BlockStatement' && !isFunctionType(parent!)) {
         pushScope()
@@ -292,7 +299,9 @@ export function transformDestructuredProps(
       if (
         (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
         isFunctionType(node) ||
-        node.type === 'CatchClause'
+        node.type === 'CatchClause' ||
+        node.type === 'ForOfStatement' ||
+        node.type === 'ForInStatement'
       ) {
         popScope()
       }