feat: finish

Author: sxzz

README.md

@@ -2,12 +2,116 @@
 
 [![Unit Test](https://github.com/sxzz/unplugin-jsx-string/actions/workflows/unit-test.yml/badge.svg)](https://github.com/sxzz/unplugin-jsx-string/actions/workflows/unit-test.yml)
 
-## Install
+## Installation
 
 ```bash
 npm i unplugin-jsx-string
 ```
 
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import DefineOptions from 'unplugin-jsx-string/vite'
+import Vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [Vue(), DefineOptions()],
+})
+```
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import DefineOptions from 'unplugin-jsx-string/rollup'
+
+export default {
+  plugins: [DefineOptions()], // Must be before Vue plugin!
+}
+```
+
+<br></details>
+
+<details>
+<summary>esbuild</summary><br>
+
+```ts
+// esbuild.config.js
+import { build } from 'esbuild'
+
+build({
+  plugins: [
+    require('unplugin-jsx-string/esbuild')(), // Must be before Vue plugin!
+  ],
+})
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [require('unplugin-jsx-string/webpack')()],
+}
+```
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [require('unplugin-jsx-string/webpack')()],
+  },
+}
+```
+
+<br></details>
+
+## Usage
+
+```tsx
+// 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
 
 <p align="center">

package.json

@@ -29,16 +29,20 @@
     "@babel/parser": "^7.18.4",
     "@babel/traverse": "^7.18.2",
     "@babel/types": "^7.18.4",
+    "@rollup/pluginutils": "^4.2.1",
     "entities": "^4.3.0",
     "json5": "^2.2.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "magic-string": "^0.26.2",
+    "unplugin": "^0.7.0"
   },
   "devDependencies": {
     "@sxzz/eslint-config-prettier": "^2.2.2",
     "@sxzz/eslint-config-ts": "^2.2.2",
     "@types/babel__traverse": "^7.17.1",
     "@types/lodash": "^4.14.182",
     "@types/node": "*",
+    "@types/react": "^18.0.12",
     "bumpp": "^7.1.1",
     "eslint": "^8.17.0",
     "eslint-define-config": "^1.5.0",