Can't toggle jsx comments

[bananatranada]

I can comment out fine, but I can't uncomment. It either comments out the comment or leaves the braces intact. I would prefer it if I didn't have to undo every single time.

Is this a bug on my end?

[zertosh]

Unfortunately there are a combination of issues that make this unfixable. There is no such thing as a JSX comment. You can have JSX expressions (curly braces) with JS comments - but that's babel-sublime faking it as a convenience. That fakery bites you when you try to uncomment - as you've noticed. There's an ambiguity there. Since the curly braces are not part of the comment, Sublime leaves them behind.

An alternative would be to scope the JSX expression curly braces as part of the comment. That could result in themes having issues though. It would look like this:

You can try it yourself with this patch:

diff --git a/JavaScript (Babel).sublime-syntax b/JavaScript (Babel).sublime-syntax
index ec9403e..dffd90e 100644
--- a/JavaScript (Babel).sublime-syntax 
+++ b/JavaScript (Babel).sublime-syntax 
@@ -1185,6 +1185,13 @@ contexts:
       scope: invalid.illegal.bad-ampersand.jsx

   jsx-evaluated-code:
+    - match: \{/\*
+      scope: punctuation.definition.comment.begin.js
+      push:
+        - meta_scope: comment.block.js
+        - match: \*/\}
+          scope: punctuation.definition.comment.end.js
+          pop: true
     - match: \{
       scope: punctuation.section.embedded.begin.jsx
       push:

[bananatranada]

Ah that makes sense. Well, after using it for a while, I noticed that manually uncommenting isn't much of an inconvenience, but manually commenting is. So I'll leave it as is and not break anything.

[jcrben]

@zertosh what are the potential issues that you see with themes?

In both vscode and the Jetbrains IntelliJ platform, I can comment jsx as you've shown using a keyboard shortcut. I'm guessing that's what the OP means about toggling.

I think this issue should be revived.

[franciscolourenco]

Can't see JavaScript (Babel).sublime-syntax in the repository. Is the patch outdated?

[Cerberus]

https://github.com/mcissel/React-Comments-Sublime-Text
I have tried this, not so bad : )

[franciscolourenco]

Manual install?

[Cerberus]

I just only paste python file to Sublime Text3/Package and add key blinding on preference file.
Well, I have tried to implement this more.

1. It can comment a statement if cursor not select multi lines. It start add {/* to first character of line(skip indent). (support multi cursors)

<dom>
  {/* <dom /> */}
</dom>

2. If select multi lines it will comment like this

{/*<dom>
   <dom />
</dom>*/}

However, this is deprecated code. I have no refactoring plan. 😅

import sublime, sublime_plugin

class ReactCommentsCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        for region in self.view.sel():

            someUncommented = False
            lines = self.view.lines(region)
            for line in lines:
                if not isCommentLine(self, line):
                    someUncommented = True

            if someUncommented:
                if (len(lines) > 1):
                    addCommentCover(self, edit, lines)
                elif not isCommentLine(self, lines[0]):
                        addComments(self, edit, line, self.view.line(region))
            else:
                removeComments(self, edit, self.view.line(region))


def isCommentLine(self, line):
    if "comment.block.js" in self.view.scope_name(line.begin()):
        return True

    lineStr = self.view.substr(line)
    return "{/*" in lineStr or "*/}" in lineStr or "//" in lineStr


def addCommentCover(self, edit, lines):
    hIndex = lines[0].begin()
    tIndex = lines[-1].end()
    regionStr = self.view.substr(lines[0])
    for i in regionStr:
        if i == '<':
            regionStr = self.view.substr(lines[-1])
            for i in regionStr[::-1]:
                if i == '>':
                    self.view.insert(edit, tIndex, " */}")
                    self.view.insert(edit, hIndex, "{/* ")
                    break
                tIndex -= 1
            break
        hIndex += 1


def addCommentAll(self, edit, line, region):
    regionStr = self.view.substr(region)
    hIndex = line.begin()
    tIndex = line.end()
    for i in regionStr:
        if i != ' ':
            break
        hIndex += 1
    if hIndex != tIndex:  # if this line not only space
        for i in regionStr[::-1]:
            if i != ' ':
                break
            tIndex -= 1
    self.view.insert(edit, tIndex, " */}")
    self.view.insert(edit, hIndex, "{/* ")


def addComments(self, edit, line, region):
    regionStr = self.view.substr(region)
    hIndex = line.begin()
    tIndex = line.end()
    for i in regionStr:
        if i != ' ':
            break
        hIndex += 1
    if not ("<" in regionStr):
        self.view.insert(edit, hIndex, "// ")
        return
    if hIndex != tIndex:  # if this line not only space
        for i in regionStr[::-1]:
            if i != ' ':
                break
            tIndex -= 1
    self.view.insert(edit, tIndex, " */}")
    self.view.insert(edit, hIndex, "{/* ")


def removeComments(self, edit, region):
    regionStr = self.view.substr(region)
    uncommented = regionStr.replace("{/* ", "").replace(" */}", "").replace("// ", "")
    self.view.replace(edit, region, uncommented)

[borela]

It turns out, implementing such a plugin that behaves intuitively when the code is mixed with JSX is not an easy task but I finnally managed to add it to https://github.com/borela/naomi on >= 3.8.0. Relevant issue borela/naomi#23.