Missing React support

Hello,

Was is intentional not having React support and having Vue?
Is it in the plans? if so, when?

Thanks

2 Likes

I’m sure Panic will answer here, but if I’m not mistaken, I think Vue is supported because someone wrote an extension for it. In which case, it is probably the same for React.

Yes. Both React and Vue are not built-in languages. There is currently a (very good) Vue extension on the Extension Library thanks to one of our extension developers. I haven’t yet seen one (or heard of someone working on one) for react, however.

2 Likes

I’m curious what you’re looking for when you say “React support”. JSX is built in (there are some issues, but it’s definitely usable), so I haven’t had any trouble working with React projects in Nova.

What additional functionality would you expect from an editor?

So I think the support missing here is actually the Babel / ES6 / JSX / React amalgam.

I’m coming from Sublime, and I’ve tried to use Nova for work a few times now and always bump on the highlighting syntax stuff.

The relevant package for sublime is babel-sublime (https://packagecontrol.io/packages/Babel) and you can see in their screenshots how much that helps with

(I have been planning to sit down and investigate porting that package over if I can, but this ext stuff is out of my wheelhouse)

Here’s my screenshot of the theme I’ve found that I like the best so far vs. the sublime I use every day.

You can see that the JSX stuff is pretty weak sauce in nova (and I need to figure out the styled components css stuff)

And it’s not only all the babel & styled-components amalgam, there are issues even with the “basic” syntax (running Nova 5 right now):

Openings are always properly separated into tsx.tag.open (<), tsx.tag.open.name (div), tsx.tag.open (>), or for HTML they are html.tag.open.paired (< >) and html.tag.name (div), but the closings are treated as a single element.

This is where the parser breaks in several ways: the to key is correct, but className is seen as an identifier (but if I put that line above the to line it works properly), Add as a typescript.identifier.constant and new as a keyword; then the words div in the </div>s below are seen as typescript.identifier, while their <, / and > as operator.

Some attributes are seen as typescript.identifier (key), some as bare-words and all the closing tags suffer from the description above.
2021-03-21 at 07.03.44

This one isn’t really important (altho nice to have), but a number written as 100_000 is treated as a tsx.value.variable, but written as 100000 it would be treated properly as a typescript.value.number

Sure, you can still work with all of this, but the first three issues are rather breaking. This isn’t really the place write about all of this, but maybe @logan also finds the info useful, or can pass it along to the team that might need it.

1 Like