fix(compiler-sfc): fix `<script>` and `<script setup>` co-usage ordering edge case...

Fix: #4395
Fix: #4376

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 32ce61b727ac8994d52b63507238717db3d48db5..6d3e9e7bdb9ee0c3b868b2ec674614fc101abbed 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -33,6 +33,27 @@ return { x }
       export const n = 1"
 `;
 
+exports[`SFC compile <script setup> <script> and <script setup> co-usage script setup first, lang="ts", script block content export default 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { x } from './x'
+      
+function setup(__props, { expose }) {
+
+      x()
+      
+return { x }
+}
+
+
+      const __default__ = {
+        name: \\"test\\"
+      }
+      
+export default _defineComponent({
+  ...__default__,
+  setup})"
+`;
+
 exports[`SFC compile <script setup> <script> and <script setup> co-usage spaces in ExportDefaultDeclaration node with many spaces and newline 1`] = `
 "import { x } from './x'
         

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index e214160be3795fad37eb632c0229ff329a1a78a0..49ac67c070e992f891133f73e17e0e0a58c92a29 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -202,6 +202,24 @@ defineExpose({ foo: 123 })
       `)
       assertCode(content)
     })
+
+    // #4395
+    test('script setup first, lang="ts", script block content export default', () => {
+      const { content } = compile(`
+      <script setup lang="ts">
+      import { x } from './x'
+      x()
+      </script>
+      <script lang="ts">
+      export default {
+        name: "test"
+      }
+      </script>
+      `)
+      // ensure __default__ is declared before used
+      expect(content).toMatch(/const __default__[\S\s]*\.\.\.__default__/m)
+      assertCode(content)
+    })
   })
 
   describe('imports', () => {

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index eefddfd95ea11519f3fd6132b14ebf06c4d8b54b..92af5bd7b82f833aa3e652d6cc0054fb18a4a1a5 100644 (file)
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -1150,15 +1150,27 @@ export function compileScript(
     // wrap setup code with function.
     // export the content of <script setup> as a named export, `setup`.
     // this allows `import { setup } from '*.vue'` for testing purposes.
-    s.prependLeft(
-      startOffset,
-      `\nexport default ${helper(
-        `defineComponent`
-      )}({${def}${runtimeOptions}\n  ${
-        hasAwait ? `async ` : ``
-      }setup(${args}) {\n${exposeCall}`
-    )
-    s.appendRight(endOffset, `})`)
+    if (defaultExport) {
+      s.prependLeft(
+        startOffset,
+        `\n${hasAwait ? `async ` : ``}function setup(${args}) {\n`
+      )
+      s.append(
+        `\nexport default ${helper(
+          `defineComponent`
+        )}({${def}${runtimeOptions}\n  setup})`
+      )
+    } else {
+      s.prependLeft(
+        startOffset,
+        `\nexport default ${helper(
+          `defineComponent`
+        )}({${def}${runtimeOptions}\n  ${
+          hasAwait ? `async ` : ``
+        }setup(${args}) {\n${exposeCall}`
+      )
+      s.appendRight(endOffset, `})`)
+    }
   } else {
     if (defaultExport) {
       // can't rely on spread operator in non ts mode