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

[mesqueeb]

What problem does this feature solve?

If we have a single Vue 2 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 3 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]

I'm leaving some documentation here I found for components that use vue-property-decorator:

• https://stackoverflow.com/questions/57998121/generate-d-ts-file-for-vue-components-written-in-typescript
• https://github.com/MikeMitterer/vue-ts-sfc-starter

The problem is, the third party vue-property-decorator is not ideal and not the way I'd want to write components.

My ideal setup would be components that are as close to regular JS vue components as possible. The ONLY thing I'd want is to be able to annotate the props with types that are auto completed when importing the component in another project.