[Enhancement] CSX fragments syntax (#4802)

[zdenko]

React fragment syntax (#4802).

Component = (props) =>
  <>
    <OtherComponent />
    <OtherComponent />
  </>

Output:

Component = (props) => {
  return <>
    <OtherComponent />
    <OtherComponent />
  </>;
};

[vendethiel]

why does this need to be a lookahead? why capture a zero-width positive lookahead?

[zdenko]

For normal CSX tags RegEx will capture tag name, e,g, div from <div>.
The fragment tag is empty (<>) which means that tag name is '', and has to be compared to '' from closing tag </>.
I'm far from RexEg mastery and open to any better suggestion.

[GeoffreyBooth]

Aren’t you just trying to match exactly <> or </>? So

/(<>)|(<\/>)/

https://regex101.com/r/68Imt8/2

[zdenko]

Yes, something like that. But, the way CSX processing works in the lexer is more complex and I'm trying to reuse existing code by adding RegEx for empty tag <>. This basically means I need to capture `` in <> which is then used for creating `CSX` token and finding the matching closing tag.
I'm working on RegEx improvement at the moment.

[GeoffreyBooth]

Can we also add a test for the example from #4802?

Component = (props) =>
  <Fragment>
    <OtherComponent />
    <OtherComponent />
  </Fragment>

[zdenko]

Done.

[GeoffreyBooth]

I think this could become:

CSX_FRAGMENT_IDENTIFIER = /^((?=>))/ # Ends immediately with `>`.

You’re really only looking for the next character to be >, and capturing a zero-length string so that the regex exec matches. The stuff about “must not start with a number or <“ refers to the identifier inside a normal CSX tag, e.g. the div in <div>. But by definition a fragment has no identifier, so we don’t need to validate one.

[GeoffreyBooth]

You want `>`, not '>`. And don't you think the comment should go outside of the regex? It describes the entire regex.

[GeoffreyBooth]

Actually, it’s odd that this even compiles. I would think that the latter /// would be considered part of the comment, leaving this an unclosed regex.

[lydell]

Looks like you found a bug! #4811

[GeoffreyBooth]

I think this is okay. @vendethiel?

[vendethiel]

why not just /// ^ () > ///?

[zdenko]

I've tried that one before but didn't work. At first, I thought I got it wrong and moved on to the different pattern.
But, now after your suggestion, I took a closer look and actually found a bug in the lexer where start and end CSX tag where compared. The code compares group match of the start tag with the full match of the end tag.
It accidentally worked since they are the same, but it failed on fragment tag since the full match is > and group match is ''.

[GeoffreyBooth]

@vendethiel Did you have any other notes?