fix(vue): vue regular script block exports not being recognized inside editor

[minht11]

Closes #8947

Changes

Adds editor support/fixes non setup vue block export types inside astro components.
Also add support for Vue 3.3 generics, when explicitely passing types to defineProps.

Previously import types from first block

<script lang="ts">
export const myFn = (param: 1) => param

export type MyType = 1
</script>

<script lang="ts" setup>
defineProps<{ prop: number }>()
</script>

<template>
  <div></div>
</template>

inside astro components would not be recognized

---
import { type MyType, myFn } from '../components/Foo.vue'
---

The reason being because first block source code was not included inside editor plugin generated virtual file.

Testing

I locally patched /node_modules/@astrojs/vue/dist/editor.cjs and after editor restart types started to work.

I did not find any tests for vue editor integration in this repo so I didn't add any here either.

Docs

This is a minor fix.

---

I wasn't sure if this is minor or patch, because while runtime supports it, editor never did, so it is almost a new feature. Feel free to correct me.

[changeset-bot]

🦋 Changeset detected

Latest commit: b450334

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sarah11918]

Would just suggest our present tense, but otherwise LGTM!

[ematipico]

I don't know Vue very much, but considering that you're adding a new feature, maybe should create new tests that shows that we support it.

We have fixtures here, where we emulate real world projects: https://github.com/withastro/astro/tree/main/packages/integrations/vue/test/fixtures

And here you can add a new test. Here's an example of an existing test: https://github.com/withastro/astro/blob/main/packages/integrations/vue/test/app-entrypoint.test.js

Plus, while we a fixing a bug, we are actually adding support for something new, so we should document it.

[minht11]

@ematipico are you talking about testing types inside editor or runtime support? Runtime already works, I can add few more tests which cover different vue component shapes with multiple blocks and generics. Not sure how to test types though.

[ematipico]

Yeah, for types, we can't test it; the only thing we can do - I think:

• create a component with types and... assert something, as long as they compile, they work, I suppose;
• maybe we can update the examples/ folder;
• Should we update the documentation?

[minht11]

I added few more tests, I took inspiration from react integrations tests, let me know if I need to add more.

About examples. As far as I looked every example there is very simple, no other framework has any special concepts besides counter added. Adding generics there would complicate things and I am not sure we want that? If needed to add example I guess I could add something similar to GenericsAndBlocks.vue test.

Which leads me to documentation, these features are just basic vue features, in react guide I don't see anything added about Typescript generics or that you can export multiple things from the same component file. Those things seem better left to the framework?

I am happy to add more examples/documentation just not sure where those would that fit given current structure.

[Princesseuh]

imo this PR doesn't require tests in this repo. Since it's ultimately our language server (at https://github.com/withastro/language-tools) which consume those modules, testing it there seems more appropriate to me (especially since all the testing tooling is already there to test the types)

[Princesseuh]

Ultimately, this module shouldn't use a regex to get the types, it should use something like https://github.com/vuejs/language-tools/tree/master/packages/component-meta and https://github.com/vuejs/language-tools/tree/master/packages/component-type-helpers

which should support everything (or at least, if it doesn't, would be a bug upstream that's not in our hands)

[minht11]

I agree, I have looked briefly into these packages after I opened this PR and its not so far I haven't found an easy way.

component-meta gives narrows prop types and output loses generic information, so T extends string becomes just string.

component-type-helpers needs a component instance types, to import which requires vue language server I think and still it loses all generic information and narrows types. I am not sure how would that work with virtual file.

Current approach is not sustainable and prone to fail, right now astro doesn't account for https://vuejs.org/guide/typescript/composition-api.html#props-default-values or experimental defineModel and so on and yet I am not sure how to get something better in a short term.

[Princesseuh]

Looks great, thank you! In the future we'll find a real solution to not use a regex, but honestly, it (mostly) works and that's already pretty good.