feat(codegen): prefer backquotes over double / single quotes

[sapphi-red]

When thinking about why #8443 made the gzip size increased, I thought it maybe because the backquotes appear more than before the PR. So I changed the codegen to prefer backquotes than double/single quotes. It seems this separate change have a positive effect with some projects.
My guess is that in most projects, back quotes does not appear in string literals than double quotes and single quotes.

The gzipped size slightly increases for bundle.min.js, victory.js, antd.js, but those will be decreased by #8443 except for bundle.min.js.

[sapphi-red]

• feat(minifier): minify String::concat into template literal #8443
• feat(codegen): prefer backquotes over double / single quotes #8839 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• 0-merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codspeed-hq]

CodSpeed Performance Report

Merging #8839 will not alter performance

_{Comparing 02-02-feat_codegen_prefer_backquotes_over_double___single_quotes (b4ee617) with main (84b62c7)}

Summary

✅ 33 untouched benchmarks

[sapphi-red]

It seems I need to add allow_backtick: false to more places for TypeScript codegen. done

[graphite-app]

Merge activity

• Feb 3, 2:20 AM EST: A user added this pull request to the Graphite merge queue.
• Feb 3, 2:25 AM EST: A user merged this pull request with the Graphite merge queue.

[longlho]

@sapphi-red I'm getting an issue/bug with this. The gist of it is we have something like:

const pathRegex = /(['"])((\w+:(\/?\/?))?[^\s,]+)\1/;

  function getImportPath(importFn) {
    return importFn.toString().match(pathRegex)?.[2] ?? null;
  }

  async function withRetry(importFn) {
    try {
      return await importFn();
    } catch {
      const path = getImportPath(importFn);
      if (path) {
        // Retry with cache-busting to bypass stale CDN cache
        return await import(`${path}?r=${Date.now()}`);
      }
      throw new Error('Dynamic import failed');
    }
  }

  // Usage:
  withRetry(() => import("./MyComponent-abc123.js"));

Before minification, importFn.toString() returns () => import("./MyComponent-abc123.js") — the path is extractable. After Rolldown minification, it returns

() => import(`./MyComponent-abc123.js`)

— the regex no longer matches because backticks aren't quotes.

Terser and esbuild both preserve string literal quote types. The minifier should not convert string literals to template literals, as it changes observable behavior via .toString().

Is there a way to opt out of this behavior?

[sapphi-red]

The minifier should not convert string literals to template literals, as it changes observable behavior via .toString().

No minifier preserves the output of Function.prototype.toString and Oxc won't as well.

I guess you can modify the code to handle backquotes as well.

[longlho]

OK that's fair we'll handle this on our side