build(ivy): support alternate compilation modes to enable Ivy testing (#24056)

Bazel has a restriction that a single output (eg. a compiled version of
//packages/common) can only be produced by a single rule. This precludes
the Angular repo from having multiple rules that build the same code. And
the complexity of having a single rule produce multiple outputs (eg. an
ngc-compiled version of //packages/common and an Ivy-enabled version) is
too high.

Additionally, the Angular repo has lots of existing tests which could be
executed as-is under Ivy. Such testing is very valuable, and it would be
nice to share not only the code, but the dependency graph / build config
as well.

Thus, this change introduces a --define flag 'compile' with three potential
values. When --define=compile=X is set, the entire build system runs in a
particular mode - the behavior of all existing targets is controlled by
the flag. This allows us to reuse our entire build structure for testing
in a variety of different manners. The flag has three possible settings:

* legacy (the default): the traditional View Engine (ngc) build
* local: runs the prototype ngtsc compiler, which does not rely on global
  analysis
* jit: runs ngtsc in a mode which executes tsickle, but excludes the
  Angular related transforms, which approximates the behavior of plain
  tsc. This allows the main packages such as common to be tested with
  the JIT compiler.

Additionally, the ivy_ng_module() rule still exists and runs ngc in a mode
where Ivy-compiled output is produced from global analysis information, as
a stopgap while ngtsc is being developed.

PR Close #24056

packages/core/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
         "//packages:types",
         "//packages/compiler",
         "@rxjs",
+        "@rxjs//operators",
     ],
 )
 
@@ -38,16 +39,18 @@ ng_package(
 ## Controls if Ivy is enabled. (Temporary target until we permanently switch over to Ivy)
 ##
 ## This file generates `src/ivy_switch.ts` file which reexports symbols for `ViewEngine` or `Ivy.`
-## - append `--define=ivy=false` (default) to `bazel` command to reexport `./ivy_switch_false`
-##   and use `ViewEngine`;
-## - append `--define=ivy=true` to `bazel` command to rexport `./ivy_switch_true` and use `Ivy`;
+## - append `--define=compile=legacy` (default) to `bazel` command to reexport `./ivy_switch_legacy`
+##   and use `ViewEngine`
+## - append `--define=compile=jit` to `bazel` command to rexport `./ivy_switch_jit` and use `Ivy`
+## - append `--define=compile=local` to `bazel` command to rexport `./ivy_switch_jit` and use `Ivy`
+##   in the local analysis mode. (run as part of `ngtsc`)
 ##
-## NOTE: `--define=ivy=true` works with any `bazel` command or target across the repo.
+## NOTE: `--define=compile=jit` works with any `bazel` command or target across the repo.
 ##
 ## See: `//tools/bazel.rc` where `--define=ivy=false` is defined as default.
 ## See: `./src/ivy_switch.ts` for more details.
 genrule(
     name = "ivy_switch",
     outs = ["src/ivy_switch.ts"],
-    cmd = "echo export '*' from \"'./ivy_switch_$(ivy)';\" > $@",
+    cmd = "echo export '*' from \"'./ivy_switch_$(compile)';\" > $@",
 )

packages/core/src/ivy_switch.ts

@@ -31,6 +31,6 @@
  * 3) Import the symbol from `./ivy_switch`. The imported symbol will that point to either the
  *    symbol in `./ivy_switch_false` and `./ivy_switch_false` depending on the compilation mode.
  */
-export * from './ivy_switch_false';
+export * from './ivy_switch_legacy';
 
 // TODO(alxhub): debug why metadata doesn't properly propagate through this file.

packages/core/src/ivy_switch_jit.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+export * from './ivy_switch_on';

packages/core/src/ivy_switch_local.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+export * from './ivy_switch_on';

packages/core/test/bundling/hello_world/BUILD.bazel

@@ -44,9 +44,12 @@ jasmine_node_test(
     data = [
         ":bundle",
         ":bundle.js",
-        ":bundle.min.js.br",
+        ":bundle.min.js",
         ":bundle.min_debug.js",
     ],
+    tags = [
+        "ivy-jit",
+    ],
     deps = [":test_lib"],
 )
 

packages/core/test/bundling/hello_world/treeshaking_spec.ts

@@ -29,7 +29,8 @@ describe('treeshaking with uglify', () => {
     expect(content).not.toContain('createCommonjsModule');
   });
 
-  it('should not contain zone.js', () => { expect(content).not.toContain('scheduleMicroTask'); });
+  it('should not contain zone.js',
+     () => { expect(content).not.toContain('global[\'Zone\'] = Zone'); });
 
   describe('functional test in domino', () => {
     it('should render hello world when not minified',

packages/core/test/bundling/hello_world_jit/BUILD.bazel

@@ -1,58 +0,0 @@
-package(default_visibility = ["//visibility:public"])
-
-load("//tools:defaults.bzl", "ts_library", "ivy_ng_module")
-load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
-load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test", "rollup_bundle")
-load("//tools/http-server:http_server.bzl", "http_server")
-
-ts_library(
-    name = "hello_world_jit",
-    srcs = ["index.ts"],
-    deps = [
-        "//packages/core",
-    ],
-)
-
-rollup_bundle(
-    name = "bundle",
-    # TODO(alexeagle): This is inconsistent.
-    # We try to teach users to always have their workspace at the start of a
-    # path, to disambiguate from other workspaces.
-    # Here, the rule implementation is looking in an execroot where the layout
-    # has an "external" directory for external dependencies.
-    # This should probably start with "angular/" and let the rule deal with it.
-    entry_point = "packages/core/test/bundling/hello_world_jit/index.js",
-    deps = [
-        ":hello_world_jit",
-        "//packages/core",
-    ],
-)
-
-ts_library(
-    name = "test_lib",
-    testonly = 1,
-    srcs = glob(["*_spec.ts"]),
-    deps = [
-        "//packages:types",
-        "//packages/core",
-        "//packages/core/testing",
-    ],
-)
-
-jasmine_node_test(
-    name = "test",
-    data = [
-        ":bundle",
-        ":bundle.js",
-    ],
-    deps = [":test_lib"],
-)
-
-http_server(
-    name = "devserver",
-    data = [
-        "index.html",
-        ":bundle.min.js",
-        ":bundle.min_debug.js",
-    ],
-)

packages/core/test/bundling/hello_world_jit/index.html

@@ -1,31 +0,0 @@
-<!doctype html>
-
-<html>
-  <head>
-    <title>Angular Hello World Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-    <hello-world></hello-world>
-
-    <!-- 
-      Script tag which bootstraps the application. Use `?debug` in URL to select
-      the debug version of the script.
-      
-      There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can 
-      switch between which bundle the browser loads to experiment with the application.
-
-      - `bundle.min.js`: Is what the site would serve to their users. It has gone
-        through rollup, build-optimizer, and uglify with tree shaking.
-      - `bundle.min_debug.js`: Is what the developer would like to see when debugging
-        the application. It has also done through full pipeline of rollup, build-optimizer,
-        and uglify, however special flags were passed to uglify to prevent inlining and
-        property renaming.
-    -->
-    <script>
-        document.write('<script src="' + 
-          (document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') + 
-          '"></' + 'script>');
-    </script>
-  </body>
-</html>

packages/core/test/bundling/hello_world_jit/index.ts

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. 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 'reflect-metadata';
-
-import {Component, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
-
-@Component({
-  selector: 'greeting-cmp',
-  template: 'Hello World!',
-})
-export class Greeting {
-}
-
-@NgModule({
-  declarations: [Greeting],
-  exports: [Greeting],
-})
-export class GreetingModule {
-}
-
-@Component({selector: 'hello-world', template: '<greeting-cmp></greeting-cmp>'})
-export class HelloWorld {
-}
-
-@NgModule({
-  declarations: [HelloWorld],
-  imports: [GreetingModule],
-})
-export class HelloWorldModule {
-}
-
-renderComponent(HelloWorld);

packages/core/test/bundling/hello_world_jit/integration_spec.ts

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. 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 {ɵivyEnabled as ivyEnabled} from '@angular/core';
-import {withBody} from '@angular/core/testing';
-import * as fs from 'fs';
-import * as path from 'path';
-
-const PACKAGE = 'angular/packages/core/test/bundling/hello_world_jit';
-
-ivyEnabled && describe('Ivy JIT hello world', () => {
-  it('should render hello world', withBody('<hello-world></hello-world>', () => {
-       require(path.join(PACKAGE, 'bundle.js'));
-       expect(document.body.textContent).toEqual('Hello World!');
-     }));
-});
-
-xit('ensure at least one spec exists', () => {});

packages/core/test/bundling/todo/BUILD.bazel

@@ -47,7 +47,7 @@ jasmine_node_test(
     data = [
         ":bundle",
         ":bundle.js",
-        ":bundle.min.js.br",
+        ":bundle.min.js",
         ":bundle.min_debug.js",
     ],
     deps = [":test_lib"],