Add support for Vue 3 <script setup>

[Jengamon]

↪️ Pull Request

This PR is meant to close #6949, and add support for Vue 3's <script setup> tags.

💻 Examples

A component defined like:

<template lang="pug">
div Hello {{ name }}
</template>

<script setup lang="ts">
import { ref } from 'vue';

const name = ref("Vue");
</script>

should compile and say "Hello Vue", rather than "Hello ".

🚨 Test instructions

TBH I would want help with adding test cases. Basically, I'd want people to go ham on Vue 3 <script setup> SFCs and see if anything breaks (or even combine <script> and <script setup> as is allowed by Vue).

✔️ PR Todo

• Added/updated unit tests for this change
• Added more comprehensive test suite
• Filled out test instructions (In case there aren't any unit tests)
• Included links to related issues/PRs

[Jengamon]

An example test of this would require the 'vue' package, but I'm not sure how to do this, if someone with more experience with writing integration tests could give me pointers.

[mischnic]

There are various existing Vue tests that you can adapt: https://github.com/parcel-bundler/parcel/blob/v2/packages/core/integration-tests/test/vue.js

[Jengamon]

There are various existing Vue tests that you can adapt: https://github.com/parcel-bundler/parcel/blob/v2/packages/core/integration-tests/test/vue.js

I've looked through them, but none of the tests import 'vue' in the component.
I tried it naively (just using the component as-is), gives me TypeError: Cannot destructure property 'expose' of 'undefined' as it is undefined. when calling setup.

[Jengamon]

Ok, added a basic test that tests for the existence of setup and render for a component that only uses <script setup>.

I'd also want to get the actual contents of the bundle tested (I hit some weird bugs.)

It would be cool if there were tests for the kinds of things you could do with <script setup> (combine it with <script>, or use it with v-bind for css) and inspecting the actual output of setup would be cool (I know where the expose error is coming from now.), but this should work for a first pass.

[mischnic]

I tried it naively (just using the component as-is), gives me TypeError: Cannot destructure property 'expose' of 'undefined' as it is undefined. when calling setup.

So it works fine after changing the order (as you've commited now)? Is that how Vue is supposed to work?

[Jengamon]

Oh, no, it had nothing to do with the order of the blocks in the file. It was because I was calling setup with no args, but it actually should take 2, and "expose" was supposed to be a member in the second arg.

Relevant docs:
https://vuejs.org/api/composition-api-setup.html#accessing-props
https://vuejs.org/api/composition-api-setup.html#setup-context

I just hadn't read these going into this.

[ngustavo]

I tried using this today and it says properties are not defined on 2.5.0

[Jengamon]

This is not in 2.5.0 afaik. Nightly, maybe, but this was merged after the release of 2.5.0.