Null coalesce breaks highlighting in template string (Javascript/Typescript)

[Kcazer]

Name of the lexer
Typescript and Javascript lexers

The lexer fails when using the null coalesce operator ?? inside a template string.
All of the code after the end of the string is colored as if it was part of a giant string.

Code sample

// Get value or undefined
const value = getValue();
const content = `Value is ${value ?? 'not set'}`;
const description = "Highlighting is broken now";

// Comments
console.log('And appears a a giant string');

Same code on rouge.jneen.net :

[pyrmont]

@Kcazer Thanks for the report. Will take a look!

[donocode]

The same problem occurs for the optional chaining operator

const test = { }
console.log(`something ${test?.value}`);
const description = "Highlighting is broken now";

[pyrmont]

@Kcazer I've submitted a PR to the TypeScript lexer that fixes the use of ?? in template strings.

In terms of the JavaScript lexer, our approach with proposals to the JavaScript spec is to wait until they are accepted before incorporating them into the lexer. This is the reason optional chaining is only supported in the TypeScript lexer at this stage (see #1420).

[donocode]

Hi @pyrmont I was referring to Typescript for the optional chaining operator but I was mistaken, it is only broken in tsx (which is also called "Typescript") in the rouge preview site. See a broken example of optional chaining in tsx

[pyrmont]

@donocode Ah, fair point about the TSX lexer (coincidentally, the next release of Rouge will fix the name :D). Will get the optional chaining working there, too!

[pyrmont]

@Kcazer This has been added to the TypeScript lexer. Furthermore, it's been done in a way so that the TSX lexer will also recognise the operator.

@donocode I've moved the code prepending the optional chaining operator to the TypeScript common module and so now works in both the TypeScript and TSX lexers. This is also the case for the nullish coalescing operator.

A version of Rouge with these changes, v3.20.0, is scheduled for release on Tuesday 9 June. Thanks for the bug reports! This helps make Rouge better 👍

[Hxuhao233]

Hi, @pyrmont
Could you add this feature in the javascript parser too? It seems to be a common usage.

sample:

const optional = `code${window?.console ?? true}`;
const java = 12;
const classes = `header ${ isLargeScreen() ? '' :
  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

Same code on rouge.jneen.net

Related Links
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#nesting_templates

[pyrmont]

@Hxuhao233 I'm no longer a maintainer on this project so I'm afraid I'm not the right person to ask any more. I'm sorry :(

Oh, and given the age of the earlier issue, I'd suggest opening a new one for this.

[Hxuhao233]

@Hxuhao233 I'm no longer a maintainer on this project so I'm afraid I'm not the right person to ask any more. I'm sorry :(

Oh, and given the age of the earlier issue, I'd suggest opening a new one for this.

Thanks for the reply, I will open a new issue