Use rjsx-mode for react framework

[ztlevi]

Since rjsx-mode is generally considered better mode for react editing, I put the PR to replace the react-mode with rjsx-mode. rjsx-mode will also be enabled for files with =react= imported by using magic-mode-alist.

[ztlevi]

Since we use this method to enable yasnippet in react-mode setup here. This command might need to be added when init yasnippet.

[ztlevi]

As for the failed test, I'm not sure if we need to change the second to the third. It seems like spacemacs-defaults is the second one here while the test assigns the spacemacs-base as the distribution. But I wasn't really change any base distributions in the commits.

configuration-layer--used-layers is a variable defined in ‘core-configuration-layer.el’.
Its value is
(spacemacs-bootstrap spacemacs-defaults spacemacs-base ...)

Documentation:
A non-sorted list of used layer names.

[fiveNinePlusR]

I am curious why you removed company-tern... does completion still work with your changes?

[ztlevi]

My bad. I totally moved to lsp now and I forget to put company-tern back. I am going to fix this and open a new PR for lsp.😂

[ztlevi]

Just added company-tern with rebase.

[ztlevi]

lsp support can be tested through this PR

[ztlevi]

Any thoughts on this PR. From my perspective, I prefer to put rjsx-mode in the Javascript layer because it's just one single package and the JSX file editing is really common across Javascript development.

[fiveNinePlusR]

I think it is probably worth using. are you aware of anything that rjsx-mode can't do compared to react-mode?

[ztlevi]

Not really. I used to use the web-mode but I was running into some troubles that I cannot solve with web-mode. I think it's syntax highlighting doesn't work when pasting. And then, I switch to rjsx-mode.
There are a couple reason I pick rjsx-mode.

1. web-mode is not designed for JSX and I might need more tweaks compared with rjsx-mode
2. rjsx-mode support flow-type.
3. It's just kind of tricky to enable lsp for web-mode because that doesn't really work for html's scripts.

[ztlevi]

Another choice is to put rjsx just under javascript layer since it's a single package added for JSX file editing.

[syl20bnr]

Yes, it could be put under the javascript layer 👍 Ting Zhou <notifications@github.com> writes:

…

Another choice is to put `rjsx` just under `javascript` layer since it's a single package added for JSX file editing. -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: #10627 (comment)

[fiveNinePlusR]

I tested this pr out and the layer does not have lsp support when in rjsx mode. tested by calling lsp-capabilities and I get a message in the bottom saying this buffer does not support lsp mode. switching to js2-mode and doing the above works just fine. any insight as to why that wouldn't work?

[syl20bnr]

Actually let's keep it in `+frameworks/react` for now. We'll see later if another pattern emerges, for now `react` seems the natural way to go. Sylvain Benner <notifications@github.com> writes

…

Yes, it could be put under the javascript layer 👍 Ting Zhou ***@***.***> writes: > Another choice is to put `rjsx` just under `javascript` layer since it's a single package added for JSX file editing. > > -- > You are receiving this because you are subscribed to this thread. > Reply to this email directly or view it on GitHub: > #10627 (comment) -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: #10627 (comment)

[ztlevi]

@fiveNinePlusR did you specify the javascript-backend under javascript layer?

[fiveNinePlusR]

@ztlevi indeed i did and it definitely works under the js2-mode

[ztlevi]

@fiveNinePlusR It should be good to test now. Anyone who familiar with flow-type javascript is welcome to test since I'm not really using it.

lsp-capibilities result for rjsx-mode:

The server provides command execution support
The server provides code actions
The server provides completion support
The server provides project symbol support
The server provides file symbol support
The server provides references support
The server provides goto definition support
The server provides signature help support
The server provides hover support
Document sync method: None

[fiveNinePlusR]

It does work now and the highlighting is working correctly now. i'd say this is good to merge. would be a good idea to implement the extra bindings that this pr will introduce though: #10486 ... probably best to wait until that's merged before introducing it to this layer.

[fiveNinePlusR]

LGTM

[axyz]

didn't try this PR yet, how does it behave with indentation?
as mentioned on #8206 web-mode has in general more consistent indentation, with good prettier/eslint support won't be an issue nowadays, but not everybody will use them.

In general I'm currently trying out mixing webmode and rjsx-mode (waiting for felipeochoa/rjsx-mode#66), maybe is something that can be tried out here as well. It still feel a bit buggy:

• weird copy paste
• not relevant completions polluting the list
• indentation issues
• no autoclose of jsx components

Let me know what's the state in these regards and if could benefit to use rjsx as a minor mode, in general I would also be more than happy to move to a more js specific layer as web-mode is working great on the parsing/indenting side but still feel a bit of a hack and lot of IDE features are not available without rjsx minor mode

[ztlevi]

@axyz I don't have any problem with rjsx-mode while I do remember I have no syntax issue when pasting stuff under web-mode (not sure if this is fixed).

Here are the experiences I have with rjsx-mode:

1. No weird copy paste
2. completions are supported by tern or lsp. lsp in general does more precise completion. If you mean other company-backends pollute completion list, we could remove some of them.
3. It seems like indention are set to 2 by default. There is a PR hasn't been merged. My workflow for formating is using prettier-js-mode which is hooked with after-save-hook so that I don't need to worry about the coding format any more. web-beautify should be good as well.
4. Mentioned in rjsx-mode:

1. < inserts </> whenever it would start a new JSX node (and simply inserts < otherwise).
2. > or C-d right before the slash in a self-closing tag automatically inserts a closing tag and places point inside the element

I disabled C-d in the commits.

Mixing rjsx-mode and web-mode sounds a little bit heavy for me. I don't really have any complaints with rjsx-mode. It's derived from mmm-mode and should be a enough lightweight solution for JSX editing, at least in my case.

[axyz]

cool then, I think we can give it a try and eventually iterate over it. Ideally in the future everything could be included under js layer in order to also have a single place that could enable prettier/eslint/flow/etc... using autodiscovery

[fiveNinePlusR]

1. < inserts </> whenever it would start a new JSX node (and simply inserts < otherwise).
   

2. or C-d right before the slash in a self-closing tag automatically inserts a closing tag and places point inside the element

also, typing the tagname and pressing tab will expand it to the full double enclosing tag.

[fiveNinePlusR]

One thing that I would like is better lsp completion from the associated imported node modules. is that possible currently or on the roadmap?

[syl20bnr]

Thank you ! 👍

I extracted both tern and web-beautify from javascript layer into their own layer. I also simplified the react layer where I could, see the commits following the merge of this PR.

Cherry-picked and squashed into develop branch, you can safely delete your branch.