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

vite-versioner-utility-plugin

v2024.2.17

Published

This project includes: - [TypeScript](https://www.typescriptlang.org/) - [Rollup](https://rollupjs.org/) - [Microsoft API Extractor](https://api-extractor.com/) - [TypeDoc](https://typedoc.org/)

Downloads

6

Readme

Vite Versioner Utility Plugin

This project includes:

Usage

The following tasks are available for npm run:

  • dev: Run Rollup in watch mode to detect changes to files during development

  • build: Run Rollup to build a production release distributable

  • build:types: Run Microsoft API Extractor to rollup a types declaration (d.ts) file

  • docs: Run TypeDoc for TSDoc generated documentation in the "docs/" folder

  • clean: Remove all build artifacts

  • production: Remove all build artifacts, build, build types, publish to npm (if logged in)

Development

While test driven development (TDD) would be a good approach to develop your library, also consider creating an app for prototyping and local testing of your library.

To test within the library, consider using Storybook. This approach runs a storybook script to load local source files for development.

Otherwise, follow these steps to test the package from another project:

From your library project, issue the npm link (or yarn link) command:

npm link

Start Rollup in watch mode:

npm run dev

Create a test app project, by doing the following:

To use your npm package library locally for development, create a new project in a separate folder:

mkdir test-app && cd test-app
npm init

Take the defaults from npm init; then, add TypeScript:

npm install typescript --save-dev

In the package.json of your test app, add the following two things:

  • Set the type of your package to module
  • Add a start script to execute your app
"type": "module",
"scripts": {
  "start": "tsc && node index.js",
},

Link to your library using the npm link <name> (or yarn link <name>) command - be sure the <name> matches your library's package.json name. For example:

npm link vite-versioner-utility-plugin

Add a "tsconfig.json" file to your test app that includes a baseUrl and references the paths to your npm linked module. Again, be sure the paths name matches your library's package.json name. For example:

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "vite-versioner-utility-plugin": ["node_modules/vite-versioner-utility-plugin/src"],
      "vite-versioner-utility-plugin/*": ["node_modules/vite-versioner-utility-plugin/src/*"]
    }
  }
}

Now, run your app via npm start.

The test app implements an import using the package name, such as:

import { versionerUtility } from "vite-versioner-utility-plugin";

versionerUtility();

Development Cleanup

Once development completes, unlink both your library and test app projects.

From your test app project, unlink the library using npm unlink <name> (or yarn unlink <name>) command:

npm unlink vite-versioner-utility-plugin

From your library project, issue the npm unlink (or yarn unlink) command:

npm unlink

Release Publishing

Update your package.json to next version number, and remember to tag a release.

Once ready to submit your package to the NPM Registry, execute the following tasks via npm (or yarn):

  • npm run clean — Assure a clean build
  • npm run build — Build the package
  • npm run build:types — Build API Extractor d.ts declaration

Assure the proper npm login:

npm login

Submit your package to the registry:

npm publish --access public