[Fresh] Add options to configure RefreshSig and RefreshReg identifiers (#17340)
Vasilii Cuhar committed
Nov 12, 2019 at 16:16 UTC
f4cc45ce962adc9f307690e1d5cfa28a288418eb
3 files changed
+43
-3
packages/react-refresh/src/ReactFreshBabelPlugin.js
+5
-3
@@ -22,6 +22,8 @@ export default function(babel, opts = {}) {
22
}
23
24
const {types: t} = babel;
25
+ const refreshReg = t.identifier(opts.refreshReg || '$RefreshReg$');
26
+ const refreshSig = t.identifier(opts.refreshSig || '$RefreshSig$');
27
28
const registrationsByProgramPath = new Map();
29
function createRegistration(programPath, persistentID) {
@@ -517,7 +519,7 @@ export default function(babel, opts = {}) {
519
const sigCallID = path.scope.generateUidIdentifier('_s');
520
path.scope.parent.push({
521
id: sigCallID,
520
- init: t.callExpression(t.identifier('$RefreshSig$'), []),
522
+ init: t.callExpression(refreshSig, []),
523
});
524
525
// The signature call is split in two parts. One part is called inside the function.
@@ -579,7 +581,7 @@ export default function(babel, opts = {}) {
581
const sigCallID = path.scope.generateUidIdentifier('_s');
582
path.scope.parent.push({
583
id: sigCallID,
582
- init: t.callExpression(t.identifier('$RefreshSig$'), []),
584
+ init: t.callExpression(refreshSig, []),
585
});
586
587
// The signature call is split in two parts. One part is called inside the function.
@@ -743,7 +745,7 @@ export default function(babel, opts = {}) {
745
path.pushContainer(
746
'body',
747
t.expressionStatement(
746
- t.callExpression(t.identifier('$RefreshReg$'), [
748
+ t.callExpression(refreshReg, [
749
handle,
750
t.stringLiteral(persistentID),
751
]),
packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+18
@@ -25,6 +25,7 @@ function transform(input, options = {}) {
25
skipEnvCheck: true,
26
// To simplify debugging tests:
27
emitFullSignatures: true,
28
+ ...options.freshOptions,
29
},
30
],
31
...(options.plugins || []),
@@ -480,4 +481,21 @@ describe('ReactFreshBabelPlugin', () => {
481
`),
482
).toMatchSnapshot();
483
});
484
+
485
+ it('uses custom identifiers for $RefreshReg$ and $RefreshSig$', () => {
486
+ expect(
487
+ transform(
488
+ `export default function Bar () {
489
+ useContext(X)
490
+ return <Foo />
491
+ };`,
492
+ {
493
+ freshOptions: {
494
+ refreshReg: 'import.meta.refreshReg',
495
+ refreshSig: 'import.meta.refreshSig',
496
+ },
497
+ },
498
+ ),
499
+ ).toMatchSnapshot();
500
+ });
501
});
packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+20
@@ -574,6 +574,26 @@ $RefreshReg$(_c, "Hello");
574
$RefreshReg$(_c2, "Bar");
575
`;
576
577
+exports[`ReactFreshBabelPlugin uses custom identifiers for $RefreshReg$ and $RefreshSig$ 1`] = `
578
+var _s = import.meta.refreshSig();
579
+
580
+export default function Bar() {
581
+ _s();
582
+
583
+ useContext(X);
584
+ return <Foo />;
585
+}
586
+
587
+_s(Bar, "useContext{}");
588
+
589
+_c = Bar;
590
+;
591
+
592
+var _c;
593
+
594
+import.meta.refreshReg(_c, "Bar");
595
+`;
596
+
597
exports[`ReactFreshBabelPlugin uses original function declaration if it get reassigned 1`] = `
598
function Hello() {
599
return <h1>Hi</h1>;