https://github.com/unplugin/unplugin-jsx-string
Converts JSX to HTML strings at compile time.
https://github.com/unplugin/unplugin-jsx-string
convert html jsx react string unplugin
Last synced: 2 months ago
JSON representation
Converts JSX to HTML strings at compile time.
- Host: GitHub
- URL: https://github.com/unplugin/unplugin-jsx-string
- Owner: unplugin
- License: mit
- Created: 2022-06-06T07:34:41.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-04T21:31:39.000Z (2 months ago)
- Last Synced: 2025-04-05T02:01:49.532Z (2 months ago)
- Topics: convert, html, jsx, react, string, unplugin
- Language: TypeScript
- Homepage: https://jsx-string.sxzz.moe
- Size: 974 KB
- Stars: 47
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-jsx-string [](https://npmjs.com/package/unplugin-jsx-string)
[](https://github.com/unplugin/unplugin-jsx-string/actions/workflows/unit-test.yml)
Converts JSX to HTML strings at compile time.
## Installation
```bash
npm i unplugin-jsx-string
```
Vite
```ts
// vite.config.ts
import JsxString from 'unplugin-jsx-string/vite'
export default defineConfig({
plugins: [JsxString()],
})
```
Rollup
```ts
// rollup.config.js
import JsxString from 'unplugin-jsx-string/rollup'
export default {
plugins: [JsxString()],
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [require('unplugin-jsx-string/esbuild')()],
})
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-jsx-string/webpack')()],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('unplugin-jsx-string/webpack')()],
},
}
```
#### TypeScript Support
```jsonc
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-jsx-string" /* ... */],
},
}
```
## Usage
```tsx
// basic usage
jsxToString(
Hello)
// "Hello"
// raw expression
const t = Date.now()
jsxToString(
Now: {jsxRaw(Math.trunc(t / 1000))})
// `Now: ${Math.trunc(t / 1000)}`
// class list
jsxToString(
)
// ``
// styles
jsxToString(
)
// ``
// events
jsxToString( 'clicked'}>)
// ""
// children
jsxToString(
foo
bar
123
,
)
// "
foo
bar
123"
```
## Benchmark
```
Hello World x 99,362 ops/sec ±0.55% (92 runs sampled)
x 66,281 ops/sec ±0.63% (95 runs sampled)
```
Tested on Apple M1 Max / 32GB
_More samples are welcome._
## Sponsors
## License
[MIT](./LICENSE) License © 2022-PRESENT [三咲智子](https://github.com/sxzz)