Missing React support


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



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.


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