@hyperse/esbuild-plugin-preserve-directives

This plugin for esbuild that preserves important directives (e.g., 'use client') at the top of output files

_ support windows, mac, linux._

Installation

npm install --save @hyperse/esbuild-plugin-preserve-directives

Usage

With esbuild

import { build } from 'esbuild';
import { preserveDirectivesPlugin } from '@hyperse/esbuild-plugin-preserve-directives';

build({
  // ... other esbuild options
  metafile: true, // improving the accuracy
  plugins: [
    preserveDirectivesPlugin({
      cwd: process.cwd(),
      directives: ['use client', 'use strict'],
      include: /\.(js|ts|jsx|tsx)$/,
      exclude: /node_modules/,
    }),
  ],
});

build();

With tsup

You must use the esbuildPlugin field & setup treeshake:false

import { defineConfig } from 'tsup';
import { preserveDirectivesPlugin } from './src/preserve-directives.js';

export default defineConfig({
  outDir: 'dist',
  entry: ['src/*/index.ts'],
  tsconfig: 'tsconfig.build.json',
  clean: true,
  silent: true,
  format: 'esm',
  splitting: true,
  dts: true,
  // NOTE we must disable treeshake, because it will treeshake by rollup again.
  treeshake: false,
  sourcemap: true,
  external: [],
  esbuildOptions(options) {
    options.jsx = 'automatic';
  },
  esbuildPlugins: [
    preserveDirectivesPlugin({
      directives: ['use client', 'use strict'],
      include: /\.(js|ts|jsx|tsx)$/,
      exclude: /node_modules/,
    }),
  ],
});

Options

options.directives

List of directives to preserve

options.include

File pattern to apply the plugin (regex)

options.exclude

File pattern to ignore (regex)

options.cwd

The workspace root directory