feat: add cjsInterop support without splitting flag

[tmkx]

esbuild does not provide an exports metadata when the format is cjs.

splitting is working because it's also bundled as esm

tsup/src/esbuild/index.ts

Lines 164 to 165 in fb4c2b6

	format:
	(format === 'cjs' && splitting) || options.treeshake ? 'esm' : format,

and then transformed to cjs:

tsup/src/plugins/cjs-splitting.ts

Lines 21 to 31 in 7000c8b

	const { transform } = await import('sucrase')
	const result = transform(code, {
	filePath: info.path,
	transforms: ['imports'],
	sourceMapOptions: this.options.sourcemap
	? {
	compiledFilename: info.path,
	}
	: undefined,
	})

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tsup	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 29, 2024 9:02am

[kibertoad]

@sxzz Aby updates on this?

[sxzz]

Why don't use code param directly?

[tmkx]

code has already been transpiled to cjs, but we need the source code here

[sxzz]

This could break the plugin system. If a plugin attaches a named export, then cjs interop cannot analyze it.

[tmkx]

you're right, but cjs is difficult to analyze exports, and esbuild does not provide output meta either when the format is cjs

[sxzz]

Merge the object with previous one.

[tmkx]

how to merge the objects? it's a union type:

type ParserConfig = TsParserConfig | EsParserConfig

[sxzz]

Hmmm, can we just enable spiltting automatically if cjsInterop is enabled because of the problem #1056 (comment)? And add the notice to the docs

[tmkx]

1. splitting with cjs has edge cases: export issues with cjs #255
2. it's also broken when a plugin attaches named exports

Input

// src/index.ts
const a = {
  hello: 'world',
};

export default a;

// tsup.config.ts
export default defineConfig({
  entry: ['./src/index.ts'],
  format: 'cjs',
  cjsInterop: true,
  splitting: true,
  plugins: [
    {
      name: 'add',
      renderChunk(code) {
        return {
          code: code + `\nconst newValue = 1;\nexport { newValue };`,
        };
      },
    },
  ],
});

Output

"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
var a = {
  hello: "world"
};
var src_default = a;


exports.default = src_default;

const newValue = 1;
exports.newValue = newValue;
module.exports = exports.default;