From: klwf <klwfwdk@qq.com>
Date: Mon, 23 Aug 2021 23:02:54 +0000 (+0800)
Subject: fix(compiler-sfc): fix `<script>` and `<script setup>` co-usage ordering edge case... 
X-Git-Tag: v3.2.5~6
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=98263821f8c42abcff46fae2b0375219c84fb6a4;p=thirdparty%2Fvuejs%2Fcore.git

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

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 32ce61b727..6d3e9e7bdb 100644
--- 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 e214160be3..49ac67c070 100644
--- 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 eefddfd95e..92af5bd7b8 100644
--- 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