build(devtools): use ng-dev stamp tooling to stamp the latest git SHA in devtools

AleksanderBodurri · AleksanderBodurri · commit c24924cbd730 · 2022-01-26T16:35:30.000-05:00
Previously, we were using ngx-build-plus with a custom webpack config to determine the git SHA at runtime.

Now, after migrating to bazel and transfering to angular/angular, this commit uses ng-dev to stamp the latest git SHA directly in angular devtools' application environment.

This commit also removes the old webpack configs.
diff --git a/devtools/.bazelrc b/devtools/.bazelrc
@@ -1,3 +1,7 @@
 import ../.bazelrc
 
 build --flag_alias=partial_compilation=@npm//@angular/bazel/src:partial_compilation
+
+# Snapshots should also be stamped with version control information.
+build --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
+build --stamp
diff --git a/devtools/BUILD.bazel b/devtools/BUILD.bazel
@@ -1,4 +1,3 @@
-load("//tools:typescript.bzl", "ts_test_project")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
 
 package(default_visibility = ["//visibility:public"])
@@ -8,17 +7,6 @@ exports_files([
     "cypress.json",
 ])
 
-ts_test_project(
-    name = "initialize_testbed",
-    srcs = [
-        "initialize_testbed.ts",
-    ],
-    deps = [
-        "@npm//@angular/core",
-        "@npm//@angular/platform-browser-dynamic",
-    ],
-)
-
 ts_config(
     name = "tsconfig-spec",
     src = "tsconfig.spec.json",
diff --git a/devtools/angular.json b/devtools/angular.json
@@ -73,10 +73,6 @@
                 {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.e2e.ts"
-                },
-                {
-                  "replace": "src/app/app.module.ts",
-                  "with": "src/app/app.e2e.module.ts"
                 }
               ]
             }
