Default output for cjs + esm dual support

[atomiks]

I'm trying to integrate tsdown into Floating UI floating-ui/floating-ui#3324 and need to make sure it supports legacy bundlers like webpack 4.

As far as I can tell, the best method to simultaneously support CJS and ESM is to do this: https://satya164.page/posts/publishing-dual-module-esm-libraries#wrapping-up

{
  "main": "./cjs/index.js",
  "module": "./esm/index.js",
  "exports": {
    ".": {
      "import": {
        "types": "./esm/index.d.ts",
        "default": "./esm/index.js"
      },
      "require": {
        "types": "./cjs/index.d.ts",
        "default": "./cjs/index.js"
      }
    }
  }
}

i.e. only use .js extensions and specify new folders and a package.json with commonjs and module types.

Issues with .cjs and .mjs on legacy bundlers:

.cjs in "main" breaks legacy bundlers when it's specified in a transitive dependency: floating-ui/floating-ui#1529
.mjs in "module" breaks legacy bundlers: atomiks/floating-ui#2 and motiondivision/motion#1307

The config is pretty small to achieve this, but it requires a prepack.mjs script to create the package.jsons and extra code to work.

I wonder if this should be the default if you specify format: ['cjs', 'esm']?

import {defineConfig} from 'tsdown';

export default [
  defineConfig({
    entry: ['./src'],
    format: ['cjs'],
    unbundle: true,
    outputOptions: {
      dir: 'dist/cjs',
    },
  }),
  defineConfig({
    entry: ['./src'],
    format: ['esm'],
    unbundle: true,
    outputOptions: {
      dir: 'dist/esm',
    },
    outExtensions: () => ({js: '.js'}),
  }),
];

That is — instead of the above, the smallest default config would instead output the esm and cjs folders with the relevant package.jsons:

import {defineConfig} from 'tsdown';

export default defineConfig({
  entry: ['./src'],
  format: ['esm', 'cjs'],
});

---

Another thing is supporting sub-paths on legacy bundlers that don't support an exports map. The simplest way to support it is, again, a new folder with a package.json that points to the relevant dist file with main + module:

my-package/utils/package.json

{
  "main": "../dist/cjs/utils.js",
  "module": "../dist/esm/utils.js",
  "types": "../dist/cjs/utils.d.ts"
}

[sxzz]

Actually it's not the best method I think. We're using the structure like this

dist/
  index.js / or index.mjs
  index.cjs
  other.[m]js
  other.cjs

[sxzz]

In this case, simply setting format: ['esm', 'cjs'] is enough

[atomiks]

The .mjs and .cjs extensions can break legacy bundlers (these errors I encountered were 3 years ago now, but could still be relevant)

Issues with .cjs and .mjs on legacy bundlers:
.cjs in "main" breaks legacy bundlers when it's specified in a transitive dependency: floating-ui/floating-ui#1529
.mjs in "module" breaks legacy bundlers: atomiks/floating-ui#2 and motiondivision/motion#1307

[sxzz]

For legacy bundlers, I'm not sure we can simply use .js for CJS and ignore .mjs files. However, tsdown is a modern tool, and we have no plans to support Webpack 4.

[atomiks]

I'm not sure we can simply use .js for CJS and ignore .mjs files

The cjs/package.json and esm/package.json ensures .js extension work with everything by default since the package.jsons specify "type": "commonjs" and "type": "module". It works in both legacy and modern environments without issue

However, tsdown is a modern tool, and we have no plans to support Webpack 4.

Fair enough, but webpack 4 and old bundlers like in React Native are still (sadly) relevant especially for at-scale libraries that get 20M downloads a week :-(

[sxzz]

Yeah, so the maintainer themselves have to do more work with such compatibility.