Refactor javascript/typescript/react layer into a single one

[dagadbm]

Hello,

This is merely a suggestion.

I am currently trying to migrate from vscode and friends to spacemacs and one of the things that I think is clearly lacking is a decent javascript layer.

I am not sure this is possible since I don't know a lot about emacs and its ecosystem.

But I wanted to ask if there are any plans on redoing the javascript layer so that it stops using tern and so on and starts using the same thing as vscode and friends: lsp.

This layer would probably end up replacing javascript/typescript/react layers and make the front-end development experience on spacemacs decent.

Let me know what you guys think.

[syl20bnr]

I have a good news for you. We are integrating LSP to Javascript and Typescript. For sure Typescript is operational, last bugs have beed fixed yesterday. Be sure to be on the develop branch and read the README.org file of the Typescript layer.

I'm going to look at the Javacript layer as it may require the same fixes as Typescript. Also we are in the process of remplacing the React layer with rjsx-mode in the Javascript layer.

Stay tune.

dagadbm notifications@github.com writes:

Hello,

This is merely a suggestion.

I am currently trying to migrate from vscode and friends to spacemacs and one of the things that I think is clearly lacking is a decent javascript layer.

I am not sure this is possible since I don't know a lot about emacs and its ecosystem.

But I wanted to ask if there are any plans on redoing the javascript layer so that it stops using tern and so on and starts using the same thing as vscode and friends: lsp.

This layer would probably end up replacing javascript/typescript/react layers and make the front-end development experience on spacemacs decent.

Let me know what you guys think.

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670

[syl20bnr]

I finished to update the javascript layer, LSP support is pretty new so there will be some adjustement needed for sure, feedbacks welcome :-)

Sylvain Benner notifications@github.com writes:

I have a good news for you. We are integrating LSP to Javascript and Typescript. For sure Typescript is operational, last bugs have beed fixed yesterday. Be sure to be on the develop branch and read the README.org file of the Typescript layer.

I'm going to look at the Javacript layer as it may require the same fixes as Typescript. Also we are in the process of remplacing the React layer with rjsx-mode in the Javascript layer.

Stay tune.

dagadbm notifications@github.com writes:

Hello,

This is merely a suggestion.

I am currently trying to migrate from vscode and friends to spacemacs and one of the things that I think is clearly lacking is a decent javascript layer.

I am not sure this is possible since I don't know a lot about emacs and its ecosystem.

But I wanted to ask if there are any plans on redoing the javascript layer so that it stops using tern and so on and starts using the same thing as vscode and friends: lsp.

This layer would probably end up replacing javascript/typescript/react layers and make the front-end development experience on spacemacs decent.

Let me know what you guys think.

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670#issuecomment-388595030

[dagadbm]

so to use it I just need to change to develop branch?

