feat: script setup support

Author: Akryum

demo-app/imports/ui/components/App.vue

@@ -1,15 +1,16 @@
 <script>
-import Hello from './Hello.vue'
-
-console.log(Hello)
+import Counter from './Counter.vue'
+import ScriptSetup from './ScriptSetup.vue'
 
 export default {
   components: {
-    Hello,
+    Counter,
+    ScriptSetup,
   },
 }
 </script>
 
 <template>
-  <Hello />
+  <Counter />
+  <ScriptSetup />
 </template>

demo-app/imports/ui/components/Hello.vue renamed to demo-app/imports/ui/components/Counter.vue

@@ -7,6 +7,7 @@ export default {
 
     function increment () {
       counter.value++
+      console.log('incremented!')
     }
 
     return {
@@ -20,11 +21,12 @@ export default {
 <template>
   <button @click="increment()">Click Me</button>
   <p>You've pressed the button {{counter}} times.</p>
+  <button @click="meow.waf()">Throw template error</button>
 </template>
 
 <style scoped>
 button {
-  background: green;
+  background: rgb(28, 124, 76);
   color: white;
   border: none;
   border-radius: 6px;

demo-app/imports/ui/components/ScriptSetup.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue'
+
+const counter = ref(0)
+
+function increment () {
+  counter.value++
+  console.log('incremented!')
+}
+</script>
+
+<template>
+  <button @click="increment()">Click Me</button>
+  <p>You've pressed the button {{counter}} times.</p>
+</template>
+
+<style scoped>
+button {
+  background: #224e64;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+</style>

packages/vue3/src/compiler.js

@@ -42,7 +42,7 @@ export class VueCompiler extends MultiFileCachingCompiler {
     const hasScoped = descriptor.styles.some((s) => s.scoped)
     const scopeId = hash(inputFile.getPathInPackage())
 
-    if (descriptor.script) {
+    if (descriptor.script || descriptor.scriptSetup) {
       const scriptResult = compileScript(descriptor, {
         id: scopeId,
         isProd,
@@ -65,6 +65,8 @@ export class VueCompiler extends MultiFileCachingCompiler {
       })
       if (!compileResult.source) {
         compileResult.source = 'const __script__ = {};'
+      } else {
+        compileResult.source += '\n'
       }
       const lines = compileResult.source.split('\n').length
       compileResult.source += templateResult.code