Typescript / React highlighting broken

[Shelagh-Lewins]

Sublime Text 3 JS Custom v3.0.1

JS Custom has just upgraded, and now syntax highlighting in .tsx files (React with TypeScript) is not working correctly.

Example files:

The screenshot shows two .tsx files. Issues include:

• class and variable names are not highlighted
• incorrect hot pink highlighting in both files
• string quotes not handled correctly

I see this error in the Sublime Text console:

reloading plugin JSCustom.plugin
Traceback (most recent call last):
  File "/opt/sublime_text/sublime_plugin.py", line 125, in reload_plugin
    m = importlib.import_module(modulename)
  File "./python3.3/importlib/__init__.py", line 90, in import_module
  File "<frozen importlib._bootstrap>", line 1584, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1565, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1532, in _find_and_load_unlocked
  File "/opt/sublime_text/sublime_plugin.py", line 1199, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "/home/user/.config/sublime-text-3/Installed Packages/JSCustom.sublime-package/plugin.py", line 7, in <module>
  File "<frozen importlib._bootstrap>", line 1565, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1532, in _find_and_load_unlocked
  File "/opt/sublime_text/sublime_plugin.py", line 1199, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "/home/user/.config/sublime-text-3/Installed Packages/JSCustom.sublime-package/src/paths.py", line 7, in <module>
  File "/home/user/.config/sublime-text-3/Packages/sublime_lib/st3/sublime_lib/resource_path.py", line 238, in from_file_path
    "Path {!r} does not correspond to any resource path.".format(file_path)
ValueError: Path PosixPath('/home/user/.config/sublime-text-3/Installed Packages/JSCustom.sublime-package/src/paths.py') does not correspond to any resource path.

[Thom1729]

Version 3 is supposed to be exclusive to Sublime Text 4. Obviously, things went wrong. As an immediate fix, I've released v3.0.2, which should be identical to v2.4.2.

[Thom1729]

Everything should be fixed in v3.0.3. Have you had a chance to test it?

[Shelagh-Lewins]

v3.0.3 is good for me in ST3. There are still a couple of odd bits of pink highlighting on closing curly brackets, but that's very minor. Thank you!

[Thom1729]

Can you post a code sample? That still sounds like a bug.

[Shelagh-Lewins]

Typically, since I looked this morning everything is now working perfectly! I will post a code sample if I see the issue again.

[Shelagh-Lewins]

Hi, I'm afraid I'm seeing the issue again, with the same error that I reported above in the console, in v3.0.4 from just yesterday...it was working perfectly until then! I did not change any of my ST3 settings. I tried uninstalling JS Custom, but now it seems impossible to reinstall it. When I try to re-install JS Custom from the Package Manager, I see this in the console:

ignored packages updated to: ["JSCustom", "Vintage"]
reloading settings Packages/User/Package Control.sublime-settings
reloading settings Packages/User/Preferences.sublime-settings
Package Control: The dependency 'ruamel-yaml' is not currently installed; installing...
Package Control: The dependency 'ruamel-yaml' is not available
Package Control: The dependency 'ruamel-yaml' could not be installed or updated
ignored packages updated to: ["Vintage"]
reloading settings Packages/User/Package Control.sublime-settings
reloading settings Packages/User/Preferences.sublime-settings
reloading settings Packages/User/Preferences.sublime-settings

When I then look at Installed Packages, JS Custom is not on the list. So it seems like it's not installing. I've tried closing and reopening ST 3 and repeating this loop several times.

This is such a great package - thank you so much for your work. I hope there is some way to get it working again.

[Thom1729]

It looks like there was some kind of temporary Package Control issue that knocked some packages into Needs Review. It was fixed a few hours ago. Can you give it another try?

[Shelagh-Lewins]

Ah, the old Needs Review gotcha - I didn't realise that could affect a package that's already installed. Yes, JS Custom has now installed v3.0.4 but unfortunately I'm seeing this error again in the console when ST3 loads:

