feat(js): update the setup-build generator to support the new ts setup (#28446)

Update the `@nx/js:setup-build` and the generators it depends on to
support the new TS setup with project references.

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

Author: leosvelperez

docs/generated/packages/esbuild/generators/configuration.json

@@ -61,6 +61,12 @@
         "description": "The build target to add.",
         "type": "string",
         "default": "build"
+      },
+      "format": {
+        "description": "The format to build the library (esm or cjs).",
+        "type": "array",
+        "items": { "type": "string", "enum": ["esm", "cjs"] },
+        "default": ["esm"]
       }
     },
     "required": [],

docs/generated/packages/js/executors/swc.json

@@ -130,13 +130,13 @@
         "description": "Generate a lockfile (e.g. package-lock.json) that matches the workspace lockfile to ensure package versions match.",
         "default": false,
         "x-priority": "internal"
+      },
+      "stripLeadingPaths": {
+        "type": "boolean",
+        "description": "Remove leading directory from output (e.g. src). See: https://swc.rs/docs/usage/cli#--strip-leading-paths",
+        "default": false
       }
     },
-    "stripLeadingPaths": {
-      "type": "boolean",
-      "description": "Remove leading directory from output (e.g. src). See: https://swc.rs/docs/usage/cli#--strip-leading-paths",
-      "default": false
-    },
     "required": ["main", "outputPath", "tsConfig"],
     "definitions": {
       "assetPattern": {

docs/generated/packages/rollup/generators/configuration.json

@@ -26,13 +26,13 @@
       },
       "main": {
         "type": "string",
-        "description": "Path relative to the workspace root for the main entry file. Defaults to '<projectRoot>/src/main.ts'.",
+        "description": "Path relative to the workspace root for the main entry file. Defaults to '<projectRoot>/src/index.ts'.",
         "alias": "entryFile",
         "x-priority": "important"
       },
       "tsConfig": {
         "type": "string",
-        "description": "Path relative to the workspace root for the tsconfig file to build with. Defaults to '<projectRoot>/tsconfig.app.json'.",
+        "description": "Path relative to the workspace root for the tsconfig file to build with. Defaults to '<projectRoot>/tsconfig.lib.json'.",
         "x-priority": "important"
       },
       "skipFormat": {

e2e/js/src/js-packaging.test.ts

@@ -214,14 +214,20 @@ describe('packaging libs', () => {
 
     expect(readJson(`dist/libs/${tscLib}/package.json`).exports).toEqual({
       './package.json': './package.json',
-      '.': './src/index.js',
+      '.': {
+        default: './src/index.js',
+        types: './src/index.d.ts',
+      },
       './foo/bar': './src/foo/bar.js',
       './foo/faz': './src/foo/faz.js',
     });
 
     expect(readJson(`dist/libs/${swcLib}/package.json`).exports).toEqual({
       './package.json': './package.json',
-      '.': './src/index.js',
+      '.': {
+        default: './src/index.js',
+        types: './src/index.d.ts',
+      },
       './foo/bar': './src/foo/bar.js',
       './foo/faz': './src/foo/faz.js',
     });

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

@@ -18,7 +18,10 @@ import {
 import * as esbuild from 'esbuild';
 import { normalizeOptions } from './lib/normalize';
 
-import { EsBuildExecutorOptions } from './schema';
+import {
+  EsBuildExecutorOptions,
+  NormalizedEsBuildExecutorOptions,
+} from './schema';
 import { createAsyncIterable } from '@nx/devkit/src/utils/async-iterable';
 import {
   buildEsbuildOptions,
@@ -213,7 +216,7 @@ export async function* esbuildExecutor(
 }
 
 function getTypeCheckOptions(
-  options: EsBuildExecutorOptions,
+  options: NormalizedEsBuildExecutorOptions,
   context: ExecutorContext
 ) {
   const { watch, tsConfig, outputPath } = options;
@@ -243,7 +246,7 @@ function getTypeCheckOptions(
 }
 
 async function runTypeCheck(
-  options: EsBuildExecutorOptions,
+  options: NormalizedEsBuildExecutorOptions,
   context: ExecutorContext
 ) {
   const { errors, warnings } = await _runTypeCheck(

packages/esbuild/src/executors/esbuild/lib/build-esbuild-options.ts

@@ -125,7 +125,7 @@ export function buildEsbuildOptions(
 
 export function getOutExtension(
   format: 'cjs' | 'esm',
-  options: NormalizedEsBuildExecutorOptions
+  options: Pick<NormalizedEsBuildExecutorOptions, 'userDefinedBuildOptions'>
 ): '.cjs' | '.mjs' | '.js' {
   const userDefinedExt = options.userDefinedBuildOptions?.outExtension?.['.js'];
   // Allow users to change the output extensions from default CJS and ESM extensions.

packages/esbuild/src/executors/esbuild/lib/normalize.ts

@@ -17,7 +17,7 @@ export function normalizeOptions(
   const isTsSolutionSetup = isUsingTsSolutionSetup();
   if (isTsSolutionSetup && options.generatePackageJson) {
     throw new Error(
-      `Setting 'generatePackageJson: true' is not allowed with the current TypeScript setup. Please update the 'package.json' file at the project root as needed and don't set the 'generatePackageJson' option.`
+      `Setting 'generatePackageJson: true' is not supported with the current TypeScript setup. Update the 'package.json' file at the project root as needed and unset the 'generatePackageJson' option.`
     );
   }
 
@@ -26,7 +26,7 @@ export function normalizeOptions(
   // If we're not generating package.json file, then copy it as-is as an asset when not using ts solution setup.
   const assets =
     options.generatePackageJson || isTsSolutionSetup
-      ? options.assets
+      ? options.assets ?? []
       : [
           ...options.assets,
           joinPathFragments(

packages/esbuild/src/executors/esbuild/schema.d.ts

@@ -5,7 +5,7 @@ type Compiler = 'babel' | 'swc';
 
 export interface EsBuildExecutorOptions {
   additionalEntryPoints?: string[];
-  assets: (AssetGlob | string)[];
+  assets?: (AssetGlob | string)[];
   bundle?: boolean;
   declaration?: boolean;
   declarationRootDir?: string;
@@ -32,7 +32,8 @@ export interface EsBuildExecutorOptions {
 
 export interface NormalizedEsBuildExecutorOptions
   extends Omit<EsBuildExecutorOptions, 'esbuildOptions' | 'esbuildConfig'> {
+  assets: (AssetGlob | string)[];
   singleEntry: boolean;
   external: string[];
-  userDefinedBuildOptions: esbuild.BuildOptions;
+  userDefinedBuildOptions: esbuild.BuildOptions | undefined;
 }

packages/esbuild/src/generators/configuration/configuration.ts

@@ -1,33 +1,38 @@
 import {
   formatFiles,
   joinPathFragments,
+  readJson,
+  readNxJson,
   readProjectConfiguration,
   Tree,
   updateProjectConfiguration,
   writeJson,
 } from '@nx/devkit';
-
+import { addBuildTargetDefaults } from '@nx/devkit/src/generators/target-defaults-utils';
+import { getOutputDir, getUpdatedPackageJsonContent } from '@nx/js';
 import { getImportPath } from '@nx/js/src/utils/get-import-path';
-import { assertNotUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
-
-import { esbuildInitGenerator } from '../init/init';
+import { isUsingTsSolutionSetup } from '@nx/js/src/utils/typescript/ts-solution-setup';
+import { basename, dirname, join } from 'node:path/posix';
+import { mergeTargetConfigurations } from 'nx/src/devkit-internals';
+import { PackageJson } from 'nx/src/utils/package-json';
+import { getOutExtension } from '../../executors/esbuild/lib/build-esbuild-options';
 import { EsBuildExecutorOptions } from '../../executors/esbuild/schema';
+import { esbuildInitGenerator } from '../init/init';
 import { EsBuildProjectSchema } from './schema';
-import { addBuildTargetDefaults } from '@nx/devkit/src/generators/target-defaults-utils';
 
 export async function configurationGenerator(
   tree: Tree,
   options: EsBuildProjectSchema
 ) {
-  assertNotUsingTsSolutionSetup(tree, 'esbuild', 'configuration');
-
   const task = await esbuildInitGenerator(tree, {
     ...options,
     skipFormat: true,
   });
   options.buildTarget ??= 'build';
+  const isTsSolutionSetup = isUsingTsSolutionSetup(tree);
   checkForTargetConflicts(tree, options);
-  addBuildTarget(tree, options);
+  addBuildTarget(tree, options, isTsSolutionSetup);
+  updatePackageJson(tree, options, isTsSolutionSetup);
   await formatFiles(tree);
   return task;
 }
@@ -42,51 +47,56 @@ function checkForTargetConflicts(tree: Tree, options: EsBuildProjectSchema) {
   }
 }
 
-function addBuildTarget(tree: Tree, options: EsBuildProjectSchema) {
+function addBuildTarget(
+  tree: Tree,
+  options: EsBuildProjectSchema,
+  isTsSolutionSetup: boolean
+) {
   addBuildTargetDefaults(tree, '@nx/esbuild:esbuild', options.buildTarget);
   const project = readProjectConfiguration(tree, options.project);
-  const packageJsonPath = joinPathFragments(project.root, 'package.json');
-
-  if (!tree.exists(packageJsonPath)) {
-    const importPath =
-      options.importPath || getImportPath(tree, options.project);
-    writeJson(tree, packageJsonPath, {
-      name: importPath,
-      version: '0.0.1',
-    });
-  }
 
   const prevBuildOptions = project.targets?.[options.buildTarget]?.options;
-
   const tsConfig = prevBuildOptions?.tsConfig ?? getTsConfigFile(tree, options);
 
+  let outputPath = prevBuildOptions?.outputPath;
+  if (!outputPath) {
+    outputPath = isTsSolutionSetup
+      ? joinPathFragments(project.root, 'dist')
+      : joinPathFragments(
+          'dist',
+          project.root === '.' ? options.project : project.root
+        );
+  }
+
   const buildOptions: EsBuildExecutorOptions = {
     main: prevBuildOptions?.main ?? getMainFile(tree, options),
-    outputPath:
-      prevBuildOptions?.outputPath ??
-      joinPathFragments(
-        'dist',
-        project.root === '.' ? options.project : project.root
-      ),
+    outputPath,
     outputFileName: 'main.js',
     tsConfig,
-    assets: [],
     platform: options.platform,
+    format: options.format,
   };
 
-  if (options.platform === 'browser') {
-    buildOptions.outputHashing = 'all';
-    buildOptions.minify = true;
-  }
+  if (isTsSolutionSetup) {
+    buildOptions.declarationRootDir =
+      project.sourceRoot ?? tree.exists(`${project.root}/src`)
+        ? `${project.root}/src`
+        : project.root;
+  } else {
+    buildOptions.assets = [];
 
-  if (tree.exists(joinPathFragments(project.root, 'README.md'))) {
-    buildOptions.assets = [
-      {
+    if (tree.exists(joinPathFragments(project.root, 'README.md'))) {
+      buildOptions.assets.push({
         glob: `${project.root}/README.md`,
         input: '.',
         output: '.',
-      },
-    ];
+      });
+    }
+  }
+
+  if (options.platform === 'browser') {
+    buildOptions.outputHashing = 'all';
+    buildOptions.minify = true;
   }
 
   updateProjectConfiguration(tree, options.project, {
@@ -111,6 +121,89 @@ function addBuildTarget(tree: Tree, options: EsBuildProjectSchema) {
   });
 }
 
+function updatePackageJson(
+  tree: Tree,
+  options: EsBuildProjectSchema,
+  isTsSolutionSetup: boolean
+) {
+  const project = readProjectConfiguration(tree, options.project);
+
+  const packageJsonPath = join(project.root, 'package.json');
+  let packageJson: PackageJson;
+  if (tree.exists(packageJsonPath)) {
+    if (!isTsSolutionSetup) {
+      return;
+    }
+
+    packageJson = readJson(tree, packageJsonPath);
+  } else {
+    packageJson = {
+      name: getImportPath(tree, options.project),
+      version: '0.0.1',
+    };
+  }
+
+  if (isTsSolutionSetup) {
+    const nxJson = readNxJson(tree);
+    const projectTarget = project.targets[options.buildTarget];
+    const mergedTarget = mergeTargetConfigurations(
+      projectTarget,
+      (projectTarget.executor
+        ? nxJson.targetDefaults?.[projectTarget.executor]
+        : undefined) ?? nxJson.targetDefaults?.[options.buildTarget]
+    );
+
+    const {
+      declarationRootDir = '.',
+      main,
+      outputPath,
+      outputFileName,
+      // the executor option defaults to [esm]
+      format = ['esm'],
+      esbuildOptions,
+    } = mergedTarget.options;
+
+    // can't use the declarationRootDir as rootDir because it only affects the typings,
+    // not the runtime entry point
+    packageJson = getUpdatedPackageJsonContent(packageJson, {
+      main,
+      outputPath,
+      projectRoot: project.root,
+      generateExportsField: true,
+      packageJsonPath,
+      format,
+      outputFileName,
+      outputFileExtensionForCjs: getOutExtension('cjs', {
+        // there's very little chance that the user would have defined a custom esbuild config
+        // since that's an Nx specific file that we're not generating here and we're setting up
+        // the build for esbuild now
+        userDefinedBuildOptions: esbuildOptions,
+      }),
+      outputFileExtensionForEsm: getOutExtension('esm', {
+        userDefinedBuildOptions: esbuildOptions,
+      }),
+    });
+
+    if (declarationRootDir !== dirname(main)) {
+      // the declaration file entry point will be output to a location
+      // different than the runtime entry point, adjust accodingly
+      const outputDir = getOutputDir({
+        main,
+        outputPath,
+        projectRoot: project.root,
+        packageJsonPath,
+        rootDir: declarationRootDir,
+      });
+      const mainFile = basename(options.main).replace(/\.[tj]s$/, '');
+      const typingsFile = `${outputDir}${mainFile}.d.ts`;
+      packageJson.types = typingsFile;
+      packageJson.exports['.'].types = typingsFile;
+    }
+  }
+
+  writeJson(tree, packageJsonPath, packageJson);
+}
+
 function getMainFile(tree: Tree, options: EsBuildProjectSchema) {
   const project = readProjectConfiguration(tree, options.project);
   const candidates = [

packages/esbuild/src/generators/configuration/schema.d.ts

@@ -1,3 +1,5 @@
+import type { SupportedFormat } from '@nx/js';
+
 export interface EsBuildProjectSchema {
   project: string;
   main?: string;
@@ -10,4 +12,5 @@ export interface EsBuildProjectSchema {
   esbuildConfig?: string;
   platform?: 'node' | 'browser' | 'neutral';
   buildTarget?: string;
+  format?: SupportedFormat[];
 }

packages/esbuild/src/generators/configuration/schema.json

@@ -60,6 +60,15 @@
       "description": "The build target to add.",
       "type": "string",
       "default": "build"
+    },
+    "format": {
+      "description": "The format to build the library (esm or cjs).",
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": ["esm", "cjs"]
+      },
+      "default": ["esm"]
     }
   },
   "required": [],