fix(compiler-sfc): fix props codegen w/ leading import

fix #4764

Author: yyx990803

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

@@ -58,7 +58,7 @@ exports[`SFC compile <script setup> <script> and <script setup> co-usage spaces
 "import { x } from './x'
         
         export const n = 1
-        const __default__ = {   
+        const __default__ = {
           some:'option'
         }
         
@@ -79,7 +79,7 @@ exports[`SFC compile <script setup> <script> and <script setup> co-usage spaces
 "import { x } from './x'
         
         export const n = 1
-        const __default__ = {   
+        const __default__ = {
           some:'option'
         }
         
@@ -392,6 +392,7 @@ export default {
   expose()
 
 const props = __props
+
     
     
 return { props, propsModel }
@@ -400,6 +401,23 @@ return { props, propsModel }
 }"
 `;
 
+exports[`SFC compile <script setup> defineProps w/ leading code 1`] = `
+"import { x } from './x'
+    
+export default {
+  props: {},
+  setup(__props, { expose }) {
+  expose()
+
+const props = __props
+
+    
+return { props, x }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> defineProps() 1`] = `
 "export default {
   props: {
@@ -410,6 +428,7 @@ exports[`SFC compile <script setup> defineProps() 1`] = `
 
 const props = __props
 
+
 const bar = 1
 
 return { props, bar }
@@ -426,6 +445,7 @@ exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable de
   expose()
 
 const props = __props
+
     
     
 return { props, emit }
@@ -442,6 +462,7 @@ exports[`SFC compile <script setup> defineProps/defineEmits in multi-variable de
   expose()
 
 const props = __props
+
     const a = 1;
     
 return { props, a, emit }
@@ -814,7 +835,7 @@ return (_ctx, _cache) => {
     }),
     _createElementVNode(\\"div\\", {
       onClick: _cache[5] || (_cache[5] = () => {
-              let a = '' + _unref(lett)           
+              let a = '' + _unref(lett)
               _isRef(v) ? v.value = a : v = a
            })
     }),
@@ -828,7 +849,7 @@ return (_ctx, _cache) => {
                   let z2 = z
                 })
                 let lz = _ctx.z
-              })        
+              })
               _isRef(v) ? v.value = _ctx.a : v = _ctx.a
            })
     })
@@ -1286,6 +1307,7 @@ const props = __props
 
 
 
+
 return { props, emit }
 }
 
@@ -1360,6 +1382,7 @@ const props = __props as {
         bar?: number
         baz: boolean
       }
+
       
       
 return { props, defaults }
@@ -1382,6 +1405,7 @@ export default /*#__PURE__*/_defineComponent({
   expose()
 
 const props = __props as { foo: string, bar?: number, baz: boolean, qux(): number }
+
       
       
 return { props }

packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap

@@ -119,6 +119,7 @@ export default {
   setup(__props) {
 
 const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"])
+
       
       
 return () => {}

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

@@ -96,6 +96,18 @@ const bar = 1
   props: propsModel,`)
   })
 
+  // #4764
+  test('defineProps w/ leading code', () => {
+    const { content } = compile(`
+    <script setup>import { x } from './x'
+    const props = defineProps({})
+    </script>
+    `)
+    // props declaration should be inside setup, not moved along with the import
+    expect(content).not.toMatch(`const props = __props\nimport`)
+    assertCode(content)
+  })
+
   test('defineEmits()', () => {
     const { content, bindings } = compile(`
 <script setup>
@@ -164,8 +176,8 @@ defineExpose({ foo: 123 })
         const { content } = compile(`
         <script>
         export const n = 1
-        export        default     
-        {   
+        export        default
+        {
           some:'option'
         }
         </script>
@@ -181,7 +193,7 @@ defineExpose({ foo: 123 })
         const { content } = compile(`
         <script>
         export const n = 1
-        export default{   
+        export default{
           some:'option'
         }
         </script>
@@ -549,7 +561,7 @@ defineExpose({ foo: 123 })
           <div @click="v += 1"/>
           <div @click="v -= 1"/>
           <div @click="() => {
-              let a = '' + lett           
+              let a = '' + lett
               v = a
            }"/>
            <div @click="() => {
@@ -561,7 +573,7 @@ defineExpose({ foo: 123 })
                   let z2 = z
                 })
                 let lz = z
-              })        
+              })
               v = a
            }"/>
         </template>

packages/compiler-sfc/src/compileScript.ts

@@ -1205,25 +1205,25 @@ export function compileScript(
   // we use a default __props so that template expressions referencing props
   // can use it directly
   if (propsIdentifier) {
-    s.prependRight(
+    s.prependLeft(
       startOffset,
       `\nconst ${propsIdentifier} = __props${
         propsTypeDecl ? ` as ${genSetupPropsType(propsTypeDecl)}` : ``
-      }`
+      }\n`
     )
   }
   if (propsDestructureRestId) {
-    s.prependRight(
+    s.prependLeft(
       startOffset,
       `\nconst ${propsDestructureRestId} = ${helper(
         `createPropsRestProxy`
-      )}(__props, ${JSON.stringify(Object.keys(propsDestructuredBindings))})`
+      )}(__props, ${JSON.stringify(Object.keys(propsDestructuredBindings))})\n`
     )
   }
   // inject temp variables for async context preservation
   if (hasAwait) {
     const any = isTS ? `: any` : ``
-    s.prependRight(startOffset, `\nlet __temp${any}, __restore${any}\n`)
+    s.prependLeft(startOffset, `\nlet __temp${any}, __restore${any}\n`)
   }
 
   const destructureElements =