8000 build(react/remix): Use new `jsx` JSX transform instead of `React.cre… · cadesalaberry/sentry-javascript@805c577 · GitHub
[go: up one dir, main page]
Skip to content

Commit 805c577

Browse files
author
Luca Forstner
authored
build(react/remix): Use new jsx JSX transform instead of React.createElement (getsentry#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
8000
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 10000 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
);

0 commit comments

Comments
 (0)
0