Add RSC 'use client' directive to main package entrypoint

.changeset/sunny-sails-invite.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `'use client'` directive to the `@primer/react-brand` entrypoints to support React Server Components.
+
+Primer Brand components can now be imported into RSC-enabled frameworks like Next.js without manually adding `'use client'` to your files.

packages/e2e/integration-tests/fixtures/KitchenSink.tsx

@@ -1,3 +1,4 @@
+'use client'
 import {useRef} from 'react'
 import {
   Hero,

packages/e2e/integration-tests/nextjs/page.tsx

@@ -1,4 +1,3 @@
-'use client'
 /*eslint-disable */
 import TestFixture from '../integration-tests/fixtures/KitchenSink'
 

packages/react/src/index.ts

@@ -1,3 +1,5 @@
+'use client'
+
 export * from './css/stylesheets'
 
 export * from './Hero'

packages/react/webpack.config.js

@@ -2,6 +2,7 @@ const {name: libraryName} = require('./package')
 const path = require('path')
 const postcssPresetEnv = require('postcss-preset-env')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const {sources, Compilation} = require('webpack')
 
 module.exports = {
   entry: './src/index.ts',
@@ -126,5 +127,23 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: './css/[name].css',
     }),
+    // This is a custom plugin that preserves the 'use client' directive needed for RSC
+    // Do not remove it.
+    // Note: The UMD bundle (generated through this webpack config) doesn't preserve source 1:1.
+    //       This is why we need to restore it using a plugin. This isn't needed with ESM, but needed for UMD.
+    {
+      apply(compiler) {
+        compiler.hooks.thisCompilation.tap('UseClientDirectivePlugin', compilation => {
+          compilation.hooks.processAssets.tap(
+            {name: 'UseClientDirectivePlugin', stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE}, // must run after terser
+            assets => {
+              if (assets['index.js']) {
+                compilation.updateAsset('index.js', new sources.ConcatSource("'use client';\n", assets['index.js']))
+              }
+            },
+          )
+        })
+      },
+    },
   ],
 }