@open-xchange/vite-plugin-project-meta

A Vite plugin providing a virtual import for project metadata with build information.

The metadata object can simply be imported in source code as following:

import metadata from 'virtual:metadata'

Additionally, while bundling the project, the plugin will insert a <meta> element into all HTML entry files containing a string with random length and contents. This is needed to workaround sticky browser cache when the HTML entry files are being served with weak e-tags that depend on the file size only but not on the file contents.

Usage

Add the plugin to your Vite configuration:

// vite.config.ts

import { defineConfig } from 'vite' // or 'vitest/config'
import metaPlugin from '@open-xchange/vite-plugin-project-meta'

export default defineConfig(() => {

  // ...

  plugins: [
    // ...

    metaPlugin({
      id: 'my-project-ui'
      name: 'My Project UI',
    }),
  ],
})

Register TypeScript type definitions for the virtual:metadata module import:

// src/tsconfig.json

{
  // ...

  "types": [
    "vite/client",
    "@open-xchange/vite-plugin-project-meta/virtual"
  ],
}

Use the virtual module in your code:

// src/path/to/some/module.ts

import metadata from 'virtual:metadata'

console.log(metadata.id)        // from package.json ('name')
console.log(metadata.name)      // from `options.projectName`
console.log(metadata.version)   // from package.json ('version')
console.log(metadata.builddate) // plugin execution timestamp
console.log(metadata.commitsha) // from env variable 'CI_COMMIT_SHA'

Options

| Name | Type | Default | Description | | - | - | - | - | | projectName | string | required | Display name of the project, for metadata property 'name'. |