Skip to content

Commit 8daac14

Browse files
weswighamweswigham
authored
Add support for the @jsxruntime pragma (#59500)
1 parent 41b993b commit 8daac14

11 files changed

+1155
-1
lines changed

‎src/compiler/utilities.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -9164,10 +9164,16 @@ export function getJSXTransformEnabled(options: CompilerOptions): boolean {
91649164
export function getJSXImplicitImportBase(compilerOptions: CompilerOptions, file?: SourceFile): string | undefined {
91659165
const jsxImportSourcePragmas = file?.pragmas.get("jsximportsource");
91669166
const jsxImportSourcePragma = isArray(jsxImportSourcePragmas) ? jsxImportSourcePragmas[jsxImportSourcePragmas.length - 1] : jsxImportSourcePragmas;
9167+
const jsxRuntimePragmas = file?.pragmas.get("jsxruntime");
9168+
const jsxRuntimePragma = isArray(jsxRuntimePragmas) ? jsxRuntimePragmas[jsxRuntimePragmas.length - 1] : jsxRuntimePragmas;
9169+
if (jsxRuntimePragma?.arguments.factory === "classic") {
9170+
return undefined;
9171+
}
91679172
return compilerOptions.jsx === JsxEmit.ReactJSX ||
91689173
compilerOptions.jsx === JsxEmit.ReactJSXDev ||
91699174
compilerOptions.jsxImportSource ||
9170-
jsxImportSourcePragma ?
9175+
jsxImportSourcePragma ||
9176+
jsxRuntimePragma?.arguments.factory === "automatic" ?
91719177
jsxImportSourcePragma?.arguments.factory || compilerOptions.jsxImportSource || "react" :
91729178
undefined;
91739179
}

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

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
//// [tests/cases/compiler/jsxRuntimePragma.ts] ////
2+
3+
//// [one.tsx]
4+
/// <reference path="/.lib/react16.d.ts" />
5+
/* @jsxRuntime classic */
6+
import * as React from "react";
7+
export const HelloWorld = () => <h1>Hello world</h1>;
8+
export const frag = <><div></div></>;
9+
export const selfClosing = <img src="./image.png" />;
10+
//// [two.tsx]
11+
/// <reference path="/.lib/react16.d.ts" />
12+
/* @jsxRuntime automatic */
13+
export const HelloWorld = () => <h1>Hello world</h1>;
14+
export const frag = <><div></div></>;
15+
export const selfClosing = <img src="./image.png" />;
16+
//// [three.tsx]
17+
/// <reference path="/.lib/react16.d.ts" />
18+
/* @jsxRuntime classic */
19+
/* @jsxRuntime automatic */
20+
export const HelloWorld = () => <h1>Hello world</h1>;
21+
export const frag = <><div></div></>;
22+
export const selfClosing = <img src="./image.png" />;
23+
//// [four.tsx]
24+
/// <reference path="/.lib/react16.d.ts" />
25+
/* @jsxRuntime automatic */
26+
/* @jsxRuntime classic */
27+
import * as React from "react";
28+
export const HelloWorld = () => <h1>Hello world</h1>;
29+
export const frag = <><div></div></>;
30+
export const selfClosing = <img src="./image.png" />;
31+
//// [index.ts]
32+
export * as one from "./one.js";
33+
export * as two from "./two.js";
34+
export * as three from "./three.js";
35+
export * as four from "./four.js";
36+
37+
//// [one.js]
38+
"use strict";
39+
Object.defineProperty(exports, "__esModule", { value: true });
40+
exports.selfClosing = exports.frag = exports.HelloWorld = void 0;
41+
/// <reference path="react16.d.ts" />
42+
/* @jsxRuntime classic */
43+
var React = require("react");
44+
var HelloWorld = function () { return React.createElement("h1", null, "Hello world"); };
45+
exports.HelloWorld = HelloWorld;
46+
exports.frag = React.createElement(React.Fragment, null,
47+
React.createElement("div", null));
48+
exports.selfClosing = React.createElement("img", { src: "./image.png" });
49+
//// [two.js]
50+
"use strict";
51+
Object.defineProperty(exports, "__esModule", { value: true });
52+
exports.selfClosing = exports.frag = exports.HelloWorld = void 0;
53+
var jsx_runtime_1 = require("react/jsx-runtime");
54+
/// <reference path="react16.d.ts" />
55+
/* @jsxRuntime automatic */
56+
var HelloWorld = function () { return (0, jsx_runtime_1.jsx)("h1", { children: "Hello world" }); };
57+
exports.HelloWorld = HelloWorld;
58+
exports.frag = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", {}) });
59+
exports.selfClosing = (0, jsx_runtime_1.jsx)("img", { src: "./image.png" });
60+
//// [three.js]
61+
"use strict";
62+
Object.defineProperty(exports, "__esModule", { value: true });
63+
exports.selfClosing = exports.frag = exports.HelloWorld = void 0;
64+
var jsx_runtime_1 = require("react/jsx-runtime");
65+
/// <reference path="react16.d.ts" />
66+
/* @jsxRuntime classic */
67+
/* @jsxRuntime automatic */
68+
var HelloWorld = function () { return (0, jsx_runtime_1.jsx)("h1", { children: "Hello world" }); };
69+
exports.HelloWorld = HelloWorld;
70+
exports.frag = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", {}) });
71+
exports.selfClosing = (0, jsx_runtime_1.jsx)("img", { src: "./image.png" });
72+
//// [four.js]
73+
"use strict";
74+
Object.defineProperty(exports, "__esModule", { value: true });
75+
exports.selfClosing = exports.frag = exports.HelloWorld = void 0;
76+
/// <reference path="react16.d.ts" />
77+
/* @jsxRuntime automatic */
78+
/* @jsxRuntime classic */
79+
var React = require("react");
80+
var HelloWorld = function () { return React.createElement("h1", null, "Hello world"); };
81+
exports.HelloWorld = HelloWorld;
82+
exports.frag = React.createElement(React.Fragment, null,
83+
React.createElement("div", null));
84+
exports.selfClosing = React.createElement("img", { src: "./image.png" });
85+
//// [index.js]
86+
"use strict";
87+
Object.defineProperty(exports, "__esModule", { value: true });
88+
exports.four = exports.three = exports.two = exports.one = void 0;
89+
exports.one = require("./one.js");
90+
exports.two = require("./two.js");
91+
exports.three = require("./three.js");
92+
exports.four = require("./four.js");

‎tests/baselines/reference/jsxRuntimePragma(jsx=react).symbols

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
//// [tests/cases/compiler/jsxRuntimePragma.ts] ////
2+
3+
=== one.tsx ===
4+
/// <reference path="react16.d.ts" />
5+
/* @jsxRuntime classic */
6+
import * as React from "react";
7+
>React : Symbol(React, Decl(one.tsx, 2, 6))
8+
9+
export const HelloWorld = () => <h1>Hello world</h1>;
10+
>HelloWorld : Symbol(HelloWorld, Decl(one.tsx, 3, 12))
11+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
12+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
13+
14+
export const frag = <><div></div></>;
15+
>frag : Symbol(frag, Decl(one.tsx, 4, 12))
16+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
17+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
18+
19+
export const selfClosing = <img src="./image.png" />;
20+
>selfClosing : Symbol(selfClosing, Decl(one.tsx, 5, 12))
21+
>img : Symbol(JSX.IntrinsicElements.img, Decl(react16.d.ts, 2569, 114))
22+
>src : Symbol(src, Decl(one.tsx, 5, 31))
23+
24+
=== two.tsx ===
25+
/// <reference path="react16.d.ts" />
26+
/* @jsxRuntime automatic */
27+
export const HelloWorld = () => <h1>Hello world</h1>;
28+
>HelloWorld : Symbol(HelloWorld, Decl(two.tsx, 2, 12))
29+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
30+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
31+
32+
export const frag = <><div></div></>;
33+
>frag : Symbol(frag, Decl(two.tsx, 3, 12))
34+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
35+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
36+
37+
export const selfClosing = <img src="./image.png" />;
38+
>selfClosing : Symbol(selfClosing, Decl(two.tsx, 4, 12))
39+
>img : Symbol(JSX.IntrinsicElements.img, Decl(react16.d.ts, 2569, 114))
40+
>src : Symbol(src, Decl(two.tsx, 4, 31))
41+
42+
=== three.tsx ===
43+
/// <reference path="react16.d.ts" />
44+
/* @jsxRuntime classic */
45+
/* @jsxRuntime automatic */
46+
export const HelloWorld = () => <h1>Hello world</h1>;
47+
>HelloWorld : Symbol(HelloWorld, Decl(three.tsx, 3, 12))
48+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
49+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
50+
51+
export const frag = <><div></div></>;
52+
>frag : Symbol(frag, Decl(three.tsx, 4, 12))
53+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
54+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
55+
56+
export const selfClosing = <img src="./image.png" />;
57+
>selfClosing : Symbol(selfClosing, Decl(three.tsx, 5, 12))
58+
>img : Symbol(JSX.IntrinsicElements.img, Decl(react16.d.ts, 2569, 114))
59+
>src : Symbol(src, Decl(three.tsx, 5, 31))
60+
61+
=== four.tsx ===
62+
/// <reference path="react16.d.ts" />
63+
/* @jsxRuntime automatic */
64+
/* @jsxRuntime classic */
65+
import * as React from "react";
66+
>React : Symbol(React, Decl(four.tsx, 3, 6))
67+
68+
export const HelloWorld = () => <h1>Hello world</h1>;
69+
>HelloWorld : Symbol(HelloWorld, Decl(four.tsx, 4, 12))
70+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
71+
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react16.d.ts, 2556, 106))
72+
73+
export const frag = <><div></div></>;
74+
>frag : Symbol(frag, Decl(four.tsx, 5, 12))
75+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
76+
>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
77+
78+
export const selfClosing = <img src="./image.png" />;
79+
>selfClosing : Symbol(selfClosing, Decl(four.tsx, 6, 12))
80+
>img : Symbol(JSX.IntrinsicElements.img, Decl(react16.d.ts, 2569, 114))
81+
>src : Symbol(src, Decl(four.tsx, 6, 31))
82+
83+
=== index.ts ===
84+
export * as one from "./one.js";
85+
>one : Symbol(one, Decl(index.ts, 0, 6))
86+
87+
export * as two from "./two.js";
88+
>two : Symbol(two, Decl(index.ts, 1, 6))
89+
90+
export * as three from "./three.js";
91+
>three : Symbol(three, Decl(index.ts, 2, 6))
92+
93+
export * as four from "./four.js";
94+
>four : Symbol(four, Decl(index.ts, 3, 6))
95+

