Skip to content

Commit 805c577

Browse files
author
Luca Forstner
authored
build(react/remix): Use new jsx JSX transform instead of React.createElement (#12204)
1 parent 41951ba commit 805c577

File tree

12 files changed

+163
-26
lines changed

12 files changed

+163
-26
lines changed

‎.size-limit.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,15 @@ module.exports = [
8383
name: '@sentry/react',
8484
path: 'packages/react/build/esm/index.js',
8585
import: createImport('init', 'ErrorBoundary'),
86+
ignore: ['react/jsx-runtime'],
8687
gzip: true,
8788
limit: '27 KB',
8889
},
8990
{
9091
name: '@sentry/react (incl. Tracing)',
9192
path: 'packages/react/build/esm/index.js',
9293
import: createImport('init', 'ErrorBoundary', 'reactRouterV6BrowserTracingIntegration'),
94+
ignore: ['react/jsx-runtime'],
9395
gzip: true,
9496
limit: '37 KB',
9597
},

‎dev-packages/rollup-utils/bundleHelpers.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function makeBaseBundleConfig(options) {
2727
const { bundleType, entrypoints, licenseTitle, outputFileBase, packageSpecificConfig, sucrase } = options;
2828

2929
const nodeResolvePlugin = makeNodeResolvePlugin();
30-
const sucrasePlugin = makeSucrasePlugin(sucrase);
30+
const sucrasePlugin = makeSucrasePlugin({}, sucrase);
3131
const cleanupPlugin = makeCleanupPlugin();
3232
const markAsBrowserBuildPlugin = makeBrowserBuildPlugin(true);
3333
const licensePlugin = makeLicensePlugin(licenseTitle);

‎dev-packages/rollup-utils/npmHelpers.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function makeBaseNPMConfig(options = {}) {
4040
} = options;
4141

4242
const nodeResolvePlugin = makeNodeResolvePlugin();
43-
const sucrasePlugin = makeSucrasePlugin({ disableESTransforms: !addPolyfills, ...sucrase });
43+
const sucrasePlugin = makeSucrasePlugin({}, { disableESTransforms: !addPolyfills, ...sucrase });
4444
const debugBuildStatementReplacePlugin = makeDebugBuildStatementReplacePlugin();
4545
const importMetaUrlReplacePlugin = makeImportMetaUrlReplacePlugin();
4646
const cleanupPlugin = makeCleanupPlugin();

‎dev-packages/rollup-utils/plugins/npmPlugins.mjs

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,26 @@ import * as path from 'path';
1313
import { codecovRollupPlugin } from '@codecov/rollup-plugin';
1414
import json from '@rollup/plugin-json';
1515
import replace from '@rollup/plugin-replace';
16-
import sucrase from '@rollup/plugin-sucrase';
1716
import cleanup from 'rollup-plugin-cleanup';
17+
import sucrase from './vendor/sucrase-plugin.mjs';
1818

1919
/**
2020
* Create a plugin to transpile TS syntax using `sucrase`.
2121
*
2222
* @returns An instance of the `@rollup/plugin-sucrase` plugin
2323
*/
24-
export function makeSucrasePlugin(options = {}) {
25-
return sucrase({
26-
// Required for bundling OTEL code properly
27-
exclude: ['**/*.json'],
28-
transforms: ['typescript', 'jsx'],
29-
...options,
30-
});
24+
export function makeSucrasePlugin(options = {}, sucraseOptions = {}) {
25+
return sucrase(
26+
{
27+
// Required for bundling OTEL code properly
28+
exclude: ['**/*.json'],
29+
...options,
30+
},
31+
{
32+
transforms: ['typescript', 'jsx'],
33+
...sucraseOptions,
34+
},
35+
);
3136
}
3237

3338
export function makeJsonPlugin() {

‎dev-packages/rollup-utils/plugins/vendor/sucrase-plugin.mjs

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Vendored from https://github.com/rollup/plugins/blob/0090e728f52828d39b071ab5c7925b9b575cd568/packages/sucrase/src/index.js and modified
2+
3+
/*
4+
5+
The MIT License (MIT)
6+
7+
Copyright (c) 2019 RollupJS Plugin Contributors (https://github.com/rollup/plugins/graphs/contributors)
8+
9+
Permission is hereby granted, free of charge, to any person obtaining a copy
10+
of this software and associated documentation files (the "Software"), to deal
11+
in the Software without restriction, including without limitation the rights
12+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
13+
copies of the Software, and to permit persons to whom the Software is
14+
furnished to do so, subject to the following conditions:
15+
16+
The above copyright notice and this permission notice shall be included in
17+
all copies or substantial portions of the Software.
18+
19+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
24+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
25+
THE SOFTWARE.
26+
27+
*/
28+
29+
import fs from 'fs';
30+
import path from 'path';
31+
32+
import { createFilter } from '@rollup/pluginutils';
33+
import { transform } from 'sucrase';
34+
35+
export default function sucrase(opts = {}, sucraseOpts = {}) {
36+
const filter = createFilter(opts.include, opts.exclude);
37+
38+
return {
39+
name: 'sucrase',
40+
41+
// eslint-disable-next-line consistent-return
42+
resolveId(importee, importer) {
43+
if (importer && /^[./]/.test(importee)) {
44+
const resolved = path.resolve(importer ? path.dirname(importer) : process.cwd(), importee);
45+
// resolve in the same order that TypeScript resolves modules
46+
const resolvedFilenames = [
47+
`${resolved}.ts`,
48+
`${resolved}.tsx`,
49+
`${resolved}/index.ts`,
50+
`${resolved}/index.tsx`,
51+
];
52+
if (resolved.endsWith('.js')) {
53+
resolvedFilenames.splice(2, 0, `${resolved.slice(0, -3)}.ts`, `${resolved.slice(0, -3)}.tsx`);
54+
}
55+
const resolvedFilename = resolvedFilenames.find(filename => fs.existsSync(filename));
56+
57+
if (resolvedFilename) {
58+
return resolvedFilename;
59+
}
60+
}
61+
},
62+
63+
transform(code, id) {
64+
if (!filter(id)) return null;
65+
const result = transform(code, {
66+
transforms: sucraseOpts.transforms,
67+
filePath: id,
68+
sourceMapOptions: {
69+
compiledFilename: id,
70+
},
71+
...sucraseOpts,
72+
});
73+
return {
74+
code: result.code,
75+
map: result.sourceMap,
76+
};
77+
},
78+
};
79+
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
"@rollup/plugin-sucrase": "^5.0.2",
9898
"@rollup/plugin-terser": "^0.4.4",
9999
"@rollup/plugin-typescript": "^11.1.6",
100+
"@rollup/pluginutils": "^5.1.0",
100101
"@size-limit/file": "~11.1.0",
101102
"@size-limit/webpack": "~11.1.0",
102103
"@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
@@ -124,6 +125,7 @@
124125
"rollup-plugin-cleanup": "^3.2.1",
125126
"rollup-plugin-license": "^3.3.1",
126127
"size-limit": "~11.1.0",
128+
"sucrase": "^3.35.0",
127129
"ts-jest": "^27.1.4",
128130
"ts-node": "10.9.1",
129131
"typedoc": "^0.18.0",

‎packages/feedback/rollup.bundle.config.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ export default [
99
licenseTitle: '@sentry-internal/feedback',
1010
outputFileBase: () => 'bundles/feedback',
1111
sucrase: {
12+
// The feedback widget is using preact so we need different pragmas and jsx runtimes
1213
jsxPragma: 'h',
1314
jsxFragmentPragma: 'Fragment',
15+
jsxRuntime: 'classic',
1416
},
1517
}),
1618
),
@@ -22,8 +24,10 @@ export default [
2224
licenseTitle: '@sentry-internal/feedback',
2325
outputFileBase: () => 'bundles/feedback-screenshot',
2426
sucrase: {
27+
// The feedback widget is using preact so we need different pragmas and jsx runtimes
2528
jsxPragma: 'h',
2629
jsxFragmentPragma: 'Fragment',
30+
jsxRuntime: 'classic',
2731
},
2832
}),
2933
),
@@ -35,8 +39,10 @@ export default [
3539
licenseTitle: '@sentry-internal/feedback',
3640
outputFileBase: () => 'bundles/feedback-modal',
3741
sucrase: {
42+
// The feedback widget is using preact so we need different pragmas and jsx runtimes
3843
jsxPragma: 'h',
3944
jsxFragmentPragma: 'Fragment',
45+
jsxRuntime: 'classic',
4046
},
4147
}),
4248
),

