egoist/bili

TSX support

johannes-z opened this issue · 1 comments

I came across a problem, when compiling with bili and using render functions inside a tsx file.

  1. The first proble mis, that the emitted code for h is React.createElement. I have this in my tsconfig.json:
    "jsx": "preserve",
    "jsxFactory": "h",

I found, that using this is needed for bili.config.ts:

  babel: {
    configFile: false,
    jsx: 'h',
  },
  1. Now that React.createElement is "replaced" by h, it still doesn't work if the initial render function calls other functions, that also return TSX, e.g. like this:
render (h) {
  return (
    <div>Parent: {renderSubContent()}</div>
  )
},
renderSubContent() {
  return (
    <span>Content<span>
  )
}

In this case, renderSubContent throws an error, that h is not defined. If I add const h = this.$createElement manually to the function, there are no errors but also nothing gets rendered at all.

Yeah currently it only supports React JSX. We need to add an option to disable the built-in JSX plugin so that you can use Vue's babel plugin instead.