Migrate build system from Rollup+Babel to tsdown and switch to PNPM

[Copilot]

Replaces Rollup with Babel transpilation with tsdown (Rolldown-based bundler) for faster builds and reduced configuration complexity. Switches package manager from Yarn to PNPM.

Build System Changes

• Removed dependencies: rollup, @rollup/plugin-*, @babel/* (8 packages)
• Added: tsdown with unified config in tsdown.config.ts
• Output format: Migrated to modern conventions
  • dist/bundle.cjs.js → dist/index.cjs
  • dist/bundle.esm.js → dist/index.mjs
  • polyfilled.js → polyfilled.cjs
  • Declaration files now use .d.cts/.d.mts extensions
• package.json exports: Added modern exports field for proper ESM/CJS resolution
• Polyfilled build: Created src/polyfilled.ts entry point that re-exports main module with global ResizeObserver polyfill injection

Package Manager Migration

• Replaced yarn.lock with pnpm-lock.yaml
• Updated all script references: yarn → pnpm
• Updated installation instructions in README.md and CONTRIBUTING.md

Configuration Updates

• tsconfig.json: Modernized to ES2020 target with ESNext modules, added declarationMap
• tests/tsconfig.json: Added skipLibCheck to resolve type conflicts
• Removed rollup.config.js and .babelrc
• Updated .size-limit.json to reference new output paths

Output Example

// Before: global injection via rollup-plugin-inject
// After: explicit polyfill in src/polyfilled.ts
import { ResizeObserver } from '@juggle/resize-observer'

if (typeof globalThis !== 'undefined' && 
    typeof (globalThis as typeof globalThis & { ResizeObserver?: unknown }).ResizeObserver === 'undefined') {
  (globalThis as typeof globalThis & { ResizeObserver: typeof ResizeObserver }).ResizeObserver = ResizeObserver
}

export * from './index'
export { default } from './index'

All existing outputs maintained, build time reduced, configuration simplified from 2 files (rollup.config.js + .babelrc) to 1 (tsdown.config.ts).

Original prompt

Summary

Migrate the build system from Rollup with Babel to tsdown (a modern, fast TypeScript bundler based on Rolldown).

Current Build Setup

• Bundler: Rollup with Babel for TypeScript transpilation
• Config files: rollup.config.js, .babelrc
• Outputs:
  • dist/bundle.cjs.js (CommonJS)
  • dist/bundle.esm.js (ESM)
  • polyfilled.js (CommonJS with ResizeObserver polyfill injected)
  • dist/index.d.ts (TypeScript declarations via tsc)

Migration Tasks

1. Install tsdown

Add tsdown as a dev dependency.

2. Create tsdown.config.ts

Create a tsdown configuration that:

• Outputs both CJS and ESM formats
• Generates TypeScript declarations (.d.ts)
• Externalizes react
• Outputs to dist/ directory with naming convention matching current output (bundle.cjs.js and bundle.esm.js) OR update package.json to use tsdown's default naming

3. Create src/polyfilled.ts entry file

For the polyfilled version (which injects @juggle/resize-observer), create a separate entry file:

import { ResizeObserver } from '@juggle/resize-observer'

// Inject the polyfill globally if needed
if (typeof window !== 'undefined' && !window.ResizeObserver) {
  window.ResizeObserver = ResizeObserver
}

export { default } from './index'

Add a separate tsdown config entry for this polyfilled build that:

• Uses src/polyfilled.ts as entry
• Outputs CJS format only
• Outputs to root as polyfilled.js
• Externalizes react and @juggle/resize-observer
• Generates polyfilled.d.ts

4. Update package.json

• Update the build script to use tsdown
• Add a watch script: tsdown --watch
• Update main, module, and types fields if output names change
• Add modern exports field for better ESM/CJS resolution
• Remove old Rollup and Babel dependencies:
  • @rollup/plugin-babel
  • @rollup/plugin-inject
  • @rollup/plugin-node-resolve
  • rollup
  • @babel/core
  • @babel/plugin-transform-runtime
  • @babel/preset-env
  • @babel/preset-typescript

5. Delete old config files

• Remove rollup.config.js
• Remove .babelrc

6. Update tsconfig.json (optional but recommended)

Modernize the tsconfig for better compatibility with tsdown:

• Update module to ESNext
• Update target to ES2020 or similar modern target
• Update moduleResolution to bundler
• Add declarationMap: true for better debugging

Expected Outcome

• Build should produce the same outputs (CJS, ESM, declarations, polyfilled version)
• Faster build times with tsdown
• Simpler configuration with fewer dependencies
• All existing tests should continue to pass

Reference Files

• Current entry: src/index.ts
• Current Rollup config: rollup.config.js
• Current Babel config: .babelrc
• Utils: src/utils/extractSize.ts, src/utils/useResolvedElement.ts

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.