README.md

rollup-plugin-im-client-component

⚠️ Renamed from rollup-plugin-im-client-component. The unscoped package is deprecated and will no longer receive updates. Update your imports:

- import clientDirective from 'rollup-plugin-im-client-component';
+ import clientDirective from '@stylelish/rollup-plugin-im-client-component';

Let your components say 'use client' themselves

Features

• ✨ Auto-inject 'use client' based on React client API detection
• 🎯 Specifier-level matching (only hooks and client APIs, not jsx-runtime)
• 📦 Source map preservation
• 🔧 Compatible with Vite, Rollup, and Rolldown

Getting Started

Requires

• Node.js 20+

Installation

pnpm add -D @stylelish/rollup-plugin-im-client-component

Quick Start

Vite Library Mode

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import clientDirective from '@stylelish/rollup-plugin-im-client-component';

export default defineConfig({
  build: {
    lib: {
      entry: './src/index.ts',
      formats: ['es'],
    },
    rollupOptions: {
      output: {
        preserveModules: true,
      },
    },
  },
  plugins: [react(), clientDirective()],
});

Rollup

rollup.config.js

import clientDirective from '@stylelish/rollup-plugin-im-client-component';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'es',
    preserveModules: true,
  },
  plugins: [clientDirective()],
};

How It Works

1. Hooks into renderChunk (output phase, after bundling)
2. Parses import statements in each output chunk
3. Detects React client-side API imports (useState, useEffect, etc.)
4. Prepends 'use client' directive to matched files

Note: Use with preserveModules: true so each component gets its own chunk. Otherwise the directive may be applied to a single bundled file.

Options

Option	Type	Default	Description
clientPatterns	ClientPattern[]	Built-in React patterns	Completely replace default detection patterns
extraPatterns	ClientPattern[]	[]	Additional patterns merged with defaults
exclude	string[]	['**/*.css.js']	Glob patterns to skip injection
include	string[]	[]	Glob patterns to always inject
directive	string	'use client'	Directive string to inject

Examples

Add third-party library patterns

clientDirective({
  extraPatterns: [
    { source: /^@radix-ui\/react-/ },
    { source: /^motion\// },
  ],
});

Force include specific files

clientDirective({
  include: ['**/components/**/*.js'],
});

Default Detection

react

Hooks: useState, useEffect, useRef, useCallback, useMemo, useContext, useReducer, useId, useLayoutEffect, useInsertionEffect, useImperativeHandle, useDebugValue, useSyncExternalStore, useTransition, useDeferredValue, useOptimistic, useActionState

Client APIs: use, createContext, forwardRef, memo, lazy, startTransition

react-dom

createPortal, flushSync

react/jsx-runtime is intentionally excluded since all components import it.