Complete rollup example for Vue 3 component lang="ts"

[mesqueeb]

What problem does this feature solve?

If we have a single Vue 3 component with lang="ts", and we want to host this component on NPM to use it in multiple projects, it's not 100% clear to me - given the requirements below - how to best use rollup to prepare the component for publishing on NPM.

Requirements:

• generate .d.ts file based on prop types.
• make sure the .d.ts creates autocomplete suggestions for props in VSCode when the component is imported into a project
• make sure the component is usable in JS projects
• make it clear how the component can be written in a way it's compatible with Vue 2 projects (or is this not possible at all?)
• bonus feature: convert "sass" style-block to regular "css"

If there's a concrete example of how to do the above, I believe that would benefit a lot of Vue developers that wanna publish single Vue components!

What does the proposed API look like?

An example of such an example would be:

1. example input from vue file:

   <template>// ...
   <style>// ...
   <script lang="ts">// ...

2. required config:

   // required rollup config file contents

3. execute this:

   # the command we need to execute to rollup the component

4. this will be the compiled output:

   // an example of what kind of file is generated based on the above

[mesqueeb]

is there any way I can add some issuehunt funding?