mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08: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
@@ -1,5 +1 @@
|
||||
const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
|
||||
|
||||
module.exports = on => {
|
||||
on('file:preprocessor', cypressTypeScriptPreprocessor);
|
||||
};
|
||||
module.exports = (on) => {};
|
||||
|
||||
@@ -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"],
|
||||
)
|
||||
@@ -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>
|
||||
@@ -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()',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
filegroup(
|
||||
name = "popups",
|
||||
srcs = glob(["*.html"])
|
||||
)
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user