Preserve 'use client' directive only for one components (not all) ?

[dcz-switcher]

First of all, a big thanks for sharing your work

This is a painful issue when you want to build a shared library for frameworks like NextJS which can render on client and server side

In my case, I have a components folder with one subfolder per component
Only one of them need 'use client' directive (because it use "Context")

In each component's folder I have a index.ts with the export of the component
and at the root of the components folder I have a index.ts with the global export command

I try your code but it seams that the 'use client' directive is set in the index.ej.js of the root
So I think that all components will be tagged as 'client'

I am Right ?
If yes, is there any way to put the directive only on one component ?

Regards

[soobing]

@dcz-switcher Hello, thank you for using my library and for leaving such a detailed explanation! 😊

If you don’t separate server and client components into distinct bundles, the 'use client' directive included in a module may propagate to an index.ts file that re-exports it, causing the entire bundle to be treated as a client module.

In my case, I configured the bundling process to generate separate bundles for each component instead of merging all components into a single bundle. I use Vite for bundling and set it up to create distinct output bundles for each component. Below is the part of my configuration responsible for this functionality:

# Folder Structure Example
packages/
├── components/          
│   ├── atoms/           
│   │   ├── Component1
│   │   │  ├── index.tsx
│   │   │  ├── component1.module.css
│   │   │  ├── component1.stories.tsx
│   │   ├── Component2
│   │   │  ├── index.tsx
│   │   │  ├── component2.module.css
│   │   │  ├── component2.stories.tsx
│   ├── molecules/       
│   ├── organisms/       
│   ├── templates/       
├── main.ts              # Root entry point for the library

rollupOptions: {
  input: Object.fromEntries(
    glob
      .sync('packages/**/*.{ts,tsx}', {
        ignore: ['packages/**/*.stories.tsx'],
      })
      .map((file) => [
        relative(
          'packages',
          file.slice(0, file.length - extname(file).length),
        ),
        fileURLToPath(new URL(file, import.meta.url)),
      ]),
  ),
  output: {
    assetFileNames: 'assets/[name]-[hash][extname]',
    entryFileNames: '[name].js',
  },
}

How It Works

1. File Discovery with glob:
   It searches for all .ts and .tsx files in the packages folder and sets each as an individual entry point for bundling. Unnecessary files like stories are excluded.

2. Mapping Entries with Object.fromEntries:
   Each discovered file is mapped as a separate entry point for Rollup.

3. Custom Output Naming:
   entryFileNames and assetFileNames are configured to generate unique file names for each component, resulting in distinct outputs.

By applying this code, you can generate separate bundles for each component, ensuring the 'use client' directive is applied only to the appropriate components.

Thanks to your question, I’ll consider adding this guide to the README of the library.
If you still face any issues, feel free to reach out again. 😊