From 3fefbaf4680f00229d3603ebce19a8cceb1ca4e9 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Tue, 18 Jul 2023 15:36:19 +0100 Subject: [PATCH] feat(angular): add esbuild incremental build builder (#17991) --- docs/generated/manifests/menus.json | 8 + docs/generated/manifests/packages.json | 9 + docs/generated/packages-metadata.json | 9 + .../angular/executors/browser-esbuild.json | 626 ++++++++++++++++++ docs/shared/reference/sitemap.md | 1 + e2e/angular-core/src/projects.test.ts | 52 +- packages/angular/executors.json | 10 + packages/angular/executors.ts | 1 + packages/angular/package.json | 3 +- .../browser-esbuild/browser-esbuild.impl.ts | 57 ++ .../src/executors/browser-esbuild/compat.ts | 5 + .../browser-esbuild/lib/buildable-libs.ts | 42 ++ .../browser-esbuild/lib/validate-options.ts | 52 ++ .../src/executors/browser-esbuild/schema.d.ts | 5 + .../src/executors/browser-esbuild/schema.json | 554 ++++++++++++++++ packages/nx/src/adapter/ngcli-adapter.ts | 330 +++++---- 16 files changed, 1645 insertions(+), 119 deletions(-) create mode 100644 docs/generated/packages/angular/executors/browser-esbuild.json create mode 100644 packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts create mode 100644 packages/angular/src/executors/browser-esbuild/compat.ts create mode 100644 packages/angular/src/executors/browser-esbuild/lib/buildable-libs.ts create mode 100644 packages/angular/src/executors/browser-esbuild/lib/validate-options.ts create mode 100644 packages/angular/src/executors/browser-esbuild/schema.d.ts create mode 100644 packages/angular/src/executors/browser-esbuild/schema.json diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 0174eb9f94a9e..17cad526ba221 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -4290,6 +4290,14 @@ "isExternal": false, "disableCollapsible": false }, + { + "id": "browser-esbuild", + "path": "/packages/angular/executors/browser-esbuild", + "name": "browser-esbuild", + "children": [], + "isExternal": false, + "disableCollapsible": false + }, { "id": "webpack-browser", "path": "/packages/angular/executors/webpack-browser", diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json index 91cae2e2b430a..4e6723890e439 100644 --- a/docs/generated/manifests/packages.json +++ b/docs/generated/manifests/packages.json @@ -58,6 +58,15 @@ "path": "/packages/angular/executors/package", "type": "executor" }, + "/packages/angular/executors/browser-esbuild": { + "description": "Builds your application with esbuild and adds support for incremental builds.", + "file": "generated/packages/angular/executors/browser-esbuild.json", + "hidden": false, + "name": "browser-esbuild", + "originalFilePath": "/packages/angular/src/executors/browser-esbuild/schema.json", + "path": "/packages/angular/executors/browser-esbuild", + "type": "executor" + }, "/packages/angular/executors/webpack-browser": { "description": "The `webpack-browser` executor is very similar to the standard `browser` builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences: \n- Supports Custom Webpack Configurations \n- Supports Incremental Building", "file": "generated/packages/angular/executors/webpack-browser.json", diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 5f9aa7a25e503..80f67f8517a1c 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -53,6 +53,15 @@ "path": "angular/executors/package", "type": "executor" }, + { + "description": "Builds your application with esbuild and adds support for incremental builds.", + "file": "generated/packages/angular/executors/browser-esbuild.json", + "hidden": false, + "name": "browser-esbuild", + "originalFilePath": "/packages/angular/src/executors/browser-esbuild/schema.json", + "path": "angular/executors/browser-esbuild", + "type": "executor" + }, { "description": "The `webpack-browser` executor is very similar to the standard `browser` builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences: \n- Supports Custom Webpack Configurations \n- Supports Incremental Building", "file": "generated/packages/angular/executors/webpack-browser.json", diff --git a/docs/generated/packages/angular/executors/browser-esbuild.json b/docs/generated/packages/angular/executors/browser-esbuild.json new file mode 100644 index 0000000000000..242977c7b3520 --- /dev/null +++ b/docs/generated/packages/angular/executors/browser-esbuild.json @@ -0,0 +1,626 @@ +{ + "name": "browser-esbuild", + "implementation": "/packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts", + "schema": { + "$schema": "http://json-schema.org/draft-07/schema", + "title": "Schema for Nx ESBuild Executor", + "description": "Nx ESBuild Executor supporting Incremental Builds.", + "outputCapture": "direct-nodejs", + "type": "object", + "properties": { + "assets": { + "type": "array", + "description": "List of static application assets.", + "default": [], + "items": { + "oneOf": [ + { + "type": "object", + "properties": { + "followSymlinks": { + "type": "boolean", + "default": false, + "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched." + }, + "glob": { + "type": "string", + "description": "The pattern to match." + }, + "input": { + "type": "string", + "description": "The input directory path in which to apply 'glob'. Defaults to the project root." + }, + "ignore": { + "description": "An array of globs to ignore.", + "type": "array", + "items": { "type": "string" } + }, + "output": { + "type": "string", + "description": "Absolute path within the output." + } + }, + "additionalProperties": false, + "required": ["glob", "input", "output"] + }, + { "type": "string" } + ] + } + }, + "main": { + "type": "string", + "description": "The full path for the main entry point to the app, relative to the current workspace." + }, + "polyfills": { + "description": "Polyfills to be included in the build.", + "oneOf": [ + { + "type": "array", + "description": "A list of polyfills to include in the build. Can be a full path for a file, relative to the current workspace or module specifier. Example: 'zone.js'.", + "items": { "type": "string", "uniqueItems": true }, + "default": [] + }, + { + "type": "string", + "description": "The full path for the polyfills file, relative to the current workspace or a module specifier. Example: 'zone.js'." + } + ] + }, + "tsConfig": { + "type": "string", + "description": "The full path for the TypeScript configuration file, relative to the current workspace." + }, + "scripts": { + "description": "Global scripts to be included in the build.", + "type": "array", + "default": [], + "items": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include.", + "pattern": "\\.[cm]?jsx?$" + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The JavaScript/TypeScript file or package containing the file to include." + } + ] + } + }, + "styles": { + "description": "Global styles to be included in the build.", + "type": "array", + "default": [], + "items": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include.", + "pattern": "\\.(?:css|scss|sass|less)$" + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The file to include.", + "pattern": "\\.(?:css|scss|sass|less)$" + } + ] + } + }, + "inlineStyleLanguage": { + "description": "The stylesheet language to use for the application's inline component styles.", + "type": "string", + "default": "css", + "enum": ["css", "less", "sass", "scss"] + }, + "stylePreprocessorOptions": { + "description": "Options to pass to style preprocessors.", + "type": "object", + "properties": { + "includePaths": { + "description": "Paths to include. Paths will be resolved to workspace root.", + "type": "array", + "items": { "type": "string" }, + "default": [] + } + }, + "additionalProperties": false + }, + "externalDependencies": { + "description": "Exclude the listed external dependencies from being bundled into the bundle. Instead, the created bundle relies on these dependencies to be available during runtime.", + "type": "array", + "items": { "type": "string" }, + "default": [] + }, + "optimization": { + "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.", + "default": true, + "x-user-analytics": "ep.ng_optimization", + "oneOf": [ + { + "type": "object", + "properties": { + "scripts": { + "type": "boolean", + "description": "Enables optimization of the scripts output.", + "default": true + }, + "styles": { + "description": "Enables optimization of the styles output.", + "default": true, + "oneOf": [ + { + "type": "object", + "properties": { + "minify": { + "type": "boolean", + "description": "Minify CSS definitions by removing extraneous whitespace and comments, merging identifiers and minimizing values.", + "default": true + }, + "inlineCritical": { + "type": "boolean", + "description": "Extract and inline critical CSS definitions to improve first paint time.", + "default": true + } + }, + "additionalProperties": false + }, + { "type": "boolean" } + ] + }, + "fonts": { + "description": "Enables optimization for fonts. This option requires internet access. `HTTPS_PROXY` environment variable can be used to specify a proxy server.", + "default": true, + "oneOf": [ + { + "type": "object", + "properties": { + "inline": { + "type": "boolean", + "description": "Reduce render blocking requests by inlining external Google Fonts and Adobe Fonts CSS definitions in the application's HTML index file. This option requires internet access. `HTTPS_PROXY` environment variable can be used to specify a proxy server.", + "default": true + } + }, + "additionalProperties": false + }, + { "type": "boolean" } + ] + } + }, + "additionalProperties": false + }, + { "type": "boolean" } + ] + }, + "fileReplacements": { + "description": "Replace compilation source files with other compilation source files in the build.", + "type": "array", + "items": { + "type": "object", + "properties": { + "replace": { + "type": "string", + "pattern": "\\.(([cm]?j|t)sx?|json)$" + }, + "with": { "type": "string", "pattern": "\\.(([cm]?j|t)sx?|json)$" } + }, + "additionalProperties": false, + "required": ["replace", "with"] + }, + "default": [] + }, + "outputPath": { + "type": "string", + "description": "The full path for the new output directory, relative to the current workspace.\nBy default, writes output to a folder named dist/ in the current project." + }, + "resourcesOutputPath": { + "type": "string", + "description": "The path where style resources will be placed, relative to outputPath." + }, + "aot": { + "type": "boolean", + "description": "Build using Ahead of Time compilation.", + "x-user-analytics": "ep.ng_aot", + "default": true + }, + "sourceMap": { + "description": "Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.", + "default": false, + "oneOf": [ + { + "type": "object", + "properties": { + "scripts": { + "type": "boolean", + "description": "Output source maps for all scripts.", + "default": true + }, + "styles": { + "type": "boolean", + "description": "Output source maps for all styles.", + "default": true + }, + "hidden": { + "type": "boolean", + "description": "Output source maps used for error reporting tools.", + "default": false + }, + "vendor": { + "type": "boolean", + "description": "Resolve vendor packages source maps.", + "default": false + } + }, + "additionalProperties": false + }, + { "type": "boolean" } + ] + }, + "vendorChunk": { + "type": "boolean", + "description": "Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time.", + "default": false + }, + "commonChunk": { + "type": "boolean", + "description": "Generate a seperate bundle containing code used across multiple bundles.", + "default": true + }, + "baseHref": { + "type": "string", + "description": "Base url for the application being built." + }, + "deployUrl": { + "type": "string", + "description": "URL where files will be deployed.", + "x-deprecated": "Use \"baseHref\" option, \"APP_BASE_HREF\" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url." + }, + "verbose": { + "type": "boolean", + "description": "Adds more details to output logging.", + "default": false + }, + "progress": { + "type": "boolean", + "description": "Log progress to the console while building.", + "default": true + }, + "i18nMissingTranslation": { + "type": "string", + "description": "How to handle missing translations for i18n.", + "enum": ["warning", "error", "ignore"], + "default": "warning" + }, + "i18nDuplicateTranslation": { + "type": "string", + "description": "How to handle duplicate translations for i18n.", + "enum": ["warning", "error", "ignore"], + "default": "warning" + }, + "localize": { + "description": "Translate the bundles in one or more locales.", + "oneOf": [ + { "type": "boolean", "description": "Translate all locales." }, + { + "type": "array", + "description": "List of locales ID's to translate.", + "minItems": 1, + "items": { + "type": "string", + "pattern": "^[a-zA-Z]{2,3}(-[a-zA-Z]{4})?(-([a-zA-Z]{2}|[0-9]{3}))?(-[a-zA-Z]{5,8})?(-x(-[a-zA-Z0-9]{1,8})+)?$" + } + } + ] + }, + "watch": { + "type": "boolean", + "description": "Run build when files change.", + "default": false + }, + "outputHashing": { + "type": "string", + "description": "Define the output filename cache-busting hashing mode.", + "default": "none", + "enum": ["none", "all", "media", "bundles"] + }, + "poll": { + "type": "number", + "description": "Enable and define the file watching poll time period in milliseconds." + }, + "deleteOutputPath": { + "type": "boolean", + "description": "Delete the output path before building.", + "default": true + }, + "preserveSymlinks": { + "type": "boolean", + "description": "Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set." + }, + "extractLicenses": { + "type": "boolean", + "description": "Extract all licenses in a separate file.", + "default": true + }, + "buildOptimizer": { + "type": "boolean", + "description": "Enables advanced build optimizations when using the 'aot' option.", + "default": true + }, + "namedChunks": { + "type": "boolean", + "description": "Use file name for lazy loaded chunks.", + "default": false + }, + "subresourceIntegrity": { + "type": "boolean", + "description": "Enables the use of subresource integrity validation.", + "default": false + }, + "serviceWorker": { + "type": "boolean", + "description": "Generates a service worker config for production builds.", + "default": false + }, + "ngswConfigPath": { + "type": "string", + "description": "Path to ngsw-config.json." + }, + "index": { + "description": "Configures the generation of the application's HTML index.", + "oneOf": [ + { + "type": "string", + "description": "The path of a file to use for the application's HTML index. The filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path." + }, + { + "type": "object", + "description": "", + "properties": { + "input": { + "type": "string", + "minLength": 1, + "description": "The path of a file to use for the application's generated HTML index." + }, + "output": { + "type": "string", + "minLength": 1, + "default": "index.html", + "description": "The output path of the application's generated HTML index file. The full provided path will be used and will be considered relative to the application's configured output path." + } + }, + "required": ["input"] + }, + { + "const": false, + "description": "Does not generate an `index.html` file." + } + ] + }, + "statsJson": { + "type": "boolean", + "description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.", + "default": false + }, + "budgets": { + "description": "Budget thresholds to ensure parts of your application stay within boundaries which you set.", + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "description": "The type of budget.", + "enum": [ + "all", + "allScript", + "any", + "anyScript", + "anyComponentStyle", + "bundle", + "initial" + ] + }, + "name": { + "type": "string", + "description": "The name of the bundle." + }, + "baseline": { + "type": "string", + "description": "The baseline size for comparison." + }, + "maximumWarning": { + "type": "string", + "description": "The maximum threshold for warning relative to the baseline." + }, + "maximumError": { + "type": "string", + "description": "The maximum threshold for error relative to the baseline." + }, + "minimumWarning": { + "type": "string", + "description": "The minimum threshold for warning relative to the baseline." + }, + "minimumError": { + "type": "string", + "description": "The minimum threshold for error relative to the baseline." + }, + "warning": { + "type": "string", + "description": "The threshold for warning relative to the baseline (min & max)." + }, + "error": { + "type": "string", + "description": "The threshold for error relative to the baseline (min & max)." + } + }, + "additionalProperties": false, + "required": ["type"] + }, + "default": [] + }, + "webWorkerTsConfig": { + "type": "string", + "description": "TypeScript configuration for Web Worker modules." + }, + "crossOrigin": { + "type": "string", + "description": "Define the crossorigin attribute setting of elements that provide CORS support.", + "default": "none", + "enum": ["none", "anonymous", "use-credentials"] + }, + "allowedCommonJsDependencies": { + "description": "A list of CommonJS packages that are allowed to be used without a build time warning.", + "type": "array", + "items": { "type": "string" }, + "default": [] + }, + "buildLibsFromSource": { + "type": "boolean", + "description": "Read buildable libraries from source instead of building them separately.", + "default": true + } + }, + "additionalProperties": false, + "required": ["outputPath", "index", "main", "tsConfig"], + "definitions": { + "assetPattern": { + "oneOf": [ + { + "type": "object", + "properties": { + "followSymlinks": { + "type": "boolean", + "default": false, + "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched." + }, + "glob": { + "type": "string", + "description": "The pattern to match." + }, + "input": { + "type": "string", + "description": "The input directory path in which to apply 'glob'. Defaults to the project root." + }, + "ignore": { + "description": "An array of globs to ignore.", + "type": "array", + "items": { "type": "string" } + }, + "output": { + "type": "string", + "description": "Absolute path within the output." + } + }, + "additionalProperties": false, + "required": ["glob", "input", "output"] + }, + { "type": "string" } + ] + }, + "fileReplacement": { + "type": "object", + "properties": { + "replace": { + "type": "string", + "pattern": "\\.(([cm]?j|t)sx?|json)$" + }, + "with": { "type": "string", "pattern": "\\.(([cm]?j|t)sx?|json)$" } + }, + "additionalProperties": false, + "required": ["replace", "with"] + }, + "budget": { + "type": "object", + "properties": { + "type": { + "type": "string", + "description": "The type of budget.", + "enum": [ + "all", + "allScript", + "any", + "anyScript", + "anyComponentStyle", + "bundle", + "initial" + ] + }, + "name": { + "type": "string", + "description": "The name of the bundle." + }, + "baseline": { + "type": "string", + "description": "The baseline size for comparison." + }, + "maximumWarning": { + "type": "string", + "description": "The maximum threshold for warning relative to the baseline." + }, + "maximumError": { + "type": "string", + "description": "The maximum threshold for error relative to the baseline." + }, + "minimumWarning": { + "type": "string", + "description": "The minimum threshold for warning relative to the baseline." + }, + "minimumError": { + "type": "string", + "description": "The minimum threshold for error relative to the baseline." + }, + "warning": { + "type": "string", + "description": "The threshold for warning relative to the baseline (min & max)." + }, + "error": { + "type": "string", + "description": "The threshold for error relative to the baseline (min & max)." + } + }, + "additionalProperties": false, + "required": ["type"] + } + }, + "presets": [] + }, + "description": "Builds your application with esbuild and adds support for incremental builds.", + "aliases": [], + "hidden": false, + "path": "/packages/angular/src/executors/browser-esbuild/schema.json", + "type": "executor" +} diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 8cdca206300a4..71ab2f406a6b8 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -284,6 +284,7 @@ - [delegate-build](/packages/angular/executors/delegate-build) - [ng-packagr-lite](/packages/angular/executors/ng-packagr-lite) - [package](/packages/angular/executors/package) + - [browser-esbuild](/packages/angular/executors/browser-esbuild) - [webpack-browser](/packages/angular/executors/webpack-browser) - [webpack-dev-server](/packages/angular/executors/webpack-dev-server) - [webpack-server](/packages/angular/executors/webpack-server) diff --git a/e2e/angular-core/src/projects.test.ts b/e2e/angular-core/src/projects.test.ts index 6470236c604c3..3a42a5dc736ab 100644 --- a/e2e/angular-core/src/projects.test.ts +++ b/e2e/angular-core/src/projects.test.ts @@ -106,11 +106,21 @@ describe('Angular Projects', () => { const appPort = 4207; const process = await runCommandUntil( `serve ${app1} -- --port=${appPort}`, - (output) => output.includes(`listening on localhost:4207`) + (output) => output.includes(`listening on localhost:${appPort}`) ); // port and process cleanup await killProcessAndPorts(process.pid, appPort); + + const esbProcess = await runCommandUntil( + `serve my-dir-${esbuildApp} -- --port=${appPort}`, + (output) => + output.includes(`Application bundle generation complete`) && + output.includes(`localhost:${appPort}`) + ); + + // port and process cleanup + await killProcessAndPorts(esbProcess.pid, appPort); }, 1000000); it('should lint correctly with eslint and handle external HTML files and inline templates', async () => { @@ -164,6 +174,11 @@ describe('Angular Projects', () => { it('should build the dependent buildable lib and its child lib, as well as the app', async () => { // ARRANGE + const esbuildApp = uniq('esbuild-app'); + runCLI( + `generate @nx/angular:app ${esbuildApp} --bundler=esbuild --no-interactive` + ); + const buildableLib = uniq('buildlib1'); const buildableChildLib = uniq('buildlib2'); @@ -196,6 +211,27 @@ describe('Angular Projects', () => { export class AppModule {} ` ); + updateFile( + `apps/${esbuildApp}/src/app/app.module.ts`, + ` + import { BrowserModule } from '@angular/platform-browser'; + import { NgModule } from '@angular/core'; + import {${ + names(buildableLib).className + }Module} from '@${proj}/${buildableLib}'; + + import { AppComponent } from './app.component'; + import { NxWelcomeComponent } from './nx-welcome.component'; + + @NgModule({ + declarations: [AppComponent, NxWelcomeComponent], + imports: [BrowserModule, ${names(buildableLib).className}Module], + providers: [], + bootstrap: [AppComponent], + }) + export class AppModule {} + ` + ); // update the buildable lib module to include a ref to the buildable child lib updateFile( @@ -224,9 +260,20 @@ describe('Angular Projects', () => { }; return config; }); + updateProjectConfig(esbuildApp, (config) => { + config.targets.build.executor = '@nx/angular:browser-esbuild'; + config.targets.build.options = { + ...config.targets.build.options, + buildLibsFromSource: false, + }; + return config; + }); // ACT const libOutput = runCLI(`build ${app1} --configuration=development`); + const esbuildLibOutput = runCLI( + `build ${esbuildApp} --configuration=development` + ); // ASSERT expect(libOutput).toContain( @@ -238,6 +285,9 @@ describe('Angular Projects', () => { // the path to dist const mainBundle = readFile(`dist/apps/${app1}/main.js`); expect(mainBundle).toContain(`dist/libs/${buildableLib}`); + + const mainEsBuildBundle = readFile(`dist/apps/${esbuildApp}/main.js`); + expect(mainEsBuildBundle).toContain(`dist/libs/${buildableLib}`); }); it('should build publishable libs successfully', () => { diff --git a/packages/angular/executors.json b/packages/angular/executors.json index 99dcde902c9bb..9d4063da6c433 100644 --- a/packages/angular/executors.json +++ b/packages/angular/executors.json @@ -14,6 +14,11 @@ "implementation": "./src/executors/package/package.impl", "schema": "./src/executors/package/schema.json", "description": "Builds and packages an Angular library producing an output following the Angular Package Format (APF) to be distributed as an NPM package.\nThis executor is similar to the `@angular-devkit/build-angular:ng-packagr` with additional support for incremental builds." + }, + "browser-esbuild": { + "implementation": "./src/executors/browser-esbuild/browser-esbuild.impl", + "schema": "./src/executors/browser-esbuild/schema.json", + "description": "Builds your application with esbuild and adds support for incremental builds." } }, "builders": { @@ -56,6 +61,11 @@ "implementation": "./src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl", "schema": "./src/builders/module-federation-dev-ssr/schema.json", "description": "The module-federation-dev-ssr executor is reserved exclusively for use with host Module Federation applications that use SSR. It allows the user to specify which remote applications should be served with the host." + }, + "browser-esbuild": { + "implementation": "./src/executors/browser-esbuild/compat", + "schema": "./src/executors/browser-esbuild/schema.json", + "description": "Builds your application with esbuild and adds support for incremental builds." } } } diff --git a/packages/angular/executors.ts b/packages/angular/executors.ts index 6283b6d44cd07..78a7b53f55dec 100644 --- a/packages/angular/executors.ts +++ b/packages/angular/executors.ts @@ -6,3 +6,4 @@ export * from './src/builders/webpack-server/webpack-server.impl'; export * from './src/executors/delegate-build/delegate-build.impl'; export * from './src/executors/ng-packagr-lite/ng-packagr-lite.impl'; export * from './src/executors/package/package.impl'; +export * from './src/executors/browser-esbuild/browser-esbuild.impl'; diff --git a/packages/angular/package.json b/packages/angular/package.json index 45f04bf13dff3..22e00320ee764 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -72,7 +72,8 @@ "@schematics/angular": ">= 14.0.0 < 17.0.0", "@angular-devkit/core": ">= 14.0.0 < 17.0.0", "@nguniversal/builders": ">= 14.0.0 < 17.0.0", - "rxjs": "^6.5.3 || ^7.5.0" + "rxjs": "^6.5.3 || ^7.5.0", + "esbuild": "^0.17.5" }, "peerDependenciesMeta": { "@nguniversal/builders": { diff --git a/packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts b/packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts new file mode 100644 index 0000000000000..2694cbd230e9f --- /dev/null +++ b/packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts @@ -0,0 +1,57 @@ +import { type EsBuildSchema } from './schema'; +import { validateOptions } from './lib/validate-options'; +import { type DependentBuildableProjectNode } from '@nx/js/src/utils/buildable-libs-utils'; +import { type ExecutorContext, readCachedProjectGraph } from '@nx/devkit'; +import { createTmpTsConfigForBuildableLibs } from './lib/buildable-libs'; +import { createBuilderContext } from 'nx/src/adapter/ngcli-adapter'; +import { type BuilderOutput } from '@angular-devkit/architect'; +import { type OutputFile } from 'esbuild'; + +export default async function* esbuildExecutor( + options: EsBuildSchema, + context: ExecutorContext +) { + validateOptions(options); + options.buildLibsFromSource ??= true; + + const { buildLibsFromSource, ...delegateExecutorOptions } = options; + + let dependencies: DependentBuildableProjectNode[]; + let projectGraph = context.projectGraph; + + if (!buildLibsFromSource) { + projectGraph = projectGraph ?? readCachedProjectGraph(); + const { tsConfigPath, dependencies: foundDependencies } = + createTmpTsConfigForBuildableLibs( + delegateExecutorOptions.tsConfig, + context, + { projectGraph } + ); + dependencies = foundDependencies; + delegateExecutorOptions.tsConfig = tsConfigPath; + } + const { buildEsbuildBrowser } = await import( + '@angular-devkit/build-angular/src/builders/browser-esbuild/index' + ); + + const builderContext = await createBuilderContext( + { + builderName: 'browser-esbuild', + description: 'Build a browser application', + optionSchema: await import( + '@angular-devkit/build-angular/src/builders/browser-esbuild/schema.json' + ), + }, + context + ); + + return yield* buildEsbuildBrowser( + delegateExecutorOptions, + builderContext + ) as AsyncIterable< + BuilderOutput & { + outputFiles?: OutputFile[]; + assetFiles?: { source: string; destination: string }[]; + } + >; +} diff --git a/packages/angular/src/executors/browser-esbuild/compat.ts b/packages/angular/src/executors/browser-esbuild/compat.ts new file mode 100644 index 0000000000000..13353169d9b4c --- /dev/null +++ b/packages/angular/src/executors/browser-esbuild/compat.ts @@ -0,0 +1,5 @@ +import { convertNxExecutor } from '@nx/devkit'; + +import nxBrowserEsBuild from './browser-esbuild.impl'; + +export default convertNxExecutor(nxBrowserEsBuild); diff --git a/packages/angular/src/executors/browser-esbuild/lib/buildable-libs.ts b/packages/angular/src/executors/browser-esbuild/lib/buildable-libs.ts new file mode 100644 index 0000000000000..235007869d26d --- /dev/null +++ b/packages/angular/src/executors/browser-esbuild/lib/buildable-libs.ts @@ -0,0 +1,42 @@ +import { + calculateProjectDependencies, + createTmpTsConfig, + DependentBuildableProjectNode, +} from '@nx/js/src/utils/buildable-libs-utils'; +import { join } from 'path'; +import { + type ExecutorContext, + type ProjectGraph, + readCachedProjectGraph, +} from '@nx/devkit'; + +export function createTmpTsConfigForBuildableLibs( + tsConfigPath: string, + context: ExecutorContext, + options?: { projectGraph?: ProjectGraph; target?: string } +) { + let dependencies: DependentBuildableProjectNode[]; + const result = calculateProjectDependencies( + options?.projectGraph ?? readCachedProjectGraph(), + context.root, + context.projectName, + options?.target ?? context.targetName, + context.configurationName + ); + dependencies = result.dependencies; + + const tmpTsConfigPath = createTmpTsConfig( + join(context.root, tsConfigPath), + context.root, + result.target.data.root, + dependencies + ); + process.env.NX_TSCONFIG_PATH = tmpTsConfigPath; + // Angular EsBuild Builder appends the workspaceRoot to the config path, so remove it. + const tmpTsConfigPathWithoutWorkspaceRoot = tmpTsConfigPath.replace( + context.root, + '' + ); + + return { tsConfigPath: tmpTsConfigPathWithoutWorkspaceRoot, dependencies }; +} diff --git a/packages/angular/src/executors/browser-esbuild/lib/validate-options.ts b/packages/angular/src/executors/browser-esbuild/lib/validate-options.ts new file mode 100644 index 0000000000000..f68ed5c05a986 --- /dev/null +++ b/packages/angular/src/executors/browser-esbuild/lib/validate-options.ts @@ -0,0 +1,52 @@ +import { + getInstalledAngularVersionInfo, + VersionInfo, +} from '../../utilities/angular-version-utils'; +import { stripIndents } from '@nx/devkit'; +import { extname } from 'path'; +import { type EsBuildSchema } from '../schema'; + +export function validateOptions(options: EsBuildSchema): void { + const angularVersionInfo = getInstalledAngularVersionInfo(); + validatePolyfills(options, angularVersionInfo); + validateStyles(options, angularVersionInfo); +} + +function validatePolyfills( + options: EsBuildSchema, + { major, version }: VersionInfo +): void { + if (major < 15 && Array.isArray(options.polyfills)) { + throw new Error(stripIndents`The array syntax for the "polyfills" option is supported from Angular >= 15.0.0. You are currently using "${version}". + You can resolve this error by removing the "polyfills" option, setting it to a string value or migrating to Angular 15.0.0.`); + } +} + +function validateStyles( + options: EsBuildSchema, + { major, version }: VersionInfo +): void { + if (!options.styles || !options.styles.length) { + return; + } + + if (major < 15) { + return; + } + + const stylusFiles = []; + options.styles.forEach((style) => { + const styleFile = typeof style === 'string' ? style : style.input; + if (extname(styleFile) === '.styl') { + stylusFiles.push(styleFile); + } + }); + + if (stylusFiles.length) { + throw new Error(stripIndents`Stylus is not supported since Angular v15. You're currently using "${version}". + You have the "styles" option with the following file(s) using the ".styl" extension: ${stylusFiles + .map((x) => `"${x}"`) + .join(', ')}. + Make sure to convert them to a supported extension (".css", ".scss", ".sass", ".less").`); + } +} diff --git a/packages/angular/src/executors/browser-esbuild/schema.d.ts b/packages/angular/src/executors/browser-esbuild/schema.d.ts new file mode 100644 index 0000000000000..c51c3dd0f2749 --- /dev/null +++ b/packages/angular/src/executors/browser-esbuild/schema.d.ts @@ -0,0 +1,5 @@ +import { Schema } from '@angular-devkit/build-angular/src/builders/browser-esbuild/schema'; + +export interface EsBuildSchema extends Schema { + buildLibsFromSource?: boolean; +} diff --git a/packages/angular/src/executors/browser-esbuild/schema.json b/packages/angular/src/executors/browser-esbuild/schema.json new file mode 100644 index 0000000000000..fa36ccba93def --- /dev/null +++ b/packages/angular/src/executors/browser-esbuild/schema.json @@ -0,0 +1,554 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema", + "title": "Schema for Nx ESBuild Executor", + "description": "Nx ESBuild Executor supporting Incremental Builds.", + "outputCapture": "direct-nodejs", + "type": "object", + "properties": { + "assets": { + "type": "array", + "description": "List of static application assets.", + "default": [], + "items": { + "$ref": "#/definitions/assetPattern" + } + }, + "main": { + "type": "string", + "description": "The full path for the main entry point to the app, relative to the current workspace." + }, + "polyfills": { + "description": "Polyfills to be included in the build.", + "oneOf": [ + { + "type": "array", + "description": "A list of polyfills to include in the build. Can be a full path for a file, relative to the current workspace or module specifier. Example: 'zone.js'.", + "items": { + "type": "string", + "uniqueItems": true + }, + "default": [] + }, + { + "type": "string", + "description": "The full path for the polyfills file, relative to the current workspace or a module specifier. Example: 'zone.js'." + } + ] + }, + "tsConfig": { + "type": "string", + "description": "The full path for the TypeScript configuration file, relative to the current workspace." + }, + "scripts": { + "description": "Global scripts to be included in the build.", + "type": "array", + "default": [], + "items": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include.", + "pattern": "\\.[cm]?jsx?$" + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The JavaScript/TypeScript file or package containing the file to include." + } + ] + } + }, + "styles": { + "description": "Global styles to be included in the build.", + "type": "array", + "default": [], + "items": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include.", + "pattern": "\\.(?:css|scss|sass|less)$" + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The file to include.", + "pattern": "\\.(?:css|scss|sass|less)$" + } + ] + } + }, + "inlineStyleLanguage": { + "description": "The stylesheet language to use for the application's inline component styles.", + "type": "string", + "default": "css", + "enum": ["css", "less", "sass", "scss"] + }, + "stylePreprocessorOptions": { + "description": "Options to pass to style preprocessors.", + "type": "object", + "properties": { + "includePaths": { + "description": "Paths to include. Paths will be resolved to workspace root.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + } + }, + "additionalProperties": false + }, + "externalDependencies": { + "description": "Exclude the listed external dependencies from being bundled into the bundle. Instead, the created bundle relies on these dependencies to be available during runtime.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + }, + "optimization": { + "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.", + "default": true, + "x-user-analytics": "ep.ng_optimization", + "oneOf": [ + { + "type": "object", + "properties": { + "scripts": { + "type": "boolean", + "description": "Enables optimization of the scripts output.", + "default": true + }, + "styles": { + "description": "Enables optimization of the styles output.", + "default": true, + "oneOf": [ + { + "type": "object", + "properties": { + "minify": { + "type": "boolean", + "description": "Minify CSS definitions by removing extraneous whitespace and comments, merging identifiers and minimizing values.", + "default": true + }, + "inlineCritical": { + "type": "boolean", + "description": "Extract and inline critical CSS definitions to improve first paint time.", + "default": true + } + }, + "additionalProperties": false + }, + { + "type": "boolean" + } + ] + }, + "fonts": { + "description": "Enables optimization for fonts. This option requires internet access. `HTTPS_PROXY` environment variable can be used to specify a proxy server.", + "default": true, + "oneOf": [ + { + "type": "object", + "properties": { + "inline": { + "type": "boolean", + "description": "Reduce render blocking requests by inlining external Google Fonts and Adobe Fonts CSS definitions in the application's HTML index file. This option requires internet access. `HTTPS_PROXY` environment variable can be used to specify a proxy server.", + "default": true + } + }, + "additionalProperties": false + }, + { + "type": "boolean" + } + ] + } + }, + "additionalProperties": false + }, + { + "type": "boolean" + } + ] + }, + "fileReplacements": { + "description": "Replace compilation source files with other compilation source files in the build.", + "type": "array", + "items": { + "$ref": "#/definitions/fileReplacement" + }, + "default": [] + }, + "outputPath": { + "type": "string", + "description": "The full path for the new output directory, relative to the current workspace.\nBy default, writes output to a folder named dist/ in the current project." + }, + "resourcesOutputPath": { + "type": "string", + "description": "The path where style resources will be placed, relative to outputPath." + }, + "aot": { + "type": "boolean", + "description": "Build using Ahead of Time compilation.", + "x-user-analytics": "ep.ng_aot", + "default": true + }, + "sourceMap": { + "description": "Output source maps for scripts and styles. For more information, see https://angular.io/guide/workspace-config#source-map-configuration.", + "default": false, + "oneOf": [ + { + "type": "object", + "properties": { + "scripts": { + "type": "boolean", + "description": "Output source maps for all scripts.", + "default": true + }, + "styles": { + "type": "boolean", + "description": "Output source maps for all styles.", + "default": true + }, + "hidden": { + "type": "boolean", + "description": "Output source maps used for error reporting tools.", + "default": false + }, + "vendor": { + "type": "boolean", + "description": "Resolve vendor packages source maps.", + "default": false + } + }, + "additionalProperties": false + }, + { + "type": "boolean" + } + ] + }, + "vendorChunk": { + "type": "boolean", + "description": "Generate a seperate bundle containing only vendor libraries. This option should only be used for development to reduce the incremental compilation time.", + "default": false + }, + "commonChunk": { + "type": "boolean", + "description": "Generate a seperate bundle containing code used across multiple bundles.", + "default": true + }, + "baseHref": { + "type": "string", + "description": "Base url for the application being built." + }, + "deployUrl": { + "type": "string", + "description": "URL where files will be deployed.", + "x-deprecated": "Use \"baseHref\" option, \"APP_BASE_HREF\" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url." + }, + "verbose": { + "type": "boolean", + "description": "Adds more details to output logging.", + "default": false + }, + "progress": { + "type": "boolean", + "description": "Log progress to the console while building.", + "default": true + }, + "i18nMissingTranslation": { + "type": "string", + "description": "How to handle missing translations for i18n.", + "enum": ["warning", "error", "ignore"], + "default": "warning" + }, + "i18nDuplicateTranslation": { + "type": "string", + "description": "How to handle duplicate translations for i18n.", + "enum": ["warning", "error", "ignore"], + "default": "warning" + }, + "localize": { + "description": "Translate the bundles in one or more locales.", + "oneOf": [ + { + "type": "boolean", + "description": "Translate all locales." + }, + { + "type": "array", + "description": "List of locales ID's to translate.", + "minItems": 1, + "items": { + "type": "string", + "pattern": "^[a-zA-Z]{2,3}(-[a-zA-Z]{4})?(-([a-zA-Z]{2}|[0-9]{3}))?(-[a-zA-Z]{5,8})?(-x(-[a-zA-Z0-9]{1,8})+)?$" + } + } + ] + }, + "watch": { + "type": "boolean", + "description": "Run build when files change.", + "default": false + }, + "outputHashing": { + "type": "string", + "description": "Define the output filename cache-busting hashing mode.", + "default": "none", + "enum": ["none", "all", "media", "bundles"] + }, + "poll": { + "type": "number", + "description": "Enable and define the file watching poll time period in milliseconds." + }, + "deleteOutputPath": { + "type": "boolean", + "description": "Delete the output path before building.", + "default": true + }, + "preserveSymlinks": { + "type": "boolean", + "description": "Do not use the real path when resolving modules. If unset then will default to `true` if NodeJS option --preserve-symlinks is set." + }, + "extractLicenses": { + "type": "boolean", + "description": "Extract all licenses in a separate file.", + "default": true + }, + "buildOptimizer": { + "type": "boolean", + "description": "Enables advanced build optimizations when using the 'aot' option.", + "default": true + }, + "namedChunks": { + "type": "boolean", + "description": "Use file name for lazy loaded chunks.", + "default": false + }, + "subresourceIntegrity": { + "type": "boolean", + "description": "Enables the use of subresource integrity validation.", + "default": false + }, + "serviceWorker": { + "type": "boolean", + "description": "Generates a service worker config for production builds.", + "default": false + }, + "ngswConfigPath": { + "type": "string", + "description": "Path to ngsw-config.json." + }, + "index": { + "description": "Configures the generation of the application's HTML index.", + "oneOf": [ + { + "type": "string", + "description": "The path of a file to use for the application's HTML index. The filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path." + }, + { + "type": "object", + "description": "", + "properties": { + "input": { + "type": "string", + "minLength": 1, + "description": "The path of a file to use for the application's generated HTML index." + }, + "output": { + "type": "string", + "minLength": 1, + "default": "index.html", + "description": "The output path of the application's generated HTML index file. The full provided path will be used and will be considered relative to the application's configured output path." + } + }, + "required": ["input"] + }, + { + "const": false, + "description": "Does not generate an `index.html` file." + } + ] + }, + "statsJson": { + "type": "boolean", + "description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.", + "default": false + }, + "budgets": { + "description": "Budget thresholds to ensure parts of your application stay within boundaries which you set.", + "type": "array", + "items": { + "$ref": "#/definitions/budget" + }, + "default": [] + }, + "webWorkerTsConfig": { + "type": "string", + "description": "TypeScript configuration for Web Worker modules." + }, + "crossOrigin": { + "type": "string", + "description": "Define the crossorigin attribute setting of elements that provide CORS support.", + "default": "none", + "enum": ["none", "anonymous", "use-credentials"] + }, + "allowedCommonJsDependencies": { + "description": "A list of CommonJS packages that are allowed to be used without a build time warning.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + }, + "buildLibsFromSource": { + "type": "boolean", + "description": "Read buildable libraries from source instead of building them separately.", + "default": true + } + }, + "additionalProperties": false, + "required": ["outputPath", "index", "main", "tsConfig"], + "definitions": { + "assetPattern": { + "oneOf": [ + { + "type": "object", + "properties": { + "followSymlinks": { + "type": "boolean", + "default": false, + "description": "Allow glob patterns to follow symlink directories. This allows subdirectories of the symlink to be searched." + }, + "glob": { + "type": "string", + "description": "The pattern to match." + }, + "input": { + "type": "string", + "description": "The input directory path in which to apply 'glob'. Defaults to the project root." + }, + "ignore": { + "description": "An array of globs to ignore.", + "type": "array", + "items": { + "type": "string" + } + }, + "output": { + "type": "string", + "description": "Absolute path within the output." + } + }, + "additionalProperties": false, + "required": ["glob", "input", "output"] + }, + { + "type": "string" + } + ] + }, + "fileReplacement": { + "type": "object", + "properties": { + "replace": { + "type": "string", + "pattern": "\\.(([cm]?j|t)sx?|json)$" + }, + "with": { + "type": "string", + "pattern": "\\.(([cm]?j|t)sx?|json)$" + } + }, + "additionalProperties": false, + "required": ["replace", "with"] + }, + "budget": { + "type": "object", + "properties": { + "type": { + "type": "string", + "description": "The type of budget.", + "enum": [ + "all", + "allScript", + "any", + "anyScript", + "anyComponentStyle", + "bundle", + "initial" + ] + }, + "name": { + "type": "string", + "description": "The name of the bundle." + }, + "baseline": { + "type": "string", + "description": "The baseline size for comparison." + }, + "maximumWarning": { + "type": "string", + "description": "The maximum threshold for warning relative to the baseline." + }, + "maximumError": { + "type": "string", + "description": "The maximum threshold for error relative to the baseline." + }, + "minimumWarning": { + "type": "string", + "description": "The minimum threshold for warning relative to the baseline." + }, + "minimumError": { + "type": "string", + "description": "The minimum threshold for error relative to the baseline." + }, + "warning": { + "type": "string", + "description": "The threshold for warning relative to the baseline (min & max)." + }, + "error": { + "type": "string", + "description": "The threshold for error relative to the baseline (min & max)." + } + }, + "additionalProperties": false, + "required": ["type"] + } + } +} diff --git a/packages/nx/src/adapter/ngcli-adapter.ts b/packages/nx/src/adapter/ngcli-adapter.ts index 5bba49270b0da..e0332badb67a7 100644 --- a/packages/nx/src/adapter/ngcli-adapter.ts +++ b/packages/nx/src/adapter/ngcli-adapter.ts @@ -1,5 +1,6 @@ import { fragment, + json, logging, normalize, Path, @@ -14,7 +15,7 @@ import { FileBuffer } from '@angular-devkit/core/src/virtual-fs/host/interface'; // Importing @angular-devkit/architect here will cause issues importing this file without @angular-devkit/architect installed /* eslint-disable no-restricted-imports */ -import type { Architect } from '@angular-devkit/architect'; +import type { Architect, Target } from '@angular-devkit/architect'; import type { NodeModulesBuilderInfo } from '@angular-devkit/architect/node/node-modules-architect-host'; import * as chalk from 'chalk'; @@ -52,6 +53,7 @@ import { CustomHasher, Executor, ExecutorConfig, + ExecutorContext, ExecutorsJson, TaskGraphExecutor, } from '../config/misc-interfaces'; @@ -62,6 +64,92 @@ import { resolveSchema, } from '../config/schema-utils'; +export async function createBuilderContext( + builderInfo: { + builderName: string; + description: string; + optionSchema: any; + }, + context: ExecutorContext +) { + require('nx/src/adapter/compat'); + const fsHost = new NxScopedHost(context.root); + const { workspace } = await workspaces.readWorkspace( + 'angular.json', + workspaces.createWorkspaceHost(fsHost) + ); + const architectHost = await getWrappedWorkspaceNodeModulesArchitectHost( + workspace, + context.root + ); + + const registry = new schema.CoreSchemaRegistry(); + registry.addPostTransform(schema.transforms.addUndefinedDefaults); + registry.addSmartDefaultProvider('unparsed', () => { + // This happens when context.scheduleTarget is used to run a target using nx:run-commands + return []; + }); + const { Architect } = require('@angular-devkit/architect'); + + const architect: Architect = new Architect(architectHost, registry); + + const { firstValueFrom } = require('rxjs'); + const toPromise = (obs: Observable) => + firstValueFrom ? firstValueFrom(obs) : obs.toPromise(); + + const validateOptions = (options: json.JsonObject, builderName: string) => + toPromise( + architect['_scheduler'].schedule('..validateOptions', [ + builderName, + options, + ]).output + ); + + const getProjectMetadata = (target: Target | string) => + toPromise( + architect['_scheduler'].schedule('..getProjectMetadata', target).output + ); + + const builderContext: import('@angular-devkit/architect').BuilderContext = { + workspaceRoot: context.root, + target: { + project: context.projectName, + target: context.targetName, + configuration: context.configurationName, + }, + builder: { + ...builderInfo, + }, + logger: getLogger(), + id: 1, + currentDirectory: process.cwd(), + scheduleTarget: architect.scheduleTarget, + getBuilderNameForTarget: architectHost.getBuilderNameForTarget, + scheduleBuilder: architect.scheduleBuilder, + getTargetOptions: architectHost.getOptionsForTarget, + addTeardown(teardown: () => Promise | void) { + // No-op as Nx doesn't require an implementation of this function + return; + }, + reportProgress(...args) { + // No-op as Nx doesn't require an implementation of this function + return; + }, + reportRunning(...args) { + // No-op as Nx doesn't require an implementation of this function + return; + }, + reportStatus(status: string) { + // No-op as Nx doesn't require an implementation of this function + return; + }, + getProjectMetadata, + validateOptions, + }; + + return builderContext; +} + export async function scheduleTarget( root: string, opts: { @@ -88,122 +176,7 @@ export async function scheduleTarget( return []; }); - const AngularWorkspaceNodeModulesArchitectHost = - require('@angular-devkit/architect/node').WorkspaceNodeModulesArchitectHost; - - class WrappedWorkspaceNodeModulesArchitectHost extends AngularWorkspaceNodeModulesArchitectHost { - private workspaces = new Workspaces(this.root); - - constructor(private workspace, private root) { - super(workspace, root); - } - async resolveBuilder(builderStr: string): Promise { - const [packageName, builderName] = builderStr.split(':'); - - const { executorsFilePath, executorConfig } = this.readExecutorsJson( - packageName, - builderName - ); - const builderInfo = this.readExecutor(packageName, builderName); - return { - name: builderStr, - builderName, - description: - readJsonFile(executorsFilePath).builders[builderName] - .description, - optionSchema: builderInfo.schema, - import: resolveImplementation( - executorConfig.implementation, - dirname(executorsFilePath) - ), - }; - } - - private readExecutorsJson(nodeModule: string, builder: string) { - const { json: packageJson, path: packageJsonPath } = - readPluginPackageJson( - nodeModule, - this.workspaces['resolvePaths'].bind(this.workspaces)() - ); - const executorsFile = packageJson.executors ?? packageJson.builders; - - if (!executorsFile) { - throw new Error( - `The "${nodeModule}" package does not support Nx executors or Angular Devkit Builders.` - ); - } - - const executorsFilePath = require.resolve( - join(dirname(packageJsonPath), executorsFile) - ); - const executorsJson = readJsonFile(executorsFilePath); - const executorConfig: { - implementation: string; - batchImplementation?: string; - schema: string; - hasher?: string; - } = executorsJson.builders?.[builder]; - if (!executorConfig) { - throw new Error( - `Cannot find builder '${builder}' in ${executorsFilePath}.` - ); - } - return { executorsFilePath, executorConfig, isNgCompat: true }; - } - - private readExecutor( - nodeModule: string, - executor: string - ): ExecutorConfig & { isNgCompat: boolean } { - try { - const { executorsFilePath, executorConfig, isNgCompat } = - this.readExecutorsJson(nodeModule, executor); - const executorsDir = dirname(executorsFilePath); - const schemaPath = resolveSchema(executorConfig.schema, executorsDir); - const schema = normalizeExecutorSchema(readJsonFile(schemaPath)); - - const implementationFactory = this.getImplementationFactory( - executorConfig.implementation, - executorsDir - ); - - const batchImplementationFactory = executorConfig.batchImplementation - ? this.getImplementationFactory( - executorConfig.batchImplementation, - executorsDir - ) - : null; - - const hasherFactory = executorConfig.hasher - ? this.getImplementationFactory( - executorConfig.hasher, - executorsDir - ) - : null; - - return { - schema, - implementationFactory, - batchImplementationFactory, - hasherFactory, - isNgCompat, - }; - } catch (e) { - throw new Error( - `Unable to resolve ${nodeModule}:${executor}.\n${e.message}` - ); - } - } - - private getImplementationFactory( - implementation: string, - executorsDir: string - ): () => T { - return getImplementationFactory(implementation, executorsDir); - } - } - - const architectHost = new WrappedWorkspaceNodeModulesArchitectHost( + const architectHost = await getWrappedWorkspaceNodeModulesArchitectHost( workspace, root ); @@ -1050,3 +1023,126 @@ function saveProjectsConfigurationsInWrappedSchematic( ); } } + +async function getWrappedWorkspaceNodeModulesArchitectHost( + workspace: workspaces.WorkspaceDefinition, + root: string +) { + const { + WorkspaceNodeModulesArchitectHost: AngularWorkspaceNodeModulesArchitectHost, + } = await import('@angular-devkit/architect/node'); + + class WrappedWorkspaceNodeModulesArchitectHost extends AngularWorkspaceNodeModulesArchitectHost { + private workspaces = new Workspaces(this.root); + + constructor(private workspace, private root) { + super(workspace, root); + } + async resolveBuilder(builderStr: string): Promise { + const [packageName, builderName] = builderStr.split(':'); + + const { executorsFilePath, executorConfig } = this.readExecutorsJson( + packageName, + builderName + ); + const builderInfo = this.readExecutor(packageName, builderName); + return { + name: builderStr, + builderName, + description: + readJsonFile(executorsFilePath).builders[builderName] + .description, + optionSchema: builderInfo.schema, + import: resolveImplementation( + executorConfig.implementation, + dirname(executorsFilePath) + ), + }; + } + + private readExecutorsJson(nodeModule: string, builder: string) { + const { json: packageJson, path: packageJsonPath } = + readPluginPackageJson( + nodeModule, + this.workspaces['resolvePaths'].bind(this.workspaces)() + ); + const executorsFile = packageJson.executors ?? packageJson.builders; + + if (!executorsFile) { + throw new Error( + `The "${nodeModule}" package does not support Nx executors or Angular Devkit Builders.` + ); + } + + const executorsFilePath = require.resolve( + join(dirname(packageJsonPath), executorsFile) + ); + const executorsJson = readJsonFile(executorsFilePath); + const executorConfig: { + implementation: string; + batchImplementation?: string; + schema: string; + hasher?: string; + } = executorsJson.builders?.[builder]; + if (!executorConfig) { + throw new Error( + `Cannot find builder '${builder}' in ${executorsFilePath}.` + ); + } + return { executorsFilePath, executorConfig, isNgCompat: true }; + } + + private readExecutor( + nodeModule: string, + executor: string + ): ExecutorConfig & { isNgCompat: boolean } { + try { + const { executorsFilePath, executorConfig, isNgCompat } = + this.readExecutorsJson(nodeModule, executor); + const executorsDir = dirname(executorsFilePath); + const schemaPath = resolveSchema(executorConfig.schema, executorsDir); + const schema = normalizeExecutorSchema(readJsonFile(schemaPath)); + + const implementationFactory = this.getImplementationFactory( + executorConfig.implementation, + executorsDir + ); + + const batchImplementationFactory = executorConfig.batchImplementation + ? this.getImplementationFactory( + executorConfig.batchImplementation, + executorsDir + ) + : null; + + const hasherFactory = executorConfig.hasher + ? this.getImplementationFactory( + executorConfig.hasher, + executorsDir + ) + : null; + + return { + schema, + implementationFactory, + batchImplementationFactory, + hasherFactory, + isNgCompat, + }; + } catch (e) { + throw new Error( + `Unable to resolve ${nodeModule}:${executor}.\n${e.message}` + ); + } + } + + private getImplementationFactory( + implementation: string, + executorsDir: string + ): () => T { + return getImplementationFactory(implementation, executorsDir); + } + } + + return new WrappedWorkspaceNodeModulesArchitectHost(workspace, root); +}