npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

my-li-port

v0.0.0

Published

[![Netlify Status](https://api.netlify.com/api/v1/badges/b1b84831-789e-4629-a9e3-55a36e136653/deploy-status)](https://app.netlify.com/sites/sharp-babbage-154f0a/deploys)

Downloads

3

Readme

Netlify Status

Vue Component Library Starter

Create your own Vue 3 component library with TypeScript, Vite and VitePress.

Sooner or later, you will find that creating a component library is much better than having all components inside your app project. A component library force to you remove app specific logic from your components, making it easier to test and reuse them in other apps.

Once the components are in a library, documentation becomes critical. This starter project includes a documentation app powered by VitePress. It not only documents the usage of the component, but also provides a testing bed during the development of components. See the generated documentation app here.

Setup

When running docs:dev for the first time, you may encounter error like vitepress data not properly injected in app in your browser. Restart the server and reload the browser. Please refer to issue #30 for more details.

# install dependencies
npm install

# start the doc app with hot reload, great for testing components
npm run docs:dev

# build the library, available under dist
npm run build

# build the doc app, available under docs/.vitepress/dist
npm run docs:build

# preview the doc app locally from docs/.vitepress/dist
npm run docs:serve

You may use Netlify to auto build and deploy the doc app like this project does.

Develop and test locally

The best way to develop and test your component is by creating demos in docs/components/demo folder, as shown by the example components.

If you want to test the library in your Vue3 app locally:

  • In the root folder of this library, run npm link. This will create a symbolic link to the library.
  • In the root folder of your client app, run npm link my-li-port. This will add the symbolic link to the node_modules folder in your client app.
  • You can now import my-li-port in your client app.

There is no need to add my-li-port to your client app's dependency in this case.

If you made changes to the library, you will need to rebuild the library. Your Vue3 app shall hot reload when the building of library is completed.

How it works

Components

The library is a Vue plugin. The install function in index.ts registers all components under components to Vue globably.

The components are also exported by index.ts so that the client app can import them individually and register them locally, instead of using the library as a plugin. This may be a better option if the client app only use a small set of components in your library.

As there are already many UI component libraries for Vue 3, you may just want to build on top of one of them and create components for your specific needs. The Component B in this starter shows the example of using PrimeVue as the fundation library. However, this means the client app shall also use the same fundation component library as your library does.

The doc app itself is a client app of the libary, therefore PrimeVue is imported in docs/.vitepress/theme/index.js. The configuration in docs/.vitepress/config.js below forces VitePress to resolve these modules with no duplication, avoiding error at runtime, as PrimeVue also has Vue in its dependency.

module.exports = {
  vite: {
    resolve: {
      dedupe: ['vue', /primevue\/.+/],
    },
  },
}

In vite.config.ts, format 'umd' is not present in build.lib.formats option. This is because the PrimeVue components used by this library are externalized, and therefore requiring corresponding options in rollupOptions.output.globals. To avoid adding global varaibles for PrimeVue components, 'umd' is removed for simplicity.

Utilities and constants

The library includes example utilities and constants. They are also exported in index.ts. The client app may use them as below:

<script lang="ts">
import { MyConstants, MyUtil } from 'my-li-port'

export default {
  data () {
    return {
      magicNum: MyConstants.MAGIC_NUM
    }
  },
  methods: {
    add (a:number, b:number) {
      return MyUtil.add(a, b)
    }
  }
}
</script>

Styling

Individual components may have styles defined in its .vue file. They will be processed, combined and minified into dist/style.css, which is included in the exports list in package.json.

If you have library level styles shared by all components in the library, you may add them to src/assets/main.scss. This file is imported in index.ts, therefore the processed styles are also included into dist/style.css. To avoid conflicting with other global styles, consider pre-fixing the class names or wrapping them into a namespace class.

If you have your own special set of SVG icons, you may create a font file (.woff format) using tools like Icomoon or Fontello. This starter includes an example font file src/assets/fonts/myfont.woff and references it in src/assets/main.scss, with utility icon CSS classes. An icon from the font file is used in Component A. Vite will include the font file into the build, see https://vitejs.dev/guide/assets.html.

The client app shall import style.css, usually in the entry file:

import 'my-li-port/dist/style.css'

Third-party dependencies

Third-party libraries used by you library may bloat up the size of your library, if you simply add them to the dependencies in package.json.

The following are some strategies to reduce the size of your library:

Externalization

If you expect the client app of your library may also need the same dependency, you may externalize the dependency. For example, to exclude PrimeVue from your library build artifact, in vite.config.ts, you may have

module.exports = defineConfig({
    rollupOptions: {
      external: ['vue', /primevue\/.+/]
    }
  }
})

The dependency to be externalized may be declared as peer dependency in your library.

Cherry picking

If you don't expect the client app of your library also needing the same dependency, you may embed cherry-picked functions. For example, to embed the fill function of popular library lodash, import the fill function like the following:

import fill from 'lodash/fill'

Even with tree-shaking, the codes being brought into your library may still be large, as the function may have its own dependencies.

Note that import { fill } from 'lodash' or import _ from 'lodash' will not work and will embed the whole lodash library.

Finally, if your client app also use lodash and you don't want lodash to be in both the client app and your libraries, even after cherry-picking, you may consider cherry-picking in component library and re-export them as utils for client to consume, so that the client does not need to depend on lodash, therefore avoiding duplication.

Type generation

In tsconfig.json, the following options instructs tsc to emit declaration (.d.ts files) only, as vite build handles the .js file generation. The generated .d.ts files are sent to dist/types folder.

"compilerOptions": {
  "declaration": true,
  "emitDeclarationOnly": true,
  "declarationDir": "./dist/types"
}

In package.json, the line below locates the generated types for library client.

"types": "./dist/types/index.d.ts",

In vite.config.ts, build.emptyOutDir is set to false and rimraf is used instead to remove the dist folder before the build. This is to avoid the dist/types folder generated by tsc being deleted when running vite build.

Configuration

TypeScript

In tsconfig.json, set the following as recommended by Vite (since esbuild is used). However, enableing this option leads to https://github.com/vitejs/vite/issues/5814. The workaround is to also enable compilerOptions.skipLibCheck.

"compilerOptions": {
  "isolatedModules": true
}

In tsconfig.json, set the following to address Issue #32. The solution is from https://github.com/johnsoncodehk/volar/discussions/592.

"compilerOptions": {
  "types": [
    "vite/client"
  ]
}