From c24924cbd7300ea0c24822ad64d30308621792dc Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Wed, 1 Dec 2021 01:13:17 -0500 Subject: [PATCH] build(devtools): use ng-dev stamp tooling to stamp the latest git SHA in devtools 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. --- devtools/.bazelrc | 4 +++ devtools/BUILD.bazel | 12 -------- devtools/angular.json | 6 ---- devtools/initialize_testbed.ts | 10 ------- devtools/package.json | 6 ++-- devtools/packages.bzl | 30 ------------------- .../src/lib/application-environment/index.ts | 6 +--- .../devtools-tabs/devtools-tabs.component.ts | 2 +- .../shell-chrome-webpack.config.js | 30 ------------------- .../projects/shell-chrome/src/BUILD.bazel | 1 + .../src/environments/environment.prod.ts | 9 ------ .../src/environments/environment.ts | 8 +---- devtools/shell-dev-webpack.config.js | 11 ------- devtools/src/BUILD.bazel | 1 + devtools/src/app/BUILD.bazel | 23 -------------- devtools/src/environments/BUILD.bazel | 2 -- devtools/src/environments/environment.e2e.ts | 12 -------- devtools/src/environments/environment.prod.ts | 12 -------- devtools/src/environments/environment.ts | 9 +----- devtools/yarn.lock | 2 +- 20 files changed, 14 insertions(+), 182 deletions(-) delete mode 100644 devtools/initialize_testbed.ts delete mode 100644 devtools/projects/shell-chrome/shell-chrome-webpack.config.js delete mode 100644 devtools/projects/shell-chrome/src/environments/environment.prod.ts delete mode 100644 devtools/shell-dev-webpack.config.js delete mode 100644 devtools/src/environments/environment.e2e.ts delete mode 100644 devtools/src/environments/environment.prod.ts diff --git a/devtools/.bazelrc b/devtools/.bazelrc index fee53071f79..b443bf7d651 100644 --- 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 \ No newline at end of file diff --git a/devtools/BUILD.bazel b/devtools/BUILD.bazel index 90796694443..654835d5214 100644 --- 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 index 79bacca2663..e3c12300b25 100644 --- 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 deleted file mode 100644 index 5c535e57798..00000000000 --- a/devtools/initialize_testbed.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @fileoverview Provides a script to initialize TestBed before tests are run. - * This file should be included in the "runtime_deps" of a "karma_web_test_suite" - * rule. - */ - import {TestBed} from '@angular/core/testing'; - import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; - - TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); - \ No newline at end of file diff --git a/devtools/package.json b/devtools/package.json index b27ec16a2fe..2acccf7fe26 100644 --- 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 index 329e7ff5724..17d52a8fcb8 100644 --- 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 index 53ad485aeea..ea09fff0c04 100644 --- 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 index 533e2a6a1cd..9e2982689cd 100644 --- 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 deleted file mode 100644 index 2782715b108..00000000000 --- a/devtools/projects/shell-chrome/shell-chrome-webpack.config.js +++ /dev/null @@ -1,30 +0,0 @@ -const webpack = require('webpack'); - -module.exports = { - entry: { - // Use library so that the background script can invoke the content - // script multiple times. Alternatively, webpack is preventing us to do so. - 'content-script': { - import: 'projects/shell-chrome/src/app/content-script.ts', - library: { - name: '___devToolsContentScript', - type: 'umd', - umdNamedDefine: true, - }, - }, - 'ng-validate': 'projects/shell-chrome/src/app/ng-validate.ts', - background: 'projects/shell-chrome/src/app/background.ts', - backend: 'projects/shell-chrome/src/app/backend.ts', - devtools: 'projects/shell-chrome/src/devtools.ts', - }, - output: { - chunkLoadingGlobal: '___ngDevToolsRuntime', - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env': { - LATEST_SHA: JSON.stringify(process.env.LATEST_SHA), - }, - }), - ], -}; diff --git a/devtools/projects/shell-chrome/src/BUILD.bazel b/devtools/projects/shell-chrome/src/BUILD.bazel index 9dbbc5bcc07..b5bce4cdf63 100644 --- 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 deleted file mode 100644 index de2abcf7a7b..00000000000 --- a/devtools/projects/shell-chrome/src/environments/environment.prod.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const environment = { - production: true, - 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: '', - }, - }, -}; diff --git a/devtools/projects/shell-chrome/src/environments/environment.ts b/devtools/projects/shell-chrome/src/environments/environment.ts index fdd31c6ef8c..464341c5c2b 100644 --- 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 deleted file mode 100644 index 534a224b7bf..00000000000 --- a/devtools/shell-dev-webpack.config.js +++ /dev/null @@ -1,11 +0,0 @@ -const webpack = require('webpack'); - -module.exports = { - plugins: [ - new webpack.DefinePlugin({ - 'process.env': { - LATEST_SHA: JSON.stringify(process.env.LATEST_SHA), - }, - }), - ], -}; diff --git a/devtools/src/BUILD.bazel b/devtools/src/BUILD.bazel index be98670c662..a68b180dd4b 100644 --- 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 index 1ffcb0d5653..005dda55ff1 100644 --- 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 index 103f8306f58..36021c943ee 100644 --- 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 deleted file mode 100644 index d68601e9b09..00000000000 --- a/devtools/src/environments/environment.e2e.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NoopAnimationsModule } 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: NoopAnimationsModule, -}; diff --git a/devtools/src/environments/environment.prod.ts b/devtools/src/environments/environment.prod.ts deleted file mode 100644 index cabcb4bff39..00000000000 --- a/devtools/src/environments/environment.prod.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -export const environment = { - production: true, - 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, -}; diff --git a/devtools/src/environments/environment.ts b/devtools/src/environments/environment.ts index 3a47b85acfd..fedfaa5f491 100644 --- 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 index a72ac156e51..7cc83e1b387 100644 --- 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==