Broken highlighting in Build 3154

[n-kort]

Also posted over at sublimehq/Packages#1302

[Thom1729]

The way that I would fix this is by using the new embed feature, like the core HTML syntax does. This would require updating the syntax definition to the sublime-syntax format, which would break compatibility with ST2. I'm not familiar enough with the tmLanguage format to say whether there is a solution within that system.

[yyx990803]

I'd love to rewrite this using the sublime-syntax format, but currently don't have time to do so myself. If anyone wants to take a stab at it that would be awesome..

[skyronic]

There's a temporary workaround to fix this with the current tmLanguage file: Install the Babel extension and use package manager to disable the JavaScript package (important to disable JS package). This seems to fix it for me. Can you try this @n-kort

[n-kort]

@skyronic doesn't quite work for me:

Just loses all highlighting in the <script/> block. This was after installing the Babel package and adding "JavaScript" to "ignored_packages"...

[skyronic]

@n-kort can you have your cursor somewhere in the script block and press control+shift+p (OSX) or ctrl+alt+shift+p (Windows and Linux).

It should pop up some text. can you paste that here?

[n-kort]

text.html.vue
source.js.embedded.html

with the cursor just after 'bar'

[skyronic]

Ok. I'll send a early version of the syntax definition sometime within 12 hours, hopefully you can try that and tell me if it works for you :)

[skyronic]

@n-kort can you try the instructions from the PR at #109 and tell me if that fixes your issue?

[skyronic]

@n-kort @yyx990803 I can confirm that in the latest dev build of sublime, it seems to be working when I disable JavaScript and install Babel. In fact, I'm thinking the issue is actually with sublime's JS implementation.

Please see https://gfycat.com/anotherseriousfritillarybutterfly for a quick screencast.

[skyronic]

Filed an issue with Sublime for their JS syntax implementation which looks wrong sublimehq/Packages#1309

@Thom1729 if possible, can you verify if my issue is valid and is something that needs to be fixed from Sublime's end?

[n-kort]

@skyronic yep that's what I'm getting too

[Thom1729]

Sublime's JavaScript package has changed. The core JavaScript package's old behavior and the Babel package's behavior are incorrect. The core JavaScript package's new behavior is correct.

Here's another example:

var x, g;
export default {
    foo: 42
}
/x/g;

The Babel package will erroneously mark /x/g as a regular expression literal. The new JavaScript syntax will correctly mark it as an arithmetic expression. If you try it on Babel's online REPL, you will see that this is how Babel treats it as well.

[skyronic]

(comment removed since it was irrelavant and you'd answered the question elsewhere)

[Thom1729]

On the contrary, that is exactly what should happen. Here are near-minimal examples:

export default 2 + 2;
export default 2; + 2;

The first line exports the value of the expression 2 + 2. Adding a semicolon changes the meaning of the second line; now, you have a export statement export default 2; and an expression statement + 2;. In the first line, the + is the binary addition operator, and in the second line it is the unary number coercion operator. The only difference is the semicolon, but the two lines have different interpretations.

Now imagine that there is a line break after the first 2 on each line:

export default 2
+ 2;
export default 2;
+ 2;

The meanings of these statements are not changed by the line break. There are only a few cases in JavaScript where adding a line break will change the meaning of a valid statement, and this is not one of them. Suppose that you are a syntax highlighter and you see:

export default 2

// This space intentionally left blank

You can't assume that the statement will end at the first line break. You can't assume that the statement has ended until you encounter a semicolon (or a line break followed by a token that triggers automatic semicolon insertion). You're still inside an export statement until something kicks you out of it, no matter how long it may take.

The JavaScript syntax can be very unintuitive at times, particularly where missing semicolons are concerned. I would bet good money that the new implementation isn't perfect. But I am very confident that its behavior in this case is correct and that the previous behavior was a bug.

Notwithstanding any of the above, even if everything I've said is wrong and the old behavior was correct, the way that the Vue syntax embeds JavaScript relies implicitly upon a false assumption about the core JavaScript syntax: that when the JavaScript code ends, only the main context will be on the stack. The new JavaScript syntax violates this assumption, resulting in this bug. But it already violated that assumption in other cases, resulting in #101. Fixing JavaScript embedding to use with_prototype or (preferably) embed/escape will resolve both of these bugs and many more.

[alancwoo]

@n-kort @skyronic I can also confirm that disabling the default javascript package and using babel works. However, I personally had to remove and reinstall the babel package for it to work properly. I'm on ST dev channel build 3154

[Thom1729]

@alancwoo This is due to bugs in babel-sublime that have been fixed in the core JavaScript package. If those bugs are ever fixed, the Vue syntax will break when using babel-sublime.

[alancwoo]

Note: Reverting sublime to the stable channel with the core JavaScript package also fixes the issues (Build 3143)

[skyronic]

Hey @n-kort you should be able to install the latest version from package control and should fix the issue. Lemme know if you encounter any other problems with the new highlighting! Closing this issue now.