New <script setup> and ref sugar implementation

[yyx990803]

Related RFC: vuejs/rfcs#222

[github-actions]

Size report

Path	Size
vue.global.prod.js	40.15 KB (-0.35% 🔽)
runtime-dom.global.prod.js	26.44 KB (0%)
size-check.global.prod.js	15.95 KB (0%)

[yyx990803]

@knightly-bot build this

[knightly-bot]

🌒 Knightly build enabled, release every night at 00:00 UTC ^{(skip if no change)}

📦 npm package

[dajpes]

How Can I use this new syntax in a new vue project?

[antfu]

Build with Vite is not working (Dev OK). Repro: https://github.com/antfu/vite-starter-ref-sugar

<script setup>
import { computed } from 'vue'

ref: count = 0
ref: doubled = computed(() => count * 2)

const inc = () => count++
const dec = () => count -= 1
</script>

<template>
  <div>{{ count }} * 2 = {{ doubled }}</div>
  <button @click="dec">Dec</button>
  <button @click="inc">Inc</button>
</template>

Dev

Build

Error: ReferenceError: count is not defined