Remove IIFE wrappers from dev invariant checks (#16963)
The error transform works by replacing calls to `invariant` with an `if` statement. Since we're replacing a call expression with a statement, Babel wraps the new statement in an immediately-invoked function expression (IIFE). This wrapper is unnecessary in practice because our `invariant` calls are always part of their own expression statement. In the production bundle, the function wrappers are removed by Closure. But they remain in the development bundles. This commit updates the transform to confirm that an `invariant` call expression's parent node is an expression statement. (If not, it throws a transform error.) Then, it replaces the expression statement instead of the expression itself, effectively removing the extraneous IIFE wrapper.
Andrew Clark committed
Sep 30, 2019 at 11:14 UTC
05dc814cf061796c54e3aab7dd18a1b54615fc6b
3 files changed
+40
-31
scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+21
-29
@@ -29,15 +29,13 @@ exports[`error transform should replace simple invariant calls 1`] = `
29
import _ReactError from \\"shared/ReactError\\";
30
import invariant from 'shared/invariant';
31
32
-(function () {
33
- if (!condition) {
34
- if (__DEV__) {
35
- throw _ReactError(Error(\\"Do not override existing functions.\\"));
36
- } else {
37
- throw _ReactErrorProd(Error(16));
38
- }
32
+if (!condition) {
33
+ if (__DEV__) {
34
+ throw _ReactError(Error(\\"Do not override existing functions.\\"));
35
+ } else {
36
+ throw _ReactErrorProd(Error(16));
37
}
40
-})();"
38
+}"
39
`;
40
41
exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
@@ -45,15 +43,13 @@ exports[`error transform should support invariant calls with a concatenated temp
43
import _ReactError from \\"shared/ReactError\\";
44
import invariant from 'shared/invariant';
45
48
-(function () {
49
- if (!condition) {
50
- if (__DEV__) {
51
- throw _ReactError(Error(\\"Expected a component class, got \\" + Foo + \\".\\" + Bar));
52
- } else {
53
- throw _ReactErrorProd(Error(18), Foo, Bar);
54
- }
46
+if (!condition) {
47
+ if (__DEV__) {
48
+ throw _ReactError(Error(\\"Expected a component class, got \\" + Foo + \\".\\" + Bar));
49
+ } else {
50
+ throw _ReactErrorProd(Error(18), Foo, Bar);
51
}
56
-})();"
52
+}"
53
`;
54
55
exports[`error transform should support invariant calls with args 1`] = `
@@ -61,24 +57,20 @@ exports[`error transform should support invariant calls with args 1`] = `
57
import _ReactError from \\"shared/ReactError\\";
58
import invariant from 'shared/invariant';
59
64
-(function () {
65
- if (!condition) {
66
- if (__DEV__) {
67
- throw _ReactError(Error(\\"Expected \\" + foo + \\" target to be an array; got \\" + bar));
68
- } else {
69
- throw _ReactErrorProd(Error(7), foo, bar);
70
- }
60
+if (!condition) {
61
+ if (__DEV__) {
62
+ throw _ReactError(Error(\\"Expected \\" + foo + \\" target to be an array; got \\" + bar));
63
+ } else {
64
+ throw _ReactErrorProd(Error(7), foo, bar);
65
}
72
-})();"
66
+}"
67
`;
68
69
exports[`error transform should support noMinify option 1`] = `
70
"import _ReactError from \\"shared/ReactError\\";
71
import invariant from 'shared/invariant';
72
79
-(function () {
80
- if (!condition) {
81
- throw _ReactError(Error(\\"Do not override existing functions.\\"));
82
- }
83
-})();"
73
+if (!condition) {
74
+ throw _ReactError(Error(\\"Do not override existing functions.\\"));
75
+}"
76
`;
scripts/error-codes/__tests__/transform-error-messages.js
+9
@@ -37,6 +37,15 @@ invariant(condition, 'Do not override existing functions.');
37
).toMatchSnapshot();
38
});
39
40
+ it('should throw if invariant is not in an expression statement', () => {
41
+ expect(() => {
42
+ transform(`
43
+import invariant from 'shared/invariant';
44
+cond && invariant(condition, 'Do not override existing functions.');
45
+`);
46
+ }).toThrow('invariant() cannot be called from expression context');
47
+ });
48
+
49
it('should support invariant calls with args', () => {
50
expect(
51
transform(`
scripts/error-codes/transform-error-messages.js
+10
-2
@@ -64,6 +64,14 @@ module.exports = function(babel) {
64
])
65
);
66
67
+ const parentStatementPath = path.parentPath;
68
+ if (parentStatementPath.type !== 'ExpressionStatement') {
69
+ throw path.buildCodeFrameError(
70
+ 'invariant() cannot be called from expression context. Move ' +
71
+ 'the call to its own statement.'
72
+ );
73
+ }
74
+
75
if (noMinify) {
76
// Error minification is disabled for this build.
77
//
@@ -71,7 +79,7 @@ module.exports = function(babel) {
79
// if (!condition) {
80
// throw ReactError(Error(`A ${adj} message that contains ${noun}`));
81
// }
74
- path.replaceWith(
82
+ parentStatementPath.replaceWith(
83
t.ifStatement(
84
t.unaryExpression('!', condition),
85
t.blockStatement([devThrow])
@@ -138,7 +146,7 @@ module.exports = function(babel) {
146
// throw ReactErrorProd(Error(ERR_CODE), adj, noun);
147
// }
148
// }
141
- path.replaceWith(
149
+ parentStatementPath.replaceWith(
150
t.ifStatement(
151
t.unaryExpression('!', condition),
152
t.blockStatement([