build: use esbuild from aspect rules (#62568)

Use the esbuild ruleset from aspect rules instead of via @bazel/esbuild

PR Close #62568

.github/actions/deploy-docs-site/BUILD.bazel

@@ -1,6 +1,5 @@
 load("@aspect_rules_ts//ts:defs.bzl", rules_js_tsconfig = "ts_config")
-load("//tools:defaults.bzl", "esbuild_checked_in")
-load("//tools:defaults2.bzl", "ts_project")
+load("//tools:defaults2.bzl", "esbuild_checked_in", "ts_project")
 
 package(default_visibility = ["//.github/actions/deploy-docs-site:__subpackages__"])
 
@@ -10,6 +9,7 @@ exports_files([
 
 esbuild_checked_in(
     name = "main",
+    config = "esbuild.conf.js",
     entry_point = ":lib/main.mts",
     external = [
         "undici",
@@ -18,7 +18,7 @@ esbuild_checked_in(
     platform = "node",
     target = "node20",
     deps = [
-        ":lib",
+        ":lib_rjs",
     ],
 )
 

.github/actions/deploy-docs-site/esbuild.conf.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+module.exports = {
+  resolveExtensions: ['.mjs', '.js'],
+  format: 'esm',
+  banner: {
+    // Workaround for: https://github.com/evanw/esbuild/issues/946
+    js: `import {createRequire as __cjsCompatRequire} from 'module';
+const require = __cjsCompatRequire(import.meta.url);`,
+  },
+};

packages/compiler-cli/esbuild.config.js

@@ -8,7 +8,6 @@
 
 module.exports = {
   resolveExtensions: ['.mjs', '.js'],
-  // Note: `@bazel/esbuild` has a bug and does not pass-through the format from Starlark.
   format: 'esm',
   banner: {
     // Workaround for: https://github.com/evanw/esbuild/issues/946

packages/examples/upgrade/upgrade_example.bzl

@@ -1,4 +1,5 @@
-load("//tools:defaults.bzl", "esbuild", "http_server", "protractor_web_test_suite")
+load("@devinfra//bazel/esbuild:index.bzl", "esbuild")
+load("//tools:defaults.bzl", "http_server", "protractor_web_test_suite")
 load("//tools:defaults2.bzl", "ng_project", "ts_project")
 
 """

packages/localize/tools/BUILD.bazel

@@ -1,4 +1,4 @@
-load("@npm//@bazel/esbuild:index.bzl", "esbuild", "esbuild_config")
+load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")
 load("//tools:defaults.bzl", "extract_types", "pkg_npm")
 load("//tools:defaults2.bzl", "ts_config", "ts_project")
 
@@ -31,14 +31,9 @@ ts_project(
     ],
 )
 
-esbuild_config(
-    name = "esbuild_config",
-    config_file = "esbuild.config.js",
-)
-
 esbuild(
     name = "bundles",
-    config = ":esbuild_config",
+    config = "esbuild.config.js",
     entry_points = [
         ":index.ts",
         ":src/extract/cli.ts",
@@ -59,7 +54,7 @@ esbuild(
     splitting = True,
     target = "node20",
     deps = [
-        ":tools",
+        ":tools_rjs",
     ],
 )
 

packages/localize/tools/esbuild.config.js

@@ -8,7 +8,6 @@
 
 module.exports = {
   resolveExtensions: ['.mjs', '.js'],
-  // Note: `@bazel/esbuild` has a bug and does not pass-through the format from Starlark.
   format: 'esm',
   banner: {
     // Workaround for: https://github.com/evanw/esbuild/issues/946

packages/platform-server/BUILD.bazel

@@ -1,5 +1,6 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
-load("//tools:defaults.bzl", "api_golden_test_npm_package", "esbuild", "generate_api_docs", "tsec_test")
+load("@devinfra//bazel/esbuild:index.bzl", "esbuild")
+load("//tools:defaults.bzl", "api_golden_test_npm_package", "generate_api_docs", "tsec_test")
 load("//tools:defaults2.bzl", "ng_package", "ng_project", "npm_package")
 
 package(default_visibility = ["//visibility:public"])

packages/platform-server/init/BUILD.bazel

@@ -1,5 +1,6 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
-load("//tools:defaults.bzl", "esbuild", "tsec_test")
+load("@devinfra//bazel/esbuild:index.bzl", "esbuild")
+load("//tools:defaults.bzl", "tsec_test")
 load("//tools:defaults2.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])

packages/service-worker/cli/BUILD.bazel

@@ -1,4 +1,4 @@
-load("@npm//@bazel/esbuild:index.bzl", "esbuild", "esbuild_config")
+load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")
 load("//tools:defaults2.bzl", "ts_project")
 
 package(default_visibility = ["//visibility:public"])
@@ -13,14 +13,9 @@ ts_project(
     ],
 )
 
-esbuild_config(
-    name = "esbuild_config",
-    config_file = "esbuild.config.js",
-)
-
 esbuild(
     name = "ngsw_config",
-    config = ":esbuild_config",
+    config = "esbuild.config.js",
     entry_point = ":main.ts",
     external = [
         "@angular/service-worker",
@@ -30,6 +25,6 @@ esbuild(
     platform = "node",
     target = "node20",
     deps = [
-        ":cli",
+        ":cli_rjs",
     ],
 )

packages/service-worker/cli/esbuild.config.js

@@ -9,7 +9,6 @@
 module.exports = {
   // TODO: Investigate if this can be removed once ng_module is migrated to ng_project
   resolveExtensions: ['.mjs', '.js'],
-  // Note: `@bazel/esbuild` has a bug and does not pass-through the format from Starlark.
   format: 'esm',
   banner: {
     // Workaround for: https://github.com/evanw/esbuild/issues/946

packages/service-worker/worker/BUILD.bazel

@@ -1,4 +1,4 @@
-load("@npm//@bazel/esbuild:index.bzl", "esbuild")
+load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")
 load("//tools:defaults2.bzl", "ts_project")
 
 package(default_visibility = ["//visibility:public"])

tools/bazel/esbuild.bzl

@@ -0,0 +1,36 @@
+load("@aspect_bazel_lib//lib:write_source_files.bzl", "write_source_file")
+load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")
+
+def esbuild_checked_in(name, **kwargs):
+    esbuild(
+        name = "%s_generated" % name,
+        # Unfortunately we need to omit source maps from the checked-in files as these
+        # will vary based on the platform. See more details below in the sanitization
+        # genrule transformation. It is acceptable not having source-maps for the checked-in
+        # files as those are not minified and its to debug, the checked-in file can be visited.
+        sourcemap = "external",
+        # We always disable minification for checked-in files as otherwise it will
+        # become difficult determining potential differences. e.g. on Windows ESBuild
+        # accidentally included `source-map-support` due to the missing sandbox.
+        minify = False,
+        output = "%s_generated.js" % name,
+        **kwargs
+    )
+
+    # ESBuild adds comments and function identifiers with the name of their module
+    # location. e.g. `"bazel-out/x64_windows-fastbuild/bin/node_modules/a"function(exports)`.
+    # We strip all of these paths as that would break approval of the he checked-in files within
+    # different platforms (e.g. RBE running with K8). Additionally these paths depend
+    # on the non-deterministic hoisting of the package manager across all platforms.
+    native.genrule(
+        name = "%s_sanitized" % name,
+        srcs = ["%s_generated.js" % name],
+        outs = ["%s_sanitized.js" % name],
+        cmd = """cat $< | sed -E "s#(bazel-out|node_modules)/[^\\"']+##g" > $@""",
+    )
+
+    write_source_file(
+        name = name,
+        out_file = "%s.js" % name,
+        in_file = "%s_sanitized.js" % name,
+    )

tools/defaults.bzl

@@ -1,9 +1,8 @@
 """Re-export of some bazel rules with repository-wide defaults."""
 
-load("@build_bazel_rules_nodejs//:index.bzl", "generated_file_test", _npm_package_bin = "npm_package_bin", _pkg_npm = "pkg_npm")
+load("@build_bazel_rules_nodejs//:index.bzl", _npm_package_bin = "npm_package_bin", _pkg_npm = "pkg_npm")
 load("@devinfra//bazel:extract_js_module_output.bzl", "extract_js_module_output")
 load("@devinfra//bazel:extract_types.bzl", _extract_types = "extract_types")
-load("@devinfra//bazel/esbuild:index.bzl", _esbuild = "esbuild", _esbuild_config = "esbuild_config", _esbuild_esm_bundle = "esbuild_esm_bundle")
 load("@devinfra//bazel/http-server:index.bzl", _http_server = "http_server")
 load("@devinfra//bazel/spec-bundling:spec-entrypoint.bzl", "spec_entrypoint")
 load("@npm//@angular/build-tooling/bazel/api-golden:index.bzl", _api_golden_test = "api_golden_test", _api_golden_test_npm_package = "api_golden_test_npm_package")
@@ -22,8 +21,6 @@ load("//tools/esm-interop:index.bzl", "enable_esm_node_module_loader", _nodejs_b
 
 _DEFAULT_TSCONFIG_TEST = "//packages:tsconfig-test"
 
-esbuild_config = _esbuild_config
-esbuild_esm_bundle = _esbuild_esm_bundle
 http_server = _http_server
 extract_types = _extract_types
 
@@ -419,47 +416,6 @@ def tsec_test(**kwargs):
         **kwargs
     )
 
-def esbuild(args = None, **kwargs):
-    _esbuild(
-        args = args if args else {
-            "resolveExtensions": [".mjs", ".js", ".json"],
-        },
-        **kwargs
-    )
-
-def esbuild_checked_in(name, **kwargs):
-    esbuild_esm_bundle(
-        name = "%s_generated" % name,
-        # Unfortunately we need to omit source maps from the checked-in files as these
-        # will vary based on the platform. See more details below in the sanitization
-        # genrule transformation. It is acceptable not having source-maps for the checked-in
-        # files as those are not minified and its to debug, the checked-in file can be visited.
-        sourcemap = "external",
-        # We always disable minification for checked-in files as otherwise it will
-        # become difficult determining potential differences. e.g. on Windows ESBuild
-        # accidentally included `source-map-support` due to the missing sandbox.
-        minify = False,
-        **kwargs
-    )
-
-    # ESBuild adds comments and function identifiers with the name of their module
-    # location. e.g. `"bazel-out/x64_windows-fastbuild/bin/node_modules/a"function(exports)`.
-    # We strip all of these paths as that would break approval of the he checked-in files within
-    # different platforms (e.g. RBE running with K8). Additionally these paths depend
-    # on the non-deterministic hoisting of the package manager across all platforms.
-    native.genrule(
-        name = "%s_sanitized" % name,
-        srcs = ["%s_generated.js" % name],
-        outs = ["%s_sanitized.js" % name],
-        cmd = """cat $< | sed -E "s#(bazel-out|node_modules)/[^\\"']+##g" > $@""",
-    )
-
-    generated_file_test(
-        name = name,
-        src = "%s.js" % name,
-        generated = "%s_sanitized.js" % name,
-    )
-
 def generate_api_docs(**kwargs):
     _generate_api_docs(
         # We need to specify import mappings for Angular packages that import other Angular

tools/defaults2.bzl

@@ -2,6 +2,7 @@ load("@aspect_rules_js//npm:defs.bzl", _npm_package = "npm_package")
 load("@aspect_rules_ts//ts:defs.bzl", _ts_config = "ts_config")
 load("@rules_angular//src/ng_project:index.bzl", _ng_project = "ng_project")
 load("@rules_sass//src:index.bzl", _npm_sass_library = "npm_sass_library", _sass_binary = "sass_binary", _sass_library = "sass_library")
+load("//tools/bazel:esbuild.bzl", _esbuild_checked_in = "esbuild_checked_in")
 load("//tools/bazel:jasmine_test.bzl", _angular_jasmine_test = "angular_jasmine_test", _jasmine_test = "jasmine_test", _zoneless_jasmine_test = "zoneless_jasmine_test")
 load("//tools/bazel:module_name.bzl", "compute_module_name")
 load("//tools/bazel:ng_package.bzl", _ng_package = "ng_package")
@@ -21,6 +22,7 @@ sass_binary = _sass_binary
 sass_library = _sass_library
 npm_sass_library = _npm_sass_library
 protractor_web_test_suite = _protractor_web_test_suite
+esbuild_checked_in = _esbuild_checked_in
 
 def _determine_tsconfig(testonly):
     if native.package_name().startswith("packages/compiler-cli"):