Page MenuHomePhabricator

Inline comments in multiline JS expressions in Vue templates break in debug mode, but not in non-debug mode
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
In non-debug mode, everything works fine. In debug mode, the Vue app crashes with a syntax error.

What should have happened instead?:
The app should not crash

Software version (skip for WMF-hosted wikis like Wikipedia):
WMF production

Other information (browser name/version, screenshots, etc.):

This happens because our treatment of Vue templates in debug mode eats newlines. In non-debug mode, our output looks like this:

module.exports.template = "<div class=\"quickViewDescription\" :class=\"{\n\t\t\t\/\/ eslint-disable-next-line vue\/camelcase\n\t\t\tquickViewDescription__mobile: isMobile,\n\t\t\t'quickViewDescription--small-font': showSmallFont\n\t\t}\">...etc...<\/div>";

but in debug mode, it looks like this:

module.exports.template = "<div class=\"quickViewDescription\" :class=\"{ \
			\/\/ eslint-disable-next-line vue\/camelcase \
			quickViewDescription__mobile: isMobile, \
			'quickViewDescription--small-font': showSmallFont \
		}\"> \
		...etc... \
	<\/div>";

These extra line breaks are intended to improve readability (and they do), but they result in a different string. JavaScript doesn't interpret a backslash-escaped newline as a newline, it just ignores the newline instead. This causes newlines to be changed to spaces, which is fine for most purposes but breaks JS comments.

We can fix this by adding \n near the end of the line, before the last backslash.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 976318 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] ResourceLoader: Preserve newlines in Vue templates in debug mode

https://gerrit.wikimedia.org/r/976318

Change 976318 merged by jenkins-bot:

[mediawiki/core@master] ResourceLoader: Preserve newlines in Vue templates in debug mode

https://gerrit.wikimedia.org/r/976318

matmarex subscribed.

Looks fixed to me.