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

Start with the linked TypeScript Playground reproduction using jsx: preserve and compare its emitted JavaScript with the expected output. Trace the JSX transformation for lowercase intrinsic elements inside an exported namespace. Done means the namespace's exported input remains rather than becoming <form.input />, with a regression test covering the repro.