‎packages/feedback/rollup.npm.config.mjs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@ export default makeNPMConfigVariants(
1616
},
1717
},
1818
sucrase: {
19+
// The feedback widget is using preact so we need different pragmas and jsx runtimes
1920
jsxPragma: 'h',
2021
jsxFragmentPragma: 'Fragment',
22+
jsxRuntime: 'classic',
2123
},
2224
}),
2325
);

‎packages/react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
"hoist-non-react-statics": "^3.3.2"
5050
},
5151
"peerDependencies": {
52-
"react": "16.x || 17.x || 18.x"
52+
"react": "^16.14.0 || 17.x || 18.x"
5353
},
5454
"devDependencies": {
5555
"@testing-library/react": "^13.0.0",

‎packages/react/rollup.npm.config.mjs

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,12 @@ import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollu
33
export default makeNPMConfigVariants(
44
makeBaseNPMConfig({
55
esModuleInterop: true,
6+
packageSpecificConfig: {
7+
external: ['react', 'react/jsx-runtime'],
8+
},
9+
sucrase: {
10+
jsxRuntime: 'automatic', // React 19 emits a warning if we don't use the newer jsx transform: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
11+
production: true, // This is needed so that sucrase uses the production jsx runtime (ie `import { jsx } from 'react/jsx-runtime'` instead of `import { jsxDEV as _jsxDEV } from 'react/jsx-dev-runtime'`)
12+
},
613
}),
714
);

‎packages/remix/rollup.npm.config.mjs

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ export default [
55
makeBaseNPMConfig({
66
entrypoints: ['src/index.server.ts', 'src/index.client.tsx'],
77
packageSpecificConfig: {
8-
external: ['react-router', 'react-router-dom'],
8+
external: ['react-router', 'react-router-dom', 'react', 'react/jsx-runtime'],
99
output: {
1010
// make it so Rollup calms down about the fact that we're combining default and named exports
1111
exports: 'named',
1212
},
1313
},
14+
sucrase: {
15+
jsxRuntime: 'automatic', // React 19 emits a warning if we don't use the newer jsx transform: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
16+
production: true, // This is needed so that sucrase uses the production jsx runtime (ie `import { jsx } from 'react/jsx-runtime'` instead of `import { jsxDEV as _jsxDEV } from 'react/jsx-dev-runtime'`)
17+
},
1418
}),
1519
),
1620
...makeOtelLoaders('./build', 'sentry-node'),

‎yarn.lock

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17356,15 +17356,15 @@ glob@^10.2.2:
1735617356
path-scurry "^1.10.0"
1735717357

1735817358
glob@^10.3.10:
17359-
version "10.3.10"
17360-
resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
17361-
integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
17359+
version "10.4.1"
17360+
resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.1.tgz#0cfb01ab6a6b438177bfe6a58e2576f6efe909c2"
17361+
integrity sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==
1736217362
dependencies:
1736317363
foreground-child "^3.1.0"
17364-
jackspeak "^2.3.5"
17365-
minimatch "^9.0.1"
17366-
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
17367-
path-scurry "^1.10.1"
17364+
jackspeak "^3.1.2"
17365+
minimatch "^9.0.4"
17366+
minipass "^7.1.2"
17367+
path-scurry "^1.11.1"
1736817368

1736917369
glob@^10.3.4:
1737017370
version "10.3.4"
@@ -19494,10 +19494,10 @@ jackspeak@^2.0.3:
1949419494
optionalDependencies:
1949519495
"@pkgjs/parseargs" "^0.11.0"
1949619496

19497-
jackspeak@^2.3.5:
19498-
version "2.3.6"
19499-
resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
19500-
integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
19497+
jackspeak@^3.1.2:
19498+
version "3.1.2"
19499+
resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.1.2.tgz#eada67ea949c6b71de50f1b09c92a961897b90ab"
19500+
integrity sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==
1950119501
dependencies:
1950219502
"@isaacs/cliui" "^8.0.2"
1950319503
optionalDependencies:
@@ -21084,6 +21084,11 @@ lowercase-keys@^2.0.0:
2108421084
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
2108521085
integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
2108621086

21087+
lru-cache@^10.2.0:
21088+
version "10.2.2"
21089+
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
21090+
integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
21091+
2108721092
lru-cache@^5.1.1:
2108821093
version "5.1.1"
2108921094
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -22131,6 +22136,13 @@ minimatch@^9.0.0, minimatch@^9.0.1:
2213122136
dependencies:
2213222137
brace-expansion "^2.0.1"
2213322138

22139+
minimatch@^9.0.4:
22140+
version "9.0.4"
22141+
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
22142+
integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
22143+
dependencies:
22144+
brace-expansion "^2.0.1"
22145+
2213422146
minimatch@~3.0.4:
2213522147
version "3.0.8"
2213622148
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
@@ -22255,6 +22267,11 @@ minipass@^5.0.0:
2225522267
resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.3.tgz#05ea638da44e475037ed94d1c7efcc76a25e1974"
2225622268
integrity sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==
2225722269

22270+
minipass@^7.1.2:
22271+
version "7.1.2"
22272+
resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
22273+
integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
22274+
2225822275
minizlib@^2.1.1, minizlib@^2.1.2:
2225922276
version "2.1.2"
2226022277
resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
@@ -24265,6 +24282,14 @@ path-scurry@^1.10.1:
2426524282
lru-cache "^9.1.1 || ^10.0.0"
2426624283
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
2426724284

24285+
path-scurry@^1.11.1:
24286+
version "1.11.1"
24287+
resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
24288+
integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
24289+
dependencies:
24290+
lru-cache "^10.2.0"
24291+
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
24292+
2426824293
path-scurry@^1.6.1:
2426924294
version "1.6.4"
2427024295
resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.6.4.tgz#020a9449e5382a4acb684f9c7e1283bc5695de66"
@@ -24480,7 +24505,12 @@ pinkie@^2.0.0:
2448024505
resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
2448124506
integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
2448224507

24483-
pirates@^4.0.1, pirates@^4.0.4:
24508+
pirates@^4.0.1:
24509+
version "4.0.6"
24510+
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
24511+
integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
24512+
24513+
pirates@^4.0.4:
2448424514
version "4.0.5"
2448524515
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
2448624516
integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
@@ -28263,7 +28293,7 @@ stylus@0.59.0, stylus@^0.59.0:
2826328293
sax "~1.2.4"
2826428294
source-map "^0.7.3"
2826528295

28266-
sucrase@^3.27.0:
28296+
sucrase@^3.27.0, sucrase@^3.35.0:
2826728297
version "3.35.0"
2826828298
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
2826928299
integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
@@ -28682,7 +28712,7 @@ text-table@0.2.0, text-table@^0.2.0:
2868228712
thenify-all@^1.0.0:
2868328713
version "1.6.0"
2868428714
resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
28685-
integrity sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=
28715+
integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
2868628716
dependencies:
2868728717
thenify ">= 3.1.0 < 4"
2868828718

0 commit comments

Comments
 (0)