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

unplugin-info

v1.2.1

Published

Export build information as virutal module

Downloads

8,478

Readme

unplugin-info

Demo version install size GitHub License CI

Export build information as virutal module.

This plugin helps you add build timestamp / commit SHA / CI environment / package.json / ... to your application. So you can easily check whether the production version meets your expectations, or config your application.

Migration from v0 to v1

  • Move git related information from ~build/info to ~build/git
  • Move CI related information from ~build/info to ~build/ci
  • Remove commitsSinceLastTag from ~build/git

Installation

npm i -D unplugin-info
// vite.config.ts

import Info from 'unplugin-info/vite';

export default defineConfig({
  plugins: [
    Info()
  ]
});

Full example is located at examples/vite.

// rollup.config.js

import Info from 'unplugin-info/rollup';

export default {
  plugins: [
    Info()
  ]
};

// webpack.config.js

module.exports = {
  /* ... */
  plugins: [
    require('unplugin-info/webpack')()
  ]
};

Full example is located at examples/webpack.

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['unplugin-info/nuxt'],
  info: {
    // Your unplugin-info options ...
  }
});

Full example is located at examples/nuxt.

// vue.config.js

module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-info/webpack')()
    ]
  }
};

// quasar.conf.js [Vite]
module.exports = {
  vitePlugins: [
    [
      'unplugin-info/vite',
      {
        /* options */
      }
    ]
  ]
};
// quasar.conf.js [Webpack]
const Info = require('unplugin-info/webpack');

module.exports = {
  build: {
    chainWebpack(chain) {
      chain.plugin('unplugin-info').use(
        Info()
      );
    }
  }
};

// esbuild.config.js
import { build } from 'esbuild';

build({
  /* ... */
  plugins: [
    require('unplugin-info/esbuild')({
      /* options */
    }),
  ],
});

// astro.config.mjs

import Info from 'unplugin-info/astro';

export default defineConfig({
  integrations: [
    Info()
  ],
});

TypeScript

To make the TypeScript work, you can add unplugin-info/client to your corresponding tsconfig.json.

{
  "compilerOptions": {
    // ...
    "types": [
      "unplugin-info/client"
    ],
  },
  // ...
}

Or you can add TypeScript triple-slash directives to your .d.ts (i.e. for projects initialized by Vite, it may be src/env.d.ts).

// Your .d.ts file

/// <reference types="unplugin-info/client" />

Or if you did some advanced modification (see below), you can just copy and paste client.d.ts to your project, and then do anything you want.

Usage

unplugin-info creates several virtual modules, ~build/time, ~build/git, ~build/ci, ~build/console, ~build/meta, ~build/env, and ~build/package.

You can just import these modules as usual, and do anything with them. Common use cases may be like:

// main.ts

import now from '~build/time'
import { sha } from '~build/git'

// console log the build info
console.log(`Build ${sha} at ${now}`)
// App.tsx

import now from '~build/time'

// Render it in your app
function App() {
  return <span>{now.toLocaleString()}</span>
}

~build/time

It exports the timestamp when the vite started.

import now from '~build/time'

console.log(now)
// There will be a log like "Fri Jun 24 2022 16:30:30 GMT+0800 (中国标准时间)"

~build/git

It exports the infomation about the current git repo, which is powered by simple-git.

import {
  github,
  sha,
  abbreviatedSha,
  tag,
  lastTag,
  committer,
  committerEmail,
  committerDate,
  author,
  authorEmail,
  authorDate,
  commitMessage
} from '~build/git';

// ...

[!NOTE]

From [email protected], the original virtual module called ~build/info will be renamed to ~build/git, and the CI/CD related information will be moved to another virtual module called ~build/ci.

You can even custom or override the exported git information.

All the functions will be executed during the generation of ~build/git, and the return result with its corresponding field name will be merged into ~build/git. The following example adds another isClean field to ~build/git.

// vite.config.ts

import Info from 'unplugin-info/vite';

export default defineConfig({
  plugins: [
    Info({
      git: {
        // Gets whether this represents a clean working branch.
        isClean: async (git) => {
          const status = await git.status()
          return status.isClean()
        }
      }
    })
  ]
});

Full example is located at examples/vite.

~build/ci

It exports the current CI/CD environment information, which is powered by ci-info.

import { isCI, isPR, name } from '~build/ci'

~build/console

It will print some helpful logs in your browser.

import '~build/console';

~build/meta

It exports some meta data from the options of the plugin.

// vite.config.ts
export default defineConfig({
  plugins: [
    BuildInfo({
      meta: { message: 'This is set from vite.config.ts' }
    })
  ]
})

You can also generate meta data lazily.

// vite.config.ts
export default defineConfig({
  plugins: [
    BuildInfo({
      meta: async () => ({ message: 'This is set from vite.config.ts' })
    })
  ]
})

Then you can import them in your app.

import { message } from '~build/meta'

console.log(message)
// This is set from vite.config.ts

[!NOTE]

Meta data will be serialized to JSON format, so you should gen it in you vite.config.ts and pass the result object.

To get TypeScript support, you can add type declaration in your env.d.ts (It is include in the official Vite project template).

declare module '~build/meta' {
  export const message: string;
}

Full example is located at examples/vite.

~build/env

[!NOTE]

Now it only suports for Vite.

It exports some environment data from the options of the plugin.

// vite.config.ts
export default defineConfig({
  plugins: [
    BuildInfo({
      env: { BUILD_MESSAGE: 'This is a default value set from vite.config.ts' }
    })
  ]
})

Compared with ~build/meta, ~build/env is targeted at accessing environment variables for the SSR runtime (like Nuxt, Remix, Astro, and so on).

Then you can import them in your Vite app.

import { BUILD_MESSAGE } from '~build/env'

console.log(BUILD_MESSAGE)

In the client-side, this will always output This is a default value set from vite.config.ts.

But in the server-side, the output log is determined by the corresponding environment variable process.env.BUILD_MESSAGE.

To get TypeScript support, you can add type declaration in your env.d.ts (It is include in the official Vite project template).

declare module '~build/env' {
  export const BUILD_MESSAGE: string;
}

~build/package

It exports the information of the current package.json.

import { name, version } from '~build/package';

You can also control which fields should be exported. By default, we only export fields name, version, description, keywords, license, author from your package.json.

// vite.config.ts

import Info from 'unplugin-info/vite';

export default defineConfig({
  plugins: [
    Info({
      package: {
        dependencies: true
      }
    })
  ]
});

Full example is located at examples/vite.

Relationship with vite-plugin-info

This pacakge was initially called vite-plugin-info. It has been refactored using unplugin to support additional tools, including Webpack and so on.

We recommend migrating from vite-plugin-info to unplugin-info, as unplugin-info will continue to be maintained and new features will be added.

However, you can still use vite-plugin-info, as it works fine. Thanks to Vite's compatibility, and the source code of vite-plugin-info can be founded here.

License

MIT License © 2023 XLor