fix(compiler-sfc): fix <script> and <script setup> co-usage order…

…ing edge case (#4419) Fix: #4395 Fix: #4376
vuejs · Aug 23, 2021 · 9826382 · 9826382
1 parent a46b0a9
commit 9826382
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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