per-component client directives

libSrc/components/Tooltip/Tooltip.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, {
   createElement,
   type ForwardRefExoticComponent,

libSrc/components/banner/BannerButton/BannerButton.tsx

@@ -21,7 +21,7 @@ const BannerButton = ({
     className
   )
 
-  const { className: spanClassName, ...remainingSpanProps } = spanProps || {}
+  const { className: spanClassName, ...remainingSpanProps } = spanProps ?? {}
   const spanClasses = classNames('usa-banner__button-text', spanClassName)
 
   return (

libSrc/components/banner/BannerHeader/BannerHeader.tsx

@@ -36,18 +36,18 @@ const BannerHeader = ({
   )
 
   const { className: innerDivClassName, ...remainingInnerDivProps } =
-    innerDivProps || {}
+    innerDivProps ?? {}
   const innerDivClasses = classNames('usa-banner__inner', innerDivClassName)
 
   const { className: headerTextClassName, ...remainingHeaderTextProps } =
-    headerTextProps || {}
+    headerTextProps ?? {}
   const headerTextClasses = classNames(
     'usa-banner__header-text',
     headerTextClassName
   )
 
   const { className: headerActionClassName, ...remainingHeaderActionProps } =
-    headerActionProps || {}
+    headerActionProps ?? {}
   const headerActionClasses = classNames(
     'usa-banner__header-action',
     headerActionClassName

libSrc/components/forms/fileinput/FileInput/FileInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useRef, useImperativeHandle, useEffect } from 'react'
 import classnames from 'classnames'
 

libSrc/components/forms/fileinput/FilePreview/FilePreview.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { SPACER_GIF } from '../../../../utils/constants.js'

libSrc/components/modal/Modal/Modal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useState, useRef, useImperativeHandle } from 'react'
 import ReactDOM from 'react-dom'
 import FocusTrap from 'focus-trap-react'

libSrc/components/modal/ModalWindow/ModalWindow.tsx

@@ -15,7 +15,7 @@ export interface BaseModalWindowProps {
 export type ModalWindowProps = BaseModalWindowProps &
   JSX.IntrinsicElements['div']
 
-export const ModalWindow = (
+const ModalWindow = (
   {
     modalId,
     className,

libSrc/index.ts

@@ -1,3 +1,5 @@
+'use client'
+
 // Global CSS
 import './styles/index.scss'
 

package.json

@@ -125,6 +125,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
+    "rollup-preserve-directives": "^1.1.1",
     "sass": "^1.26.0",
     "storybook": "^8.0.4",
     "stylelint": "^16.2.1",
@@ -134,6 +135,7 @@
     "stylelint-config-sass-guidelines": "^11.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-prettier": "^5.0.0",
+    "terser": "^5.30.4",
     "tsx": "^4.7.3",
     "type-fest": "^4.17.0",
     "typescript": "^5.1.6",

scripts/cli.ts

@@ -87,12 +87,20 @@ const buildCommand = new Command('build').action(async () => {
   } satisfies InlineConfig
 
   const bundleConfig = { build: structuredClone(baseBuildConfig) }
-  ;(esConfig as any).build.outDir = 'lib/dist'
-  ;(esConfig as any).build.lib = {
+  ;(bundleConfig as any).build.outDir = 'lib/dist'
+  ;(bundleConfig as any).build.lib = {
     entry: 'libSrc/index.ts',
     name: 'ReactUSWDS',
   }
-  delete (esConfig as any).build.rollupOptions.output.entryFileNames
+  delete (bundleConfig as any).build.rollupOptions.output.entryFileNames
+  // Support React Server Components
+  // See: https://react.dev/reference/react/use-client
+  ;(bundleConfig as any).build.rollupOptions.output.banner = (
+    assetInfo: any
+  ) =>
+    assetInfo.fileName.endsWith('.js') || assetInfo.fileName.endsWith('.cjs')
+      ? '"use client";'
+      : ''
 
   // cjs
   await build(cjsConfig)

vite.config.ts

@@ -5,6 +5,7 @@ import { defineConfig } from 'vite'
 import svgr from 'vite-plugin-svgr'
 import { checker } from 'vite-plugin-checker'
 import react from '@vitejs/plugin-react'
+import preserveDirectives from 'rollup-preserve-directives'
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 
@@ -37,6 +38,7 @@ export default defineConfig(({ mode }) => {
         svgrOptions: { icon: true, memo: true },
         include: '**/*.svg?svgr',
       }),
+      preserveDirectives(),
     ],
     build: {
       outDir: 'lib',
@@ -50,12 +52,6 @@ export default defineConfig(({ mode }) => {
         ],
       },
       sourcemap: true,
-      terserOptions: {
-        compress: {
-          // Preserve directives like "use client"
-          directives: false,
-        },
-      },
     },
     css: {
       devSourcemap: true,

yarn.lock

@@ -11697,6 +11697,13 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+rollup-preserve-directives@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-preserve-directives/-/rollup-preserve-directives-1.1.1.tgz#40d58b412ff791278ef06e0fa0944cbca3d6bd6d"
+  integrity sha512-+eQafbuEfDPfxQ9hQPlwaROfin4yiVRxap8hnrvvvcSGoukv1tTiYpAW9mvm3uR8J+fe4xd8FdVd5rz9q7jZ+Q==
+  dependencies:
+    magic-string "^0.30.5"
+
 rollup@^4.13.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.13.0.tgz#dd2ae144b4cdc2ea25420477f68d4937a721237a"
@@ -12763,6 +12770,16 @@ terser@^5.26.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+terser@^5.30.4:
+  version "5.30.4"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.30.4.tgz#62b4d16a819424e6317fd5ceffb4ee8dc769803a"
+  integrity sha512-xRdd0v64a8mFK9bnsKVdoNP9GQIKUAaJPTaqEQDL4w/J8WaW4sWXXoMZ+6SimPkfT5bElreXf8m9HnmPc3E1BQ==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"