@@ -85,7 +81,6 @@
         "serve": {
           "builder": "ngx-build-plus:dev-server",
           "options": {
-            "extraWebpackConfig": "shell-dev-webpack.config.js",
             "browserTarget": "shell-dev:build"
           },
           "configurations": {
@@ -154,7 +149,6 @@
           "builder": "ngx-build-plus:browser",
           "options": {
             "outputPath": "dist/shell-chrome",
-            "extraWebpackConfig": "projects/shell-chrome/shell-chrome-webpack.config.js",
             "index": "projects/shell-chrome/src/index.html",
             "main": "projects/shell-chrome/src/main.ts",
             "polyfills": "projects/shell-chrome/src/polyfills.ts",
diff --git a/devtools/initialize_testbed.ts b/devtools/initialize_testbed.ts
diff --git a/devtools/package.json b/devtools/package.json
@@ -19,8 +19,9 @@
     "cy:run": "yarn cypress run",
     "cy:open": "yarn cypress open",
     "cy:watch": "start-server-and-test start http-get://localhost:4200 cy:open",
-    "cy:ci": "start-server-and-test start http-get://localhost:4200 cy:run",
-    "test:ci": "bazelisk --bazelrc=../.circleci/bazel.linux.rc test //...",
+    "start:ci": "bazelisk run src:devserver",
+    "cy:ci": "start-server-and-test start:ci http-get://localhost:4200 cy:run",
+    "test:ci": "bazelisk test //...",
     "build:chrome:ci": "bazelisk build projects/shell-chrome/src:prodapp",
     "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,tsx,json}\"",
     "prettier:fix": "pretty-quick --staged"
@@ -45,7 +46,6 @@
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
     "@types/node": "^16.7.1",
-    "ajv-formats": "^2.1.1",
     "d3": "^5.7.0",
     "memo-decorator": "^2.0.1",
     "ngx-flamegraph": "0.0.10",
diff --git a/devtools/packages.bzl b/devtools/packages.bzl
@@ -1,33 +1,3 @@
-# Each individual package uses a placeholder for the version of Angular to ensure they're
-# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
-# version for the placeholders.
-ANGULAR_PACKAGE_VERSION = "^13.0.0 || ^14.0.0-0"
-MDC_PACKAGE_VERSION = "14.0.0-canary.1af7c1c4a.0"
-TSLIB_PACKAGE_VERSION = "^2.3.0"
-RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
-
-# Each placeholder is used to stamp versions during the build process, replacing the key with it's
-# value pair. These replacements occur during building of `npm_package` and `ng_package` stamping in
-# the peer dependencies and versions, primarily in `package.json`s.
-NPM_PACKAGE_SUBSTITUTIONS = {
-    # Version of `material-components-web`
-    "0.0.0-MDC": MDC_PACKAGE_VERSION,
-    # Version of `@angular/core`
-    "0.0.0-NG": ANGULAR_PACKAGE_VERSION,
-    # Version of `tslib`
-    "0.0.0-TSLIB": TSLIB_PACKAGE_VERSION,
-    # Version of the local package being built, generated via the `--workspace_status_command` flag.
-    "0.0.0-PLACEHOLDER": "{BUILD_SCM_VERSION}",
-    # Version of `rxjs`
-    "0.0.0-RXJS": RXJS_PACKAGE_VERSION,
-}
-
-NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS = dict(NPM_PACKAGE_SUBSTITUTIONS, **{
-    # When building NPM packages for tests (where stamping is disabled),
-    # we use `0.0.0` for the version placeholder.
-    "0.0.0-PLACEHOLDER": "0.0.0",
-})
-
 # List of MDC packages.
 MDC_PACKAGES = [
     "@material/animation",
diff --git a/devtools/projects/ng-devtools/src/lib/application-environment/index.ts b/devtools/projects/ng-devtools/src/lib/application-environment/index.ts
@@ -1,14 +1,10 @@
-export interface Process {
-  env: Env;
-}
-
 interface Env {
   LATEST_SHA: string;
 }
 
 export interface Environment {
   production: boolean;
-  process: Process;
+  LATEST_SHA: string;
 }
 
 export abstract class ApplicationEnvironment {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts
@@ -59,7 +59,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   get latestSHA(): string {
-    return this._applicationEnvironment.environment.process.env.LATEST_SHA;
+    return this._applicationEnvironment.environment.LATEST_SHA.slice(0, 8);
   }
 
   changeTab(tab: 'Profiler' | 'Components' | 'Router Tree'): void {
diff --git a/devtools/projects/shell-chrome/shell-chrome-webpack.config.js b/devtools/projects/shell-chrome/shell-chrome-webpack.config.js
diff --git a/devtools/projects/shell-chrome/src/BUILD.bazel b/devtools/projects/shell-chrome/src/BUILD.bazel
@@ -330,4 +330,5 @@ pkg_web(
     additional_root_paths = [
         "projects/ng-devtools/src/lib",
     ],
+    substitutions = {"BUILD_SCM_COMMIT_SHA": "{BUILD_SCM_COMMIT_SHA}"},
 )
diff --git a/devtools/projects/shell-chrome/src/environments/environment.prod.ts b/devtools/projects/shell-chrome/src/environments/environment.prod.ts
diff --git a/devtools/projects/shell-chrome/src/environments/environment.ts b/devtools/projects/shell-chrome/src/environments/environment.ts
@@ -1,10 +1,4 @@
 export const environment = {
   production: false,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo,
-      // use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };
diff --git a/devtools/shell-dev-webpack.config.js b/devtools/shell-dev-webpack.config.js
diff --git a/devtools/src/BUILD.bazel b/devtools/src/BUILD.bazel
@@ -323,6 +323,7 @@ pkg_web(
         ":bundle-es2015",
         ":inject_scripts_for_dev",
     ],
+    substitutions = {"BUILD_SCM_COMMIT_SHA": "{BUILD_SCM_COMMIT_SHA}"},
 )
 
 history_server(
diff --git a/devtools/src/app/BUILD.bazel b/devtools/src/app/BUILD.bazel
@@ -30,26 +30,3 @@ ng_ts_project(
         "@npm//@angular/router",
     ],
 )
-
-# ng_ts_project(
-#     name = "app-e2e",
-#     srcs = [
-#         "app.component.ts",
-#         "app.e2e.module.ts",
-#     ],
-#     angular_assets = [
-#         "app.component.html",
-#         ":app-component-styles"
-#     ],
-#     deps = [
-#         "//src/app/devtools-app",
-#         "//src/app/demo-app",
-#         "//src:demo-application-operations",
-#         "//src:demo-application-environment",
-#         "//projects/ng-devtools",
-#         "@npm//@angular/core",
-#         "@npm//@angular/router",
-#         "@npm//@angular/platform-browser",
-#     ],
-#     tsconfig = "//:tsconfig.json",
-# )
diff --git a/devtools/src/environments/BUILD.bazel b/devtools/src/environments/BUILD.bazel
@@ -5,8 +5,6 @@ package(default_visibility = ["//visibility:public"])
 ts_project(
     name = "environments",
     srcs = [
-        "environment.e2e.ts",
-        "environment.prod.ts",
         "environment.ts",
     ],
     tsconfig = "//:tsconfig.json",
diff --git a/devtools/src/environments/environment.e2e.ts b/devtools/src/environments/environment.e2e.ts
diff --git a/devtools/src/environments/environment.prod.ts b/devtools/src/environments/environment.prod.ts
diff --git a/devtools/src/environments/environment.ts b/devtools/src/environments/environment.ts
@@ -2,12 +2,5 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export const environment = {
   production: false,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo,
-      // use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
-  animationModule: BrowserAnimationsModule,
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };
diff --git a/devtools/yarn.lock b/devtools/yarn.lock
@@ -3035,7 +3035,7 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-formats@2.1.1, ajv-formats@^2.1.1:
+ajv-formats@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
   integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==

Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,10 @@`
`1`		`-export interface Process {`
`2`		`- env: Env;`
`3`		`-}`
`4`		`-`
`5`	`1`	`interface Env {`
`6`	`2`	`LATEST_SHA: string;`
`7`	`3`	`}`
`8`	`4`
`9`	`5`	`export interface Environment {`
`10`	`6`	`production: boolean;`
`11`		`- process: Process;`
	`7`	`+ LATEST_SHA: string;`
`12`	`8`	`}`
`13`	`9`
`14`	`10`	`export abstract class ApplicationEnvironment {`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`get latestSHA(): string {`
`62`		`- return this._applicationEnvironment.environment.process.env.LATEST_SHA;`
	`62`	`+ return this._applicationEnvironment.environment.LATEST_SHA.slice(0, 8);`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`changeTab(tab: 'Profiler' \| 'Components' \| 'Router Tree'): void {`
Original file line number	Diff line number	Diff line change
`@@ -330,4 +330,5 @@ pkg_web(`
`330`	`330`	`additional_root_paths = [`
`331`	`331`	`"projects/ng-devtools/src/lib",`
`332`	`332`	`],`
	`333`	`+ substitutions = {"BUILD_SCM_COMMIT_SHA": "{BUILD_SCM_COMMIT_SHA}"},`
`333`	`334`	`)`