Traceback (most recent call last):
  File "/opt/sublime_text/sublime_plugin.py", line 125, in reload_plugin
    m = importlib.import_module(modulename)
  File "./python3.3/importlib/__init__.py", line 90, in import_module
  File "<frozen importlib._bootstrap>", line 1584, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1565, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1532, in _find_and_load_unlocked
  File "/opt/sublime_text/sublime_plugin.py", line 1199, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "/home/shelagh/.config/sublime-text-3/Installed Packages/JSCustom.sublime-package/plugin.py", line 7, in <module>
  File "<frozen importlib._bootstrap>", line 1565, in _find_and_load
  File "<frozen importlib._bootstrap>", line 1532, in _find_and_load_unlocked
  File "/opt/sublime_text/sublime_plugin.py", line 1199, in load_module
    exec(compile(source, source_path, 'exec'), mod.__dict__)
  File "/home/shelagh/.config/sublime-text-3/Installed Packages/JSCustom.sublime-package/src/paths.py", line 7, in <module>
  File "/home/shelagh/.config/sublime-text-3/Packages/sublime_lib/st3/sublime_lib/resource_path.py", line 238, in from_file_path
    "Path {!r} does not correspond to any resource path.".format(file_path)

JS Custom is working somewhat, but I'm seeing some highlighting errors - do you want details of those?

[Thom1729]

That's a bug. It should be fixed in 3.0.5. See #112 for more info.

[Shelagh-Lewins]

Thank you! I had to restart ST3 several times but JS Custom is now running without error, yay!

I am seeing some highlighting issues still?

Objects with property names in quotes:

Template literals:

Should I raise these as a new issue?

[Thom1729]

Are you on v3.0.5? Those examples look like arrow function detection isn't working, which makes me think you might somehow be on an ST4 release. I think I've fixed all of the tag issues that led to ST3 users getting incompatible versions, but it's possible I've missed one.

[Shelagh-Lewins]

Yup, v3.0.5

I am sure the tagging is super complicated!

[Shelagh-Lewins]

I think the issue with object properties in quotes is not just in arrow functions - it looks to me that the quote marks on object properties are not being recognised correctly? I know it's an odd construction but some linters require it, and Material UI child selectors may need quoted object properties also.

[Thom1729]

The highlighting looks broken starting at the beginning of the arrow function, which is why I'm looking at that. Do you have an example that does not involve an arrow function?

I tried the first example in a clean environment with 3.0.5 but could not reproduce. Something weird has to be going on.

[Thom1729]

Also, can you post your examples in text form? The images are helpful as well, but it's easier to debug if I can copy/paste the identical code.

[Shelagh-Lewins]

Yes, sorry I should have thought of that. Here's an example without arrow function:

highlighting.tsx

const myObj = {
'root': {
'position': 'sticky',
    'top': 0,
    'width': '100%',
    'z-index': 100,
    '& > * + *': {
        'marginTop': '10px',
    },
};

The syntax type is JS Custom - TypeScript (JSX)

[Thom1729]

I can't reproduce. I've uninstalled and reinstalled in my ST3 environment and I don't get the errors.

Moreover, I can't think of any reason why those problems would exist. None of the code parsing object keys has changed recently.

A long shot, but is it possible you have overrides for JS Custom in your Packages directory?

[Shelagh-Lewins]

Thank you so much for trying to reproduce this, and I apologise for taking up your time. I am not sure what you mean by overrides in my Packages directory? What should I look for and where? I have a number of linters installed but I don't expect them to override syntax highlighting?

[Thom1729]

Run “Preferences — Browse Packages” from the command palette. This should open your Packages directory in your OS's file browser. Is there a directory named “JSCustom” in there?

For context, installed packages go into a different directory as zipped files.

[Shelagh-Lewins]

Hmm, yes, there is a User > JSCustom directory. Should I remove it, then uninstall and reinstall JS Custom via Package Control?

[Thom1729]

User → JS Custom should be fine; that's where your compiled syntaxes are kept. But I'm out of other hypotheses, so yeah, try uninstalling, removing that directory if it still exists after uninstalling, and reinstalling.

[Shelagh-Lewins]

Oh, this is so weird! I uninstalled JS Custom with the Packages folder open in a file browser; reinstalled JS Custom, went round the loop a couple of times more because the console was showing errors, and now it is working perfectly...it seems like something is intermittently flaky on my system but I don't see how to debug it further.

[Thom1729]

All's well that ends well? 🤷‍♂️

Yeah, it sounds like your install got into some kind of weird state. I have no idea why uninstalling and reinstalling didn't fix it the first time.