[Fresh] Add options to configure RefreshSig and RefreshReg identifiers (

#17340)
facebook · Nov 12, 2019 · f4cc45c · f4cc45c
1 parent ade7641
commit f4cc45c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -22,6 +22,8 @@ export default function(babel, opts = {}) {
   }
 
   const {types: t} = babel;
+  const refreshReg = t.identifier(opts.refreshReg || '$RefreshReg$');
+  const refreshSig = t.identifier(opts.refreshSig || '$RefreshSig$');
 
   const registrationsByProgramPath = new Map();
   function createRegistration(programPath, persistentID) {
@@ -517,7 +519,7 @@ export default function(babel, opts = {}) {
           const sigCallID = path.scope.generateUidIdentifier('_s');
           path.scope.parent.push({
             id: sigCallID,
-            init: t.callExpression(t.identifier('$RefreshSig$'), []),
+            init: t.callExpression(refreshSig, []),
           });
 
           // The signature call is split in two parts. One part is called inside the function.
@@ -579,7 +581,7 @@ export default function(babel, opts = {}) {
           const sigCallID = path.scope.generateUidIdentifier('_s');
           path.scope.parent.push({
             id: sigCallID,
-            init: t.callExpression(t.identifier('$RefreshSig$'), []),
+            init: t.callExpression(refreshSig, []),
           });
 
           // The signature call is split in two parts. One part is called inside the function.
@@ -743,7 +745,7 @@ export default function(babel, opts = {}) {
             path.pushContainer(
               'body',
               t.expressionStatement(
-                t.callExpression(t.identifier('$RefreshReg$'), [
+                t.callExpression(refreshReg, [
                   handle,
                   t.stringLiteral(persistentID),
                 ]),

diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -25,6 +25,7 @@ function transform(input, options = {}) {
             skipEnvCheck: true,
             // To simplify debugging tests:
             emitFullSignatures: true,
+            ...options.freshOptions,
           },
         ],
         ...(options.plugins || []),
@@ -480,4 +481,21 @@ describe('ReactFreshBabelPlugin', () => {
       `),
     ).toMatchSnapshot();
   });
+
+  it('uses custom identifiers for $RefreshReg$ and $RefreshSig$', () => {
+    expect(
+      transform(
+        `export default function Bar () {
+        useContext(X)
+        return <Foo />
+      };`,
+        {
+          freshOptions: {
+            refreshReg: 'import.meta.refreshReg',
+            refreshSig: 'import.meta.refreshSig',
+          },
+        },
+      ),
+    ).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -574,6 +574,26 @@ $RefreshReg$(_c, "Hello");
 $RefreshReg$(_c2, "Bar");
 `;
 
+exports[`ReactFreshBabelPlugin uses custom identifiers for $RefreshReg$ and $RefreshSig$ 1`] = `
+var _s = import.meta.refreshSig();
+
+export default function Bar() {
+  _s();
+
+  useContext(X);
+  return <Foo />;
+}
+
+_s(Bar, "useContext{}");
+
+_c = Bar;
+;
+
+var _c;
+
+import.meta.refreshReg(_c, "Bar");
+`;
+
 exports[`ReactFreshBabelPlugin uses original function declaration if it get reassigned 1`] = `
 function Hello() {
   return <h1>Hi</h1>;