unplugin-jsx-string

Converts JSX to HTML strings at compile time.

Installation

npm i unplugin-jsx-string

Vite

// vite.config.ts
import JsxString from 'unplugin-jsx-string/vite'

export default defineConfig({
  plugins: [JsxString()],
})

Rollup

// rollup.config.js
import JsxString from 'unplugin-jsx-string/rollup'

export default {
  plugins: [JsxString()],
}

esbuild

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

build({
  plugins: [require('unplugin-jsx-string/esbuild')()],
})

Webpack

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

Vue CLI

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

TypeScript Support

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-jsx-string" /* ... */],
  },
}

Usage

// basic usage
jsxToString(<div>Hello</div>)
// "<div>Hello</div>"

// raw expression
const t = Date.now()
jsxToString(<div>Now: {jsxRaw(Math.trunc(t / 1000))}</div>)
// `<div>Now: ${Math.trunc(t / 1000)}</div>`

// class list
jsxToString(<div className={['bar', 'foo']} />)
// `<div class="bar foo"/>`

// styles
jsxToString(<div style={{ color: 'red', textAlign: 'center' }} />)
// `<div style="color:red;text-align:center"/>`

// events
jsxToString(<button onClick={() => 'clicked'}></button>)
// "<button onclick="&apos;clicked&apos;"></button>"

// children
jsxToString(
  <div>
    <p>foo</p>
    <p>bar</p>
    <br />
    <div />
    123
  </div>,
)
// "<div><p>foo</p><p>bar</p><br/><div/>123</div>"

Benchmark

<div>Hello World</div> x 99,362 ops/sec ±0.55% (92 runs sampled)
<div><img src={'foo'} /><div></div></div> x 66,281 ops/sec ±0.63% (95 runs sampled)

Tested on Apple M1 Max / 32GB

More samples are welcome.

Sponsors

License

MIT License © 2022-PRESENT 三咲智子