From b49a404b0bcbb63358a9436902caac337962960d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Fri, 10 Nov 2023 09:25:33 +0100
Subject: [PATCH] feat: add "use client" to components that use client side
 only React APIs (support for RSC)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We have received several request to add a ["use client"](https://react.dev/reference/react/use-client) directive on top of each React component file that uses client side only React APIs.

The reason is because Next.js takes in use a beta version of React to make RSC work (which is not OK in my opinion – its a super aggressive move 😣).

To make a first move on this, I think we should automate this. And one way to do so, is to use Babel.js – because we use it in our tool-chain.

There is already a very well written and tested plugin, written by Kyle Tsang I suggest to try out.

👉 [babel-plugin-transform-next-use-client](https://github.com/kyletsang/babel-plugin-transform-next-use-client)

This must be the first time we take in use a dependency with 0 GitHub stars. If it turns out to work as expected, we should all give it a start of course.
---
 packages/dnb-eufemia/babel.config.js                  |  4 ++++
 packages/dnb-eufemia/package.json                     |  1 +
 packages/dnb-eufemia/rollup.config.js                 |  1 +
 .../scripts/postbuild/__tests__/postbuild.test.ts     | 11 +++++++++++
 yarn.lock                                             | 10 ++++++++++
 5 files changed, 27 insertions(+)

diff --git a/packages/dnb-eufemia/babel.config.js b/packages/dnb-eufemia/babel.config.js
index 6da23a4ae7b..be2a37a8e03 100644
--- a/packages/dnb-eufemia/babel.config.js
+++ b/packages/dnb-eufemia/babel.config.js
@@ -77,6 +77,10 @@ const productionPlugins = [
   ],
 ]
 
+if (global.bundler !== 'rollup') {
+  productionPlugins.push('babel-plugin-transform-next-use-client')
+}
+
 if (typeof process.env.BABEL_ENV !== 'undefined') {
   productionPlugins.push([
     'babel-plugin-search-and-replace',
diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json
index 468f1fe28a1..6c544186244 100644
--- a/packages/dnb-eufemia/package.json
+++ b/packages/dnb-eufemia/package.json
@@ -189,6 +189,7 @@
     "babel-jest": "29.5.0",
     "babel-plugin-optimize-clsx": "2.6.2",
     "babel-plugin-search-and-replace": "1.1.1",
+    "babel-plugin-transform-next-use-client": "1.1.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "browserslist": "4.21.4",
     "camelcase": "6.2.0",
diff --git a/packages/dnb-eufemia/rollup.config.js b/packages/dnb-eufemia/rollup.config.js
index 43fde079b76..fbd9a21fa76 100644
--- a/packages/dnb-eufemia/rollup.config.js
+++ b/packages/dnb-eufemia/rollup.config.js
@@ -179,6 +179,7 @@ function makeRollupConfig(
   file,
   { name, format = 'umd', excludes = [] } = {}
 ) {
+  global.bundler = 'rollup'
   process.env.BABEL_ENV = format
 
   const globals = {
diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts
index b382cc4b8c4..70d1fe92dce 100644
--- a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts
+++ b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.ts
@@ -285,6 +285,17 @@ describe('babel build', () => {
       )
       expect(content).not.toContain('??')
     }
+
+    {
+      const content = fs.readFileSync(
+        path.resolve(
+          packpath.self(),
+          `build${stage}/components/accordion/Accordion.js`
+        ),
+        'utf-8'
+      )
+      expect(content).toContain('use client')
+    }
   })
 })
 
diff --git a/yarn.lock b/yarn.lock
index dda828258b4..e420718931a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3055,6 +3055,7 @@ __metadata:
     babel-jest: "npm:29.5.0"
     babel-plugin-optimize-clsx: "npm:2.6.2"
     babel-plugin-search-and-replace: "npm:1.1.1"
+    babel-plugin-transform-next-use-client: "npm:1.1.1"
     babel-plugin-transform-react-remove-prop-types: "npm:0.4.24"
     browserslist: "npm:4.21.4"
     camelcase: "npm:6.2.0"
@@ -9875,6 +9876,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-transform-next-use-client@npm:1.1.1":
+  version: 1.1.1
+  resolution: "babel-plugin-transform-next-use-client@npm:1.1.1"
+  peerDependencies:
+    "@babel/core": ^7.22.5
+  checksum: 9d8b00ee5226190da3bf663459dda619032194fae46a702b37834c30445c47e2ccdb52f19318070b9d709968e68ef299fed38eb18e9ecef0bb3a954ce990e221
+  languageName: node
+  linkType: hard
+
 "babel-plugin-transform-object-rest-spread@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-plugin-transform-object-rest-spread@npm:6.26.0"