Fix handling of different JSX pragmas in Typescript

[calebeby]

Q	A
Fixed Issues?	Fixes #7631
Patch: Bug Fix?	Yes
Major: Breaking Change?	No
Minor: New Feature?	No
Tests Added + Pass?	Yes
Documentation PR	No
Any Dependency Changes?	No
License	MIT

Before, if a JSX pragma was imported in typescript, the import was removed because it did not think it was used as a value. This changes it so it knows that the import is being used as a JSX pragma

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/7918/

[hzoo]

Hmm @DanielRosenwasser?

Still makes me want a preset that just includes all of what TS supports but I guess you have to pass down options

[DanielRosenwasser]

Looks reasonable to me, @weswigham and @andy-ms might want to take a quick glance though.

[DanielRosenwasser]

Wait, I just realized this is not a global option applied to all transforms. I'll try to get back to this.

[calebeby]

Yeah, like @hzoo mentioned in #7631, we could figure out some way for the ts plugin to read the config from the jsx plugin, but at this point, I think that adding an option to the ts plugin is the best solution, since babel doesn't have anything in place afaik to retrieve configuration from other plugins.

@hzoo maybe in ~a month when I'm out of school I can help with making a ts preset that has a single jsx pragma option that it passes to both the ts plugin and the jsx plugin

[xtuc]

what about using "React" as default in options.jsxPragam, that would simplify the logic a bit.

[calebeby]

✔️

[weswigham]

TS also supports the @jsx pragma to specify the factory inline that the jsx transform supports - it probably has a similar elision bug.

[xtuc]

That's a good point, how could we keep both in sync?

At the moment it's an option but that's probably not the easiest way to configure it. I mean the pragma will be better.

[weswigham]

IMO, extract inline pragma detection out of the jsx plugin, then call it in both plugins.

[calebeby]

@weswigham can you elaborate a bit? I can understand extracting the logic that finds the jsx pragma from the @jsx comment, but do you think we can somehow extract the option for the pragma? How?

[calebeby]

Also, how does Babel plugin ordering work? I really don't understand this, because if we could just get the jsx plugin to run before this, we wouldn't have to deal with this.

[calebeby]

Also we should deal with fragments 😞

[calebeby]

Import referenced as value -> keep
Import is jsx pragma by options or by @jsx comment -> keep
Import is jsx fragment pragma by options or by @jsxFragment comment -> keep
Otherwise, remove the import

I don't think it is necessary to check if the pragma is used, because if an import is the jsx pragma, it must not be a type, it is a value.

I think we need to come up with a way for the typescript plugin to talk to the jsx plugin, and it should ask what the jsx pragma and jsx fragment pragma are.

Is there a way we can attach additional data along with the ast, which the jsx plugin can write to and the ts plugin can read from?

[hzoo]

Plugin ordering is atm http://new.babeljs.io/docs/en/next/plugins.html#plugin-preset-ordering (plugins first, then presets). I think we can land as is with the caveat of ordering and then we need to figure out how to pass data in between.

Yeah we can just do the same options for now but should think about how config data should be shared (or like i said before if the typescript preset should include all of these anyway plugins + options which would solve it too I believe)

[hzoo]

We can just land this as is since it fixes the bug

IMO, extract inline pragma detection out of the jsx plugin, then call it in both plugins.

But yeah we should probably do this or figure out a better fix

[calebeby]

Yeah, I started working on extracting the pragma detection, I will submit a proposal with those changes soon.

…

On Mon, May 14, 2018, 3:02 PM Henry Zhu ***@***.***> wrote: Merged #7878 <#7878>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#7878 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMmFoev2bJpupD6eordkzdw6A1B6Z9zQks5tyf7igaJpZM4T1Nku> .