Skip to content

Ensure whitespace jsx elements are not counted when determining if a jsx child is the only child #40839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 1, 2020
Merged

Ensure whitespace jsx elements are not counted when determining if a jsx child is the only child #40839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5625228
Ensure whitespace jsx elements are not counted when determining if a …
weswigham Sep 29, 2020
3c69c6e
Use filtered children count for deciding constructor used
weswigham Oct 1, 2020
3313c37
Merge branch 'master' into jsx-singleton-transform
weswigham Oct 1, 2020
acac594
Accept updated baselines post-merge
weswigham Oct 1, 2020
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
23 changes: 12 additions & 11 deletions src/compiler/transformers/jsx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ namespace ts {
return currentFileState.filenameDeclaration.name;
}

function getJsxFactoryCalleePrimitive(children: readonly JsxChild[] | undefined): "jsx" | "jsxs" | "jsxDEV" {
return compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsxDEV" : children && children.length > 1 ? "jsxs" : "jsx";
function getJsxFactoryCalleePrimitive(childrenLength: number): "jsx" | "jsxs" | "jsxDEV" {
return compilerOptions.jsx === JsxEmit.ReactJSXDev ? "jsxDEV" : childrenLength > 1 ? "jsxs" : "jsx";
}

function getJsxFactoryCallee(children: readonly JsxChild[] | undefined) {
const type = getJsxFactoryCalleePrimitive(children);
function getJsxFactoryCallee(childrenLength: number) {
const type = getJsxFactoryCalleePrimitive(childrenLength);
return getImplicitImportForName(type);
}

Expand Down Expand Up @@ -191,8 +191,9 @@ namespace ts {
}

function convertJsxChildrenToChildrenPropObject(children: readonly JsxChild[]) {
if (children.length === 1) {
const result = transformJsxChildToExpression(children[0]);
const nonWhitespaceChildren = filter(children, c => !isJsxText(c) || !c.containsOnlyTriviaWhiteSpaces);
if (length(nonWhitespaceChildren) === 1) {
const result = transformJsxChildToExpression(nonWhitespaceChildren[0]);
return result && factory.createObjectLiteralExpression([
factory.createPropertyAssignment("children", result)
]);
Expand Down Expand Up @@ -243,16 +244,16 @@ namespace ts {
objectProperties = singleOrUndefined(segments) || emitHelpers().createAssignHelper(segments);
}

return visitJsxOpeningLikeElementOrFragmentJSX(tagName, objectProperties, keyAttr, children, isChild, location);
return visitJsxOpeningLikeElementOrFragmentJSX(tagName, objectProperties, keyAttr, length(filter(children, c => !isJsxText(c) || !c.containsOnlyTriviaWhiteSpaces)), isChild, location);
}

function visitJsxOpeningLikeElementOrFragmentJSX(tagName: Expression, objectProperties: Expression, keyAttr: JsxAttribute | undefined, children: readonly JsxChild[] | undefined, isChild: boolean, location: TextRange) {
function visitJsxOpeningLikeElementOrFragmentJSX(tagName: Expression, objectProperties: Expression, keyAttr: JsxAttribute | undefined, childrenLength: number, isChild: boolean, location: TextRange) {
const args: Expression[] = [tagName, objectProperties, !keyAttr ? factory.createVoidZero() : transformJsxAttributeInitializer(keyAttr.initializer)];
if (compilerOptions.jsx === JsxEmit.ReactJSXDev) {
const originalFile = getOriginalNode(currentSourceFile);
if (originalFile && isSourceFile(originalFile)) {
// isStaticChildren development flag
args.push(children && children.length > 1 ? factory.createTrue() : factory.createFalse());
args.push(childrenLength > 1 ? factory.createTrue() : factory.createFalse());
// __source development flag
const lineCol = getLineAndCharacterOfPosition(originalFile, location.pos);
args.push(factory.createObjectLiteralExpression([
Expand All @@ -264,7 +265,7 @@ namespace ts {
args.push(factory.createThis());
}
}
const element = setTextRange(factory.createCallExpression(getJsxFactoryCallee(children), /*typeArguments*/ undefined, args), location);
const element = setTextRange(factory.createCallExpression(getJsxFactoryCallee(childrenLength), /*typeArguments*/ undefined, args), location);

if (isChild) {
startOnNewLine(element);
Expand Down Expand Up @@ -335,7 +336,7 @@ namespace ts {
getImplicitJsxFragmentReference(),
childrenProps || factory.createObjectLiteralExpression([]),
/*keyAttr*/ undefined,
children,
length(filter(children, c => !isJsxText(c) || !c.containsOnlyTriviaWhiteSpaces)),
isChild,
location
);
Expand Down
31 changes: 31 additions & 0 deletions tests/baselines/reference/jsxJsxsCjsTransformNestedSelfClosingChild(jsx=react-jsx).js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
//// [jsxJsxsCjsTransformNestedSelfClosingChild.tsx]
/// <reference path="/.lib/react16.d.ts" />
import type * as React from 'react';

console.log(
<div>
<div />
</div>
)

console.log(
<div>
<div />
<div />
</div>
)

console.log(
<div>
{[1, 2].map(i => <div key={i}>{i}</div>)}
</div>
)

//// [jsxJsxsCjsTransformNestedSelfClosingChild.js]
"use strict";
exports.__esModule = true;
var jsx_runtime_js_1 = require("react/jsx-runtime.js");
console.log(jsx_runtime_js_1.jsx("div", { children: jsx_runtime_js_1.jsx("div", {}, void 0) }, void 0));
console.log(jsx_runtime_js_1.jsxs("div", { children: [jsx_runtime_js_1.jsx("div", {}, void 0),
jsx_runtime_js_1.jsx("div", {}, void 0)] }, void 0));
console.log(jsx_runtime_js_1.jsx("div", { children: [1, 2].map(function (i) { return jsx_runtime_js_1.jsx("div", { children: i }, i); }) }, void 0));
62 changes: 62 additions & 0 deletions tests/baselines/reference/jsxJsxsCjsTransformNestedSelfClosingChild(jsx=react-jsx).symbols
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformNestedSelfClosingChild.tsx ===
/// <reference path="react16.d.ts" />
import type * as React from 'react';
>React : Symbol(React, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 1, 11))

console.log(
>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))

<div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

<div />
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

)

console.log(
>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))

<div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

<div />
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

<div />
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

)

console.log(
>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))

<div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

{[1, 2].map(i => <div key={i}>{i}</div>)}
>[1, 2].map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
>map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
>i : Symbol(i, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 16))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
>key : Symbol(key, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 25))
>i : Symbol(i, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 16))
>i : Symbol(i, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 16))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

)
77 changes: 77 additions & 0 deletions tests/baselines/reference/jsxJsxsCjsTransformNestedSelfClosingChild(jsx=react-jsx).types
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformNestedSelfClosingChild.tsx ===
/// <reference path="react16.d.ts" />
import type * as React from 'react';
>React : typeof React

