Wrong grouping in optional chaining with --loader=ts

[AngusFu]

I get some code like

declare var el: HTMLElement | undefined;
const div = el?.querySelector<HTMLDivElement>('div');
const div2 = el?.querySelector('div');

which would be transformed to the following code by esbuild@0.4.3:

const div = (el == null ? void 0 : el.querySelector)("div");
const div2 = el == null ? void 0 : el.querySelector("div");

The script is

echo -e "
  declare var el: HTMLElement | undefined;
  const div = el?.querySelector<HTMLDivElement>('div');
  const div2 = el?.querySelector('div');
" | npx esbuild --target=es2019 --loader=ts

Note: the target es2019 can be changed to any one in es2015 es2016 es2017 es2018 es2019 es2020

However, the first statement const div = (el == null ? void 0 : el.querySelector)("div") would cause a Illegal invocation error in browsers.

Seems that the result is not consistent with the proposal, since there is NO grouping in el?.querySelector<HTMLDivElement>('div')).

Then I paste the same inputs to TypeScript Playground, the result seems to be correct:

Note: the target es2019 can be changed to any one in es2015 es2016 es2017 es2018 es2019 es2020

[evanw]

Thanks for reporting this. This was an unintentional regression due to the work for #156. I will fix this soon.