Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/compiler/checker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33466,6 +33466,10 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
}

function getJsxElementChildrenPropertyName(jsxNamespace: Symbol): __String | undefined {
if (compilerOptions.jsx === JsxEmit.ReactJSX || compilerOptions.jsx === JsxEmit.ReactJSXDev) {
// In these JsxEmit modes the children property is fixed to 'children'
return "children" as __String;
}
return getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer, jsxNamespace);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
//// [tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx] ////

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

type Element = string;
}

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

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

//// [jsx-runtime.ts]
export {};
//// [jsx-dev-runtime.ts]
export {};

//// [jsx-runtime.js]
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//// [test.js]
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("/jsx/jsx-runtime");
var Title = function (props) { return (0, jsx_runtime_1.jsx)("h1", { children: props.children }); };
var element = (0, jsx_runtime_1.jsx)(Title, { children: "Hello, world!" });
//// [jsx-dev-runtime.js]
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
//// [tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx] ////

=== /jsx.d.ts ===
declare namespace JSX {
>JSX : Symbol(JSX, Decl(jsx.d.ts, 0, 0))

interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(jsx.d.ts, 0, 23))

h1: { children: string }
>h1 : Symbol(IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
>children : Symbol(children, Decl(jsx.d.ts, 2, 9))
}

type Element = string;
>Element : Symbol(Element, Decl(jsx.d.ts, 3, 3))
}

=== /test.tsx ===
const Title = (props: { children: string }) => <h1>{props.children}</h1>;
>Title : Symbol(Title, Decl(test.tsx, 0, 5))
>props : Symbol(props, Decl(test.tsx, 0, 15))
>children : Symbol(children, Decl(test.tsx, 0, 23))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
>props.children : Symbol(children, Decl(test.tsx, 0, 23))
>props : Symbol(props, Decl(test.tsx, 0, 15))
>children : Symbol(children, Decl(test.tsx, 0, 23))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))

const element = <Title>Hello, world!</Title>;
>element : Symbol(element, Decl(test.tsx, 2, 5))
>Title : Symbol(Title, Decl(test.tsx, 0, 5))
>Title : Symbol(Title, Decl(test.tsx, 0, 5))

=== /jsx/jsx-runtime.ts ===

export {};
=== /jsx/jsx-dev-runtime.ts ===

export {};
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
//// [tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx] ////

=== /jsx.d.ts ===
declare namespace JSX {
interface IntrinsicElements {
h1: { children: string }
>h1 : { children: string; }
> : ^^^^^^^^^^^^ ^^^
>children : string
> : ^^^^^^
}

type Element = string;
>Element : string
> : ^^^^^^
}

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

const element = <Title>Hello, world!</Title>;
>element : string
> : ^^^^^^
><Title>Hello, world!</Title> : string
> : ^^^^^^
>Title : (props: { children: string; }) => string
> : ^ ^^ ^^^^^^^^^^^
>Title : (props: { children: string; }) => string
> : ^ ^^ ^^^^^^^^^^^

=== /jsx/jsx-runtime.ts ===

export {};
=== /jsx/jsx-dev-runtime.ts ===

export {};
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
//// [tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx] ////

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

type Element = string;
}

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

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

//// [jsx-runtime.ts]
export {};
//// [jsx-dev-runtime.ts]
export {};

//// [jsx-dev-runtime.js]
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//// [test.js]
"use strict";
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_dev_runtime_1 = require("/jsx/jsx-dev-runtime");
var _jsxFileName = "/test.tsx";
var Title = function (props) { return (0, jsx_dev_runtime_1.jsxDEV)("h1", { children: props.children }, void 0, false, { fileName: _jsxFileName, lineNumber: 1, columnNumber: 47 }, _this); };
var element = (0, jsx_dev_runtime_1.jsxDEV)(Title, { children: "Hello, world!" }, void 0, false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 16 }, this);
//// [jsx-runtime.js]
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
//// [tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx] ////

=== /jsx.d.ts ===
declare namespace JSX {
>JSX : Symbol(JSX, Decl(jsx.d.ts, 0, 0))

interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(jsx.d.ts, 0, 23))

h1: { children: string }
>h1 : Symbol(IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
>children : Symbol(children, Decl(jsx.d.ts, 2, 9))
}

type Element = string;
>Element : Symbol(Element, Decl(jsx.d.ts, 3, 3))
}

=== /test.tsx ===
const Title = (props: { children: string }) => <h1>{props.children}</h1>;
>Title : Symbol(Title, Decl(test.tsx, 0, 5))
>props : Symbol(props, Decl(test.tsx, 0, 15))
>children : Symbol(children, Decl(test.tsx, 0, 23))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
>props.children : Symbol(children, Decl(test.tsx, 0, 23))
>props : Symbol(props, Decl(test.tsx, 0, 15))
>children : Symbol(children, Decl(test.tsx, 0, 23))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))

const element = <Title>Hello, world!</Title>;
>element : Symbol(element, Decl(test.tsx, 2, 5))
>Title : Symbol(Title, Decl(test.tsx, 0, 5))
>Title : Symbol(Title, Decl(test.tsx, 0, 5))

=== /jsx/jsx-runtime.ts ===

export {};
=== /jsx/jsx-dev-runtime.ts ===

export {};
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
//// [tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx] ////

=== /jsx.d.ts ===
declare namespace JSX {
interface IntrinsicElements {
h1: { children: string }
>h1 : { children: string; }
> : ^^^^^^^^^^^^ ^^^
>children : string
> : ^^^^^^
}

type Element = string;
>Element : string
> : ^^^^^^
}

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

const element = <Title>Hello, world!</Title>;
>element : string
> : ^^^^^^
><Title>Hello, world!</Title> : string
> : ^^^^^^
>Title : (props: { children: string; }) => string
> : ^ ^^ ^^^^^^^^^^^
>Title : (props: { children: string; }) => string
> : ^ ^^ ^^^^^^^^^^^

=== /jsx/jsx-runtime.ts ===

export {};
=== /jsx/jsx-dev-runtime.ts ===

export {};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed! Added a test case.

Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
//@jsx: react-jsx,react-jsxdev
//@jsxImportSource: /jsx
//@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>;

//@filename: /jsx/jsx-runtime.ts
export {};
//@filename: /jsx/jsx-dev-runtime.ts
export {};