build: reduce manual setup for entry-points of packages (#17460)

Reduces the manual setup for entry-poitns of packages. With
this change, we no longer need to update the dev-app system
config if we add/remove entry-points.

We basically only need to configure entry-points in the
`config.bzl` file. Though this is not 100% complete yet,
because we still have legacy karma tests which need another
system config. The bazel karma tests do not need this anymore.

Author: devversion

src/dev-app/BUILD.bazel

@@ -1,6 +1,11 @@
 package(default_visibility = ["//visibility:public"])
 
+load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
+load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
+load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS")
+load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_ENTRYPOINTS")
 load("//tools:defaults.bzl", "ng_module", "sass_binary")
+load("//tools/bazel:expand_template.bzl", "expand_template")
 load("//tools/dev-server:index.bzl", "dev_server")
 
 ng_module(
@@ -92,20 +97,26 @@ sass_binary(
     ],
 )
 
-genrule(
-    name = "setup_compile_mode_script",
-    outs = ["setup_compile_mode.js"],
-    cmd = "echo window.bazelCompileMode = \"'$(compile)'\"\; > $@",
+expand_template(
+    name = "system-config",
+    configuration_env_vars = ["compile"],
+    output_name = "system-config.js",
+    substitutions = {
+        "$CDK_ENTRYPOINTS_TMPL": str(CDK_ENTRYPOINTS),
+        "$CDK_EXPERIMENTAL_ENTRYPOINTS_TMPL": str(CDK_EXPERIMENTAL_ENTRYPOINTS),
+        "$MATERIAL_ENTRYPOINTS_TMPL": str(MATERIAL_ENTRYPOINTS),
+        "$MATERIAL_EXPERIMENTAL_ENTRYPOINTS_TMPL": str(MATERIAL_EXPERIMENTAL_ENTRYPOINTS),
+    },
+    template = "system-config-tmpl.js",
 )
 
 dev_server(
     name = "devserver",
     srcs = [
         "favicon.ico",
         "index.html",
-        "system-config.js",
         "system-rxjs-operators.js",
-        ":setup_compile_mode_script",
+        ":system-config",
         ":theme",
         "//src/dev-app/icon:icon_demo_assets",
         "@npm//:node_modules/@material/animation/dist/mdc.animation.js",

src/dev-app/index.html

@@ -28,7 +28,6 @@
 <script src="core-js/client/core.js"></script>
 <script src="zone.js/dist/zone.js"></script>
 <script src="systemjs/dist/system.js"></script>
-<script src="setup_compile_mode.js"></script>
 <script src="system-config.js"></script>
 <script src="https://www.youtube.com/iframe_api"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>

src/dev-app/system-config.js renamed to src/dev-app/system-config-tmpl.js

@@ -6,70 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-// Note that this file isn't being transpiled so we need to keep it in ES5.
-
-var CDK_PACKAGES = [
-  'a11y',
-  'accordion',
-  'bidi',
-  'clipboard',
-  'coercion',
-  'collections',
-  'drag-drop',
-  'keycodes',
-  'layout',
-  'observers',
-  'overlay',
-  'platform',
-  'portal',
-  'scrolling',
-  'stepper',
-  'table',
-  'text-field',
-  'tree',
-];
-
-var CDK_EXPERIMENTAL_PACKAGES = [
-  'dialog',
-  'popover-edit',
-  'scrolling',
-];
-
-var MATERIAL_PACKAGES = [
-  'autocomplete',  'badge',
-  'bottom-sheet',  'button',
-  'button-toggle', 'card',
-  'checkbox',      'chips',
-  'core',          'datepicker',
-  'dialog',        'divider',
-  'expansion',     'form-field',
-  'grid-list',     'icon',
-  'input',         'list',
-  'menu',          'paginator',
-  'progress-bar',  'progress-spinner',
-  'radio',         'select',
-  'sidenav',       'slide-toggle',
-  'slider',        'snack-bar',
-  'sort',          'stepper',
-  'table',         'tabs',
-  'toolbar',       'tooltip',
-  'tree',
-];
-
-var MATERIAL_EXPERIMENTAL_PACKAGES = [
-  'mdc-button',
-  'mdc-card',
-  'mdc-checkbox',
-  'mdc-chips',
-  'mdc-tabs',
-  'mdc-helpers',
-  'mdc-menu',
-  'mdc-radio',
-  'mdc-progress-bar',
-  'mdc-slide-toggle',
-  'mdc-slider',
-  'popover-edit',
-];
+// Note that this file isn't being transpiled so we need to keep it in ES5. Also
+// identifiers of the format "$NAME_TMPL" will be replaced by the Bazel rule that
+// converts this template file into the actual SystemJS configuration file.
+
+var CDK_PACKAGES = $CDK_ENTRYPOINTS_TMPL;
+var CDK_EXPERIMENTAL_PACKAGES = $CDK_EXPERIMENTAL_ENTRYPOINTS_TMPL;
+var MATERIAL_PACKAGES = $MATERIAL_ENTRYPOINTS_TMPL;
+var MATERIAL_EXPERIMENTAL_PACKAGES = $MATERIAL_EXPERIMENTAL_ENTRYPOINTS_TMPL;
+
+/** Whether the dev-app is served with Ivy enabled. */
+var isRunningWithIvy = '$COMPILE_TMPL' === 'aot';
 
 /** Bazel runfile path referring to the "src/" folder of the project. */
 var srcRunfilePath = 'angular_material/src';
@@ -80,10 +27,7 @@ var pathMapping = {};
 /** Package configurations that will be used in SystemJS. */
 var packagesConfig = {};
 
-// The "bazelCompileMode" property will be set globally by the "setup-compile-mode.js"
-// script. This allows us to switch between Ivy and View Engine UMD bundles automatically.
-/** Whether the dev-app is served with Ivy enabled. */
-var isRunningWithIvy = window.bazelCompileMode === 'aot';
+
 
 // Configure all primary entry-points.
 configureEntryPoint('cdk');

tools/bazel/expand_template.bzl

@@ -0,0 +1,28 @@
+"""Implementation of the expand_template rule """
+
+def expand_template_impl(ctx):
+    replacements = dict(**ctx.attr.substitutions)
+
+    for k in ctx.attr.configuration_env_vars:
+        if k in ctx.var.keys():
+            replacements["$%s_TMPL" % k.upper()] = ctx.var[k]
+
+    ctx.actions.expand_template(
+        template = ctx.file.template,
+        output = ctx.outputs.output_name,
+        substitutions = replacements,
+    )
+
+"""
+  Rule that can be used to output a file from a specified
+  template by applying given substitutions.
+"""
+expand_template = rule(
+    implementation = expand_template_impl,
+    attrs = {
+        "configuration_env_vars": attr.string_list(default = []),
+        "output_name": attr.output(mandatory = True),
+        "substitutions": attr.string_dict(mandatory = True),
+        "template": attr.label(mandatory = True, allow_single_file = True),
+    },
+)