TS 5.8 JSX.ElementChildrenAttribute break

[morlay]

🔎 Search Terms

5.8, return, type

🕗 Version & Regression Information

• This changed between versions 5.7.3 and 5.8

⏯ Playground Link

No response

💻 Code

I defined custom ElementChildrenAttribute, it work well before TS 5.8

declare global {
  namespace JSX {
    // infer children type
    export interface ElementChildrenAttribute {
      $default: {};
    }
  }
}

Once I upgrade to TS 5.8, JSX like below throw the errors.

const $el = <div>test</div>

🙁 Actual behavior

Type { children: Element[]; } is not assignable to type

🙂 Expected behavior

no errors

Additional information about the issue

full custom JSX declare
https://github.com/innoai-tech/vuekit/blob/main/nodepkg/vue-jsx-runtime/src/jsx-runtime.ts#L104-L153

[uhyo]

Hi there, I'm the one who broke this 😨 (#60880)

But I believe the new error is correct.

A bit of history:

In the classic JSX transpilation mode (jsx: "react") the name of the prop for JSX children is up to the createElement function. Custom JSX runtime could use non-children names. The role of ElementChildrenAttribute is to tell TypeScript the name of the prop used by createElement for JSX children.

const $el = React.createElement("div", null, "test");

However, under the modern jsx: "react-jsx" setting, the name of the prop for JSX children is always children and is hardcoded to the transpilation result.

const $el = _jsx("div", { children: "test" });

This means that in the new mode you can't change the name of children. Therein ElementChildrenAttribute plays no role.

This is why I changed so that ElementChildrenAttribute is ignored under the jsx: "react-jsx" mode.

I believe you should stop using ElementChildrenAttribute and find another way to acomplish what you want (sorry, I'm not sure why you've been using ElementChildrenAttribute in your custom JSX runtime)

[morlay]

@uhyo Sure.
I will try to find another way to solve it.

However I think it is undocumented break change.

This feature here so many years 😂
https://www.typescriptlang.org/docs/handbook/jsx.html#children-type-checking

[morlay]

resolved.
just force rename public prop $default which as default slot in vue to children