Transform JSX to Lazy Requires instead of Wrappers (#30433)
This ensures that we can keep overriding what runtime to use by resetting modules while still using the automatic JSX plugin. This is like the "inline requires" transform but just for JSX. I got sick of trying to figure out workarounds to hide the extra stack frame that appears due to the wrappers.
Sebastian Markbåge committed
Jul 23, 2024 at 15:51 UTC
fc74a3a3e6a3ec8340a6202f8d07bb422240836d
5 files changed
+128
-88
scripts/babel/__tests__/transform-lazy-jsx-import-test.js
new
+30
@@ -0,0 +1,30 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+'use strict';
8
+
9
+describe('transform-lazy-jsx-import', () => {
10
+ it('should use the mocked version of the "react" runtime in jsx', () => {
11
+ jest.resetModules();
12
+ const mock = jest.fn(type => 'fakejsx: ' + type);
13
+ if (__DEV__) {
14
+ jest.mock('react/jsx-dev-runtime', () => {
15
+ return {
16
+ jsxDEV: mock,
17
+ };
18
+ });
19
+ } else {
20
+ jest.mock('react/jsx-runtime', () => ({
21
+ jsx: mock,
22
+ jsxs: mock,
23
+ }));
24
+ }
25
+ // eslint-disable-next-line react/react-in-jsx-scope
26
+ const x = <div />;
27
+ expect(x).toBe('fakejsx: div');
28
+ expect(mock).toHaveBeenCalledTimes(1);
29
+ });
30
+});
scripts/babel/transform-lazy-jsx-import.js
new
+92
@@ -0,0 +1,92 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+'use strict';
8
+
9
+// Most of our tests call jest.resetModules in a beforeEach and the
10
+// re-require all the React modules. However, the JSX runtime is injected by
11
+// the compiler, so those bindings don't get updated. This causes warnings
12
+// logged by the JSX runtime to not have a component stack, because component
13
+// stack relies on the the secret internals object that lives on the React
14
+// module, which because of the resetModules call is longer the same one.
15
+//
16
+// To workaround this issue, use a transform that calls require() again before
17
+// every JSX invocation.
18
+//
19
+// Longer term we should migrate all our tests away from using require() and
20
+// resetModules, and use import syntax instead so this kind of thing doesn't
21
+// happen.
22
+
23
+module.exports = function replaceJSXImportWithLazy(babel) {
24
+ const {types: t} = babel;
25
+
26
+ function getInlineRequire(moduleName) {
27
+ return t.callExpression(t.identifier('require'), [
28
+ t.stringLiteral(moduleName),
29
+ ]);
30
+ }
31
+
32
+ return {
33
+ visitor: {
34
+ CallExpression: function (path, pass) {
35
+ let callee = path.node.callee;
36
+ if (callee.type === 'SequenceExpression') {
37
+ callee = callee.expressions[callee.expressions.length - 1];
38
+ }
39
+ if (callee.type === 'Identifier') {
40
+ // Sometimes we seem to hit this before the imports are transformed
41
+ // into requires and so we hit this case.
42
+ switch (callee.name) {
43
+ case '_jsxDEV':
44
+ path.node.callee = t.memberExpression(
45
+ getInlineRequire('react/jsx-dev-runtime'),
46
+ t.identifier('jsxDEV')
47
+ );
48
+ return;
49
+ case '_jsx':
50
+ path.node.callee = t.memberExpression(
51
+ getInlineRequire('react/jsx-runtime'),
52
+ t.identifier('jsx')
53
+ );
54
+ return;
55
+ case '_jsxs':
56
+ path.node.callee = t.memberExpression(
57
+ getInlineRequire('react/jsx-runtime'),
58
+ t.identifier('jsxs')
59
+ );
60
+ return;
61
+ }
62
+ return;
63
+ }
64
+ if (callee.type !== 'MemberExpression') {
65
+ return;
66
+ }
67
+ if (callee.property.type !== 'Identifier') {
68
+ // Needs to be jsx, jsxs, jsxDEV.
69
+ return;
70
+ }
71
+ if (callee.object.type !== 'Identifier') {
72
+ // Needs to be _reactJsxDevRuntime or _reactJsxRuntime.
73
+ return;
74
+ }
75
+ // Replace the cached identifier with a new require call.
76
+ // Relying on the identifier name is a little flaky. Should ideally pick
77
+ // this from the import. For some reason it sometimes has the react prefix
78
+ // and other times it doesn't.
79
+ switch (callee.object.name) {
80
+ case '_reactJsxDevRuntime':
81
+ case '_jsxDevRuntime':
82
+ callee.object = getInlineRequire('react/jsx-dev-runtime');
83
+ return;
84
+ case '_reactJsxRuntime':
85
+ case '_jsxRuntime':
86
+ callee.object = getInlineRequire('react/jsx-runtime');
87
+ return;
88
+ }
89
+ },
90
+ },
91
+ };
92
+};
scripts/jest/devtools/setupEnv.js
-45
@@ -40,48 +40,3 @@ global._test_react_version_focus = (range, testName, callback) => {
40
global._test_ignore_for_react_version = (testName, callback) => {
41
test.skip(testName, callback);
42
};
43
-
44
-// Most of our tests call jest.resetModules in a beforeEach and the
45
-// re-require all the React modules. However, the JSX runtime is injected by
46
-// the compiler, so those bindings don't get updated. This causes warnings
47
-// logged by the JSX runtime to not have a component stack, because component
48
-// stack relies on the the secret internals object that lives on the React
49
-// module, which because of the resetModules call is longer the same one.
50
-//
51
-// To workaround this issue, we use a proxy that re-requires the latest
52
-// JSX Runtime from the require cache on every function invocation.
53
-//
54
-// Longer term we should migrate all our tests away from using require() and
55
-// resetModules, and use import syntax instead so this kind of thing doesn't
56
-// happen.
57
-if (semver.gte(ReactVersionTestingAgainst, '17.0.0')) {
58
- lazyRequireFunctionExports('react/jsx-dev-runtime');
59
-
60
- // TODO: We shouldn't need to do this in the production runtime, but until
61
- // we remove string refs they also depend on the shared state object. Remove
62
- // once we remove string refs.
63
- lazyRequireFunctionExports('react/jsx-runtime');
64
-}
65
-
66
-function lazyRequireFunctionExports(moduleName) {
67
- jest.mock(moduleName, () => {
68
- return new Proxy(jest.requireActual(moduleName), {
69
- get(originalModule, prop) {
70
- // If this export is a function, return a wrapper function that lazily
71
- // requires the implementation from the current module cache.
72
- if (typeof originalModule[prop] === 'function') {
73
- // eslint-disable-next-line no-eval
74
- const wrapper = eval(`
75
- (function () {
76
- return jest.requireActual(moduleName)[prop].apply(this, arguments);
77
- })
78
- // We use this to trick the filtering of Flight to exclude this frame.
79
- //# sourceURL=<anonymous>`);
80
- return wrapper;
81
- } else {
82
- return originalModule[prop];
83
- }
84
- },
85
- });
86
- });
87
-}
scripts/jest/preprocessor.js
+6
@@ -25,6 +25,9 @@ const pathToTransformTestGatePragma = require.resolve(
25
const pathToTransformReactVersionPragma = require.resolve(
26
'../babel/transform-react-version-pragma'
27
);
28
+const pathToTransformLazyJSXImport = require.resolve(
29
+ '../babel/transform-lazy-jsx-import'
30
+);
31
const pathToBabelrc = path.join(__dirname, '..', '..', 'babel.config.js');
32
const pathToErrorCodes = require.resolve('../error-codes/codes.json');
33
@@ -93,6 +96,8 @@ module.exports = {
96
);
97
}
98
99
+ plugins.push(pathToTransformLazyJSXImport);
100
+
101
let sourceAst = hermesParser.parse(src, {babel: true});
102
return {
103
code: babel.transformFromAstSync(
@@ -122,6 +127,7 @@ module.exports = {
127
pathToTransformInfiniteLoops,
128
pathToTransformTestGatePragma,
129
pathToTransformReactVersionPragma,
130
+ pathToTransformLazyJSXImport,
131
pathToErrorCodes,
132
],
133
[
scripts/jest/setupTests.js
-43
@@ -264,46 +264,3 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
264
return fn(flags);
265
};
266
}
267
-
268
-// Most of our tests call jest.resetModules in a beforeEach and the
269
-// re-require all the React modules. However, the JSX runtime is injected by
270
-// the compiler, so those bindings don't get updated. This causes warnings
271
-// logged by the JSX runtime to not have a component stack, because component
272
-// stack relies on the the secret internals object that lives on the React
273
-// module, which because of the resetModules call is longer the same one.
274
-//
275
-// To workaround this issue, we use a proxy that re-requires the latest
276
-// JSX Runtime from the require cache on every function invocation.
277
-//
278
-// Longer term we should migrate all our tests away from using require() and
279
-// resetModules, and use import syntax instead so this kind of thing doesn't
280
-// happen.
281
-lazyRequireFunctionExports('react/jsx-dev-runtime');
282
-
283
-// TODO: We shouldn't need to do this in the production runtime, but until
284
-// we remove string refs they also depend on the shared state object. Remove
285
-// once we remove string refs.
286
-lazyRequireFunctionExports('react/jsx-runtime');
287
-
288
-function lazyRequireFunctionExports(moduleName) {
289
- jest.mock(moduleName, () => {
290
- return new Proxy(jest.requireActual(moduleName), {
291
- get(originalModule, prop) {
292
- // If this export is a function, return a wrapper function that lazily
293
- // requires the implementation from the current module cache.
294
- if (typeof originalModule[prop] === 'function') {
295
- // eslint-disable-next-line no-eval
296
- const wrapper = eval(`
297
- (function () {
298
- return jest.requireActual(moduleName)[prop].apply(this, arguments);
299
- })
300
- // We use this to trick the filtering of Flight to exclude this frame.
301
- //# sourceURL=<anonymous>`);
302
- return wrapper;
303
- } else {
304
- return originalModule[prop];
305
- }
306
- },
307
- });
308
- });
309
-}