unplugin-jsx-await-expression

Await expressions for vue-jsx.

Install

npm i -D unplugin-jsx-await-expression

Usage

export default defineComponent(() => {
  return () => (
    <Suspense v-slots={{ fallback: () => <div>Loading...</div> }}>
      {await fetch('/api/user')
        .then(({ data }) => data.map((user) => <div>{user.name}</div>))
        .catch((error) => <div>{error.message}</div>)}
    </Suspense>
  )
})

// vite.config.ts
import jsxAwaitExpression from 'unplugin-jsx-await-expression/vite'

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

// rollup.config.js
import jsxAwaitExpression from 'unplugin-jsx-await-expression/rollup'

export default {
  plugins: [jsxAwaitExpression()],
}

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

build({
  plugins: [require('unplugin-jsx-await-expression/esbuild')()],
})

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-jsx-await-expression/webpack')()],
}

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('unplugin-jsx-await-expression/webpack')()],
  },
}

TS Macro Config

import jsxAwaitExpression from 'unplugin-jsx-await-expression/volar'

export default {
  plugins: [jsxAwaitExpression()],
}

License

MIT License © 2023-PRESENT zhiyuanzmj