Rollup-plugin-vue: 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">// ...

1. required config:

// required rollup config file contents

1. execute this:

# the command we need to execute to rollup the component

1. 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?