Register more node types that are used later as JSXIdentifiers (#19514)
Mateusz Burzyński committed
Aug 6, 2020 at 17:37 UTC
a5fed98a96c41cb852355f208bc86a9120f3227e
3 files changed
+57
-25
packages/react-refresh/src/ReactFreshBabelPlugin.js
-3
@@ -140,9 +140,6 @@ export default function(babel, opts = {}) {
140
} else if (calleeType === 'MemberExpression') {
141
// Could be something like React.forwardRef(...)
142
// Pass through.
143
- } else {
144
- // More complicated call.
145
- return false;
143
}
144
break;
145
}
packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+13
-4
@@ -261,7 +261,10 @@ describe('ReactFreshBabelPlugin', () => {
261
Store.subscribe();
262
263
const Header = styled.div\`color: red\`
264
- const Factory = funny.factory\`\`;
264
+ const StyledFactory1 = styled('div')\`color: hotpink\`
265
+ const StyledFactory2 = styled('div')({ color: 'hotpink' })
266
+ const StyledFactory3 = styled(A)({ color: 'hotpink' })
267
+ const FunnyFactory = funny.factory\`\`;
268
269
let Alias1 = A;
270
let Alias2 = A.Foo;
@@ -269,7 +272,7 @@ describe('ReactFreshBabelPlugin', () => {
272
273
function Foo() {
274
return (
272
- <div><A /><B /><Alias1 /><Alias2 /><Header /><Dict.X /></div>
275
+ <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>
276
);
277
}
278
@@ -294,7 +297,10 @@ describe('ReactFreshBabelPlugin', () => {
297
Store.subscribe();
298
299
const Header = styled.div\`color: red\`
297
- const Factory = funny.factory\`\`;
300
+ const StyledFactory1 = styled('div')\`color: hotpink\`
301
+ const StyledFactory2 = styled('div')({ color: 'hotpink' })
302
+ const StyledFactory3 = styled(A)({ color: 'hotpink' })
303
+ const FunnyFactory = funny.factory\`\`;
304
305
let Alias1 = A;
306
let Alias2 = A.Foo;
@@ -304,6 +310,9 @@ describe('ReactFreshBabelPlugin', () => {
310
return [
311
React.createElement(A),
312
React.createElement(B),
313
+ React.createElement(StyledFactory1),
314
+ React.createElement(StyledFactory2),
315
+ React.createElement(StyledFactory3),
316
React.createElement(Alias1),
317
React.createElement(Alias2),
318
jsx(Header),
@@ -408,7 +417,7 @@ describe('ReactFreshBabelPlugin', () => {
417
transform(
418
`
419
import {useFancyState} from './hooks';
411
-
420
+
421
export default function App() {
422
const bar = useFancyState();
423
return <h1>{bar}</h1>;
packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+44
-18
@@ -347,29 +347,42 @@ import Store from './Store';
347
Store.subscribe();
348
const Header = styled.div\`color: red\`;
349
_c = Header;
350
-const Factory = funny.factory\`\`;
350
+const StyledFactory1 = styled('div')\`color: hotpink\`;
351
+_c2 = StyledFactory1;
352
+const StyledFactory2 = styled('div')({
353
+ color: 'hotpink'
354
+});
355
+_c3 = StyledFactory2;
356
+const StyledFactory3 = styled(A)({
357
+ color: 'hotpink'
358
+});
359
+_c4 = StyledFactory3;
360
+const FunnyFactory = funny.factory\`\`;
361
let Alias1 = A;
362
let Alias2 = A.Foo;
363
const Dict = {};
364
365
function Foo() {
356
- return <div><A /><B /><Alias1 /><Alias2 /><Header /><Dict.X /></div>;
366
+ return <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>;
367
}
368
359
-_c2 = Foo;
369
+_c5 = Foo;
370
const B = hoc(A); // This is currently registered as a false positive:
371
362
-_c3 = B;
372
+_c6 = B;
373
const NotAComponent = wow(A); // We could avoid it but it also doesn't hurt.
374
365
-_c4 = NotAComponent;
375
+_c7 = NotAComponent;
376
367
-var _c, _c2, _c3, _c4;
377
+var _c, _c2, _c3, _c4, _c5, _c6, _c7;
378
379
$RefreshReg$(_c, "Header");
370
-$RefreshReg$(_c2, "Foo");
371
-$RefreshReg$(_c3, "B");
372
-$RefreshReg$(_c4, "NotAComponent");
380
+$RefreshReg$(_c2, "StyledFactory1");
381
+$RefreshReg$(_c3, "StyledFactory2");
382
+$RefreshReg$(_c4, "StyledFactory3");
383
+$RefreshReg$(_c5, "Foo");
384
+$RefreshReg$(_c6, "B");
385
+$RefreshReg$(_c7, "NotAComponent");
386
`;
387
388
exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement at definition site 1`] = `
@@ -378,30 +391,43 @@ import Store from './Store';
391
Store.subscribe();
392
const Header = styled.div\`color: red\`;
393
_c = Header;
381
-const Factory = funny.factory\`\`;
394
+const StyledFactory1 = styled('div')\`color: hotpink\`;
395
+_c2 = StyledFactory1;
396
+const StyledFactory2 = styled('div')({
397
+ color: 'hotpink'
398
+});
399
+_c3 = StyledFactory2;
400
+const StyledFactory3 = styled(A)({
401
+ color: 'hotpink'
402
+});
403
+_c4 = StyledFactory3;
404
+const FunnyFactory = funny.factory\`\`;
405
let Alias1 = A;
406
let Alias2 = A.Foo;
407
const Dict = {};
408
409
function Foo() {
387
- return [React.createElement(A), React.createElement(B), React.createElement(Alias1), React.createElement(Alias2), jsx(Header), React.createElement(Dict.X)];
410
+ return [React.createElement(A), React.createElement(B), React.createElement(StyledFactory1), React.createElement(StyledFactory2), React.createElement(StyledFactory3), React.createElement(Alias1), React.createElement(Alias2), jsx(Header), React.createElement(Dict.X)];
411
}
412
390
-_c2 = Foo;
413
+_c5 = Foo;
414
React.createContext(Store);
415
const B = hoc(A); // This is currently registered as a false positive:
416
394
-_c3 = B;
417
+_c6 = B;
418
const NotAComponent = wow(A); // We could avoid it but it also doesn't hurt.
419
397
-_c4 = NotAComponent;
420
+_c7 = NotAComponent;
421
399
-var _c, _c2, _c3, _c4;
422
+var _c, _c2, _c3, _c4, _c5, _c6, _c7;
423
424
$RefreshReg$(_c, "Header");
402
-$RefreshReg$(_c2, "Foo");
403
-$RefreshReg$(_c3, "B");
404
-$RefreshReg$(_c4, "NotAComponent");
425
+$RefreshReg$(_c2, "StyledFactory1");
426
+$RefreshReg$(_c3, "StyledFactory2");
427
+$RefreshReg$(_c4, "StyledFactory3");
428
+$RefreshReg$(_c5, "Foo");
429
+$RefreshReg$(_c6, "B");
430
+$RefreshReg$(_c7, "NotAComponent");
431
`;
432
433
exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `