tsup.config.ts

import {defineConfig} from 'tsup';
import {writeFileSync} from 'node:fs';
import {resolve} from 'node:path';

// ─────────────────────────────────────────────────────────────────────────────
// CJS COMPAT CONTRACT (see lib/cjs.ts for the full history). The published CJS
// artifact MUST satisfy at runtime:
//     require('react-draggable')               === Draggable class
//     require('react-draggable').default        === Draggable class
//     require('react-draggable').DraggableCore   === DraggableCore class
//
// tsup's default-export CJS interop emits `exports.default = Draggable` but does
// NOT make `module.exports === Draggable`. So we let tsup emit the CJS build of
// `Draggable.tsx` (-> build/cjs/Draggable.js) and then, in `onSuccess`, write a
// hand-rolled `build/cjs/cjs.js` that reconciles module.exports to the legacy
// dual-export shape. The ESM (.mjs) and the generated .d.ts come straight from
// `lib/cjs.ts` and keep the modern default+named export shape.
//
// The UMD/global build (build/web/react-draggable.min.js) is produced by webpack
// (see webpack.config.js), NOT tsup: esbuild's IIFE format cannot map the bare
// `react`/`react-dom` imports to the browser `React`/`ReactDOM` globals the way
// webpack's `libraryTarget: 'umd'` + externals does. Webpack is retained solely
// for that one artifact.
// ─────────────────────────────────────────────────────────────────────────────

const LEGACY_CJS_ENTRY = `'use strict';
// Generated by tsup.config.ts onSuccess. See that file for the compat rationale.
const Draggable = require('./Draggable.js');
const DraggableCore = Draggable.DraggableCore;
const Default = Draggable.default || Draggable;

module.exports = Default;
module.exports.default = Default;
module.exports.DraggableCore = DraggableCore;
`;

const external = ['react', 'react-dom', 'prop-types', 'clsx'];

export default defineConfig({
  entry: {
    cjs: 'lib/cjs.ts',
    Draggable: 'lib/Draggable.tsx',
  },
  outDir: 'build/cjs',
  format: ['cjs', 'esm'],
  dts: true,
  sourcemap: true,
  clean: true,
  target: 'es2019',
  external,
  // ESM output -> .mjs, CJS output -> .js (so package "main" stays build/cjs/cjs.js).
  outExtension({format}) {
    return {js: format === 'cjs' ? '.js' : '.mjs'};
  },
  async onSuccess() {
    // Overwrite the tsup-generated cjs.js with the legacy dual-export shape so
    // `module.exports === Draggable` holds. cjs.mjs and cjs.d.ts are left as-is.
    writeFileSync(resolve('build/cjs/cjs.js'), LEGACY_CJS_ENTRY);
  },
});