Beautifier breaks ES6 nested template strings

[GuilhermeReda]

Hi, I have a file with the following code.

`SELECT
  nextval('${this.options.schema ? `${this.options.schema}.` : ''}"${this.tableName}_${this.autoIncrementField}_seq"'::regclass
) nextval;`

When I format the file, that line becomes

`SELECT
  nextval('${this.options.schema ? `
  $ {
    this.options.schema
  }.
  ` : ''}"${this.tableName}_${this.autoIncrementField}_seq"'::regclass
) nextval;`

it is putting a space between $ and {, and that breaks my code.

[IgorNovozhilov]

+1
I have similar problems.
Before:

      return `${err.name}${err.message?`: ${err.message}`:''}\n${stackLines}`;

After:

      return `${err.name}${err.message?`: $ {
         err.message
      }
      `:''}\n${stackLines}`;

[bitwiseman]

Please point to documentation of ${ syntax.

[GuilhermeReda]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

[bitwiseman]

@GuilhermeReda
Your original example is not valid javascript. The ${ notation must occur inside backtick pairs.

// Note the "`" after the first "?" 
`SELECT
  nextval('${this.options.schema ? `${this.options.schema}.` : ''}"${this.tableName}_${this.autoIncrementField}_seq"'::regclass
) nextval;`

I can't tell exactly what you want to do, but this is closer:

`SELECT
  nextval('${this.options.schema ? this.options.schema + '.' : ''} "${this.tableName}_${this.autoIncrementField}_seq"'::regclass
) nextval;`

[bitwiseman]

@INovozhilov
I think you also need to review your code:
Yours:

      return `${err.name}${err.message?`: ${err.message}`:''}\n${stackLines}`;

What I think you meant:

    return `${err.name}${err.message ? err.message : ''}\n${stackLines}`;

[IgorNovozhilov]

No, @bitwiseman, my code is correct.
I used a nested string template:

`: ${err.message}`

in template:

`${err.name}${err.message?...<mySubTemplate>...:''}\n${stackLines}`

The ES6 specification is not prohibited to use nested templates describing them in a block of ${...}.
The same @GuilhermeReda shows in its example SQL.

[IgorNovozhilov]

Here is a simple example of correct template:

var a = '1';
var b = `a is ${ `${ a }` }`;
console.log(b);

output:

a is 1

[GuilhermeReda]

Take a look at https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/

"The code in a template substitution can be any JavaScript expression, so function calls, arithmetic, and so on are allowed. (If you really want to, you can even nest a template string inside another template string, which I call template inception.)"

[bitwiseman]

Every time I think I've seen it all. Okay, I see what would be needed. Recursive Template string parsing. Considering this breaks the code in this case, I'll prioritize it. In the meanwhile, you'll need to use an annotation to disable beautification of that section.

[aleung]

Can I ask how to "use an annotation to disable beautification of that section"? I can't find the answer from readme.

[bitwiseman]

Sorry, I meant "directives":
https://github.com/beautify-web/js-beautify#directives-to-ignore-or-preserve-sections-javascript-only

[midnight-wonderer]

I have another problem related to template string.
If js-beautify encounter some code like this.

let testTable = function() {
    return `CREATE TABLE IF NOT EXISTS some_table (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
label VARCHAR(64) NOT NULL,
PRIMARY KEY (id)
) ENGINE=Aria DEFAULT CHARSET ascii;`;
};

It will add extra linebreak between return and the template which make the function return undefined.

[bitwiseman]

@MidnightWonderer -
"I have another problem" - that is indeed another problem. Please open a separate issue for it. 😄
In that new issue, please include the input, expected output (as you've done), and the actual output.

[IgorNovozhilov]

👍 good job