Roadmap
mesqueeb opened this issue · comments
I'm in a never-ending quest to finding the best way to prepare a standalone vue component for publishing on NPM.
vue-compile is great for Vue 2 components.
Is there a roadmap with features you plan to create for Vue 3?
Especially when it comes to typing & auto completion in Vue 3. I wonder how components should be typed in the first place for optimal support in VSCode with eg. Vetur. And I'd love to know if this is on the roadmap for vue-compile or not : )
@egoist I'm already a supporter, but would it be possible to pay a one-time donation to request an article that discusses publishing vue components on NPM.
With eg. the title: How to publish a Vue 3 component on NPM
with info on:
- how to convert the style from
sasstocss(eg. with example how it's done in this package, and how to do it for Vue 3) - how to type your props & expose this in the types file of the NPM package.
- should we transform
<script lang="ts">toJSor not?- → Are there any pros publishing as
lang="ts"that outweigh the cons of it being only consumable in TS projects?
- → Are there any pros publishing as
I'm having a hard time finding resources that discuss the things above, and would be interested in getting your vision on the issue.
how to convert the style from sass to css
vue-compile turns <style lang="sass"> to <style> tag, sass code is also transformed to css accordingly, standalone sass files are also handled (https://github.com/egoist/vue-compile#compile-standalone-css-files)
how to type your props & expose this in the types file of the NPM package.
The official guide demonstrates how to annotate props: https://v3.vuejs.org/guide/typescript-support.html#annotating-props
It seems Vetur won't show type hints when you use components written in .vue, so it's probably better to use rollup-plugin-vue with rollup-plugin-typescript2 to output both .js file and .d.ts file.
should we transform
<script lang="ts">to JS or not?
Yes for me, many users don't use TypeScript at all. Doing this will also save some compile time for the user.
@egoist did your opinion change on publishing components to NPM with lang="ts" ?
Also, do you use vue-tsc --declaration --emitDeclarationOnly to create type .d.ts for your standalone components before you publish ?
(I'm looking for guidance on the best way to publish standalone Vue components.)
I'm having difficulties with understanding why this doesn't work : S
The component from NPM gives me the correct type info when I hover over it (the one I created with vue-tsc --declaration --emitDeclarationOnly) but inside of <template> it just says any again...
Are you using Volar?
It seems Volar won't pick up some-package/index.d.ts if you import some-package/index.vue, so I can think of two ways to publish vue components:
- compile
.vueto.js, generate.d.tsusing vue-tsc as well - publish
.vueas is, do not transform<script lang="ts">block either
@egoist thanks for your advice. Yeah, I switched to Volar from Vetur.
if I go for:
publish
.vueas is, do not transform<script lang="ts">block either
will people still be able to use it in non-TS projects?
I'm guessing yes for Vite but no for Webpack (Vue-cli / Quasar) etc?
I'm guessing yes for Vite but no for Webpack (Vue-cli / Quasar) etc?
yes
@egoist thanks for the clarification!
So I'll have to compile to .js either way... 😅 do you have any advice on how to do this?
I might prepare a separate import path for the .js one...
So I'll have to compile to .js either way... 😅 do you have any advice on how to do this?
using the rollup plugin? or use Vite
@egoist cheers! i'm going to test it and see how it goes. i'll report back here : )
@egoist final question on this:
It seems Volar won't pick up
some-package/index.d.tsif you importsome-package/index.vue
do you know if this is a known issue we can track in the Volar repo? I searched in the Volar repo but couldn't find anything on it.
@egoist After struggling with rollup for more than half a day, I ended up getting help from a friend to set up Vite.
This is what I use now and it works really good:
vite.config.js
const vue = require('@vitejs/plugin-vue')
const path = require('path')
const { defineConfig } = require('vite')
const pkg = require('./package.json')
const nameCamel = pkg.name
const namePascal = nameCamel.replace(/(^\w|-\w)/g, (c) => c.replace('-', '').toUpperCase())
const external = Object.keys(pkg.dependencies || [])
module.exports = defineConfig({
plugins: [vue()],
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.ts'),
name: namePascal,
fileName: (format) => `index.${format}.js`,
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue', ...external],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
},
},
},
},
})tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"baseUrl": "."
"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
"strict": true,
"allowJs": true,
"target": "es6",
"module": "esnext",
"esModuleInterop": true,
"moduleResolution": "node",
"types": ["node", "webpack-env"]
},
"include": ["src/index.ts", "./src/**/*.ts", "./src/**/*.vue", "./shims.d.ts"],
"exclude": ["./dist", "node_modules"]
}shims.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}dependencies to install
"@vitejs/plugin-vue": "^2.0.1",
"typescript": "^4.5.4",
"vite": "^2.7.3",
"vue": "^3.2.26",
"vue-tsc": "^0.29.8"
scripts to run
"gen:types": "vue-tsc --declaration --emitDeclarationOnly",
"build": "rimraf dist && vite build && npm run gen:types"
then just run npm run build
Works like a charm! 🎉
brilliant, i think you can just use the vite vue plugin instead of the rollup plugin