btw last time I did that my spacemacs kept crashing all over the place. what is the safest way to change to develop branch? Also how can I even know why spacemacs crashes? i literally need to kill the process so I get 0 information and just blindly comment on/off configurations :(.

I will try changing to develop branch now

[dagadbm]

i accidentaly closed the issue lol -.-

[sdwolfz]

Here's how to debug a crashing emacs: https://github.com/syl20bnr/spacemacs/wiki/Debugging#debugging-segmentation-faults-with-gdb

[syl20bnr]

Actually I prefer we split raw javascript, Typescript, CoffeeScript, etc... I just extracted CoffeeScript into its own layer and this is way better, see how it simplifies the Javascript layer.

That being said, would it makes sense to put React inside the Javascript layer. Is React different than Typescript or Coffeescript ?

cc @jupl @ztlevi

dagadbm notifications@github.com writes:

Hello,

This is merely a suggestion.

I am currently trying to migrate from vscode and friends to spacemacs and one of the things that I think is clearly lacking is a decent javascript layer.

I am not sure this is possible since I don't know a lot about emacs and its ecosystem.

But I wanted to ask if there are any plans on redoing the javascript layer so that it stops using tern and so on and starts using the same thing as vscode and friends: lsp.

This layer would probably end up replacing javascript/typescript/react layers and make the front-end development experience on spacemacs decent.

Let me know what you guys think.

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670

[ztlevi]

@syl20bnr React uses JSX which is kind of like Typescript. It's defined as a syntax extension to JavaScript.

Your idea sounds good as long as we can properly recommend users to install the layer when they try to open the corresponding file format.

[fiveNinePlusR]

react is a framework for javascript that blends html like syntax with pure javascript. it requires a transpiler to work correctly turning things like <MyComponent someprops="hi"/> into something like React.createElement("MyComponent", {someprops: "hi"}, nil); and then updating things intelligently when state changes. it is basically javascript coupled with html like structures.

[dagadbm]

the main difference is the jsx syntax yeah. technically typescript / coffescript / and all those friends all transpile and so does jsx. so in theory the layer should be called jsx and not react

[dagadbm]

also are you considering adding optional support for things like eslint (eslint_d and running it on save for example) and prettier and so on?

[syl20bnr]

also are you considering adding optional support for things like eslint (eslint_d and running it on save for example) and prettier and so on?

Sure, I was going to add a some kind of option to choose between eslint and lsp when I decided to move CoffeeScript out of the Javascript layer first. Putting transpilers directly in Javascript increase the complexity of the layer and lower the granularity of possible options.

I may continue to work on eslint this evening.

dagadbm notifications@github.com writes:

also are you considering adding optional support for things like eslint (eslint_d and running it on save for example) and prettier and so on?

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670#issuecomment-388652447

[syl20bnr]

so in theory the layer should be called jsx and not react

Interesting, I think you are right, especially when reading the introduction of JSX:

it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like.

dagadbm notifications@github.com writes:

the main difference is the jsx syntax yeah. technically typescript / coffescript / and all those friends all transpile and so does jsx. so in theory the layer should be called jsx and not react

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670#issuecomment-388652403

[ztlevi]

@dagadbm There are two packages out there. https://github.com/prettier/prettier-emacs and https://github.com/evindor/prettier-eslint-emacs. One is for native prettier format and one is for eslint prettier format. Both of them are kind of bound with after-save-hook.

[dagadbm]

I see. One of the things i think is missing is the ability to use the local project eslint isntalled in node_modules (together with the .eslintrc file). which vscode does by default (i think?)

[syl20bnr]

I actually extracted JSON support into its own layer. Makes sense, we already have the YAML layer. The Javascript layer will automatically install the JSON layer as I made the JS layer to depend on it.

I added some goodies for JSON as now it is easier to do it, see commit https://github.com/syl20bnr/spacemacs/commit/e481894fc for mor info

Sylvain Benner sylvain@benner.online writes:

also are you considering adding optional support for things like eslint (eslint_d and running it on save for example) and prettier and so on?

Sure, I was going to add a some kind of option to choose between eslint and lsp when I decided to move CoffeeScript out of the Javascript layer first. Putting transpilers directly in Javascript increase the complexity of the layer and lower the granularity of possible options.

I may continue to work on eslint this evening.

dagadbm notifications@github.com writes:

also are you considering adding optional support for things like eslint (eslint_d and running it on save for example) and prettier and so on?

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670#issuecomment-388652447

[tko]

JSX is the xml-like syntax (elements + attributes) one can embed in the host language source code, most commonly the host language is javascript or typescript and the "semantics" are from react, but I don't think there are any fundamental blockers for host language to be elm/haskell/go/etc. and the semantics being Elm.HTML and what have you, provided there's a compiler pipeline for it.

In general terms, using JSX is roughly

/* host language */ var a =
  /* JSX */ <Element attribute={/* host language again */} />;

wrt spacemacs layers I think the tricky bit may be the "back to host language" escape hatch ({}) as the embedded sections should really get the same major/minor mode goodies as if jsx wasn't used at all. I know very little about emacs major/minor modes but it is my vague understanding only web-mode tries to handle languages embedded within languages case like this, and rjsx-mode doesn't support typescript, only javascript, but I may be mistaken.

[jupl]

@syl20bnr React layer merged with JS makes sense, as typically it is only used with the JS layer anyway. Maybe have a flag to enable/disable React things like the auto detect JS files?

@dagadbm Actually you can get that local support. Right now if you add node-add-modules-path to t in myspacemacs/user-init you get that support. It's disabled by default for security reasons. I made a PR for this but forgot to document the feature. I'll make a PR this week to document that in the JS/HTML/etc. layers.

[syl20bnr]

We will actually keep the current approach with a +framework/react layer.

jupl notifications@github.com writes:

@syl20bnr React layer merged with JS makes sense, as typically it is only used with the JS layer anyway. Maybe have a flag to enable/disable React things like the auto detect JS files?

@dagadbm Actually you can get that local support. Right now if you add node-add-modules-path to t in myspacemacs/user-init you get that support. It's disabled by default for security reasons. I made a PR for this but forgot to document the feature. I'll make a PR this week to document that in the JS/HTML/etc. layers.

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670#issuecomment-388809234

[jakejx]

I've noticed that completion for .jsx files does not work unless I manually activate js2-mode. Is this a bug or an intended feature?

From company-diag, it seems that thecompany-capfbackend is being used. company-lsp does not appear in the list at all.

[ztlevi]

@njunxuan it's due to this line. I've already commented at the commit, you can remove this line to make it work until this is fixed.

[jakejx]

@ztlevi thank you. I can confirm that commenting the line out fixes it.

However, the completion seems to not be working properly. For example, if I type document.li, I receive all completions for document, even though I have already typed the .li.

Not sure if others are experiencing this.

[ztlevi]

@njunxuan I can properly auto-complete this one and others. It might be caused by your other company settings. Comment out those and give a shot.

[jakejx]

@ztlevi what kind of company settings do you suggest I change. Currently my completions look like this .

EDIT: after more investigation, it seems that manually re-enabling RJSX mode fixes the issue. Shall dig more and find out why.

It seems that company-transformers is either being overwritten or lsp-prefix-company-transformer is not being added to the list. However, I have verified that fix-lsp-company-prefix was executed.

PS. how are you getting the little icons btw?

[ztlevi]

@njunxuan I have proper company-transfer once I open a rjsx file. Did you use the latest version of the spacemacs develop? I remember we fix similar issues before. That issue is caused by recursively using hooks to call the function. But we only have one hook now to do it. So it shouldn't be any problem with that...

I install the company-box package comes with the icons in company-mode which also utlize the Emacs 26 childframe feature.

[jakejx]

@ztlevi Hmm I just pulled the latest version and the same issue still arises. I guess I'll stick with just re-enabling RJSX mode for now. Are you able to obtain completions for imported packages like React? Or just built in javascript objects. Am I suppose to get completions or is something wrong with my setup?

[ztlevi]

@njunxuan Maybe try updating packages? You might have the issue related to lsp-javascript package. Take a look at this one. Remember to recompile lsp-javascript-typescript.el once you comment out the line I mentioned in the post.

I don't think lsp-javascript comes with import completion feature but it should be implemented. I have to use npm intellisense package in vscode. But there might be other alternative packges for Emacs. One of them is for emacs is import-js. But it's not for completion purpose.

[ztlevi]

@syl20bnr @njunxuan Dam, I figure out it already comes with import completion. But spacemacs removes the js-mode-hook a while ago. These following hooks are necessary for proper javascript code completions (not sure about other features). I am kind of confused with the js, ts backends setup and how they depend on each other. But as long as we follow the instructions on lsp-javascipt, we should be good to use it.

  (add-hook 'js-mode-hook #'lsp-javascript-typescript-enable)
  (require 'lsp-javascript-flow)
  (add-hook 'js-mode-hook #'lsp-javascript-flow-enable)
  (require 'lsp-typescript)
  (add-hook 'js-mode-hook #'lsp-typescript-enable)

I will open a PR this weekend and try to fix it for javascript, typescript, and rjsx. You and inject these codes in your configuration for now.

It should be ended like this...

[jakejx]

@ztlevi thank you so much for the help so far. Sorry if I was not clear but I meant import completions as in if I typed React.|, where | is my cursor, I will get completions for the React package and its methods.

For now I do not seem to get any completions.

[ztlevi]

@njunxuan It's so weird that lsp-javascript does not have the full understanding of react package. For the following case, I can jump to the createSagaMiddleware definition but neither React, ReactDom is working. But we are able to jump to the package file by jumping to the definition on react,react-dom. That's why we are not able to complete React.| ( | is the cursor). But I guess it's working for packages like react-redux's module.

import React from 'react';
import ReactDOM from 'react-dom';
import createSagaMiddleware from 'redux-saga';

I just open an issue on lsp-javascript.

[jakejx]

@ztlevi Good to know that its not something with my setup then. Hope spacemacs integrates the typescript into React then, since it seems that only the typescript server understands jsx.

[syl20bnr]

I can confirm that commenting the line out fixes it.

Should be fixed now.

I'm confused about this sentence:

Hope spacemacs integrates the typescript into React then, since it seems that only the typescript server understands jsx.

The server is enabled here: https://github.com/syl20bnr/spacemacs/blob/develop/layers/+frameworks/react/funcs.el#L32 Do we have a conflict with the flow server which is enabled as well ?

Junxuan notifications@github.com writes:

@ztlevi I can confirm that commenting the line out fixes it.

However, the completion seems to not be working properly. For example, if I type document.li, I do not get any completions. However, if I company-diag at that point, the correct completions do appear .

Not sure if others are experiencing this.

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/syl20bnr/spacemacs/issues/10670#issuecomment-393570605

[ztlevi]

@syl20bnr He means the lsp-typescript-enable using the following code. I confirm the hooks below are needed to properly auto-complete the modules like this. Maybe it's due to backends need to understand json.

 (add-hook 'js-mode-hook #'lsp-javascript-typescript-enable)
  (require 'lsp-javascript-flow)
  (add-hook 'js-mode-hook #'lsp-javascript-flow-enable)
  (require 'lsp-typescript)
  (add-hook 'js-mode-hook #'lsp-typescript-enable)

I opened a PR here.

[jakejx]

Not sure if anyone else is experiencing this, but typescript lsp does not seem to start when I open a .ts file. Javascript support seems to work fine though.

[ztlevi]

I have the similar error. Looks like it's not enabled correctly for typescript-mode but I couldn't figure out why.

Backtrace:

Debugger entered--Lisp error: (wrong-type-argument lsp--workspace nil)
  signal(wrong-type-argument (lsp--workspace nil))
  lsp-ui-peek--get-references(definitions "textDocument/definition" nil)
  lsp-ui-peek--find-xrefs(enableProdMode definitions "textDocument/definition")
  lsp-ui-peek-find-definitions()
  funcall-interactively(lsp-ui-peek-find-definitions)
  call-interactively(lsp-ui-peek-find-definitions nil nil)
  command-execute(lsp-ui-peek-find-definitions)

And I find some weird behaviors.

• If we hook lsp with typescript-mode under typescript-mode use-package's init:

  (spacemacs/add-to-hooks #'spacemacs//typescript-setup-backend
                       '(typescript-mode-hook
                         typescript-tsx-mode-hook))

  we get the following value of typescript-mode-hook:

  (spacemacs/typescript-yasnippet-setup lsp-mode add-node-modules-path spacemacs//typescript-setup-backend prettier-js-mode spacemacs//init-jump-handlers-typescript-mode)

• If we put the code above under dotspacemacs/user-config, we have typescript-mode-hook:

  (spacemacs//typescript-setup-backend spacemacs/typescript-yasnippet-setup lsp-mode add-node-modules-path prettier-js-mode spacemacs//init-jump-handlers-typescript-mode)

  And this one is working properly!

Note: the position of spacemacs//typescript-setup-backend changed

• I wrap the code with with-eval-after-load 'lsp-mode and I get the same typescript-mode-hook value as the second one. But typescript lsp is still not working.

• If we use local-vars-hook, then both ways are not working.

  I don't know what's going on here...

  I need some help here~ @syl20bnr @fiveNinePlusR @jupl

[ztlevi]

@njunxuan See this PR's last discussion. The last commit should fix typescript lsp problem.

[tavurth]

I like the idea of switching to a pure JS mode, however there are some issues with js2-mode.

First, js2-mode does not support flow: https://github.com/syl20bnr/spacemacs/issues/10716

Second, js2-mode does not support decorators: https://github.com/syl20bnr/spacemacs/issues/11624

Until these are fixed, moving to js2-mode will always feel like a regression to me

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!

[tavurth]

Any progress on this?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!