Support JSX annotation

[sarsamurmu]

Can we support JSX annotations?

Input

// @jsx h
<div />

Output

h('div') // Expected
React.createElement('div') // Actual

I am using esbuild in a build tool, that's why I need it.

[evanw]

The way to do this is to pass the --jsx-factory=h flag to esbuild or, if you're using the API, enable the jsxFactory: 'h' option. See also the Using with React section in the readme.

[evanw]

This is now supported as of version 0.6.3.

[sarsamurmu]

That's great, Thanks

[bluepnume]

Is there a plan to also support @jsxFragment pragma? e.g. @jsxFragment MyCustomJSXFragment

[evanw]

Is there a plan to also support @jsxFragment pragma? e.g. @jsxFragment MyCustomJSXFragment

Here are the release notes for version 0.6.3 (from the commit that closed this issue, linked above):

• Add support for @jsx and @jsxFrag comments (#138)

  You can now override the JSX factory and fragment values on a per-file basis using comments:

  // @jsx h
  // @jsxFrag Fragment
  import {h, Fragment} from 'preact'
  console.log(<><a/></>)

  This now generates the following code:

  import {h, Fragment} from "preact";
  console.log(h(Fragment, null, h("a", null)));

As you can see, esbuild uses @jsxFrag instead of @jsxFragment. I did that because that's what https://babeljs.io/docs/babel-plugin-transform-react-jsx does, so AFAIK that's what the community is used to. I have no plans to also support @jsxFragment in addition to @jsxFrag.

[bluepnume]

That's perfect, sorry, should have read the commit! Thanks so much!