fix(bazel): benchmark angular compilation pipeline not working with APF v13

Fixes that the Angular compilation pipeline for benchmarks is not
working with APF v13. This commit fixes it by bring the pipeline in sync
with what is done in the CLI, and also providing a shared script that
can be used by other size-tests in e.g. Angular Components or framework.

Author: devversion

.bazelrc

@@ -17,6 +17,8 @@ test --nolegacy_external_runfiles
 build --deleted_packages=bazel/integration/tests/nested_bazel_workspaces/basic
 query --deleted_packages=bazel/integration/tests/nested_bazel_workspaces/basic
 
+build --define=angular_ivy_enabled=True
+
 ###############################
 # Filesystem interactions     #
 ###############################

bazel/benchmark/BUILD.bazel

@@ -4,9 +4,9 @@ package(default_visibility = ["//visibility:public"])
 filegroup(
     name = "files",
     srcs = glob(["*"]) + [
+        "//bazel/benchmark/app_bundling:files",
         "//bazel/benchmark/brotli-cli:files",
         "//bazel/benchmark/component_benchmark:files",
-        "//bazel/benchmark/ng_rollup_bundle:files",
         "//bazel/benchmark/driver-utilities:files",
     ],
 )

bazel/benchmark/app_bundling/BUILD.bazel

@@ -1,8 +1,8 @@
 package(default_visibility = ["//visibility:public"])
 
 exports_files([
-    "rollup.config-tmpl.js",
     "terser_config.json",
+    "esbuild.config-tmpl.mjs",
 ])
 
 # Make source files available for distribution via pkg_npm

bazel/benchmark/app_bundling/esbuild.config-tmpl.mjs

@@ -0,0 +1,62 @@
+/**
+ * @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.io/license
+ */
+
+import * as path from 'path';
+
+import {createEsbuildAngularOptimizePlugin} from '@angular/dev-infra-private/shared-scripts/angular-optimization/esbuild-plugin.mjs';
+import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel';
+import {ConsoleLogger, NodeJSFileSystem, LogLevel} from '@angular/compiler-cli';
+import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli/private/tooling';
+
+/** Root path pointing to the app bundle source entry-point file. */
+const entryPointSourceRootPath = path.normalize(`TMPL_ENTRY_POINT_ROOTPATH`);
+
+/**
+ * Root path to the bundle entry-point without extension.
+ *
+ * The extension of the bundle entry-point file is not known because the ESBuild rule
+ * strips the source extension (like `.ts`) and resolves the file based on the resolved inputs.
+ */
+const entryPointBasepath = entryPointSourceRootPath.replace(/\.[^.]+$/, '');
+
+/** Whether the given file is considered side-effect free. */
+function isFileSideEffectFree(filePath) {
+  // All files except for the entry-point are considered side-effect free. We naively
+  // check using `includes` as a root path is quite unique regardless.
+  return !filePath.includes(entryPointBasepath);
+}
+
+/** Babel plugin running the Angular linker. */
+const linkerBabelPlugin = createEs2015LinkerPlugin({
+  fileSystem: new NodeJSFileSystem(),
+  logger: new ConsoleLogger(LogLevel.warn),
+  linkerJitMode: false,
+});
+
+export default {
+  // Note: We prefer `.mjs` here as this is the extension used by Angular APF packages.
+  resolveExtensions: ['.mjs', '.js'],
+  conditions: ['es2020', 'es2015'],
+  mainFields: ['fesm2020', 'es2020', 'es2015', 'module', 'main'],
+  // The majority of these options match with the ones the CLI sets:
+  // https://github.com/angular/angular-cli/blob/0d76bf04bca6e083865972b5398a32bbe9396e14/packages/angular_devkit/build_angular/src/webpack/plugins/javascript-optimizer-worker.ts#L133.
+  treeShaking: true,
+  pure: ['forwardRef'],
+  legalComments: 'none',
+  // ESBuild requires the `define` option to take a string-based dictionary.
+  define: convertObjectToStringDictionary(GLOBAL_DEFS_FOR_TERSER_WITH_AOT),
+  plugins: [createEsbuildAngularOptimizePlugin(isFileSideEffectFree, [linkerBabelPlugin])],
+};
+
+/** Converts an object to a string dictionary. */
+function convertObjectToStringDictionary(value) {
+  return Object.entries(value).reduce((result, [propName, value]) => {
+    result[propName] = String(value);
+    return result;
+  }, {});
+}

bazel/benchmark/app_bundling/index.bzl

