rouge-ruby / rouge

A pure Ruby code highlighter that is compatible with Pygments
https://rouge.jneen.net/
Other
3.33k stars 735 forks source link

Support type arguments in TSX #1860

Closed tancnle closed 2 years ago

tancnle commented 2 years ago

Add support for type arguments in TSX lexer

Screen Shot 2022-08-26 at 11 50 48 pm

Fixes https://github.com/rouge-ruby/rouge/issues/1833

tancnle commented 2 years ago

👋🏼 @intgr Could you help to validate if this addresses the reported issue? 🙏🏼

intgr commented 2 years ago

It would be hard for me to validate this. I noticed the issue in GitLab syntax highlighting, I don't use the Rouge library directly.

I can provide some more complicated test cases though:

const render = () => (
  <>
    <MyComponent<Type1, Type2> attr={value} foo="bar" />
    <MyComponent<Omit<Type, 'field'>> attr={value} foo="bar" />
    <MyComponent<{field: string}> attr={value} foo="bar" />
    <MyComponent<{field1: Omit<Type1, 'field2'>}, Type2> attr={value} foo="bar" />
  </>
);
intgr commented 2 years ago

The screenshot you provided looks a bit weird.

image

The <> characters around Type have different colors (bright cyan and white). I would expect matching angle brackets to be the same color.

Edit: Oh, it's the same with <> characters in the tag.

tancnle commented 2 years ago

The screenshot you provided looks a bit weird.

@intgr Great catch 💯 The original mixin was incorrect as it does not render the content after the < correctly. I have updated the code and added your suggested test cases. Please let me know what you think 🙏🏼

intgr commented 2 years ago

Thanks for the quick response, looks perfect to me.

tancnle commented 2 years ago

@intgr Heads up, I have split the addition of Typescript utility types to a separate PR and keep this just focusing on the type arguments support.