‎tests/baselines/reference/jsxRuntimePragma(jsx=react).types

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
//// [tests/cases/compiler/jsxRuntimePragma.ts] ////
2+
3+
=== Performance Stats ===
4+
Assignability cache: 2,500
5+
Type Count: 5,000
6+
Instantiation count: 50,000
7+
Symbol count: 50,000
8+
9+
=== one.tsx ===
10+
/// <reference path="react16.d.ts" />
11+
/* @jsxRuntime classic */
12+
import * as React from "react";
13+
>React : typeof React
14+
> : ^^^^^^^^^^^^
15+
16+
export const HelloWorld = () => <h1>Hello world</h1>;
17+
>HelloWorld : () => JSX.Element
18+
> : ^^^^^^^^^^^^^^^^^
19+
>() => <h1>Hello world</h1> : () => JSX.Element
20+
> : ^^^^^^^^^^^^^^^^^
21+
><h1>Hello world</h1> : JSX.Element
22+
> : ^^^^^^^^^^^
23+
>h1 : any
24+
> : ^^^
25+
>h1 : any
26+
> : ^^^
27+
28+
export const frag = <><div></div></>;
29+
>frag : JSX.Element
30+
> : ^^^^^^^^^^^
31+
><><div></div></> : JSX.Element
32+
> : ^^^^^^^^^^^
33+
><div></div> : JSX.Element
34+
> : ^^^^^^^^^^^
35+
>div : any
36+
> : ^^^
37+
>div : any
38+
> : ^^^
39+
40+
export const selfClosing = <img src="./image.png" />;
41+
>selfClosing : JSX.Element
42+
> : ^^^^^^^^^^^
43+
><img src="./image.png" /> : JSX.Element
44+
> : ^^^^^^^^^^^
45+
>img : any
46+
> : ^^^
47+
>src : string
48+
> : ^^^^^^
49+
50+
=== two.tsx ===
51+
/// <reference path="react16.d.ts" />
52+
/* @jsxRuntime automatic */
53+
export const HelloWorld = () => <h1>Hello world</h1>;
54+
>HelloWorld : () => JSX.Element
55+
> : ^^^^^^^^^^^^^^^^^
56+
>() => <h1>Hello world</h1> : () => JSX.Element
57+
> : ^^^^^^^^^^^^^^^^^
58+
><h1>Hello world</h1> : JSX.Element
59+
> : ^^^^^^^^^^^
60+
>h1 : any
61+
> : ^^^
62+
>h1 : any
63+
> : ^^^
64+
65+
export const frag = <><div></div></>;
66+
>frag : JSX.Element
67+
> : ^^^^^^^^^^^
68+
><><div></div></> : JSX.Element
69+
> : ^^^^^^^^^^^
70+
><div></div> : JSX.Element
71+
> : ^^^^^^^^^^^
72+
>div : any
73+
> : ^^^
74+
>div : any
75+
> : ^^^
76+
77+
export const selfClosing = <img src="./image.png" />;
78+
>selfClosing : JSX.Element
79+
> : ^^^^^^^^^^^
80+
><img src="./image.png" /> : JSX.Element
81+
> : ^^^^^^^^^^^
82+
>img : any
83+
> : ^^^
84+
>src : string
85+
> : ^^^^^^
86+
87+
=== three.tsx ===
88+
/// <reference path="react16.d.ts" />
89+
/* @jsxRuntime classic */
90+
/* @jsxRuntime automatic */
91+
export const HelloWorld = () => <h1>Hello world</h1>;
92+
>HelloWorld : () => JSX.Element
93+
> : ^^^^^^^^^^^^^^^^^
94+
>() => <h1>Hello world</h1> : () => JSX.Element
95+
> : ^^^^^^^^^^^^^^^^^
96+
><h1>Hello world</h1> : JSX.Element
97+
> : ^^^^^^^^^^^
98+
>h1 : any
99+
> : ^^^
100+
>h1 : any
101+
> : ^^^
102+
103+
export const frag = <><div></div></>;
104+
>frag : JSX.Element
105+
> : ^^^^^^^^^^^
106+
><><div></div></> : JSX.Element
107+
> : ^^^^^^^^^^^
108+
><div></div> : JSX.Element
109+
> : ^^^^^^^^^^^
110+
>div : any
111+
> : ^^^
112+
>div : any
113+
> : ^^^
114+
115+
export const selfClosing = <img src="./image.png" />;
116+
>selfClosing : JSX.Element
117+
> : ^^^^^^^^^^^
118+
><img src="./image.png" /> : JSX.Element
119+
> : ^^^^^^^^^^^
120+
>img : any
121+
> : ^^^
122+
>src : string
123+
> : ^^^^^^
124+
125+
=== four.tsx ===
126+
/// <reference path="react16.d.ts" />
127+
/* @jsxRuntime automatic */
128+
/* @jsxRuntime classic */
129+
import * as React from "react";
130+
>React : typeof React
131+
> : ^^^^^^^^^^^^
132+
133+
export const HelloWorld = () => <h1>Hello world</h1>;
134+
>HelloWorld : () => JSX.Element
135+
> : ^^^^^^^^^^^^^^^^^
136+
>() => <h1>Hello world</h1> : () => JSX.Element
137+
> : ^^^^^^^^^^^^^^^^^
138+
><h1>Hello world</h1> : JSX.Element
139+
> : ^^^^^^^^^^^
140+
>h1 : any
141+
> : ^^^
142+
>h1 : any
143+
> : ^^^
144+
145+
export const frag = <><div></div></>;
146+
>frag : JSX.Element
147+
> : ^^^^^^^^^^^
148+
><><div></div></> : JSX.Element
149+
> : ^^^^^^^^^^^
150+
><div></div> : JSX.Element
151+
> : ^^^^^^^^^^^
152+
>div : any
153+
> : ^^^
154+
>div : any
155+
> : ^^^
156+
157+
export const selfClosing = <img src="./image.png" />;
158+
>selfClosing : JSX.Element
159+
> : ^^^^^^^^^^^
160+
><img src="./image.png" /> : JSX.Element
161+
> : ^^^^^^^^^^^
162+
>img : any
163+
> : ^^^
164+
>src : string
165+
> : ^^^^^^
166+
167+
=== index.ts ===
168+
export * as one from "./one.js";
169+
>one : typeof import("one")
170+
> : ^^^^^^^^^^^^^^^^^^^^
171+
172+
export * as two from "./two.js";
173+
>two : typeof import("two")
174+
> : ^^^^^^^^^^^^^^^^^^^^
175+
176+
export * as three from "./three.js";
177+
>three : typeof import("three")
178+
> : ^^^^^^^^^^^^^^^^^^^^^^
179+
180+
export * as four from "./four.js";
181+
>four : typeof import("four")
182+
> : ^^^^^^^^^^^^^^^^^^^^^
183+

0 commit comments

Comments
 (0)