console.log(
>console.log( <div> <div /> </div>) : void
>console.log : (...data: any[]) => void
>console : Console
>log : (...data: any[]) => void

<div>
><div> <div /> </div> : JSX.Element
>div : any

<div />
><div /> : JSX.Element
>div : any

</div>
>div : any

)

console.log(
>console.log( <div> <div /> <div /> </div>) : void
>console.log : (...data: any[]) => void
>console : Console
>log : (...data: any[]) => void

<div>
><div> <div /> <div /> </div> : JSX.Element
>div : any

<div />
><div /> : JSX.Element
>div : any

<div />
><div /> : JSX.Element
>div : any

</div>
>div : any

)

console.log(
>console.log( <div> {[1, 2].map(i => <div key={i}>{i}</div>)} </div>) : void
>console.log : (...data: any[]) => void
>console : Console
>log : (...data: any[]) => void

<div>
><div> {[1, 2].map(i => <div key={i}>{i}</div>)} </div> : JSX.Element
>div : any

{[1, 2].map(i => <div key={i}>{i}</div>)}
>[1, 2].map(i => <div key={i}>{i}</div>) : JSX.Element[]
>[1, 2].map : <U>(callbackfn: (value: number, index: number, array: number[]) => U, thisArg?: any) => U[]
>[1, 2] : number[]
>1 : 1
>2 : 2
>map : <U>(callbackfn: (value: number, index: number, array: number[]) => U, thisArg?: any) => U[]
>i => <div key={i}>{i}</div> : (i: number) => JSX.Element
>i : number
><div key={i}>{i}</div> : JSX.Element
>div : any
>key : number
>i : number
>i : number
>div : any

</div>
>div : any

)
33 changes: 33 additions & 0 deletions tests/baselines/reference/jsxJsxsCjsTransformNestedSelfClosingChild(jsx=react-jsxdev).js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
//// [jsxJsxsCjsTransformNestedSelfClosingChild.tsx]
/// <reference path="/.lib/react16.d.ts" />
import type * as React from 'react';

