unplugin-jsxify

Architecture

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

Options and Default Values

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)
  }
  */
})

Install

npm i unplugin-jsxify

// vite.config.ts
import Jsxify from 'unplugin-jsxify/vite'

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

// rollup.config.js
import Jsxify from 'unplugin-jsxify/rollup'

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

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

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

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

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

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

Workaround

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 */})
  ]
})