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

rollup-plugin-version-injector

v1.3.3

Published

A simple rollup.js plugin to inject your application's version number and/or today's date into your built js, html, and css files!

Downloads

25,523

Readme

Build Status codecov npm version dependabot-status semantic-release Commitizen friendly

rollup-plugin-version-injector

A simple rollup.js plugin to inject your application's version number and/or today's date into your built js, html, and css files!

Getting started

Install from npm

npm i --save-dev rollup-plugin-version-injector

Add it to your rollup.config.js build configuration.

import versionInjector from 'rollup-plugin-version-injector';
// or
const versionInjector = require('rollup-plugin-version-injector');

export default {
  // other configuration
  plugins: [
    versionInjector()
    // any other plugins
  ]
};

Then you can add tags to your source code and it will inject the version where you specified. Example:

src/app.js (example file)

export class MyApp {
  getVersion() { 
    return '[VI]{version} - {date}[/VI]';
  }
  // other code
}

version-injector (VI) will replace that code in your built source to return the following:

build/built-app.js (example build file)

export class MyApp {
  getVersion() { 
    return '1.2.1 - June 9, 2007 17:46:12';
  }
  // other code
}

VI will also inject the version into your files as a comment. Example:

build/index.html (example file)

<!-- Version: 1.2.1 - June 9, 2007 17:46:12 -->
<!DOCTYPE html>
<html lang="en">
  ...
</html>

Basic Usage

VI has two uses -- it will Inject the version number and/or today's date into your generated files in:

  1. Defined tags in your source code.
  2. A comment at the top of the file.

VI will replace '{version}' with the version found in your package.json and '{date}' with today's date in the format specified in the configuration.

VI supports injecting the version into all js, html, and css files output by rollup.

Injected in the source code

VI will only look between the configured tagIds. For example, the default tagId is VI so VI is looking for:

// string in your javascript file
const VERSION = '[VI]Version: {version} - built on {date}[/VI]';

VI will only replace the '{version}' and '{date}' found within those tagIds.

// output after VI has run
const VERSION = 'Version: 1.2.1 - built on June 9, 2007 17:46:12';

You can change the date format, tagId, and which files to look in using the configuration object passed into the versionInjector() function.

As a comment

It will replace the '{version}' and '{date}' found in the configured tag. For example, the default configured tag is:

tag: 'Version: {version} - {date}'

You can change the date format, tag, and which files to inject the comment into using the configuration object passed into the versionInjector() function.

Configuration

Anything not specified/overwritten in your versionInjector() configuration will use the default configuration.

default config

{
  injectInComments: {
    fileRegexp: /\.(js|html|css)$/,
    tag: 'Version: {version} - {date}',
    dateFormat: 'mmmm d, yyyy HH:MM:ss'
  },
  injectInTags: {
    fileRegexp: /\.(js|html|css)$/,
    tagId: 'VI',
    dateFormat: 'mmmm d, yyyy HH:MM:ss'
  },
  packageJson: './package.json',
  logLevel: 'info',
  logger: console,
  exclude: []
};

All available date formats can be found at dateformat.

injectInTags

The following properties are available:

versionInjector({
  injectInTags: false /* or */ {
    // Regexp for files to match against
    fileRegexp: Regex 
    // string of the tagId to look for
    // Ex: 'ACK' => VI will look for '[ACK]...[/ACK]'
    tagId: string 
    // string of valid dateformat 
    dateFormat: string 
  }
})

Note: The tagId will be wrapped in opening and closing brackets. Example: [tagId][/tagId]

All available date formats can be found at dateformat.

injectInComments

The following properties are available:

versionInjector({
  injectInComments: false /* or */ {
    // Regexp for files to match against
    fileRegexp: Regex 
    // string of tag to be injected
    tagId: string 
    // string of valid dateformat 
    dateFormat: string 
  }
})

packageJson

This is the relative path to your package.json file from your rollup config file. Default is './package.json'.

logLevel

This is the log levels for verion-injector. Default value is 'info'. Available values are:

'debug', 'info', 'warn', 'error'

logger

Default is the console, but can be any logger you prefer that matches the ILogger interface.

excludes

This is an array of specific files you want to exclude from any processing. This must be the full file name without the path.

Credits

This is essentially a less fancy port of the webpack-auto-inject-version.