fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev` #60880

uhyo · 2024-12-30T05:34:07Z

Happy Holidays! Fixes #60572

🖼️ Background

Under jsx: react-jsx or jsx: react-jsxdev, the name of the prop for JSX children is always children. The jsx transformer properly implements this:

TypeScript/src/compiler/transformers/jsx.ts

Line 308 in 56a0825

return result && factory.createPropertyAssignment("children", result);

However, the type checker didin't take this into consideration. Instead, it used JSX.ElementChildrenAttribute to determine the name of prop. If type definition lacks this interface, undesirable compiler errors are emitted (like the one mentioned in the linked issue).

It is of note that, I believe, no practical type definition for JSX libraries ever provided such definition that would lead to errors like those.

That said, I think the current behavior is still a bit harmful to those who want to learn how to write type definitions for JSX libraries, so proposing a fix.

🦾 Solution

This PR fixes the getJsxElementChildrenPropertyName function so that children is hard-coded under these jsx modes.

🌵 Current Behavior

code:

//@filename: /jsx.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    h1: { children: string }
  }

  type Element = string;
}

//@filename: /test.tsx
const Title = (props: { children: string }) => <h1>{props.children}</h1>;

const element = <Title>Hello, world!</Title>;

Errors:

    const Title = (props: { children: string }) => <h1>{props.children}</h1>;
                                                    ~~
!!! error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: string; }'.
!!! related TS2728 /jsx.d.ts:3:11: 'children' is declared here.

    const element = <Title>Hello, world!</Title>;
                     ~~~~~
!!! error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: string; }'.
!!! related TS2728 /test.tsx:1:25: 'children' is declared here.

✨ New Behavior

(No error)

…ct-jsxdev

Andarist · 2024-12-30T10:54:57Z

tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx

it might be good to add a test case that defines ElementChildrenAttribute as something different than children to verify that it's ignored in favor of "hard-coded" children

Indeed! Added a test case.

…react-jsx and react-jsxdev

jakebailey · 2025-01-18T06:09:21Z

@typescript-bot test it

typescript-bot · 2025-01-18T06:09:26Z

Starting jobs; this comment will be updated as builds start and complete.

Command	Status	Results
`test top400`	✅ Started	✅ Results
`user test this`	✅ Started	✅ Results
`run dt`	✅ Started	✅ Results
`perf test this faster`	✅ Started	👀 Results

typescript-bot · 2025-01-18T06:38:00Z

@jakebailey Here are the results of running the user tests with tsc comparing main and refs/pull/60880/merge:

Everything looks good!

typescript-bot · 2025-01-18T06:38:37Z

Hey @jakebailey, the results of running the DT tests are ready.

Everything looks the same!

You can check the log here.

typescript-bot · 2025-01-18T06:56:06Z

@jakebailey
The results of the perf run you requested are in!

Here they are:

tsc

Comparison Report - baseline..pr

_Metric	_baseline	_pr	_Delta	_Best	_Worst	_p-value
_{Compiler-Unions - node (v18.15.0, x64)}
_Errors	₃₄	₃₄	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_62,390	_62,390	_~	_~	_~	_{p=1.000 n=6}
_Types	_50,395	_50,395	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{196,172k (± 0.84%)}	_{195,623k (± 0.99%)}	_~	_193,002k	_196,909k	_{p=0.810 n=6}
_{Parse Time}	_{1.62s (± 0.64%)}	_{1.61s (± 0.61%)}	_~	_1.60s	_1.62s	_{p=0.437 n=6}
_{Bind Time}	_{0.87s (± 1.34%)}	_{0.88s (± 1.56%)}	_~	_0.86s	_0.90s	_{p=0.563 n=6}
_{Check Time}	_{11.78s (± 0.57%)}	_{11.79s (± 0.72%)}	_~	_11.70s	_11.93s	_{p=1.000 n=6}
_{Emit Time}	_{3.32s (± 3.48%)}	_{3.33s (± 3.54%)}	_~	_3.25s	_3.56s	_{p=0.872 n=6}
_{Total Time}	_{17.59s (± 0.68%)}	_{17.61s (± 0.98%)}	_~	_17.43s	_17.91s	_{p=1.000 n=6}
_{angular-1 - node (v18.15.0, x64)}
_Errors	₃₇	₃₇	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_947,969	_947,969	_~	_~	_~	_{p=1.000 n=6}
_Types	_410,955	_410,955	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{1,225,865k (± 0.01%)}	_{1,225,847k (± 0.00%)}	_~	_1,225,737k	_1,225,902k	_{p=0.575 n=6}
_{Parse Time}	_{8.05s (± 0.54%)}	_{8.08s (± 1.00%)}	_~	_7.94s	_8.14s	_{p=0.261 n=6}
_{Bind Time}	_{2.29s (± 0.89%)}	_{2.28s (± 0.82%)}	_~	_2.26s	_2.31s	_{p=0.286 n=6}
_{Check Time}	_{38.23s (± 0.31%)}	_{38.16s (± 0.42%)}	_~	_37.94s	_38.37s	_{p=0.572 n=6}
_{Emit Time}	_{18.37s (± 0.33%)}	_{18.28s (± 0.57%)}	_~	_18.21s	_18.46s	_{p=0.170 n=6}
_{Total Time}	_{66.93s (± 0.18%)}	_{66.80s (± 0.11%)}	_{-0.13s (- 0.20%)}	_66.66s	_66.88s	_{p=0.045 n=6}
_{mui-docs - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_2,444,602	_2,444,602	_~	_~	_~	_{p=1.000 n=6}
_Types	_896,634	_896,634	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{2,305,803k (± 0.00%)}	_{2,305,854k (± 0.00%)}	_~	_2,305,700k	_2,306,005k	_{p=0.230 n=6}
_{Parse Time}	_{10.78s (± 0.52%)}	_{10.80s (± 0.50%)}	_~	_10.73s	_10.89s	_{p=0.688 n=6}
_{Bind Time}	_{2.53s (± 0.61%)}	_{2.54s (± 0.63%)}	_~	_2.51s	_2.55s	_{p=0.365 n=6}
_{Check Time}	_{88.18s (± 0.86%)}	_{88.51s (± 1.93%)}	_~	_87.27s	_91.26s	_{p=0.575 n=6}
_{Emit Time}	_{0.35s (± 2.98%)}	_{0.35s (± 2.14%)}	_~	_0.34s	_0.36s	_{p=0.437 n=6}
_{Total Time}	_{101.84s (± 0.71%)}	_{102.20s (± 1.66%)}	_~	_100.87s	_104.89s	_{p=0.689 n=6}
_{self-build-src - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_1,228,459	_1,228,459	_~	_~	_~	_{p=1.000 n=6}
_Types	_266,873	_266,873	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{2,971,149k (±10.01%)}	_{2,996,101k (± 7.83%)}	_~	_2,516,543k	_3,092,967k	_{p=0.689 n=6}
_{Parse Time}	_{8.34s (± 1.32%)}	_{8.34s (± 0.97%)}	_~	_8.21s	_8.40s	_{p=1.000 n=6}
_{Bind Time}	_{2.65s (± 2.50%)}	_{2.65s (± 1.11%)}	_~	_2.62s	_2.70s	_{p=0.936 n=6}
_{Check Time}	_{53.21s (± 0.43%)}	_{53.19s (± 0.83%)}	_~	_52.35s	_53.67s	_{p=1.000 n=6}
_{Emit Time}	_{4.28s (± 3.33%)}	_{4.27s (± 1.67%)}	_~	_4.17s	_4.34s	_{p=1.000 n=6}
_{Total Time}	_{68.49s (± 0.33%)}	_{68.45s (± 0.80%)}	_~	_67.41s	_69.03s	_{p=0.810 n=6}
_{self-build-src-public-api - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_1,228,459	_1,228,459	_~	_~	_~	_{p=1.000 n=6}
_Types	_266,873	_266,873	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{3,036,422k (± 9.76%)}	_{2,673,339k (±14.00%)}	_~	_2,430,659k	_3,157,378k	_{p=0.173 n=6}
_{Parse Time}	_{7.06s (± 0.80%)}	_{6.87s (± 1.42%)}	_{-0.19s (- 2.67%)}	_6.75s	_6.98s	_{p=0.005 n=6}
_{Bind Time}	_{2.13s (± 1.47%)}	_{2.15s (± 0.96%)}	_~	_2.13s	_2.18s	_{p=0.518 n=6}
_{Check Time}	_{42.95s (± 0.52%)}	_{42.86s (± 0.47%)}	_~	_42.67s	_43.13s	_{p=0.471 n=6}
_{Emit Time}	_{3.50s (± 2.05%)}	_{3.43s (± 2.32%)}	_~	_3.36s	_3.58s	_{p=0.173 n=6}
_{Total Time}	_{55.65s (± 0.51%)}	_{55.31s (± 0.58%)}	_~	_55.05s	_55.81s	_{p=0.128 n=6}
_{self-compiler - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_262,628	_262,628	_~	_~	_~	_{p=1.000 n=6}
_Types	_106,697	_106,697	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{440,819k (± 0.03%)}	_{440,779k (± 0.02%)}	_~	_440,659k	_440,971k	_{p=0.575 n=6}
_{Parse Time}	_{3.56s (± 0.81%)}	_{3.54s (± 0.61%)}	_~	_3.52s	_3.57s	_{p=0.625 n=6}
_{Bind Time}	_{1.32s (± 1.07%)}	_{1.32s (± 0.93%)}	_~	_1.30s	_1.33s	_{p=0.564 n=6}
_{Check Time}	_{18.98s (± 0.26%)}	_{19.02s (± 0.54%)}	_~	_18.90s	_19.17s	_{p=0.470 n=6}
_{Emit Time}	_{1.52s (± 0.99%)}	_{1.52s (± 1.27%)}	_~	_1.49s	_1.54s	_{p=1.000 n=6}
_{Total Time}	_{25.38s (± 0.25%)}	_{25.41s (± 0.47%)}	_~	_25.28s	_25.57s	_{p=0.936 n=6}
_{ts-pre-modules - node (v18.15.0, x64)}
_Errors	₇₀	₇₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_226,095	_226,095	_~	_~	_~	_{p=1.000 n=6}
_Types	_94,488	_94,488	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{371,625k (± 0.01%)}	_{371,624k (± 0.01%)}	_~	_371,556k	_371,679k	_{p=0.810 n=6}
_{Parse Time}	_{2.33s (± 0.35%)}	_{2.32s (± 0.57%)}	_~	_2.31s	_2.34s	_{p=0.507 n=6}
_{Bind Time}	_{1.33s (± 0.61%)}	_{1.35s (± 1.75%)}	_~	_1.33s	_1.38s	_{p=0.270 n=6}
_{Check Time}	_{13.71s (± 0.25%)}	_{13.71s (± 0.28%)}	_~	_13.66s	_13.77s	_{p=1.000 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{17.37s (± 0.18%)}	_{17.39s (± 0.23%)}	_~	_17.35s	_17.46s	_{p=0.629 n=6}
_{vscode - node (v18.15.0, x64)}
_Errors	₃	₃	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_3,251,957	_3,251,957	_~	_~	_~	_{p=1.000 n=6}
_Types	_1,119,191	_1,119,191	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{3,317,206k (± 0.00%)}	_{3,317,155k (± 0.00%)}	_~	_3,317,074k	_3,317,223k	_{p=0.229 n=6}
_{Parse Time}	_{11.58s (± 0.20%)}	_{11.59s (± 0.48%)}	_~	_11.52s	_11.69s	_{p=0.686 n=6}
_{Bind Time}	_{3.80s (± 0.49%)}	_{3.79s (± 0.32%)}	_~	_3.78s	_3.81s	_{p=0.323 n=6}
_{Check Time}	_{73.99s (± 0.30%)}	_{74.01s (± 0.23%)}	_~	_73.90s	_74.32s	_{p=0.936 n=6}
_{Emit Time}	_{23.34s (± 0.17%)}	_{23.32s (± 0.25%)}	_~	_23.22s	_23.38s	_{p=0.746 n=6}
_{Total Time}	_{112.71s (± 0.23%)}	_{112.72s (± 0.11%)}	_~	_112.61s	_112.88s	_{p=0.575 n=6}
_{webpack - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_291,595	_291,595	_~	_~	_~	_{p=1.000 n=6}
_Types	_118,971	_118,971	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{445,211k (± 0.01%)}	_{445,216k (± 0.01%)}	_~	_445,152k	_445,274k	_{p=0.936 n=6}
_{Parse Time}	_{3.29s (± 0.50%)}	_{3.29s (± 0.49%)}	_~	_3.27s	_3.31s	_{p=0.623 n=6}
_{Bind Time}	_{1.48s (± 0.85%)}	_{1.47s (± 1.26%)}	_~	_1.45s	_1.50s	_{p=0.565 n=6}
_{Check Time}	_{15.67s (± 0.16%)}	_{15.65s (± 0.29%)}	_~	_15.58s	_15.70s	_{p=0.687 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{20.43s (± 0.13%)}	_{20.42s (± 0.29%)}	_~	_20.33s	_20.47s	_{p=1.000 n=6}
_{xstate-main - node (v18.15.0, x64)}
_Errors	₅	₅	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_555,050	_555,050	_~	_~	_~	_{p=1.000 n=6}
_Types	_186,115	_186,110	_{-5 (- 0.00%)}	_~	_~	_{p=0.001 n=6}
_{Memory used}	_{493,996k (± 0.02%)}	_{494,035k (± 0.01%)}	_~	_493,985k	_494,070k	_{p=0.575 n=6}
_{Parse Time}	_{3.41s (± 0.48%)}	_{3.41s (± 0.60%)}	_~	_3.39s	_3.45s	_{p=0.669 n=6}
_{Bind Time}	_{1.18s (± 1.07%)}	_{1.19s (± 0.68%)}	_~	_1.18s	_1.20s	_{p=0.062 n=6}
_{Check Time}	_{19.72s (± 1.98%)}	_{19.63s (± 0.47%)}	_~	_19.47s	_19.72s	_{p=0.377 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{24.31s (± 1.61%)}	_{24.23s (± 0.40%)}	_~	_24.08s	_24.35s	_{p=0.521 n=6}

System info unknown

Hosts

node (v18.15.0, x64)

Scenarios

Compiler-Unions - node (v18.15.0, x64)
angular-1 - node (v18.15.0, x64)
mui-docs - node (v18.15.0, x64)
self-build-src - node (v18.15.0, x64)
self-build-src-public-api - node (v18.15.0, x64)
self-compiler - node (v18.15.0, x64)
ts-pre-modules - node (v18.15.0, x64)
vscode - node (v18.15.0, x64)
webpack - node (v18.15.0, x64)
xstate-main - node (v18.15.0, x64)

_Benchmark	_Name	_Iterations
_Current	_pr	₆
_Baseline	_baseline	₆

Developer Information:

Download Benchmarks

typescript-bot · 2025-01-18T07:58:34Z

@jakebailey Here are the results of running the top 400 repos with tsc comparing main and refs/pull/60880/merge:

Everything looks good!

uhyo added 2 commits December 30, 2024 13:55

test: add failing test for microsoft#60572

d2bac4b

fix: hard-code JsxElementChildrenPropertyName under react-jsx and rea…

35d0c57

…ct-jsxdev

typescript-bot added the For Backlog Bug PRs that fix a backlog bug label Dec 30, 2024

Andarist reviewed Dec 30, 2024

View reviewed changes

test: add test case to verify ElementChildrenAttribute is ignored in …

3959879

…react-jsx and react-jsxdev

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev` #60880

fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev` #60880

uhyo commented Dec 30, 2024 •

edited

Loading

Andarist Dec 30, 2024

uhyo Dec 30, 2024

jakebailey commented Jan 18, 2025

typescript-bot commented Jan 18, 2025 •

edited

Loading

typescript-bot commented Jan 18, 2025

typescript-bot commented Jan 18, 2025

typescript-bot commented Jan 18, 2025

tsc

typescript-bot commented Jan 18, 2025

fix: do not use JSX.ElementChildrenAttribute under jsx: react-jsx or jsx: react-jsxdev #60880

Are you sure you want to change the base?

fix: do not use JSX.ElementChildrenAttribute under jsx: react-jsx or jsx: react-jsxdev #60880

Conversation

uhyo commented Dec 30, 2024 • edited Loading

🖼️ Background

🦾 Solution

🌵 Current Behavior

✨ New Behavior

Andarist Dec 30, 2024

Choose a reason for hiding this comment

uhyo Dec 30, 2024

Choose a reason for hiding this comment

jakebailey commented Jan 18, 2025

typescript-bot commented Jan 18, 2025 • edited Loading

typescript-bot commented Jan 18, 2025

typescript-bot commented Jan 18, 2025

typescript-bot commented Jan 18, 2025

tsc

typescript-bot commented Jan 18, 2025

fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev` #60880

fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev` #60880

uhyo commented Dec 30, 2024 •

edited

Loading

typescript-bot commented Jan 18, 2025 •

edited

Loading