feat(47439): omit optional key from jsx output (microsoft#47467)

Author: a-tarasyuk

src/compiler/transformers/jsx.ts

@@ -242,10 +242,19 @@ namespace ts {
             const nonWhitespaceChildren = getSemanticJsxChildren(children);
             const isStaticChildren =
                 length(nonWhitespaceChildren) > 1 || !!(nonWhitespaceChildren[0] as JsxExpression)?.dotDotDotToken;
-            const args: Expression[] = [tagName, objectProperties, !keyAttr ? factory.createVoidZero() : transformJsxAttributeInitializer(keyAttr.initializer)];
+            const args: Expression[] = [tagName, objectProperties];
+            // function jsx(type, config, maybeKey) {}
+            // "maybeKey" is optional. It is acceptable to use "_jsx" without a third argument
+            if (keyAttr) {
+                args.push(transformJsxAttributeInitializer(keyAttr.initializer));
+            }
             if (compilerOptions.jsx === JsxEmit.ReactJSXDev) {
                 const originalFile = getOriginalNode(currentSourceFile);
                 if (originalFile && isSourceFile(originalFile)) {
+                    // "maybeKey" has to be replaced with "void 0" to not break the jsxDEV signature
+                    if (keyAttr === undefined) {
+                        args.push(factory.createVoidZero());
+                    }
                     // isStaticChildren development flag
                     args.push(isStaticChildren ? factory.createTrue() : factory.createFalse());
                     // __source development flag
@@ -259,6 +268,7 @@ namespace ts {
                     args.push(factory.createThis());
                 }
             }
+
             const element = setTextRange(
                 factory.createCallExpression(getJsxFactoryCallee(isStaticChildren), /*typeArguments*/ undefined, args),
                 location

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

@@ -25,7 +25,7 @@ var Component = /** @class */ (function () {
     function Component() {
     }
     Component.prototype.render = function () {
-        return (0, _a.jsx)("div", { children: null /* preserved */ }, void 0);
+        return (0, _a.jsx)("div", { children: null /* preserved */ });
     };
     return Component;
 }());

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

@@ -25,7 +25,7 @@ var Component = /** @class */ (function () {
     function Component() {
     }
     Component.prototype.render = function () {
-        return _jsx("div", { children: null /* preserved */ }, void 0);
+        return _jsx("div", { children: null /* preserved */ });
     };
     return Component;
 }());

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

@@ -22,6 +22,6 @@ const element = (
 exports.__esModule = true;
 var jsx_runtime_1 = require("react/jsx-runtime");
 function Wrapper(props) {
-    return (0, jsx_runtime_1.jsx)("div", { children: props.children }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { children: props.children });
 }
-var element = ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)("div", { children: "Hello" }, void 0) }, void 0));
+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

@@ -10,4 +10,4 @@ export {};
 exports.__esModule = true;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /// <reference path="react16.d.ts" />
-var a = (0, jsx_runtime_1.jsx)("div", { children: "text" }, void 0);
+var a = (0, jsx_runtime_1.jsx)("div", { children: "text" });

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

@@ -13,4 +13,4 @@ export {};
 exports.__esModule = true;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 /// <reference path="react16.d.ts" />
-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);
+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

@@ -28,12 +28,12 @@ exports.__esModule = true;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 /// <reference path="react16.d.ts" />
 /* @jsxImportSource preact */
-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);
+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" })] });
 //// [react.js]
 "use strict";
 exports.__esModule = true;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /// <reference path="react16.d.ts" />
 /* @jsxImportSource react */
 require("./preact");
-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);
+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

@@ -25,6 +25,6 @@ console.log(
 "use strict";
 exports.__esModule = true;
 var jsx_runtime_1 = require("react/jsx-runtime");
-console.log((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}, void 0) }, void 0));
-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));
-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));
+console.log((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", {}) }));
+console.log((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }));
+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

@@ -9,4 +9,4 @@ export {};
 exports.__esModule = true;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /// <reference path="react16.d.ts" />
-var a = (0, jsx_runtime_1.jsx)("div", {}, void 0);
+var a = (0, jsx_runtime_1.jsx)("div", {});

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

@@ -13,4 +13,4 @@ export {};
 exports.__esModule = true;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /// <reference path="react16.d.ts" />
-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);
+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", {})] });

tests/baselines/reference/jsxNamespaceGlobalReexport.js

@@ -110,5 +110,5 @@ export const Comp = () => <div></div>;
 exports.__esModule = true;
 exports.Comp = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
-var Comp = function () { return (0, jsx_runtime_1.jsx)("div", {}, void 0); };
+var Comp = function () { return (0, jsx_runtime_1.jsx)("div", {}); };
 exports.Comp = Comp;

tests/baselines/reference/jsxNamespaceGlobalReexportMissingAliasTarget.js

@@ -106,5 +106,5 @@ export const Comp = () => <div></div>;
 exports.__esModule = true;
 exports.Comp = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
