build(react-utils): preserve directives with bundle: true

Prior to this commit, we've had an issue where directives like `"use
client"` gets stripped out of the `chunk-*` files created in the `dist`
folder, when specifying `bundle: true` in `tsup.config.ts`.
I tried to trace this issue and found a corresponding one in the `esbuild` repo (0).
In that, i found that @Seojunhwan had created a ESBuild plugin (1) that
resolves this issue. Though, as of this writing, the plugin doesn't
support single-quote directives, which we have in our repository. I
forked the repo and submitted a PR for that (2). Until then, i've
published my fix under my personal namespace and use it here.

[0]: evanw/esbuild#3115
[1]: https://github.com/Seojunhwan/esbuild-plugin-preserve-directives
[2]: Seojunhwan/esbuild-plugin-preserve-directives#15

packages/react-utils/package.json

@@ -39,6 +39,7 @@
  "test-types": "tsc --noEmit"
  },
  "devDependencies": {
+ "@adamsoderstrom/esbuild-plugin-preserve-directives": "0.0.10",
  "@noaignite/types": "workspace:^",
  "@repo/eslint-config": "workspace:*",
  "@repo/typescript-config": "workspace:*",

packages/react-utils/tsup.config.ts

@@ -1,11 +1,19 @@
+import { preserveDirectivesPlugin } from '@adamsoderstrom/esbuild-plugin-preserve-directives'
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
  entry: ['src/**/*.{ts,tsx}'],
  format: ['esm'],
- bundle: false, // NOTE: Disable `bundle` as this causes issues with the 'use client' directive.
+ bundle: true,
  clean: true,
  dts: true,
  minify: true,
  sourcemap: true,
+ esbuildPlugins: [
+ preserveDirectivesPlugin({
+ directives: ['use client', 'use strict'],
+ include: /\.(js|ts|jsx|tsx)$/,
+ exclude: /node_modules/,
+ }),
+ ],
 })