Subscribe on changes!

`<script setup lang="coffee">` fail to inject `defineProps` and others

avatar
Mar 5th 2022

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Above example code is working. I can't show its failing due to the lack of lang="coffee" at SFC Playground

What is expected?

Hope to be able to use defineProps, defineEmits and defineExpose inside <script setup> with coffeescript language

What is actually happening?

all of them appears as undefined


Originally posted as comment to #4994 (but realized it is closed)....

First I assume my system is properly configured since it all works while using setup function inside a normal <script lang="coffee">. Issue only appear when I try to use the nicer <script setup> tag.

I'm trying to use <script setup lang="coffee"> and defineProps, defineEmits and defineExpose they all fail.

<script setup lang="coffee">
props = defineProps({a: Number})   # ReferenceError: defineProps is not defined
emit = defineEmits(['b'])
console.log(props)
console.log(emit)
</script>

If I remove the lang tag it works if I declare variable with both const or let.

<script setup>
const props = defineProps({a: Number})
let emit = defineEmits(['b'])
console.log(props);                   // works
console.log(emit);                    // works
</script>

Without proper declaration if fails even with plain JS:

<script setup>
props = defineProps({a: Number})    // ReferenceError: defineProps is not defined
emit = defineEmits(['b'])
console.log(props);
console.log(emit);
</script>

Any chance the code to parse these macros are forcing presence of const or let?

Any workaround to use coffee script here?

avatar
Mar 5th 2022

I don't think we will support that, no. Coffee script is dead, in my personal opinion.

Of course there are legacy projects using it, but our new APIs should focus on plain JS/TS, which has become excellent.

My take on this.

avatar
Mar 9th 2022

You may get it working with coffee if you actually import defineProps & defineEmits - the Vue package has placeholders exposed for situations when you can't work with the magically global functions.