@hexeo/vue-typescript-jsx

vue-typescript-jsx

Usage

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
  }
}

import Vue from 'vue'
import VueTSX from 'vue-typescript-jsx'

Vue.use(VueTSX)

...

Limitations

Spread/Merge props

Spread and merge of props are not supported by typescript compiler.

<div class="a" {...{class: 'b'}} />

This will not result in

{
  class: {
    a: true,
    b: true
  }
}

but in

{
  class: 'b'
}

input, textarea, options, select literal values

Literal values will be passed to domProps-value.

<input value="some value" />

will generate the following in the VDOM Data

{
  domProps: {
    value: 'some value'
  }
}

h auto-injection

There is no h auto-injection, you should provide it.

render(h: Vue.CreateElement) {
  return <div />
}

get value() {
  const h = this.$createElement
  return <div />
}