fix(javascript/typescript): lambda with parens in parameters fails

CHANGES.md

@@ -1,3 +1,13 @@
+## Version 10.1.0 (in progress)
+
+Language Improvements:
+
+- fix(javascript) `=>` function with nested `()` in params now works (#2502) [Josh Goebel][]
+- fix(typescript) `=>` function with nested `()` in params now works (#2502) [Josh Goebel][]
+
+[Josh Goebel]: https://github.com/yyyc514
+
+
 ## Version 10.0.0
 
 New languages:

src/languages/javascript.js

@@ -90,6 +90,10 @@ export default function(hljs) {
     hljs.REGEXP_MODE
   ];
   var PARAMS_CONTAINS = SUBST.contains.concat([
+    // eat recursive parens in sub expressions
+    { begin: /\(/, end: /\)/,
+      contains: ["self", hljs.C_LINE_COMMENT_MODE,hljs.C_BLOCK_COMMENT_MODE]
+    },
     hljs.C_BLOCK_COMMENT_MODE,
     hljs.C_LINE_COMMENT_MODE
   ]);
@@ -175,17 +179,27 @@ export default function(hljs) {
           hljs.REGEXP_MODE,
           {
             className: 'function',
-            begin: '(\\(.*?\\)|' + IDENT_RE + ')\\s*=>', returnBegin: true,
+            // we have to count the parens to make sure we actually have the
+            // correct bounding ( ) before the =>.  There could be any number of
+            // sub-expressions inside also surrounded by parens.
+            begin: '(\\([^(]*' +
+              '(\\([^(]*' +
+                '(\\([^(]*' +
+                '\\))?' +
+              '\\))?' +
+            '\\)|' + hljs.UNDERSCORE_IDENT_RE + ')\\s*=>', returnBegin: true,
             end: '\\s*=>',
             contains: [
               {
                 className: 'params',
                 variants: [
                   {
-                    begin: IDENT_RE
+                    begin: hljs.UNDERSCORE_IDENT_RE
                   },
                   {
+                    className: null,
                     begin: /\(\s*\)/,
+                    skip: true
                   },
                   {
                     begin: /\(/, end: /\)/,

src/languages/typescript.js

@@ -142,24 +142,37 @@ export default function(hljs) {
           hljs.REGEXP_MODE,
           {
             className: 'function',
-            begin: '(\\(.*?\\)|' + hljs.IDENT_RE + ')\\s*=>', returnBegin: true,
+            // we have to count the parens to make sure we actually have the
+            // correct bounding ( ) before the =>.  There could be any number of
+            // sub-expressions inside also surrounded by parens.
+            begin: '(\\([^(]*' +
+              '(\\([^(]*' +
+                '(\\([^(]*' +
+                '\\))?' +
+              '\\))?' +
+            '\\)|' + hljs.UNDERSCORE_IDENT_RE + ')\\s*=>', returnBegin: true,
             end: '\\s*=>',
             contains: [
               {
                 className: 'params',
                 variants: [
                   {
-                    begin: hljs.IDENT_RE
+                    begin: hljs.UNDERSCORE_IDENT_RE
                   },
                   {
+                    className: null,
                     begin: /\(\s*\)/,
+                    skip: true
                   },
                   {
                     begin: /\(/, end: /\)/,
                     excludeBegin: true, excludeEnd: true,
                     keywords: KEYWORDS,
                     contains: [
-                      'self',
+                      // eat recursive parens in sub expressions
+                      { begin: /\(/, end: /\)/,
+                        contains: ["self", hljs.C_LINE_COMMENT_MODE,hljs.C_BLOCK_COMMENT_MODE]
+                      },
                       hljs.C_LINE_COMMENT_MODE,
                       hljs.C_BLOCK_COMMENT_MODE
                     ]

test/markup/javascript/arrow-function.expect.txt

@@ -1,4 +1,13 @@
 <span class="hljs-keyword">var</span> f = <span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> x;
 f(<span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> x + <span class="hljs-function">(<span class="hljs-params">y=<span class="hljs-number">2</span>, z=<span class="hljs-literal">undefined</span>, ...rest</span>) =&gt;</span> y);
-<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-literal">null</span>;
+<span class="hljs-function">() =&gt;</span> <span class="hljs-literal">null</span>;
 <span class="hljs-keyword">const</span> FC = <span class="hljs-function"><span class="hljs-params">props</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>functional component<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>;
+
+<span class="hljs-keyword">const</span> good = <span class="hljs-function">() =&gt;</span> <span class="hljs-number">0</span>;
+<span class="hljs-keyword">const</span> good = <span class="hljs-function">(<span class="hljs-params">x</span>) =&gt;</span> <span class="hljs-number">0</span>;
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function"><span class="hljs-params">a</span> =&gt;</span> [...a, b]);
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function"><span class="hljs-params">_</span> =&gt;</span> doSomething());
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function">() =&gt;</span> <span class="hljs-number">0</span>);
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function">(<span class="hljs-params">a, b</span>) =&gt;</span> [...a, b]);
+<span class="hljs-keyword">const</span> array = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].reduce(<span class="hljs-function">(<span class="hljs-params">acc, next</span>) =&gt;</span> [...acc, next], []);
+sides.every(<span class="hljs-function">(<span class="hljs-params">length,width=(3+2+(4/5))</span>) =&gt;</span> length &gt; <span class="hljs-number">0</span> );

test/markup/javascript/arrow-function.txt

@@ -2,3 +2,13 @@ var f = x => x;
 f(x => x + (y=2, z=undefined, ...rest) => y);
 () => null;
 const FC = props => <p>functional component</p>;
+
+const good = () => 0;
+const good = (x) => 0;
+const bad = (a => [...a, b]);
+const bad = (_ => doSomething());
+const bad = (() => 0);
+const bad = ((a, b) => [...a, b]);
+const array = [1, 2, 3].reduce((acc, next) => [...acc, next], []);
+sides.every((length,width=(3+2+(4/5))) => length > 0 );
+

test/markup/javascript/jsx.expect.txt

@@ -8,8 +8,8 @@
 
 <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">node</span> <span class="hljs-attr">attr</span>=<span class="hljs-string">"value"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">node</span>&gt;</span></span>);
 
-<span class="hljs-keyword">const</span> n = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> /&gt;</span></span>
-<span class="hljs-keyword">const</span> m = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> <span class="hljs-attr">x</span>=<span class="hljs-string">""</span> /&gt;</span></span>
+<span class="hljs-keyword">const</span> n = <span class="hljs-function">() =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> /&gt;</span></span>
+<span class="hljs-keyword">const</span> m = <span class="hljs-function">() =&gt;</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">X</span> <span class="hljs-attr">x</span>=<span class="hljs-string">""</span> /&gt;</span></span>
 
 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
   render() {

test/markup/typescript/functions.expect.txt

@@ -13,3 +13,12 @@
 <span class="hljs-keyword">type</span> Foo = {
     functionInFoo(): <span class="hljs-built_in">void</span>;
 };
+
+<span class="hljs-keyword">const</span> good = <span class="hljs-function">() =&gt;</span> <span class="hljs-number">0</span>;
+<span class="hljs-keyword">const</span> good = <span class="hljs-function">(<span class="hljs-params">x</span>) =&gt;</span> <span class="hljs-number">0</span>;
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function"><span class="hljs-params">a</span> =&gt;</span> [...a, b]);
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function"><span class="hljs-params">_</span> =&gt;</span> doSomething());
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function">() =&gt;</span> <span class="hljs-number">0</span>);
+<span class="hljs-keyword">const</span> bad = (<span class="hljs-function">(<span class="hljs-params">a, b</span>) =&gt;</span> [...a, b]);
+<span class="hljs-keyword">const</span> array = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>].reduce&lt;<span class="hljs-built_in">number</span>[]&gt;(<span class="hljs-function">(<span class="hljs-params">acc, next</span>) =&gt;</span> [...acc, next], []);
+sides.every(<span class="hljs-function">(<span class="hljs-params">length,width=(3+2+(4/5))</span>) =&gt;</span> length &gt; <span class="hljs-number">0</span> );

test/markup/typescript/functions.txt

@@ -13,3 +13,13 @@ function getArray(): number[] {
 type Foo = {
     functionInFoo(): void;
 };
+
+const good = () => 0;
+const good = (x) => 0;
+const bad = (a => [...a, b]);
+const bad = (_ => doSomething());
+const bad = (() => 0);
+const bad = ((a, b) => [...a, b]);
+const array = [1, 2, 3].reduce<number[]>((acc, next) => [...acc, next], []);
+sides.every((length,width=(3+2+(4/5))) => length > 0 );
+