mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
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.
This commit is contained in:
AleksanderBodurri
parent
cc21a34e9f
commit
0fe26a646e
18 changed files with 399 additions and 50 deletions
|
|
@ -1,5 +1 @@
|
|||
const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
|
||||
|
||||
module.exports = on => {
|
||||
on('file:preprocessor', cypressTypeScriptPreprocessor);
|
||||
};
|
||||
module.exports = (on) => {};
|
||||
|
|
|
|||
9
projects/shell-chrome/BUILD.bazel
Normal file
9
projects/shell-chrome/BUILD.bazel
Normal file
|
|
@ -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"],
|
||||
)
|
||||
123
projects/shell-chrome/src/BUILD.bazel
Normal file
123
projects/shell-chrome/src/BUILD.bazel
Normal file
|
|
@ -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",
|
||||
],
|
||||
)
|
||||
|
|
@ -10,5 +10,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
<script type="module" src="./devtools-app-bundle-es2015/devtools-app-bundle-es2015.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
196
projects/shell-chrome/src/app/BUILD.bazel
Normal file
196
projects/shell-chrome/src/app/BUILD.bazel
Normal file
|
|
@ -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")
|
||||
]
|
||||
]
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
10
projects/shell-chrome/src/assets/BUILD.bazel
Normal file
10
projects/shell-chrome/src/assets/BUILD.bazel
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
package(default_visibility = ["//:__subpackages__"])
|
||||
|
||||
filegroup(
|
||||
name = "assets",
|
||||
srcs = glob([
|
||||
"*.svg",
|
||||
"**/*.png",
|
||||
"*.css",
|
||||
]),
|
||||
)
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
</head>
|
||||
<body>
|
||||
<script src="devtools.js"></script>
|
||||
<script src="runtime.js"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="devtools-es2015.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
15
projects/shell-chrome/src/environments/BUILD.bazel
Normal file
15
projects/shell-chrome/src/environments/BUILD.bazel
Normal file
|
|
@ -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",
|
||||
)
|
||||
|
|
@ -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: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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": ["<all_urls>"],
|
||||
"js": ["runtime.js"],
|
||||
"run_at": "document_start"
|
||||
},
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["ng-validate.js"],
|
||||
"js": ["app/ng-validate-es2015.js"],
|
||||
"run_at": "document_idle"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
6
projects/shell-chrome/src/popups/BUILD.bazel
Normal file
6
projects/shell-chrome/src/popups/BUILD.bazel
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
filegroup(
|
||||
name = "popups",
|
||||
srcs = glob(["*.html"])
|
||||
)
|
||||
11
projects/shell-chrome/src/rollup.config.js
Normal file
11
projects/shell-chrome/src/rollup.config.js
Normal file
|
|
@ -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(),
|
||||
],
|
||||
};
|
||||
|
|
@ -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: '',
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
{
|
||||
"extends": "tslint:recommended",
|
||||
"linterOptions": {
|
||||
"exclude": ["projects/ng-devtools/src/lib/vendor/**"]
|
||||
},
|
||||
"rules": {
|
||||
"array-type": false,
|
||||
"arrow-parens": false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue