From 686c829fec9137cdfe6e51af34f2af01a575f7c6 Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Mon, 9 Jan 2023 15:13:58 +0100
Subject: [PATCH] fix(compiler-sfc): allow declaring variables after
 defineProps (#7461)

* fix(compiler-sfc): allow declaring variables after defineProps

* test(compiler-sfc): test defineProps in multiple variable declaration
---
 .../compileScriptPropsTransform.spec.ts.snap  | 18 +++++++++++++++++
 .../compileScriptPropsTransform.spec.ts       | 20 +++++++++++++++++++
 packages/compiler-sfc/src/compileScript.ts    |  3 +--
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
index 7641a151ef5..77048203996 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap
@@ -136,6 +136,24 @@ return () => {}
 })"
 `;
 
+exports[`sfc props transform multiple variable declarations 1`] = `
+"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+
+export default {
+  props: ['foo'],
+  setup(__props) {
+
+      const bar = 'fish', hello = 'world'
+      
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.foo) + " " + _toDisplayString(hello) + " " + _toDisplayString(bar), 1 /* TEXT */))
+}
+}
+
+}"
+`;
+
 exports[`sfc props transform nested scope 1`] = `
 "export default {
   props: ['foo', 'bar'],
diff --git a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
index 6fcc0e59068..05c7989b8f1 100644
--- a/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts
@@ -28,6 +28,26 @@ describe('sfc props transform', () => {
     })
   })
 
+  test('multiple variable declarations', () => {
+    const { content, bindings } = compile(`
+      <script setup>
+      const bar = 'fish', { foo } = defineProps(['foo']), hello = 'world'
+      </script>
+      <template><div>{{ foo }} {{ hello }} {{ bar }}</div></template>
+    `)
+    expect(content).not.toMatch(`const { foo } =`)
+    expect(content).toMatch(`const bar = 'fish', hello = 'world'`)
+    expect(content).toMatch(`_toDisplayString(hello)`)
+    expect(content).toMatch(`_toDisplayString(bar)`)
+    expect(content).toMatch(`_toDisplayString(__props.foo)`)
+    assertCode(content)
+    expect(bindings).toStrictEqual({
+      foo: BindingTypes.PROPS,
+      bar: BindingTypes.SETUP_CONST,
+      hello: BindingTypes.SETUP_CONST
+    })
+  })
+
   test('nested scope', () => {
     const { content, bindings } = compile(`
       <script setup>
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 997d7c11b9f..74cbb5396ae 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1758,8 +1758,7 @@ function walkDeclaration(
         registerBinding(bindings, id, bindingType)
       } else {
         if (isCallOf(init, DEFINE_PROPS)) {
-          // skip walking props destructure
-          return
+          continue
         }
         if (id.type === 'ObjectPattern') {
           walkObjectPattern(id, bindings, isConst, isDefineCall)