feat: add "use client" to components that use client side only React …

…APIs (support for RSC)

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

@@ -75,6 +75,7 @@ const productionPlugins = [
       mode: 'unsafe-wrap',
     },
   ],
+  'babel-plugin-transform-next-use-client',
 ]
 
 if (typeof process.env.BABEL_ENV !== 'undefined') {

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

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

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"