From 63f2a973151641f97d3eff95a83abff4805f4bd9 Mon Sep 17 00:00:00 2001
From: Eric Eldredge <lettertwo@gmail.com>
Date: Thu, 7 Apr 2022 10:50:18 -0400
Subject: [PATCH] Disable react refresh for library targets (#7914)

For library targets:
  - Skips applying refresh transforms in JSTransformer
  - Skips applying ReactRefreshRuntime
  - Skips applying transforms in ReactRefreshWrapTransformer
  - Adds test asserting that runtime and transforms are not applied

Fixes #7359, #7496, #7652, #7900
See also: #6892

Co-authored-by: Niklas Mischkulnig <4586894+mischnic@users.noreply.github.com>
---
 .../Component.jsx                             |  7 +++
 .../react-refresh-library-target/index.js     |  3 ++
 .../react-refresh-library-target/package.json |  9 ++++
 .../react-refresh-library-target/yarn.lock    |  0
 .../integration-tests/test/react-refresh.js   | 44 ++++++++++++++++++-
 .../react-refresh/src/ReactRefreshRuntime.js  |  1 +
 packages/transformers/js/src/JSTransformer.js |  1 +
 .../src/ReactRefreshWrapTransformer.js        |  1 +
 8 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/integration-tests/test/integration/react-refresh-library-target/Component.jsx
 create mode 100644 packages/core/integration-tests/test/integration/react-refresh-library-target/index.js
 create mode 100644 packages/core/integration-tests/test/integration/react-refresh-library-target/package.json
 create mode 100644 packages/core/integration-tests/test/integration/react-refresh-library-target/yarn.lock

diff --git a/packages/core/integration-tests/test/integration/react-refresh-library-target/Component.jsx b/packages/core/integration-tests/test/integration/react-refresh-library-target/Component.jsx
new file mode 100644
index 00000000000..7295e2c0812
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/react-refresh-library-target/Component.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Component = () => {
+  return <div>test</div>;
+}
+
+export default Component
diff --git a/packages/core/integration-tests/test/integration/react-refresh-library-target/index.js b/packages/core/integration-tests/test/integration/react-refresh-library-target/index.js
new file mode 100644
index 00000000000..98dd6e2e211
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/react-refresh-library-target/index.js
@@ -0,0 +1,3 @@
+import Component from './Component'
+
+export {Component}
diff --git a/packages/core/integration-tests/test/integration/react-refresh-library-target/package.json b/packages/core/integration-tests/test/integration/react-refresh-library-target/package.json
new file mode 100644
index 00000000000..07f897897da
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/react-refresh-library-target/package.json
@@ -0,0 +1,9 @@
+{
+  "source": "index.js",
+  "main": "dist/main.js",
+  "dependencies": {
+    "@parcel/transformer-react-refresh-wrap": "*",
+    "react": "*",
+    "react-dom": "*"
+  }
+}
diff --git a/packages/core/integration-tests/test/integration/react-refresh-library-target/yarn.lock b/packages/core/integration-tests/test/integration/react-refresh-library-target/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/react-refresh.js b/packages/core/integration-tests/test/react-refresh.js
index a9a2558c672..f46c2dae421 100644
--- a/packages/core/integration-tests/test/react-refresh.js
+++ b/packages/core/integration-tests/test/react-refresh.js
@@ -9,9 +9,10 @@ import {
   overlayFS as fs,
   sleep,
   run,
+  getNextBuildSuccess,
 } from '@parcel/test-utils';
 import getPort from 'get-port';
-import type {BuildEvent} from '@parcel/types';
+import type {BuildEvent, Asset} from '@parcel/types';
 // flowlint-next-line untyped-import:off
 import JSDOM from 'jsdom';
 import nullthrows from 'nullthrows';
@@ -203,9 +204,48 @@ if (MessageChannel) {
           },
         },
       );
-
       await run(b, {}, {require: false});
     });
+
+    it('does not apply to library targets', async () => {
+      let port = await getPort();
+      let parcel = await bundler(
+        path.join(
+          __dirname,
+          '/integration/react-refresh-library-target/index.js',
+        ),
+        {
+          hmrOptions: {
+            port,
+          },
+        },
+      );
+      let result = await getNextBuildSuccess(parcel);
+      let bundle = nullthrows(
+        result.bundleGraph.getBundles().find(b => b.type === 'js'),
+      );
+
+      // Make sure react-refresh transforms were not applied.
+      let assets: Asset[] = [];
+      bundle.traverse(node => {
+        if (node.type === 'asset') {
+          assets.push(node.value);
+        } else if (node.type === 'dependency') {
+          assert(
+            !node.value.specifier.startsWith('react-refresh/runtime') &&
+              !node.value.specifier.startsWith(
+                '@parcel/transformer-react-refresh-wrap',
+              ),
+          );
+        }
+      });
+      for (let asset of assets) {
+        let code = await asset.getCode();
+        assert(
+          !code.includes('$RefreshReg$') && !code.includes('$RefreshSig$'),
+        );
+      }
+    });
   });
 }
 
diff --git a/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js b/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js
index cb17059ece3..84586fd669f 100644
--- a/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js
+++ b/packages/runtimes/react-refresh/src/ReactRefreshRuntime.js
@@ -20,6 +20,7 @@ export default (new Runtime({
       bundle.type !== 'js' ||
       !options.hmrOptions ||
       !bundle.env.isBrowser() ||
+      bundle.env.isLibrary ||
       bundle.env.isWorker() ||
       bundle.env.isWorklet() ||
       options.mode !== 'development' ||
diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js
index b513df85c6f..dd38cb798bc 100644
--- a/packages/transformers/js/src/JSTransformer.js
+++ b/packages/transformers/js/src/JSTransformer.js
@@ -404,6 +404,7 @@ export default (new Transformer({
       is_development: options.mode === 'development',
       react_refresh:
         asset.env.isBrowser() &&
+        !asset.env.isLibrary &&
         !asset.env.isWorker() &&
         !asset.env.isWorklet() &&
         Boolean(config?.reactRefresh),
diff --git a/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js b/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js
index faa50400114..fc990d5cb1c 100644
--- a/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js
+++ b/packages/transformers/react-refresh-wrap/src/ReactRefreshWrapTransformer.js
@@ -8,6 +8,7 @@ function shouldExclude(asset, options) {
     !asset.isSource ||
     !options.hmrOptions ||
     !asset.env.isBrowser() ||
+    asset.env.isLibrary ||
     asset.env.isWorker() ||
     asset.env.isWorklet() ||
     options.mode !== 'development' ||