-var Comp = function () { return (0, jsx_runtime_1.jsx)("div", {}, void 0); };
+var Comp = function () { return (0, jsx_runtime_1.jsx)("div", {}); };
 exports.Comp = Comp;

tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespace.js

@@ -106,5 +106,5 @@ export const Comp = () => <div></div>;
 exports.__esModule = true;
 exports.Comp = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
-var Comp = function () { return (0, jsx_runtime_1.jsx)("div", {}, void 0); };
+var Comp = function () { return (0, jsx_runtime_1.jsx)("div", {}); };
 exports.Comp = Comp;

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

@@ -69,5 +69,5 @@ export const Comp = () => <div css="color: hotpink;"></div>;
 exports.__esModule = true;
 exports.Comp = void 0;
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var Comp = function () { return (0, jsx_runtime_1.jsx)("div", { css: "color: hotpink;" }, void 0); };
+var Comp = function () { return (0, jsx_runtime_1.jsx)("div", { css: "color: hotpink;" }); };
 exports.Comp = Comp;

tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.js

@@ -71,5 +71,5 @@ exports.__esModule = true;
 exports.Comp = void 0;
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 /* @jsxImportSource @emotion/react */
-var Comp = function () { return (0, jsx_runtime_1.jsx)("div", { css: "color: hotpink;" }, void 0); };
+var Comp = function () { return (0, jsx_runtime_1.jsx)("div", { css: "color: hotpink;" }); };
 exports.Comp = Comp;

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

@@ -17,9 +17,9 @@ exports.__esModule = true;
 exports.Foo = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 function Bar() {
-    return (0, jsx_runtime_1.jsx)("div", {}, void 0);
+    return (0, jsx_runtime_1.jsx)("div", {});
 }
 function Foo() {
-    return (0, jsx_runtime_1.jsx)(Bar, {}, void 0);
+    return (0, jsx_runtime_1.jsx)(Bar, {});
 }
 exports.Foo = Foo;

tests/baselines/reference/reactJsxReactResolvedNodeNext.js

@@ -24,4 +24,4 @@ import './';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.a = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-exports.a = (0, jsx_runtime_1.jsx)("div", {}, void 0);
+exports.a = (0, jsx_runtime_1.jsx)("div", {});

tests/baselines/reference/reactJsxReactResolvedNodeNextEsm.js

@@ -29,4 +29,4 @@ import './';
 
 //// [file.js]
 import { jsx as _jsx } from "react/jsx-runtime";
-export const a = _jsx("div", {}, void 0);
+export const a = _jsx("div", {});

tests/baselines/reference/tsc/react-jsx-emit-mode/initial-build/with-no-backing-types-found-doesn't-crash-under---strict.js

@@ -57,7 +57,7 @@ exitCode:: ExitStatus.DiagnosticsPresent_OutputsGenerated
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tsc/react-jsx-emit-mode/initial-build/with-no-backing-types-found-doesn't-crash.js

@@ -49,7 +49,7 @@ exitCode:: ExitStatus.Success
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/forceConsistentCasingInFileNames/jsxImportSource-option-changed.js

@@ -106,7 +106,7 @@ exitCode:: ExitStatus.undefined
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/incremental/jsxImportSource-backing-types-added-incremental.js

@@ -61,7 +61,7 @@ exitCode:: ExitStatus.DiagnosticsPresent_OutputsGenerated
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/incremental/jsxImportSource-backing-types-added-watch.js

@@ -75,7 +75,7 @@ exitCode:: ExitStatus.undefined
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/incremental/jsxImportSource-backing-types-removed-incremental.js

@@ -73,7 +73,7 @@ exitCode:: ExitStatus.Success
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/incremental/jsxImportSource-backing-types-removed-watch.js

@@ -96,7 +96,7 @@ exitCode:: ExitStatus.undefined
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/incremental/jsxImportSource-option-changed-incremental.js

@@ -96,7 +96,7 @@ exitCode:: ExitStatus.Success
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 
@@ -212,7 +212,7 @@ exitCode:: ExitStatus.DiagnosticsPresent_OutputsGenerated
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

tests/baselines/reference/tscWatch/incremental/jsxImportSource-option-changed-watch.js

@@ -119,7 +119,7 @@ exitCode:: ExitStatus.undefined
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 
@@ -255,7 +255,7 @@ exitCode:: ExitStatus.undefined
 exports.__esModule = true;
 exports.App = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
-var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }, void 0); };
+var App = function () { return (0, jsx_runtime_1.jsx)("div", { propA: true }); };
 exports.App = App;
 
 

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

@@ -0,0 +1,11 @@
+//// [tsxReactEmit8.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+
+<div>1</div>;
+<div key={"key-attr"}>2</div>;
+
+
+//// [tsxReactEmit8.js]
+/// <reference path="react16.d.ts" />
+_jsx("div", { children: "1" });
+_jsx("div", { children: "2" }, "key-attr");

