From 0fe26a646ee2ccc1694a42f292ff25e2bccf07e7 Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Wed, 8 Sep 2021 18:41:24 -0400 Subject: [PATCH] build(devtools): migrate shell-chrome to bazel Allows shell-chrome to be built with bazel. Currently this is built in production mode with terser minified code and the appropriate manifest and content script files to make the chrome extension work properly. --- cypress/plugins/index.js | 6 +- projects/shell-chrome/BUILD.bazel | 9 + projects/shell-chrome/src/BUILD.bazel | 123 +++++++++++ .../src/{index.html => _index.html} | 2 + projects/shell-chrome/src/app/BUILD.bazel | 196 ++++++++++++++++++ .../shell-chrome/src/app/app.component.ts | 5 +- projects/shell-chrome/src/app/background.ts | 4 +- projects/shell-chrome/src/{ => app}/inject.ts | 0 projects/shell-chrome/src/assets/BUILD.bazel | 10 + projects/shell-chrome/src/devtools.html | 17 +- .../shell-chrome/src/environments/BUILD.bazel | 15 ++ .../src/environments/environment.prod.ts | 7 +- .../src/environments/environment.ts | 21 +- projects/shell-chrome/src/manifest.json | 11 +- projects/shell-chrome/src/popups/BUILD.bazel | 6 + projects/shell-chrome/src/rollup.config.js | 11 + src/environments/environment.ts | 3 +- tslint.json | 3 + 18 files changed, 399 insertions(+), 50 deletions(-) create mode 100644 projects/shell-chrome/BUILD.bazel create mode 100644 projects/shell-chrome/src/BUILD.bazel rename projects/shell-chrome/src/{index.html => _index.html} (80%) create mode 100644 projects/shell-chrome/src/app/BUILD.bazel rename projects/shell-chrome/src/{ => app}/inject.ts (100%) create mode 100644 projects/shell-chrome/src/assets/BUILD.bazel create mode 100644 projects/shell-chrome/src/environments/BUILD.bazel create mode 100644 projects/shell-chrome/src/popups/BUILD.bazel create mode 100644 projects/shell-chrome/src/rollup.config.js diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 0a6add1fed8..58e2129320d 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -1,5 +1 @@ -const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor'); - -module.exports = on => { - on('file:preprocessor', cypressTypeScriptPreprocessor); -}; +module.exports = (on) => {}; diff --git a/projects/shell-chrome/BUILD.bazel b/projects/shell-chrome/BUILD.bazel new file mode 100644 index 00000000000..8fde2b695ba --- /dev/null +++ b/projects/shell-chrome/BUILD.bazel @@ -0,0 +1,9 @@ +load("@npm//@bazel/typescript:index.bzl", "ts_config") + +package(default_visibility = ["//visibility:public"]) + +ts_config( + name = "tsconfig-app", + src = "tsconfig.app.json", + deps = ["//:tsconfig.json"], +) diff --git a/projects/shell-chrome/src/BUILD.bazel b/projects/shell-chrome/src/BUILD.bazel new file mode 100644 index 00000000000..83e102cb816 --- /dev/null +++ b/projects/shell-chrome/src/BUILD.bazel @@ -0,0 +1,123 @@ +load("@npm//@bazel/rollup:index.bzl", "rollup_bundle") +load("@npm//@bazel/terser:index.bzl", "terser_minified") +load("//tools:angular_ts_library.bzl", "ng_ts_library") +load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary") +load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web") +load("@npm//html-insert-assets:index.bzl", "html_insert_assets") +load("@npm//@bazel/typescript:index.bzl", "ts_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "material-theming", + srcs = ["@npm//:node_modules/@angular/material/_index.scss"] +) + +sass_binary( + name = "shell-chrome-styles", + src = "styles.scss", + deps = [":material-theming"], + sourcemap = False, +) + +ts_library( + name = "devtools", + srcs = [ + "devtools.ts" + ], + deps = [ + "@npm//@types/chrome", + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ng_ts_library( + name = "src", + srcs = [ + "main.ts", + "polyfills.ts" + ], + deps = [ + "//projects/shell-chrome/src/app", + "//projects/shell-chrome/src/environments:environment", + "//projects/ng-devtools", + "@npm//@angular/core", + "@npm//@angular/platform-browser-dynamic", + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", + module_name = "shell-chrome", +) + + +rollup_bundle( + name = "devtools-app-bundle-es2015", + config_file = "rollup.config.js", + entry_point = "main.ts", + output_dir = True, + deps = [ + ":src", + "@npm//@rollup/plugin-commonjs", + "@npm//@rollup/plugin-node-resolve", + ], +) + +terser_minified( + name = "devtools-app-bundle-es2015.min", + src = ":devtools-app-bundle-es2015", +) + +# Files that we serve in both development and production +_ASSETS = [ + # This label references an output of the "styles" sass_binary above. + ":shell-chrome-styles", + + ":manifest.json", + + # We load zone.js outside the bundle. That's because it's a "pollyfill" + # which speculates that such features might be available in a browser. + # Also it's tricky to configure dead code elimination to understand that + # zone.js is used, given that we don't have any import statement that + # imports from it. + "@npm//:node_modules/zone.js/dist/zone.min.js", +] + +html_insert_assets( + name = "inject_scripts_for_prod", + outs = ["index.html"], + args = [ + "--html=$(execpath //projects/shell-chrome/src:_index.html)", + "--out=$@", + "--roots=. $(RULEDIR)", + "--assets", + ] + ["$(execpath %s)" % s for s in _ASSETS], + data = ["//projects/shell-chrome/src:_index.html"] + _ASSETS, +) + +rollup_bundle( + name = "devtools-es2015", + entry_point = "devtools.ts", + format = "iife", + deps = [ + ":devtools", + ] +) + +pkg_web( + name = "prodapp", + srcs = _ASSETS + [ + ":devtools-es2015", + "//projects/shell-chrome/src/app:ng-validate-es2015", + "//projects/shell-chrome/src/app:background-es2015", + "//projects/shell-chrome/src/app:backend-es2015", + "//projects/shell-chrome/src/app:content-script-es2015", + ":devtools-app-bundle-es2015", + ":inject_scripts_for_prod", + "//projects/shell-chrome/src/assets", + "//projects/shell-chrome/src/popups", + "//projects/shell-chrome/src:devtools.html", + "//projects/ng-devtools/src/lib/images", + ], + additional_root_paths = [ + "projects/ng-devtools/src/lib", + ], +) \ No newline at end of file diff --git a/projects/shell-chrome/src/index.html b/projects/shell-chrome/src/_index.html similarity index 80% rename from projects/shell-chrome/src/index.html rename to projects/shell-chrome/src/_index.html index 961767aef51..b0a8bdc039f 100644 --- a/projects/shell-chrome/src/index.html +++ b/projects/shell-chrome/src/_index.html @@ -10,5 +10,7 @@ + + diff --git a/projects/shell-chrome/src/app/BUILD.bazel b/projects/shell-chrome/src/app/BUILD.bazel new file mode 100644 index 00000000000..e5805329f22 --- /dev/null +++ b/projects/shell-chrome/src/app/BUILD.bazel @@ -0,0 +1,196 @@ +load("//tools:angular_ts_library.bzl", "ng_ts_library") +load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") +load("@npm//@bazel/typescript:index.bzl", "ts_library") +load("@npm//@bazel/rollup:index.bzl", "rollup_bundle") +load("@npm//@bazel/terser:index.bzl", "terser_minified") + +package(default_visibility = ["//visibility:public"]) + +sass_binary( + name = "app-component-styles", + src = "app.component.scss", +) + +ng_ts_library( + name = "app", + srcs = [ + "app.component.ts", + "app.module.ts", + "inject.ts", + ], + angular_assets = [ + "app.component.html", + ":app-component-styles" + ], + deps = [ + ":zone-aware-chrome-message-bus", + "//projects/shell-chrome/src/app:background", + "//projects/shell-chrome/src/app:backend", + ":chrome-application-environment", + ":chrome-application-operations", + "//projects/protocol", + "//projects/ng-devtools-backend", + "//projects/ng-devtools-backend/src/lib:highlighter", + "//projects/ng-devtools-backend/src/lib:component-tree", + "//projects/ng-devtools", + "@npm//@angular/core", + "@npm//@angular/platform-browser", + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "ng-validate", + srcs = [ + "ng-validate.ts" + ], + deps = [ + "@npm//@types/chrome" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "chrome-window-extensions", + srcs = [ + "chrome-window-extensions.ts" + ], + deps = [ + "//projects/ng-devtools-backend", + "//projects/ng-devtools-backend/src/lib:component-tree" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "chrome-application-environment", + srcs = [ + "chrome-application-environment.ts" + ], + deps = [ + "//projects/shell-chrome/src/environments:environment", + "//projects/ng-devtools" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "chrome-application-operations", + srcs = [ + "chrome-application-operations.ts" + ], + deps = [ + "//projects/protocol", + "//projects/ng-devtools", + "@npm//@types/chrome" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "same-page-message-bus", + srcs = [ + "same-page-message-bus.ts", + ], + deps = [ + "//projects/protocol", + "@npm//@angular/core" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "zone-aware-chrome-message-bus", + srcs = [ + "zone-aware-chrome-message-bus.ts", + ], + deps = [ + ":chrome-message-bus", + "//projects/protocol", + "@npm//@angular/core", + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "chrome-message-bus", + srcs = [ + "chrome-message-bus.ts" + ], + deps = [ + "//projects/protocol", + "@npm//@angular/core" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "background", + srcs = [ + "background.ts" + ], + deps = ["//projects/shell-chrome/src/app:ng-validate"], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "backend", + srcs = [ + "backend.ts" + ], + deps = [ + ":same-page-message-bus", + "//projects/shell-chrome/src/app:chrome-window-extensions", + "//projects/ng-devtools-backend", + "//projects/ng-devtools-backend/src/lib:highlighter" + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +ts_library( + name = "content-script", + srcs = [ + "content-script.ts" + ], + deps = [ + "@npm//@types/chrome", + ":chrome-message-bus", + ":same-page-message-bus", + "//projects/protocol", + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) + +rollup_bundle( + name = "backend" + "-es2015", + entry_point = "backend" + '.ts', + config_file = "//projects/shell-chrome/src:rollup.config.js", + format = 'iife', + deps = [ + ":" + "backend", + "@npm//@rollup/plugin-commonjs", + "@npm//@rollup/plugin-node-resolve", + ], +) + +[ + rollup_bundle( + name = file_name + "-es2015", + args = [ + "--name", file_name + '-out' + ], + entry_point = file_name + '.ts', + config_file = "//projects/shell-chrome/src:rollup.config.js", + format = format, + deps = [ + ":" + file_name, + "@npm//@rollup/plugin-commonjs", + "@npm//@rollup/plugin-node-resolve", + ], + ) + for file_name, format in [ + ("ng-validate", 'umd'), + ("background", "umd"), + ("content-script", "umd") + ] +] \ No newline at end of file diff --git a/projects/shell-chrome/src/app/app.component.ts b/projects/shell-chrome/src/app/app.component.ts index b11beb858f8..ad89e645994 100644 --- a/projects/shell-chrome/src/app/app.component.ts +++ b/projects/shell-chrome/src/app/app.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core'; -import { injectScripts } from '../inject'; +import { injectScripts } from './inject'; import { PriorityAwareMessageBus, MessageBus, Events } from 'protocol'; import { ZoneAwareChromeMessageBus } from './zone-aware-chrome-message-bus'; @@ -27,7 +27,8 @@ export class AppComponent implements OnInit { chrome.devtools.network.onNavigated.addListener(() => { window.location.reload(); }); - injectScripts(['backend.js', 'runtime.js']); + + injectScripts(['app/backend-es2015.js']); this._cd.detectChanges(); } } diff --git a/projects/shell-chrome/src/app/background.ts b/projects/shell-chrome/src/app/background.ts index bfcf9eb4afe..cfcb43781d2 100644 --- a/projects/shell-chrome/src/app/background.ts +++ b/projects/shell-chrome/src/app/background.ts @@ -73,9 +73,9 @@ const installContentScript = (tabId: number) => { console.log('Installing the content-script'); // We first inject the content-script and after that // invoke the global that it exposes. - chrome.tabs.executeScript(tabId, { file: '/content-script.js' }, (result) => { + chrome.tabs.executeScript(tabId, { file: 'app/content-script-es2015.js' }, (result) => { chrome.tabs.executeScript(tabId, { - code: '___devToolsContentScript.main()', + code: 'globalThis["content-script-out"].main()', }); }); }; diff --git a/projects/shell-chrome/src/inject.ts b/projects/shell-chrome/src/app/inject.ts similarity index 100% rename from projects/shell-chrome/src/inject.ts rename to projects/shell-chrome/src/app/inject.ts diff --git a/projects/shell-chrome/src/assets/BUILD.bazel b/projects/shell-chrome/src/assets/BUILD.bazel new file mode 100644 index 00000000000..13f47ebfbea --- /dev/null +++ b/projects/shell-chrome/src/assets/BUILD.bazel @@ -0,0 +1,10 @@ +package(default_visibility = ["//:__subpackages__"]) + +filegroup( + name = "assets", + srcs = glob([ + "*.svg", + "**/*.png", + "*.css", + ]), +) diff --git a/projects/shell-chrome/src/devtools.html b/projects/shell-chrome/src/devtools.html index e7026778b62..a4ab5c5223e 100644 --- a/projects/shell-chrome/src/devtools.html +++ b/projects/shell-chrome/src/devtools.html @@ -1,12 +1,11 @@ - - - - - - - - - + + + + + + + + diff --git a/projects/shell-chrome/src/environments/BUILD.bazel b/projects/shell-chrome/src/environments/BUILD.bazel new file mode 100644 index 00000000000..c0f62762ca6 --- /dev/null +++ b/projects/shell-chrome/src/environments/BUILD.bazel @@ -0,0 +1,15 @@ +load("@npm//@bazel/typescript:index.bzl", "ts_library", "ts_config") + +package(default_visibility = ["//visibility:public"]) + + +ts_library( + name = "environment", + srcs = [ + "environment.ts", + ], + deps = [ + "//projects/ng-devtools", + ], + tsconfig = "//projects/shell-chrome:tsconfig-app", +) \ No newline at end of file diff --git a/projects/shell-chrome/src/environments/environment.prod.ts b/projects/shell-chrome/src/environments/environment.prod.ts index 5f28e98ec91..de2abcf7a7b 100644 --- a/projects/shell-chrome/src/environments/environment.prod.ts +++ b/projects/shell-chrome/src/environments/environment.prod.ts @@ -1,12 +1,9 @@ -import { Process } from 'ng-devtools'; - -declare let process: Process; - export const environment = { production: true, process: { env: { - LATEST_SHA: process.env.LATEST_SHA, + // 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/projects/shell-chrome/src/environments/environment.ts b/projects/shell-chrome/src/environments/environment.ts index 801f65c4eec..fdd31c6ef8c 100644 --- a/projects/shell-chrome/src/environments/environment.ts +++ b/projects/shell-chrome/src/environments/environment.ts @@ -1,25 +1,10 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -import { Process } from 'ng-devtools'; - -declare let process: Process; - export const environment = { production: false, process: { env: { - LATEST_SHA: process.env.LATEST_SHA, + // todo(aleksanderbodurri): when devtools is merged into the main angular repo, + // use stamping tooling to inject the latest SHA into the environment + LATEST_SHA: '', }, }, }; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/projects/shell-chrome/src/manifest.json b/projects/shell-chrome/src/manifest.json index d44cb39e6e7..631aca812c3 100644 --- a/projects/shell-chrome/src/manifest.json +++ b/projects/shell-chrome/src/manifest.json @@ -16,21 +16,16 @@ "default_popup": "popups/not-angular.html" }, "devtools_page": "devtools.html", - "web_accessible_resources": ["backend.js", "runtime.js", "devtools.html"], + "web_accessible_resources": ["app/backend-es2015.js", "devtools.html"], "background": { - "scripts": ["background.js", "runtime.js"], + "scripts": ["app/background-es2015.js"], "persistent": false }, "permissions": ["activeTab", "http://*/*", "https://*/*", "file:///*"], "content_scripts": [ { "matches": [""], - "js": ["runtime.js"], - "run_at": "document_start" - }, - { - "matches": [""], - "js": ["ng-validate.js"], + "js": ["app/ng-validate-es2015.js"], "run_at": "document_idle" } ] diff --git a/projects/shell-chrome/src/popups/BUILD.bazel b/projects/shell-chrome/src/popups/BUILD.bazel new file mode 100644 index 00000000000..9ea46d3e4ce --- /dev/null +++ b/projects/shell-chrome/src/popups/BUILD.bazel @@ -0,0 +1,6 @@ +package(default_visibility = ["//visibility:public"]) + +filegroup( + name = "popups", + srcs = glob(["*.html"]) +) \ No newline at end of file diff --git a/projects/shell-chrome/src/rollup.config.js b/projects/shell-chrome/src/rollup.config.js new file mode 100644 index 00000000000..87158723b33 --- /dev/null +++ b/projects/shell-chrome/src/rollup.config.js @@ -0,0 +1,11 @@ +const { nodeResolve } = require('@rollup/plugin-node-resolve'); +const commonjs = require('@rollup/plugin-commonjs'); + +module.exports = { + plugins: [ + nodeResolve({ + mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'], + }), + commonjs(), + ], +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index ed2b6f46140..3a47b85acfd 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,8 @@ 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 + // 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/tslint.json b/tslint.json index cb7e739a9e4..22709a26fd7 100644 --- a/tslint.json +++ b/tslint.json @@ -1,5 +1,8 @@ { "extends": "tslint:recommended", + "linterOptions": { + "exclude": ["projects/ng-devtools/src/lib/vendor/**"] + }, "rules": { "array-type": false, "arrow-parens": false,