Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ResourceLoader: Preserve newlines in Vue templates in debug mode

Browse source 
Ironically, our replacements to improve readability of Vue templates in
debug mode actually ended up eating newlines in the string that is sent
to the Vue template compiler. This caused bugs when inline comments were
used in multi-line JS expressions in templates.

Bug: T351771
Change-Id: I6b3ad5736a836ba75f57a49fd9b7ca2e237074c0
This commit is contained in:
Roan Kattouw 2023-11-21 14:09:47 -08:00
parent 7c1c98d359
commit 0566beabac
2 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
includes/ResourceLoader/FileModule.php
View file

@ -1476,9 +1476,10 @@ class FileModule extends Module {
}
$encodedTemplate = json_encode( $parsedComponent['template'] );
if ( $context->getDebug() ) {
// Replace \n (backslash-n) with space + backslash-newline in debug mode
// Replace \n (backslash-n) with space + backslash-n + backslash-newline in debug mode
// The \n has to be preserved to prevent Vue parser issues (T351771)
// We only replace \n if not preceded by a backslash, to avoid breaking '\\n'
$encodedTemplate = preg_replace( '/(?<!\\\\)\\\\n/', " \\\n", $encodedTemplate );
$encodedTemplate = preg_replace( '/(?<!\\\\)\\\\n/', " \\n\\\n", $encodedTemplate );
// Expand \t to real tabs in debug mode
$encodedTemplate = strtr( $encodedTemplate, [ "\\t" => "\t" ] );
}

22
tests/phpunit/data/resourceloader/vue-component-output-debug.js.txt
View file

@ -6,15 +6,15 @@ module.exports = {
};
}
};;
module.exports.template = "<!-- Outer comment --> \
<div class=\"mw-vue-test\"> \
<!-- \
Inner comment \
with multiple lines \
and tabs \
--> \
<p>Hello\\n<\/p> \
<p>{{ hello }}<\/p> \
<pre> foo\\\n bar \
<\/pre> \
module.exports.template = "<!-- Outer comment --> \n\
<div class=\"mw-vue-test\"> \n\
<!-- \n\
Inner comment \n\
with multiple lines \n\
and tabs \n\
--> \n\
<p>Hello\\n<\/p> \n\
<p>{{ hello }}<\/p> \n\
<pre> foo\\\n bar \n\
<\/pre> \n\
<\/div>";