tests/baselines/reference/tsxReactEmit8(jsx=react-jsx).symbols

@@ -0,0 +1,12 @@
+=== tests/cases/conformance/jsx/tsxReactEmit8.tsx ===
+/// <reference path="react16.d.ts" />
+
+<div>1</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+
+<div key={"key-attr"}>2</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+>key : Symbol(key, Decl(tsxReactEmit8.tsx, 3, 4))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+

tests/baselines/reference/tsxReactEmit8(jsx=react-jsx).types

@@ -0,0 +1,15 @@
+=== tests/cases/conformance/jsx/tsxReactEmit8.tsx ===
+/// <reference path="react16.d.ts" />
+
+<div>1</div>;
+><div>1</div> : JSX.Element
+>div : any
+>div : any
+
+<div key={"key-attr"}>2</div>;
+><div key={"key-attr"}>2</div> : JSX.Element
+>div : any
+>key : string
+>"key-attr" : "key-attr"
+>div : any
+

tests/baselines/reference/tsxReactEmit8(jsx=react-jsxdev).js

@@ -0,0 +1,12 @@
+//// [tsxReactEmit8.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+
+<div>1</div>;
+<div key={"key-attr"}>2</div>;
+
+
+//// [tsxReactEmit8.js]
+const _jsxFileName = "tests/cases/conformance/jsx/tsxReactEmit8.tsx";
+/// <reference path="react16.d.ts" />
+_jsxDEV("div", { children: "1" }, void 0, false, { fileName: _jsxFileName, lineNumber: 1, columnNumber: 1 }, this);
+_jsxDEV("div", { children: "2" }, "key-attr", false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 14 }, this);

tests/baselines/reference/tsxReactEmit8(jsx=react-jsxdev).symbols

@@ -0,0 +1,12 @@
+=== tests/cases/conformance/jsx/tsxReactEmit8.tsx ===
+/// <reference path="react16.d.ts" />
+
+<div>1</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+
+<div key={"key-attr"}>2</div>;
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+>key : Symbol(key, Decl(tsxReactEmit8.tsx, 3, 4))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+

tests/baselines/reference/tsxReactEmit8(jsx=react-jsxdev).types

@@ -0,0 +1,15 @@
+=== tests/cases/conformance/jsx/tsxReactEmit8.tsx ===
+/// <reference path="react16.d.ts" />
+
+<div>1</div>;
+><div>1</div> : JSX.Element
+>div : any
+>div : any
+
+<div key={"key-attr"}>2</div>;
+><div key={"key-attr"}>2</div> : JSX.Element
+>div : any
+>key : string
+>"key-attr" : "key-attr"
+>div : any
+

tests/baselines/reference/tsxReactEmitSpreadAttribute(target=es2015).js

@@ -34,23 +34,23 @@ export function T7(a: any, b: any, c: any, d: any) {
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference path="react16.d.ts" />
 export function T1(a) {
-    return _jsx("div", Object.assign({ className: "T1" }, a, { children: "T1" }), void 0);
+    return _jsx("div", Object.assign({ className: "T1" }, a, { children: "T1" }));
 }
 export function T2(a, b) {
-    return _jsx("div", Object.assign({ className: "T2" }, a, b, { children: "T2" }), void 0);
+    return _jsx("div", Object.assign({ className: "T2" }, a, b, { children: "T2" }));
 }
 export function T3(a, b) {
-    return _jsx("div", Object.assign({}, a, { className: "T3" }, b, { children: "T3" }), void 0);
+    return _jsx("div", Object.assign({}, a, { className: "T3" }, b, { children: "T3" }));
 }
 export function T4(a, b) {
-    return _jsx("div", Object.assign({ className: "T4" }, Object.assign(Object.assign({}, a), b), { children: "T4" }), void 0);
+    return _jsx("div", Object.assign({ className: "T4" }, Object.assign(Object.assign({}, a), b), { children: "T4" }));
 }
 export function T5(a, b, c, d) {
-    return _jsx("div", Object.assign({ className: "T5" }, Object.assign(Object.assign(Object.assign({}, a), b), { c, d }), { children: "T5" }), void 0);
+    return _jsx("div", Object.assign({ className: "T5" }, Object.assign(Object.assign(Object.assign({}, a), b), { c, d }), { children: "T5" }));
 }
 export function T6(a, b, c, d) {
-    return _jsx("div", Object.assign({ className: "T6" }, Object.assign(Object.assign(Object.assign({}, a), b), Object.assign(Object.assign({}, c), d)), { children: "T6" }), void 0);
+    return _jsx("div", Object.assign({ className: "T6" }, Object.assign(Object.assign(Object.assign({}, a), b), Object.assign(Object.assign({}, c), d)), { children: "T6" }));
 }
 export function T7(a, b, c, d) {
-    return _jsx("div", { children: "T7" }, void 0);
+    return _jsx("div", { children: "T7" });
 }