unplugin-jsx-string

unplugin-jsx-string

Converts JSX to HTML strings at compile time.

Installation

npm i unplugin-jsx-string

Vite

// vite.config.ts
import DefineOptions from 'unplugin-jsx-string/vite'
import Vue from '@vitejs/plugin-vue'

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

Rollup

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

export default {
  plugins: [DefineOptions()], // Must be before Vue plugin!
}

esbuild

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

build({
  plugins: [
    require('unplugin-jsx-string/esbuild')(), // Must be before Vue plugin!
  ],
})

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

// 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>"

Sponsors

License

MIT License © 2022 三咲智子