Optional chaining not supported in embedded script

[pmrotule]

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

Optional chaining is currently supported in Javascript files, but not in embedded script (<script> tag in HTML). It is currently treated as a ternary operator which breaks the detection of the closing tag </script> since a colon is expected.

I first reported the issue to language-vue to finally realized it was the case for all embedded scripts:
hedefalk/atom-vue#97

Steps to Reproduce

1. Open a HTML file
2. Within a <script> tag, use the optional chaining operator (i.e. window.test?.something)

Expected behavior: Closing script tag detected

Actual behavior: Closing script tag not detected

Reproduces how often: Always

Versions

Atom: 1.32.2 upgraded to 1.34.0
OS: macOS Mojave version 10.14.3 (18D109)

[Aerijo]

The latest Stable version is 1.34.0; can you see if the issue occurs on that?

[pmrotule]

@Aerijo I'm now on 1.34.0 and the issue still occurs.

[Aerijo]

Oh, actually nothing in Atom "supports" the optional chaining operator (which is still just a proposal?)

One possiblity you see is it just recovering from an error and guessing it's a ternary operator or something. Inspecting the tree, it shows

Without something to copy, I can only guess the cause of your issue. Most likely is you have Tree-sitter parsers disabled (so the above doesn't apply), and the TextMate grammar is looking for the end of the ternary operation (leaks like this are a known issue with the older TextMate grammars, and are "grandfathered" in by the desire to match the TextMate editor's behaviour).

[pmrotule]

I understand that it is still just a proposal, but since it is now supported by Babel and more and more people are using it, it would be great that Atom supports it as well. Moreover, language-javascript is currently supporting optional chaining, so I consider it as an issue if it works in Javascript files, but not within <script> tag in HTML files (or .vue file in my case).

I am unfortunately not familiar with debugging Atom and I don't fully understand your explanation about TextMate grammar (how do you "inspect the tree"?). I'm also not sure how come you have javascript highlighting in an "untitled" file (I personally have no highlighting until I save it as a .js file). Anyway, the issue I'm referring to is only happening within <script> tag in HTML files.

[Aerijo]

That PR was closed, not merged. Optional chaining is not supported yet.

[rsese]

I understand that it is still just a proposal, but since it is now supported by Babel and more and more people are using it, it would be great that Atom supports it as well.

For other things in early stages, we've established that knowing what version of ECMAScript this would land in is our bar of inclusion e.g. see #588 (which was for a stage 3 proposal, looks like optional chaining is earlier at stage 1).

Edit: this is also not parsed by Tree-sitter so https://github.com/tree-sitter/tree-sitter-javascript would also need to be updated

[molvqingtai]

Now Optional-Chaining is at Stage 4, TypeScript 3.7 has been officially added, and I hope to add support for him in the future

[pieczorx]

Any updates?

[jellevandevelde]

It has been over a year since this ticket was opened. Any updates or timeline yet?

[mattgrosso]

I agree, I'd love to see a resolution to this issue.

[pmrotule]

bump

[Brugarolas]

Any updates?

[veitbjarsch]

Do we have any updates here?

[raphaelparent]

Bumping for updates.

Also is there a package that enables this in the meantime?

[mattgrosso]

Mostly I run into this issue when I'm styling a single file Vue component. After months of being annoyed it finally occurred to me that I can side step this issue by moving my style tag above my script tag. Not a real solution but it's making my life better in the meantime and I though I'd share just in case doing this might help someone else.

[veitbjarsch]

@mattgrosso I've just overcome the issue by installing language-babel. This comes with the support of the latest ECMA features.

[mattgrosso]

@mattgrosso I've just overcome the issue by installing language-babel. This comes with the support of the latest ECMA features.

Thank you! That did the trick.

[chfritz]

Using language-babel instead of language-javascript is not a solution of course and language-babel doesn't work with tree-sitter.

[icecream17]

I think #686 would theoretically work if you deselect "use tree sitters" in settings, and downgrade the tree-sitter version to 12. Currently the tree-sitter fixes don't work, but the non-tree-sitter parser does work.

Currently the pr is blocked and I'm not working on it.