JS: Template strings: Increased bracket count of interpolations (#1845)

This increases the number of nested braces which can be matched by JS's template pattern to supported nested objects within interpolation expressions.

components/prism-javascript.js

@@ -61,11 +61,11 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 
 Prism.languages.insertBefore('javascript', 'string', {
 	'template-string': {
-		pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
+		pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|[^\\`])*`/,
 		greedy: true,
 		inside: {
 			'interpolation': {
-				pattern: /\${[^}]+}/,
+				pattern: /\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
 				inside: {
 					'interpolation-punctuation': {
 						pattern: /^\${|}$/,

examples/prism-javascript.html

@@ -73,5 +73,8 @@ <h2>Known failures</h2>
 </p>
 
 <h3>String interpolation containing a closing brace</h3>
-<pre><code>`${ {foo:'bar'}.foo }`
+<pre><code>`${ /* } */ a + b }`
 `${ '}' }`</code></pre>
+
+<h3>String interpolation with deeply nested braces</h3>
+<pre><code>`${foo({ a: { b: { c: true } } })}`</code></pre>

prism.js

@@ -822,11 +822,11 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 
 Prism.languages.insertBefore('javascript', 'string', {
 	'template-string': {
-		pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
+		pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|[^\\`])*`/,
 		greedy: true,
 		inside: {
 			'interpolation': {
-				pattern: /\${[^}]+}/,
+				pattern: /\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
 				inside: {
 					'interpolation-punctuation': {
 						pattern: /^\${|}$/,

tests/languages/javascript/template-string_feature.test

@@ -6,6 +6,9 @@ bar`
 "foo `a` `b` `c` `d` bar"
 "test // test" `template`
 
+console.log(`This is ${it.with({ type: false })}!`)
+`${ {foo:'bar'}.foo }`
+
 ----------------------------------------------------
 
 [
@@ -27,23 +30,63 @@ bar`
 		["string", "`"]
 	]],
 	["template-string", [
-        ["string", "`"],
-        ["interpolation", [
-            ["interpolation-punctuation", "${"],
-            ["function", "foo"],
-            ["punctuation", "("],
-            ["punctuation", ")"],
-            ["interpolation-punctuation", "}"]
-        ]],
-        ["string", "`"]
-    ]],
-    ["string", "\"foo `a` `b` `c` `d` bar\""],
-    ["string", "\"test // test\""],
-    ["template-string", [
-        ["string", "`template`"]
-    ]]
+		["string", "`"],
+		["interpolation", [
+			["interpolation-punctuation", "${"],
+			["function", "foo"],
+			["punctuation", "("],
+			["punctuation", ")"],
+			["interpolation-punctuation", "}"]
+		]],
+		["string", "`"]
+	]],
+	["string", "\"foo `a` `b` `c` `d` bar\""],
+	["string", "\"test // test\""],
+	["template-string", [
+		["string", "`template`"]
+	]],
+
+	"\r\n\r\nconsole",
+	["punctuation", "."],
+	["function", "log"],
+	["punctuation", "("],
+	["template-string", [
+		["string", "`This is "],
+		["interpolation", [
+			["interpolation-punctuation", "${"],
+			"it",
+			["punctuation", "."],
+			["function", "with"],
+			["punctuation", "("],
+			["punctuation", "{"],
+			" type",
+			["punctuation", ":"],
+			["boolean", "false"],
+			["punctuation", "}"],
+			["punctuation", ")"],
+			["interpolation-punctuation", "}"]
+		]],
+		["string", "!`"]
+	]],
+	["punctuation", ")"],
+
+	["template-string", [
+		["string", "`"],
+		["interpolation", [
+			["interpolation-punctuation", "${"],
+			["punctuation", "{"],
+			"foo",
+			["punctuation", ":"],
+			["string", "'bar'"],
+			["punctuation", "}"],
+			["punctuation", "."],
+			"foo ",
+			["interpolation-punctuation", "}"]
+		]],
+		["string", "`"]
+	]]
 ]
 
 ----------------------------------------------------
 
-Checks for single-line and multi-line template strings.
+Checks for single-line and multi-line template strings.