Microsoft/TypeScript

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

Open

#60,365 opened on Oct 29, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (6,726 forks)batch import
BugDomain: JSX/TSXHelp Wanted

Repository metrics

Stars
 (48,455 stars)
PR merge metrics
 (Avg merge 6d 17h) (9 merged PRs in 30d)

Description

🔎 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

Contributor guide

Research direction
Investigate how TypeScript resolves JSX intrinsic elements within namespaces. Focus on the code path that generates the output for JSX preserve mode when a namespace exports a lowercase member with the same name as an HTML element. The issue suggests that the compiler incorrectly uses the exported member instead of the intrinsic element. Examine the relevant parts of the TypeScript checker and emitter, specifically the logic for resolving JSX element types and scope nesting.
Tech stack
typescript
Domain
compilers
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
TypeScriptJSX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40