Skip to content

Commit 16e96f6

Browse files
a-tarasyuka-tarasyuk
authored
feat(47439): omit optional key from jsx output (microsoft#47467)
1 parent cecd8c5 commit 16e96f6

File tree

39 files changed

+156
-63
lines changed

39 files changed

+156
-63
lines changed

‎src/compiler/transformers/jsx.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,10 +242,19 @@ namespace ts {
242242
const nonWhitespaceChildren = getSemanticJsxChildren(children);
243243
const isStaticChildren =
244244
length(nonWhitespaceChildren) > 1 || !!(nonWhitespaceChildren[0] as JsxExpression)?.dotDotDotToken;
245-
const args: Expression[] = [tagName, objectProperties, !keyAttr ? factory.createVoidZero() : transformJsxAttributeInitializer(keyAttr.initializer)];
245+
const args: Expression[] = [tagName, objectProperties];
246+
// function jsx(type, config, maybeKey) {}
247+
// "maybeKey" is optional. It is acceptable to use "_jsx" without a third argument
248+
if (keyAttr) {
249+
args.push(transformJsxAttributeInitializer(keyAttr.initializer));
250+
}
246251
if (compilerOptions.jsx === JsxEmit.ReactJSXDev) {
247252
const originalFile = getOriginalNode(currentSourceFile);
248253
if (originalFile && isSourceFile(originalFile)) {
254+
// "maybeKey" has to be replaced with "void 0" to not break the jsxDEV signature
255+
if (keyAttr === undefined) {
256+
args.push(factory.createVoidZero());
257+
}
249258
// isStaticChildren development flag
250259
args.push(isStaticChildren ? factory.createTrue() : factory.createFalse());
251260
// __source development flag
@@ -259,6 +268,7 @@ namespace ts {
259268
args.push(factory.createThis());
260269
}
261270
}
271+
262272
const element = setTextRange(
263273
factory.createCallExpression(getJsxFactoryCallee(isStaticChildren), /*typeArguments*/ undefined, args),
264274
location

‎tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react-jsx,module=commonjs).js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ var Component = /** @class */ (function () {
2525
function Component() {
2626
}
2727
Component.prototype.render = function () {
28-
return (0, _a.jsx)("div", { children: null /* preserved */ }, void 0);
28+
return (0, _a.jsx)("div", { children: null /* preserved */ });
2929
};
3030
return Component;
3131
}());

‎tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react-jsx,module=system).js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ var Component = /** @class */ (function () {
2525
function Component() {
2626
}
2727
Component.prototype.render = function () {
28-
return _jsx("div", { children: null /* preserved */ }, void 0);
28+
return _jsx("div", { children: null /* preserved */ });
2929
};
3030
return Component;
3131
}());

‎tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@ const element = (
2222
exports.__esModule = true;
2323
var jsx_runtime_1 = require("react/jsx-runtime");
2424
function Wrapper(props) {
25-
return (0, jsx_runtime_1.jsx)("div", { children: props.children }, void 0);
25+
return (0, jsx_runtime_1.jsx)("div", { children: props.children });
2626
}
27-
var element = ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)("div", { children: "Hello" }, void 0) }, void 0));
27+
var element = ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)("div", { children: "Hello" }) }));

‎tests/baselines/reference/jsxJsxsCjsTransformChildren(jsx=react-jsx).js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ export {};
1010
exports.__esModule = true;
1111
var jsx_runtime_1 = require("react/jsx-runtime");
1212
/// <reference path="react16.d.ts" />
13-
var a = (0, jsx_runtime_1.jsx)("div", { children: "text" }, void 0);
13+
var a = (0, jsx_runtime_1.jsx)("div", { children: "text" });

‎tests/baselines/reference/jsxJsxsCjsTransformCustomImport(jsx=react-jsx).js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export {};
1313
exports.__esModule = true;
1414
var jsx_runtime_1 = require("preact/jsx-runtime");
1515
/// <reference path="react16.d.ts" />
16-
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}, void 0), "text", (0, jsx_runtime_1.jsx)("div", { className: "foo" }, void 0)] }, void 0);
16+
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}), "text", (0, jsx_runtime_1.jsx)("div", { className: "foo" })] });

‎tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsx).js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ exports.__esModule = true;
2828
var jsx_runtime_1 = require("preact/jsx-runtime");
2929
/// <reference path="react16.d.ts" />
3030
/* @jsxImportSource preact */
31-
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}, void 0), "text", (0, jsx_runtime_1.jsx)("div", { className: "foo" }, void 0)] }, void 0);
31+
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}), "text", (0, jsx_runtime_1.jsx)("div", { className: "foo" })] });
3232
//// [react.js]
3333
"use strict";
3434
exports.__esModule = true;
3535
var jsx_runtime_1 = require("react/jsx-runtime");
3636
/// <reference path="react16.d.ts" />
3737
/* @jsxImportSource react */
3838
require("./preact");
39-
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}, void 0), "text", (0, jsx_runtime_1.jsx)("div", { className: "foo" }, void 0)] }, void 0);
39+
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}), "text", (0, jsx_runtime_1.jsx)("div", { className: "foo" })] });

‎tests/baselines/reference/jsxJsxsCjsTransformNestedSelfClosingChild(jsx=react-jsx).js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@ console.log(
2525
"use strict";
2626
exports.__esModule = true;
2727
var jsx_runtime_1 = require("react/jsx-runtime");
28-
console.log((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}, void 0) }, void 0));
29-
console.log((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0)] }, void 0));
30-
console.log((0, jsx_runtime_1.jsx)("div", { children: [1, 2].map(function (i) { return (0, jsx_runtime_1.jsx)("div", { children: i }, i); }) }, void 0));
28+
console.log((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}) }));
29+
console.log((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
30+
console.log((0, jsx_runtime_1.jsx)("div", { children: [1, 2].map(function (i) { return (0, jsx_runtime_1.jsx)("div", { children: i }, i); }) }));

‎tests/baselines/reference/jsxJsxsCjsTransformSubstitutesNames(jsx=react-jsx).js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ export {};
99
exports.__esModule = true;
1010
var jsx_runtime_1 = require("react/jsx-runtime");
1111
/// <reference path="react16.d.ts" />
12-
var a = (0, jsx_runtime_1.jsx)("div", {}, void 0);
12+
var a = (0, jsx_runtime_1.jsx)("div", {});

‎tests/baselines/reference/jsxJsxsCjsTransformSubstitutesNamesFragment(jsx=react-jsx).js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export {};
1313
exports.__esModule = true;
1414
var jsx_runtime_1 = require("react/jsx-runtime");
1515
/// <reference path="react16.d.ts" />
16-
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}, void 0), "text", (0, jsx_runtime_1.jsx)("div", {}, void 0)] }, void 0);
16+
var a = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", {}), "text", (0, jsx_runtime_1.jsx)("div", {})] });

0 commit comments

Comments
 (0)