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>

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

packages/core/integration-tests/test/integration/react-refresh-library-target/index.js

@@ -0,0 +1,3 @@
+import Component from './Component'
+
+export {Component}

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": "*"
+  }
+}

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$'),
+        );
+      }
+    });
   });
 }
 

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' ||

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),

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' ||