unplugin-data

English | 中文文档

A universal plugin that performs data file loading (e.g., *.data.js/ts/mjs/mts) and transforms it into a JavaScript object string module at compile time.

Install

pnpm add unplugin-data
# npm i unplugin-data

Vite

// vite.config.ts
import data from 'unplugin-data/vite'

export default defineConfig({
  plugins: [
    data({
      /* options */
    }), // or data()
  ],
})

Rollup

// rollup.config.js
import data from 'unplugin-data/rollup'

export default {
  plugins: [
    data({
      /* options */
    }), // or data()
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-data/webpack')({
      /* options */
    }),
  ],
}

Nuxt

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    [
      'unplugin-data/nuxt',
      {
        /* options */
      },
    ],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-data/webpack')({
        /* options */
      }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import data from 'unplugin-data/esbuild'

build({
  plugins: [
    data({
      /* options */
    }), // or data()
  ],
})

Options

export interface Options {
  /**
   * Include data files to transform. Only support esm files.
   *
   * @default
   * /^(?!.*[\\\/]node_modules[\\\/]).*\.data\.(js|mjs|ts|mts)$/
   * // the data js/ts file of the project but not in node_modules
   */
  include?: RegExp | ((id: string) => boolean)

  /**
   * transform the data object to JavaScript object strings
   */
  stringify?: (value: any) => string
}

Example

ts.data.ts

const ts0 = new Set([1, 2, 3, undefined])
export default ts0
export const ts1 = new Date()
export const ts2 = await fetch(
  'https://registry.npmmirror.com/typescript/latest',
)
  .then(r => r.json())
  .then(r => r.version)

plugin will run it in current nodejs runtims and transform result to the following code

const ts0 = /* @__PURE__ */ new Set([1, 2, 3, void 0])
export default ts0
export const ts1 = /* @__PURE__ */ new Date(1730102201114)
export const ts2 = '5.6.3'

Example2

Output the latest commit information of the current Git repository to the browser console. commit.data.ts

// commit.data.ts
import { simpleGit } from 'simple-git'
const latestLog = (await simpleGit().log({ maxCount: 1 })).latest!
const commitLog
  = `GIT commit\n${
    Object.entries(latestLog)
      .filter(([_, value]: [string, string]) => String(value || ``).trim())
      .map(([key, value]) => {
        return `${key}: ${value}`
      })
      .join('\n')}`
export default commitLog

// main.ts
import commitLog from './utils/commit.data'
console.log(commitLog)