From b833a5f52387bf25cfa60a5555dd4e9a399b906d Mon Sep 17 00:00:00 2001
From: Jengamon <uche.okwo1@gmail.com>
Date: Sat, 7 May 2022 04:41:32 -0400
Subject: [PATCH] Add support for Vue 3 <script setup> (#8045)

---
 .../test/integration/vue-script-setup/App.vue |  9 +++++
 packages/core/integration-tests/test/vue.js   |  8 ++++
 .../transformers/vue/src/VueTransformer.js    | 38 ++++++++++++++-----
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 packages/core/integration-tests/test/integration/vue-script-setup/App.vue

diff --git a/packages/core/integration-tests/test/integration/vue-script-setup/App.vue b/packages/core/integration-tests/test/integration/vue-script-setup/App.vue
new file mode 100644
index 00000000000..5f7853212f1
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/vue-script-setup/App.vue
@@ -0,0 +1,9 @@
+<script setup>
+import { ref } from 'vue';
+
+const name = ref("parcel");
+</script>
+
+<template>
+<p>Hello {{ name }}</p>
+</template>
\ No newline at end of file
diff --git a/packages/core/integration-tests/test/vue.js b/packages/core/integration-tests/test/vue.js
index 3b3def2b27c..03096229731 100644
--- a/packages/core/integration-tests/test/vue.js
+++ b/packages/core/integration-tests/test/vue.js
@@ -105,4 +105,12 @@ describe('vue', function () {
     assert(contents.includes('h2:hover'));
     assert(contents.includes('.box p'));
   });
+  it('should load <script setup> component files', async function () {
+    let b = await bundle(
+      path.join(__dirname, '/integration/vue-script-setup/App.vue'),
+    );
+    let output = (await run(b)).default;
+    assert.equal(typeof output.render, 'function');
+    assert.equal(typeof output.setup, 'function');
+  });
 });
diff --git a/packages/transformers/vue/src/VueTransformer.js b/packages/transformers/vue/src/VueTransformer.js
index 8abca2defc3..09cb188703e 100644
--- a/packages/transformers/vue/src/VueTransformer.js
+++ b/packages/transformers/vue/src/VueTransformer.js
@@ -49,7 +49,7 @@ export default (new Transformer({
   canReuseAST({ast}) {
     return ast.type === 'vue' && semver.satisfies(ast.version, '^3.0.0');
   },
-  async parse({asset}) {
+  async parse({asset, options}) {
     // TODO: This parses the vue component multiple times. Fix?
     let code = await asset.getCode();
     let parsed = compiler.parse(code, {
@@ -64,22 +64,35 @@ export default (new Transformer({
       });
     }
 
+    const descriptor = parsed.descriptor;
+    let id = hashObject({
+      filePath: asset.filePath,
+      source: options.mode === 'production' ? code : null,
+    }).slice(-6);
+
     return {
       type: 'vue',
       version: '3.0.0',
-      program: parsed.descriptor,
+      program: {
+        ...descriptor,
+        script:
+          descriptor.script != null || descriptor.scriptSetup != null
+            ? compiler.compileScript(descriptor, {
+                id,
+                isProd: options.mode === 'production',
+              })
+            : null,
+        id,
+      },
     };
   },
   async transform({asset, options, resolve, config}) {
-    let id = hashObject({
-      filePath: asset.filePath,
-    }).slice(-6);
+    let {template, script, styles, customBlocks, id} = nullthrows(
+      await asset.getAST(),
+    ).program;
     let scopeId = 'data-v-' + id;
     let hmrId = id + '-hmr';
     let basePath = basename(asset.filePath);
-    let {template, script, styles, customBlocks} = nullthrows(
-      await asset.getAST(),
-    ).program;
     if (asset.pipeline != null) {
       return processPipeline({
         asset,
@@ -230,8 +243,12 @@ async function processPipeline({
         inMap: template.src ? undefined : template.map,
         scoped: styles.some(style => style.scoped),
         isFunctional,
+        compilerOptions: {
+          ...config.compilerOptions,
+          bindingMetadata: script ? script.bindings : undefined,
+        },
+        isProd: options.mode === 'production',
         id,
-        compilerOptions: config.compilerOptions,
       });
       if (templateComp.errors.length) {
         throw new ThrowableDiagnostic({
@@ -351,7 +368,8 @@ ${
             modules: style.module,
             preprocessLang: style.lang || 'css',
             scoped: style.scoped,
-            map: style.src ? undefined : style.map,
+            inMap: style.src ? undefined : style.map,
+            isProd: options.mode === 'production',
             id,
           });
           if (styleComp.errors.length) {