chore(bundling): clean up package.json update function (#12152)

packages/esbuild/src/executors/esbuild/esbuild.impl.ts

@@ -17,6 +17,8 @@ import { removeSync, writeJsonSync } from 'fs-extra';
 import { getClientEnvironment } from '../../utils/environment-variables';
 import { createAsyncIterable } from '@nrwl/js/src/utils/create-async-iterable/create-async-iteratable';
 
+const CJS_FILE_EXTENSION = '.cjs';
+
 export async function* esbuildExecutor(
   _options: EsBuildExecutorOptions,
   context: ExecutorContext
@@ -30,6 +32,7 @@ export async function* esbuildExecutor(
     {
       ...options,
       skipTypings: options.skipTypeCheck,
+      outputFileExtensionForCjs: CJS_FILE_EXTENSION,
     },
     context
   );
@@ -185,7 +188,7 @@ function getOutfile(
     return candidate;
   } else {
     const { dir, name } = parse(candidate);
-    return `${dir}/${name}.cjs`;
+    return `${dir}/${name}${CJS_FILE_EXTENSION}`;
   }
 }
 

packages/js/src/utils/package-json/update-package-json.spec.ts

@@ -117,4 +117,32 @@ describe('getUpdatedPackageJsonContent', () => {
       },
     });
   });
+
+  it('should support different CJS file extension', () => {
+    const json = getUpdatedPackageJsonContent(
+      {
+        name: 'test',
+        version: '0.0.1',
+      },
+      {
+        main: 'proj/src/index.ts',
+        outputPath: 'dist/proj',
+        projectRoot: 'proj',
+        format: ['esm', 'cjs'],
+        outputFileExtensionForCjs: '.cjs',
+        generateExportsField: true,
+      }
+    );
+
+    expect(json).toEqual({
+      name: 'test',
+      main: './src/index.cjs',
+      module: './src/index.js',
+      types: './src/index.d.ts',
+      version: '0.0.1',
+      exports: {
+        '.': { require: './src/index.cjs', import: './src/index.js' },
+      },
+    });
+  });
 });

packages/js/src/utils/package-json/update-package-json.ts

@@ -22,13 +22,16 @@ function getMainFileDirRelativeToProjectRoot(
   return relativeDir === '' ? `./` : `./${relativeDir}/`;
 }
 
+export type SupportedFormat = 'cjs' | 'esm';
+
 export interface UpdatePackageJsonOption {
   projectRoot: string;
-  outputPath: string;
   main: string;
-  format?: string[];
+  format?: SupportedFormat[];
-  skipTypings?: boolean;
+  outputPath: string;
   outputFileName?: string;
+  outputFileExtensionForCjs?: `.${string}`;
+  skipTypings?: boolean;
   generateExportsField?: boolean;
   updateBuildableProjectDepsInPackageJson?: boolean;
   buildableProjectDepsInPackageJsonType?: 'dependencies' | 'peerDependencies';
@@ -105,15 +108,14 @@ export function getUpdatedPackageJsonContent(
     exports['.']['import'] = mainJsFile;
   }
 
-  // If CJS file ends with .cjs then use that, otherwise default to main file.
+  // CJS output may have .cjs or .js file extensions.
-  // Bundlers like webpack, rollup and, esbuild supports .cjs for CJS and .js for ESM.
+  // Bundlers like rollup and esbuild supports .cjs for CJS and .js for ESM.
-  // Compilers like tsc, swc do not have different file extensions.
+  // Bundlers/Compilers like webpack, tsc, swc do not have different file extensions.
   if (hasCjsFormat) {
     const { dir, name } = parse(mainJsFile);
-    let cjsMain = `${dir}/${name}.cjs`;
+    const cjsMain = `${dir}/${name}${
-    cjsMain = fileExists(join(options.outputPath, cjsMain))
+      options.outputFileExtensionForCjs ?? '.js'
-      ? cjsMain
+    }`;
-      : mainJsFile;
     packageJson.main ??= cjsMain;
     exports['.']['require'] = cjsMain;
   }