This plugin constructs a pipeline that converts various markup languages into JSX components. It begins by transforming the input text into HTML and then passes the resulting HTML to the transpiler that converts HTML to JSX (htm). By default, this plugin does not perform any transformations; you must provide a JavaScript function that converts text to HTML in the form of (src: string) => string
.
flowchart LR
Asciidoc -->|Asciidoctor| HTML
Markdown -->|Marked| HTML
POD -->|Podium| HTML
Others(( )) ---> HTML
HTML -->|htm| JSX
Jsxify({
// settings for default values
default: {
extensions: [], // to detect target files
jsxImportSource: 'react', // to compile the HTML content to JSX components
render: (src: string) => src, // to compile the original content to HTML
extract: (_src: string) => ({}), // to extract metadata from the original content
},
/* EXAMPLE:
html: {
extensions: ['.html', '.htm'],
render: (src: string) => src
}
// you can use any language!
markdown: {
extensions: ['.md'],
render: (src: string) => marked.parse(src)
}
*/
})
npm i unplugin-jsxify
Vite
// vite.config.ts
import Jsxify from 'unplugin-jsxify/vite'
export default defineConfig({
plugins: [
Jsxify({ /* options */ }),
],
})
Example: playground/
Rollup
// rollup.config.js
import Jsxify from 'unplugin-jsxify/rollup'
export default {
plugins: [
Jsxify({ /* options */ }),
],
}
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-jsxify/webpack')({ /* options */ })
]
}
Nuxt
// nuxt.config.js
export default defineNuxtConfig({
modules: [
['unplugin-jsxify/nuxt', { /* options */ }],
],
})
This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-jsxify/webpack')({ /* options */ }),
],
},
}
esbuild
// esbuild.config.js
import { build } from 'esbuild'
import Jsxify from 'unplugin-jsxify/esbuild'
build({
plugins: [Jsxify({ /* options */ })],
})
If you encounter issues related to html-react-parser, please try the following configuration:
export default defineConfig({
build: {
rollupOptions: {
external: ['html-react-parser'],
},
},
ssr: {
external: ['html-react-parser'],
},
plugin: [
Jsxify({ /* options */})
]
})