@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". |