console.log(
<div>
<div />
</div>
)

console.log(
<div>
<div />
<div />
</div>
)

console.log(
<div>
{[1, 2].map(i => <div key={i}>{i}</div>)}
</div>
)

//// [jsxJsxsCjsTransformNestedSelfClosingChild.js]
"use strict";
var _this = this;
exports.__esModule = true;
var jsx_dev_runtime_js_1 = require("react/jsx-dev-runtime.js");
var _jsxFileName = "tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformNestedSelfClosingChild.tsx";
console.log(jsx_dev_runtime_js_1.jsxDEV("div", { children: jsx_dev_runtime_js_1.jsxDEV("div", {}, void 0, false, { fileName: _jsxFileName, lineNumber: 6, columnNumber: 5 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 4, columnNumber: 13 }, this));
console.log(jsx_dev_runtime_js_1.jsxDEV("div", { children: [jsx_dev_runtime_js_1.jsxDEV("div", {}, void 0, false, { fileName: _jsxFileName, lineNumber: 12, columnNumber: 5 }, this),
jsx_dev_runtime_js_1.jsxDEV("div", {}, void 0, false, { fileName: _jsxFileName, lineNumber: 13, columnNumber: 5 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 10, columnNumber: 13 }, this));
console.log(jsx_dev_runtime_js_1.jsxDEV("div", { children: [1, 2].map(function (i) { return jsx_dev_runtime_js_1.jsxDEV("div", { children: i }, i, false, { fileName: _jsxFileName, lineNumber: 19, columnNumber: 21 }, _this); }) }, void 0, false, { fileName: _jsxFileName, lineNumber: 17, columnNumber: 13 }, this));
62 changes: 62 additions & 0 deletions ...s/baselines/reference/jsxJsxsCjsTransformNestedSelfClosingChild(jsx=react-jsxdev).symbols
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
=== tests/cases/conformance/jsx/jsxs/jsxJsxsCjsTransformNestedSelfClosingChild.tsx ===
/// <reference path="react16.d.ts" />
import type * as React from 'react';
>React : Symbol(React, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 1, 11))

console.log(
>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))

<div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

<div />
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

)

console.log(
>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))

<div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

<div />
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

<div />
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

)

console.log(
>console.log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))
>console : Symbol(console, Decl(lib.dom.d.ts, --, --))
>log : Symbol(Console.log, Decl(lib.dom.d.ts, --, --))

<div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

{[1, 2].map(i => <div key={i}>{i}</div>)}
>[1, 2].map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
>map : Symbol(Array.map, Decl(lib.es5.d.ts, --, --))
>i : Symbol(i, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 16))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))
>key : Symbol(key, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 25))
>i : Symbol(i, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 16))
>i : Symbol(i, Decl(jsxJsxsCjsTransformNestedSelfClosingChild.tsx, 18, 16))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2420, 114))

)
Loading