From a167311c025be2a77ba0d84e6a2ddcafe1c0564d Mon Sep 17 00:00:00 2001 From: Alex Eagle Date: Tue, 21 Apr 2020 20:11:06 -0700 Subject: [PATCH] feat(examples): show how to use ts_library(use_angular_plugin) with worker mode (#1839) --- .bazelrc | 4 ++-- examples/angular/src/BUILD.bazel | 6 ++---- examples/angular/src/app/BUILD.bazel | 12 +++--------- examples/angular/src/app/hello-world/BUILD.bazel | 6 ++---- examples/angular/src/app/home/BUILD.bazel | 7 ++----- examples/angular/src/app/todos/BUILD.bazel | 7 ++----- examples/angular/src/shared/material/BUILD.bazel | 7 ++----- examples/angular/tools/BUILD.bazel | 15 +++++++++++++++ examples/angular/tools/angular_ts_library.bzl | 11 +++++++++++ packages/typescript/src/internal/build_defs.bzl | 14 +++++++++++--- 10 files changed, 52 insertions(+), 37 deletions(-) create mode 100644 examples/angular/tools/BUILD.bazel create mode 100644 examples/angular/tools/angular_ts_library.bzl diff --git a/.bazelrc b/.bazelrc index 02eef0e349..94cc2e0184 100644 --- a/.bazelrc +++ b/.bazelrc @@ -5,8 +5,8 @@ import %workspace%/common.bazelrc # This lets us glob() up all the files inside the examples to make them inputs to tests # To update these lines, just run `yarn bazel:update-deleted-packages` # (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it) -build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp -query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp +build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_bazel_architect/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp +query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular/tools,examples/angular_bazel_architect,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_bazel_architect/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_bazel_architect/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/core/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/chalk/supports-color,examples/angular_view_engine/node_modules/@angular-devkit/core/third_party/github.com/sindresorhus/has-flag,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/architect/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@angular-devkit/schematics/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/webSocket,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/operators,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/testing,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src,examples/angular_view_engine/node_modules/@schematics/update/node_modules/rxjs/src/ajax,examples/angular_view_engine/node_modules/@schematics/angular/third_party/github.com/Microsoft/TypeScript,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp # Mock versioning command to test the --stamp behavior build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3" diff --git a/examples/angular/src/BUILD.bazel b/examples/angular/src/BUILD.bazel index 3bec7619ec..61e45bd79b 100644 --- a/examples/angular/src/BUILD.bazel +++ b/examples/angular/src/BUILD.bazel @@ -8,6 +8,7 @@ load("@npm//html-insert-assets:index.bzl", "html_insert_assets") load("@npm_bazel_rollup//:index.bzl", "rollup_bundle") load("@npm_bazel_terser//:index.bzl", "terser_minified") load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library") +load("//tools:angular_ts_library.bzl", "ng_ts_library") package(default_visibility = ["//:__subpackages__"]) @@ -43,18 +44,15 @@ ts_library( ], ) -ts_library( +ng_ts_library( name = "src", srcs = [ "main.dev.ts", "main.prod.ts", ], tsconfig = ":tsconfig.json", - use_angular_plugin = True, deps = [ "//src/app", - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/core", "@npm//@angular/platform-browser", "@npm//@angular/router", diff --git a/examples/angular/src/app/BUILD.bazel b/examples/angular/src/app/BUILD.bazel index e7e9d07fef..6d6bc3de65 100644 --- a/examples/angular/src/app/BUILD.bazel +++ b/examples/angular/src/app/BUILD.bazel @@ -1,8 +1,8 @@ -load("@npm_bazel_typescript//:index.bzl", "ts_library") +load("//tools:angular_ts_library.bzl", "ng_ts_library") package(default_visibility = ["//:__subpackages__"]) -ts_library( +ng_ts_library( name = "app", srcs = glob( include = ["*.ts"], @@ -10,15 +10,12 @@ ts_library( ), angular_assets = ["app.component.html"], tsconfig = "//src:tsconfig.json", - use_angular_plugin = True, deps = [ "//src/app/hello-world", "//src/app/home", "//src/app/todos", "//src/app/todos/reducers", "//src/shared/material", - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/core", "@npm//@angular/platform-browser", "@npm//@angular/router", @@ -26,15 +23,12 @@ ts_library( ], ) -ts_library( +ng_ts_library( name = "app_server", srcs = ["app.server.module.ts"], tsconfig = "//src:tsconfig-server", - use_angular_plugin = True, deps = [ ":app", - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/core", "@npm//@angular/platform-server", ], diff --git a/examples/angular/src/app/hello-world/BUILD.bazel b/examples/angular/src/app/hello-world/BUILD.bazel index 69653d2c32..c94b11bcc0 100644 --- a/examples/angular/src/app/hello-world/BUILD.bazel +++ b/examples/angular/src/app/hello-world/BUILD.bazel @@ -1,6 +1,7 @@ load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite") load("@npm_bazel_typescript//:index.bzl", "ts_library") +load("//tools:angular_ts_library.bzl", "ng_ts_library") package(default_visibility = ["//:__subpackages__"]) @@ -9,7 +10,7 @@ sass_binary( src = "hello-world.component.scss", ) -ts_library( +ng_ts_library( name = "hello-world", srcs = [ "hello-world.component.ts", @@ -20,12 +21,9 @@ ts_library( ":hello-world-styles", ], tsconfig = "//src:tsconfig.json", - use_angular_plugin = True, deps = [ "//src/lib/shorten", "//src/shared/material", - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/core", "@npm//@angular/forms", "@npm//@angular/router", diff --git a/examples/angular/src/app/home/BUILD.bazel b/examples/angular/src/app/home/BUILD.bazel index 665d63a2be..c98e0654c3 100644 --- a/examples/angular/src/app/home/BUILD.bazel +++ b/examples/angular/src/app/home/BUILD.bazel @@ -1,16 +1,13 @@ -load("@npm_bazel_typescript//:index.bzl", "ts_library") +load("//tools:angular_ts_library.bzl", "ng_ts_library") package(default_visibility = ["//:__subpackages__"]) -ts_library( +ng_ts_library( name = "home", srcs = ["home.ts"], angular_assets = ["home.html"], tsconfig = "//src:tsconfig.json", - use_angular_plugin = True, deps = [ - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/core", "@npm//@angular/router", ], diff --git a/examples/angular/src/app/todos/BUILD.bazel b/examples/angular/src/app/todos/BUILD.bazel index 503c134ee3..5e97ba83e4 100644 --- a/examples/angular/src/app/todos/BUILD.bazel +++ b/examples/angular/src/app/todos/BUILD.bazel @@ -1,5 +1,5 @@ load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") -load("@npm_bazel_typescript//:index.bzl", "ts_library") +load("//tools:angular_ts_library.bzl", "ng_ts_library") package(default_visibility = ["//:__subpackages__"]) @@ -8,7 +8,7 @@ sass_binary( src = "todos.component.scss", ) -ts_library( +ng_ts_library( name = "todos", srcs = [ "todos.component.ts", @@ -19,12 +19,9 @@ ts_library( ":todos-styles", ], tsconfig = "//src:tsconfig.json", - use_angular_plugin = True, deps = [ "//src/app/todos/reducers", "//src/shared/material", - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/common", "@npm//@angular/core", "@npm//@angular/forms", diff --git a/examples/angular/src/shared/material/BUILD.bazel b/examples/angular/src/shared/material/BUILD.bazel index 92ddc4f664..a54e13f2ac 100644 --- a/examples/angular/src/shared/material/BUILD.bazel +++ b/examples/angular/src/shared/material/BUILD.bazel @@ -1,15 +1,12 @@ -load("@npm_bazel_typescript//:index.bzl", "ts_library") +load("//tools:angular_ts_library.bzl", "ng_ts_library") package(default_visibility = ["//:__subpackages__"]) -ts_library( +ng_ts_library( name = "material", srcs = glob(["*.ts"]), tsconfig = "//src:tsconfig.json", - use_angular_plugin = True, deps = [ - # Needed for the angular compiler plugin - "@npm//@angular/compiler-cli", "@npm//@angular/core", "@npm//@angular/material", ], diff --git a/examples/angular/tools/BUILD.bazel b/examples/angular/tools/BUILD.bazel new file mode 100644 index 0000000000..d2f335e89b --- /dev/null +++ b/examples/angular/tools/BUILD.bazel @@ -0,0 +1,15 @@ +load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary") + +# Custom ts_library compiler that runs tsc_wrapped with angular/compiler-cli statically linked +# This can be used with worker mode because we don't need the linker at runtime to make +# the angular plugin loadable +# Just a clone of @npm//@bazel/typescript/bin:tsc_wrapped with added deps +nodejs_binary( + name = "tsc_wrapped_with_angular", + data = [ + "@npm//@angular/compiler-cli", + "@npm//@bazel/typescript", + ], + entry_point = "@npm//:node_modules/@bazel/typescript/internal/tsc_wrapped/tsc_wrapped.js", + visibility = ["//:__subpackages__"], +) diff --git a/examples/angular/tools/angular_ts_library.bzl b/examples/angular/tools/angular_ts_library.bzl new file mode 100644 index 0000000000..00986c0fe5 --- /dev/null +++ b/examples/angular/tools/angular_ts_library.bzl @@ -0,0 +1,11 @@ +"Shows how to enable both worker mode and use_angular_plugin to make a drop-in replacement for ng_module" + +load("@npm_bazel_typescript//:index.bzl", "ts_library") + +def ng_ts_library(**kwargs): + ts_library( + compiler = "//tools:tsc_wrapped_with_angular", + supports_workers = True, + use_angular_plugin = True, + **kwargs + ) diff --git a/packages/typescript/src/internal/build_defs.bzl b/packages/typescript/src/internal/build_defs.bzl index ea408aa773..e6111250ea 100644 --- a/packages/typescript/src/internal/build_defs.bzl +++ b/packages/typescript/src/internal/build_defs.bzl @@ -144,8 +144,7 @@ def _compile_action(ctx, inputs, outputs, tsconfig_file, node_opts, description # because it causes bazel to spawn a new worker for every action # See https://github.com/bazelbuild/rules_nodejs/issues/1803 # TODO: understand the interaction between linker and workers better - # When using plugins, we need the linker, so we disable workers for that case as well - if ctx.attr.supports_workers and not ctx.attr.use_angular_plugin: + if ctx.attr.supports_workers: # One at-sign makes this a params-file, enabling the worker strategy. # Two at-signs escapes the argument so it's passed through to tsc_wrapped # rather than the contents getting expanded. @@ -523,4 +522,13 @@ def ts_library_macro(tsconfig = None, **kwargs): if not tsconfig: tsconfig = "//:tsconfig.json" - ts_library(tsconfig = tsconfig, **kwargs) + # plugins generally require the linker + # (unless the user statically linked them into the compiler binary) + # Therefore we disable workers for them by default + if "supports_workers" in kwargs.keys(): + supports_workers = kwargs.pop("supports_workers") + else: + uses_plugin = kwargs.get("use_angular_plugin", False) + supports_workers = not uses_plugin + + ts_library(tsconfig = tsconfig, supports_workers = supports_workers, **kwargs)