Is there a way to preserve string delimiters?

[Pomax]

I noticed that esbuild produces a bundle where all my backticks are replaced by single quotes, so that this:

        const descClass = `graphics-element-description`;

turns into this

m = 'graphics-element-description';

And I understand the variable rename, that saves a bunch of bytes, but replacing one string delimiter for another does not help make the code smaller (they're all one byte), nor does it make the resulting code execute any faster. However, it does make it needlessly more work to search for bits of erroneous code involving strings.

Is there a way to tell esbuild to not touch string delimiters?

[evanw]

No, there isn't a way to preserve string delimiters.

String literals behave exactly the same as no-substitution template literals at run-time, so esbuild treats them as equivalent and may turn either one into the other one depending on the situation. For example, esbuild may turn "\'\"" into `'"` and `\`` into "`" because it's shorter, just like esbuild may transform '\'' into "'" and "\"" into '"'. Furthermore, even when it doesn't result the output using fewer characters, consistently using the same quote character whenever possible may help the resulting code compress to a smaller size after minification.

Can you say more about why you consider string literals to be not equivalent to no-substitution template literals?

[merceyz]

nor does it make the resulting code execute any faster

However it can make compiling it faster nodejs/node#41448.

[Pomax]

An excellent explanation

That makes a lot of sense. However, it would still be nice if that was something I could configure to not happen (or even say which delimiter to use, since different projects have different rules concerning those, so most projects with linting will already fairly consistently use ' or " or ` )

Can you say more about why you consider string literals to be not equivalent to no-substitution template literals?

It mostly matters during the dev process: if I'm debugging in the browser, and there's an error, the fastest way to find it in the source is to just copy a stretch of text and find-in-file with that. Selecting that stretch with quotation marks (and usually the preceding = as well) is a decided faster action than having to carefully select the text inside the quotation marks, and so this is really only a problem when something unexpected goes wrong in staging or as a review app, but when it does go wrong, those quotes make an already unexpected time sink take that tiny bit longer, but that's exactly the time when any little holdup feels like minutes =)

And to explain things a little further: normally you can just use sourcemaps. No problem there, but I'm working on a project that's essentially an in-browser transpiler, turning graphics code into JS modules that then get dynamically imported so they can run as on-page graphics. In that context, there are no source maps, and stack traces can be surprisingly useless depending on the browser, so finding the source of bugs turns into a more manual process.

[evanw]

It sounds like when you're debugging, you're saying that you prefer code that's more optimized for human readability than for machine consumption.

The good news is that esbuild already does have the ability to preserve ` in no-substitution template literals, and in fact does so by default. You're only seeing esbuild convert ` to " because you have minification enabled (specifically the --minify-syntax setting tells esbuild to try to change your syntax to equivalent syntax that's more optimized for running in production, which is what esbuild is doing here). When debugging, I recommend not passing --minify-syntax to esbuild so that the generated code easier to debug. You can compare this vs. this to see the difference for yourself.

[Pomax]

that's fair, cheers!