Vue jsx transform sample

index.js

const Babel = require('babel-core')
const vueJsx = require('babel-plugin-transform-vue-jsx')

let code = `
function render() {
  return (
    <div>
      <div leon={a} onClick={this.click()}
        {...{
          props: {
            prop1: 1,
            prop2: 2
          },
          on: {
            event: this.handleEvent()
          }
        }}
      >
      </div>
    </div>
  )
}`

let result = Babel.transform(code, {
  plugins: [
    vueJsx,
  ]
})

console.log(result.code)

package.json

{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0"
  }
}

result.js

// node index.js , then we get:

import _mergeJSXProps from "babel-helper-vue-jsx-merge-props";

function render() {
  return h("div", [h("div", _mergeJSXProps([{
    attrs: { leon: a },
    on: {
      "click": this.click()
    }
  }, {
    props,
    on: {
      event: this.handleEvent()
    }
  }]))]);
}