@@ -0,0 +1,129 @@
+# 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.io/license
+
+load("@build_bazel_rules_nodejs//:index.bzl", "npm_package_bin")
+load("@npm//@bazel/terser:index.bzl", "terser_minified")
+load("@npm//prettier:index.bzl", "prettier")
+load("//bazel/esbuild:index.bzl", "esbuild", "esbuild_config")
+load("//bazel:expand_template.bzl", "expand_template")
+
+def _create_esbuild_minify_options(debug = False):
+    # The minify options match with the configuration used by the CLI. The whitespace
+    # minification is left to Terser. More details can be found here:
+    # https://github.com/angular/angular-cli/blob/0d76bf04bca6e083865972b5398a32bbe9396e14/packages/angular_devkit/build_angular/src/webpack/plugins/javascript-optimizer-worker.ts#L133.
+    return {
+        "minifyIdentifiers": not debug,
+        "minifySyntax": True,
+        "minifyWhitespace": False,
+        # TODO: Remove when https://github.com/bazelbuild/rules_nodejs/pull/3106 landed.
+        "ignoreAnnotations": False,
+    }
+
+def app_bundle(
+        name,
+        entry_point,
+        visibility = None,
+        platform = "browser",
+        target = "es2020",
+        format = "iife",
+        **kwargs):
+    """
+      Bundles an Angular applications in an optimized way that closely matches
+      the compilation pipeline as within the Angular CLI.
+
+      The rule produces a number of output bundles.
+
+        JS                               : "%{name}.js"
+        JS minified                      : "%{name}.min.js"
+        JS minified (compressed)         : "%{name}.min.js.br",
+        ----
+        JS debug                         : "%{name}.debug.js"
+        JS debug minified                : "%{name}.debug.min.js"
+        JS debug minified (beautified)   : "%{name}.debug.min.beautified.js"
+    """
+
+    expand_template(
+        name = "%s_config_file" % name,
+        output_name = "%s_config.mjs" % name,
+        template = "//bazel/benchmark/app_bundling:esbuild.config-tmpl.mjs",
+        visibility = visibility,
+        substitutions = {
+            "TMPL_ENTRY_POINT_ROOTPATH": "$(rootpath %s)" % entry_point,
+        },
+        data = [entry_point],
+    )
+
+    esbuild_config(
+        name = "%s_esbuild_config" % name,
+        config_file = ":%s_config_file" % name,
+        deps = [
+            "@npm//@angular/compiler-cli",
+            "//shared-scripts/angular-optimization:js_lib",
+        ],
+        visibility = visibility,
+    )
+
+    common_esbuild_options = dict(kwargs, **{
+        "config": "%s_esbuild_config" % name,
+        "testonly": True,
+        "entry_point": entry_point,
+        "target": target,
+        "platform": platform,
+        "format": format,
+        "sourcemap": "external",
+        "visibility": visibility,
+    })
+
+    common_terser_options = {
+        "visibility": visibility,
+        "config_file": "//bazel/benchmark/app_bundling:terser_config.json",
+        # TODO: Enable source maps for better debugging when `@bazel/terser` pre-declares
+        # JS and map outputs. Tracked with: DEV-120
+        "sourcemap": False,
+    }
+
+    esbuild(
+        name = name,
+        args = _create_esbuild_minify_options(False),
+        **common_esbuild_options
+    )
+
+    esbuild(
+        name = "%s.debug" % name,
+        args = _create_esbuild_minify_options(True),
+        tags = ["manual"],
+        **common_esbuild_options
+    )
+
+    terser_minified(name = name + ".min", src = name + ".js", **common_terser_options)
+    native.filegroup(name = name + ".min.js", srcs = [name + ".min"], visibility = visibility)
+
+    terser_minified(name = name + ".debug.min", src = name + ".debug.js", debug = True, tags = ["manual"], **common_terser_options)
+    native.filegroup(name = name + ".debug.min.js", srcs = [name + ".debug.min"], visibility = visibility, tags = ["manual"])
+
+    # For better debugging, we also run prettier on the minified debug bundle. This is
+    # necessary as Terser no longer has beautify/formatting functionality.
+    prettier(
+        name = name + ".debug.min.beautified",
+        args = ["$(execpath %s)" % (name + ".debug.min")],
+        # The `outs` attribute needs to be set when `stdout` is captured as an output.
+        outs = [],
+        stdout = name + ".debug.min.beautified.js",
+        data = [name + ".debug.min"],
+        visibility = visibility,
+        tags = ["manual"],
+    )
+
+    npm_package_bin(
+        name = "_%s_brotli" % name,
+        tool = "//bazel/benchmark/brotli-cli",
+        data = [name + ".min.js"],
+        outs = [name + ".min.js.br"],
+        args = [
+            "--output=$(execpath %s.min.js.br)" % name,
+            "$(execpath %s.min.js)" % name,
+        ],
+        visibility = visibility,
+    )