[Vue] Broken highlighting in Build 3154

[n-kort]

This is with the Vue Syntax Highlighting package installed.

[keith-hall]

Probably you should log this at https://github.com/vuejs/vue-syntax-highlight/issues, though it is probably related to this: https://forum.sublimetext.com/t/dev-build-3153/33014/76

[Thom1729]

It's possible that this could be a result of #1009. The Vue syntax (an old .tmLanguage) is including source.js in several places. It's not using anything like embed or with_prototype, so the JavaScript bundle pushes more contexts onto the stack the Vue syntax won't see the </script> and pop them off. The following should be valid JavaScript:

export default {
    name: 'test'
}
</script>/

export default is followed by an expression and expects a terminating semicolon. If no semicolon is provided, the dreaded automatic semicolon insertion algorithm will insert one somewhere. Here, the braces denote an object literal. There is no semicolon, so it keeps looking. It sees the < and recognizes that it's a valid binary operator, so the expression continues. In this example, it then sees /script>/, which is a regular expression literal. This is all perfectly valid, and I believe the new syntax will handle it .

The posted code is similar, but that the final / is missing. This is not valid JavaScript. The automatic semicolon insertion algorithm cannot fix it. The new JavaScript syntax will, however, do its best, including treating /script as an incomplete regular expression literal. (Ideally, it should also mark it as invalid and pop at the end of the line. I'm working on it.) So the highlighting seen in the code above is correct for plain JavaScript.

However, that code is not plain JavaScript. It is JavaScript embedded in HTML via a <script> tag, When the Vue syntax sees the </script>, it should pop all of the embedded JavaScript contexts. The default HTML syntax does this. It used to use with_prototype; now, I presume it uses the new embed/escape. The Vue syntax does not. As a result, it probably only ever worked by coincidence because of internal implementation details of the old JavaScript syntax. Now that those implementation details have changed, it will not work. This cannot be "fixed" on the JavaScript end, because causing it to produce the desired behavior when embedded in HTML would cause it to highlight ordinary JavaScript incorrectly. Therefore, the Vue syntax should be updated to handle embedded JavaScript more robustly.

Incidentally, try adding a semicolon after the object literal; that might work around the Vue bug by popping the expression and export statement contexts.

[n-kort]

Thanks for the detailed comment @Thom1729, I've posted over at the vuejs repo for now.

Adding a semicolon does indeed fix the highlighting.