Using JSX syntax in a namespace may incorrectly use the exported members of the current namespace as intrinsic elements (starting with a lowercase letter)

🔎 Search Terms

jsx namespace preserve export intrinsic

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about (no entries for this)

⏯ Playground Link

https://www.typescriptlang.org/play/?jsx=1&ts=5.6.3#code/JYWwDg9gTgLgBAbzgKQMoA04F84DMoQhwBEUApgIYDGMxA3AFBkAekscAdhSGQM5jUyeaEQQM4cFm3hUIHXvGAcwAV3gBeTioA22xhKnQZchXBh8NcADxLV8APQA+cXHv2JHz168A9APwMWAxAA

💻 Code

WITH jsx: preserve enabled in tsconfig.json

export namespace form {
  export const input = null;
  export const test = <input />
}

🙁 Actual behavior

generated code:

export var form;
(function (form) {
    form.input = null;
    form.test = <form.input />;
})(form || (form = {}));

🙂 Expected behavior

generated code:

export var form;
(function (form) {
    form.input = null;
    form.test = <input />;
})(form || (form = {}));

Additional information about the issue

In fact, I observed this problem in a certain version of swc (swc does not support preserve mode, and the problem can be reproduced without enabling preserve mode). Considering that swc largely replicates the behavior of tsc, I suspected that this problem also exists in ts, and it is true, but only in jsx: preserve mode