Custom components in different color (enhancement)

[hex13]

Would it be possible to highlight custom JSX components (which are starting either with upper-case or have dots in itself like this <this.props.component />) in different color that common DOM elements (lower-case)?

In other words instead of this:

I would like to see this (changed via dev tools):

Being able to see instantly where custom elements are will make me easier to read and change JSX templates.

[gandm]

@hex13 Yes seems like a good idea for obvious components beginning <Component> but I'm not sure about <props.component> as it's not a pattern I see frequently used and I guess the component in this case could be an html element? Do you have any examples of this?

[hex13]

https://facebook.github.io/react/docs/jsx-in-depth.html

I'm using this pattern to make Higher Order Components.

In examples in docs namespaced components are uppercase though, but they do work lowercase:
https://jsfiddle.net/69z2wepo/40609/

[gandm]

Thanks. Yes I understand the principle but I would still think that a custom component should have an uppercase component name prefix. I appreciate that the compiler will convert tag names with dots to a create element with that tag name as a variable name but it seems at odds with the conventions of jsx. Maybe I'm wrong but the examples above show this uppercase convention.

I have no control over the colour of an element. I have modified the grammar to highlight uppercase component names as a class. This will work with most syntax themes as they will highlight classes in a distinct colour. But I'm not sure whether to further modify it to highlight dotted tag names as classes before rolling it out.

[hex13]

Ok, at least support for upper cased tags would be good :)

[gandm]

I've just pushed out 2.19.0. It highlights jsx such as <Component> and <this.dottedname.component> as classes.

[hex13]

thanks 👍