Open mesqueeb opened 4 years ago
@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:
sass
to css
(eg. with example how it's done in this package, and how to do it for Vue 3)<script lang="ts">
to JS
or not?
lang="ts"
that outweigh the cons of it being only consumable in TS projects?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:
.vue
to .js
, generate .d.ts
using vue-tsc as well.vue
as 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
.vue
as 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.ts
if 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.
nope, maybe you can open a feature request
Luca Ban @.***> δΊ 2021εΉ΄12ζ17ζ₯ε¨δΊ δΈε12:42ειοΌ
@egoist https://github.com/egoist final question on this:
It seems Volar won't pick up some-package/index.d.ts if you import some-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.
β Reply to this email directly, view it on GitHub https://github.com/egoist/vue-compile/issues/158#issuecomment-995989005, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACDAWSC5NH4MCRSZXUIW5RLURIJHHANCNFSM4PTCMGZA . You are receiving this because you were mentioned.Message ID: @.***>
@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
}
"@vitejs/plugin-vue": "^2.0.1",
"typescript": "^4.5.4",
"vite": "^2.7.3",
"vue": "^3.2.26",
"vue-tsc": "^0.29.8"
"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
@egoist thanks!! I've replaced it and it works just as well!
I also updated the post above.
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 : )