[infra] Upgrade FE dependencies (#3232)

Notable changes:

Angular 8 -> Angular 9
zonejs upgrade
ngrx @ 9
TypeScript @ 3.8.3
Karma @ 5
Angular Ivy compiler (ngcc)
Updated rules_nodejs to make it work with Ivy compiler
use node 11 in travis
We used 1 as inspiration to our changes.

Other notable changes:

window.require is frozen object after require.js upgrade

.bazelrc

@@ -1 +1,3 @@
-# No options currently needed. Leaving empty file to preserve history.
+# Use the Angular Ivy compiler
+# See https://github.com/angular/angular/blob/master/docs/BAZEL.md#various-flags-used-for-tests
+build --define=angular_ivy_enabled=True

.travis.yml

@@ -8,6 +8,10 @@ branches:
     - master
     - /^\d+\.\d+(\.\d+)?(-\S*)?$/
 
+# Update the `nvm use` stanza below when updating this.
+node_js:
+  - "11"
+
 env:
   # Keep this Bazel version in sync with the `versions.check` directive
   # near the top of our WORKSPACE file.
@@ -58,6 +62,8 @@ install:
       -r tensorboard/pip_package/requirements.txt \
       -r tensorboard/pip_package/requirements_dev.txt \
       ;
+  # Keep the node version in sync with node_js key above.
+  - nvm use v11
   - |
     # Install TensorFlow if requested
     if [ -n "${TF_VERSION_ID}" ]; then

WORKSPACE

@@ -52,15 +52,14 @@ rules_closure_dependencies(
 
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "7c4a690268be97c96f04d505224ec4cb1ae53c2c2b68be495c9bd2634296a5cd",
+    sha256 = "f9e7b9f42ae202cc2d2ce6d698ccb49a9f7f7ea572a78fd451696d03ef2ee116",
     urls = [
-        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/0.34.0/rules_nodejs-0.34.0.tar.gz",
-        "https://github.com/bazelbuild/rules_nodejs/releases/download/0.34.0/rules_nodejs-0.34.0.tar.gz",
+        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_nodejs/releases/download/1.6.0/rules_nodejs-1.6.0.tar.gz",
+        "https://github.com/bazelbuild/rules_nodejs/releases/download/1.6.0/rules_nodejs-1.6.0.tar.gz",
     ],
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories", "yarn_install")
-node_repositories()
+load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
 
 yarn_install(
     name = "npm",
@@ -71,10 +70,6 @@ yarn_install(
     # removes source directory without `bazel clean` which creates broken
     # symlink into node_modules folder.
     symlink_node_modules = False,
-    data = [
-        # package.json contains postinstall that requires this file.
-        "//:angular-metadata.tsconfig.json",
-    ],
 )
 
 load("@npm//:install_bazel_dependencies.bzl", "install_bazel_dependencies")
@@ -83,11 +78,11 @@ install_bazel_dependencies()
 
 http_archive(
     name = "io_bazel_rules_sass",
-    sha256 = "2ad5580e1ab6dabc6bea40699a7d78f8cae3f98b48d112812f43a0e2beec3eef",
-    strip_prefix = "rules_sass-1.23.1",
+    sha256 = "9dcfba04e4af896626f4760d866f895ea4291bc30bf7287887cefcf4707b6a62",
+    strip_prefix = "rules_sass-1.26.3",
     urls = [
-        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_sass/archive/1.23.1.zip",
-        "https://github.com/bazelbuild/rules_sass/archive/1.23.1.zip",
+        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_sass/archive/1.26.3.zip",
+        "https://github.com/bazelbuild/rules_sass/archive/1.26.3.zip",
     ],
 )
 

package.json

@@ -7,7 +7,7 @@
     "doc": "docs"
   },
   "scripts": {
-    "postinstall": "ngc -p angular-metadata.tsconfig.json",
+    "postinstall": "ngcc -p main es2015",
     "build": "bazel build //...",
     "test": "ibazel test //...",
     "lint": "prettier --check 'tensorboard/**/*.'{css,html,js,ts,scss} .github/**/*.yml",
@@ -28,43 +28,58 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular/bazel": "^8.2.14",
-    "@angular/cli": "^8.3.21",
-    "@angular/compiler": "^8.2.14",
-    "@angular/compiler-cli": "^8.2.14",
-    "@bazel/bazel": "0.26.1",
-    "@bazel/hide-bazel-files": "^0.34.0",
-    "@bazel/ibazel": "^0.10.3",
-    "@bazel/jasmine": "^0.32.2",
-    "@bazel/karma": "^0.36.1",
-    "@bazel/typescript": "^0.34.0",
+    "@angular/bazel": "^9.0.0",
+    "@angular/cli": "^9.1.2",
+    "@angular/compiler": "^9.0.0",
+    "@angular/compiler-cli": "^9.0.0",
+    "@bazel/bazel": "2.1",
+    "@bazel/ibazel": "^0.12.4",
+    "@bazel/jasmine": "^1.6.0",
+    "@bazel/karma": "^1.6.0",
+    "@bazel/protractor": "^1.6.0",
+    "@bazel/rollup": "^1.6.0",
+    "@bazel/terser": "^1.6.0",
+    "@bazel/typescript": "^1.6.0",
     "@types/chai": "^4.2.7",
-    "@types/jasmine": "^3.5.0",
-    "@types/node": "^13.1.2",
+    "@types/jasmine": "^3.5.10",
+    "@types/node": "^13.13.1",
     "@types/requirejs": "^2.1.31",
-    "@types/sinon": "^7.5.1",
+    "@types/sinon": "^7.5.2",
     "chai": "^4.2.0",
+    "jasmine-core": "^3.5.0",
+    "karma": "^5.0.2",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^1.3.0",
+    "karma-jasmine": "^3.1.0",
+    "karma-requirejs": "^1.1.0",
+    "karma-sourcemap-loader": "^0.3.7",
     "prettier": "1.18.2",
-    "sinon": "^7.4.2",
-    "typescript": "~3.4.5"
+    "requirejs": "^2.3.6",
+    "rollup": "^2.7.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-sourcemaps": "^0.5.0",
+    "sinon": "^7.4.1",
+    "terser": "^4.6.3",
+    "tslib": "^1.10.0",
+    "typescript": "3.8.3"
   },
   "dependencies": {
-    "@angular/animations": "^8.2.14",
-    "@angular/cdk": "^8.2.3",
-    "@angular/common": "^8.2.14",
-    "@angular/core": "^8.2.14",
-    "@angular/forms": "^8.2.14",
-    "@angular/http": "^7.2.15",
-    "@angular/material": "^8.2.3",
-    "@angular/platform-browser": "^8.2.14",
-    "@angular/platform-browser-dynamic": "^8.2.14",
-    "@angular/router": "^8.2.14",
-    "@ngrx/effects": "^8.6.0",
-    "@ngrx/store": "^8.6.0",
+    "@angular/animations": "^9.0.0",
+    "@angular/cdk": "^9.0.0",
+    "@angular/common": "^9.0.0",
+    "@angular/core": "^9.0.0",
+    "@angular/forms": "^9.0.0",
+    "@angular/material": "^9.0.0",
+    "@angular/platform-browser": "^9.0.0",
+    "@angular/platform-browser-dynamic": "^9.0.0",
+    "@angular/router": "^9.0.0",
+    "@ngrx/effects": "^9.0.0",
+    "@ngrx/store": "^9.0.0",
     "monaco-editor-core": "^0.20.0",
     "monaco-languages": "^1.10.0",
     "requirejs": "^2.3.6",
-    "rxjs": "^6.5.4",
-    "zone.js": "^0.9.1"
+    "rxjs": "^6.5.5",
+    "zone.js": "^0.10.2"
   }
 }

tensorboard/components/experimental/plugin_lib/test/testable-plugin-lib.ts

@@ -12,6 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import * as plugin_internal from '../plugin-guest.js';
+import * as plugin_internal from '../plugin-guest';
 
 (window as any).plugin_internal = plugin_internal;

tensorboard/components/tensor_widget/BUILD

@@ -100,7 +100,6 @@ tf_ts_library(
 
 tf_ts_devserver(
     name = "dev_server",
-    index_html = "demo/demo.html",
     serving_path = "/bundle.js",
     static_files = [
         "demo/demo.css",

tensorboard/defs/BUILD

@@ -50,3 +50,5 @@ exports_files(
     ["clutz.d.ts"],
     visibility = ["//tensorboard:internal"],
 )
+
+exports_files(["rollup_config.js"])

tensorboard/defs/defs.bzl

@@ -13,16 +13,16 @@
 # limitations under the License.
 """External-only delegates for various BUILD rules."""
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "rollup_bundle")
-load("@npm_bazel_karma//:defs.bzl", "karma_web_test_suite")
+load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
+load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
 load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
 
 def tensorboard_webcomponent_library(**kwargs):
     """Rules referencing this will be deleted from the codebase soon."""
     pass
 
-def tf_js_binary(compile, **kwargs):
+def tf_js_binary(compile, deps, **kwargs):
     """Rules for creating a JavaScript bundle.
 
     Please refer to https://bazelbuild.github.io/rules_nodejs/Built-ins.html#rollup_bundle
@@ -31,7 +31,14 @@ def tf_js_binary(compile, **kwargs):
 
     # `compile` option is used internally but is not used by rollup_bundle.
     # Discard it.
-    rollup_bundle(**kwargs)
+    rollup_bundle(
+        config_file = "//tensorboard/defs:rollup_config.js",
+        deps = deps + [
+            "@npm//rollup-plugin-commonjs",
+            "@npm//rollup-plugin-node-resolve",
+        ],
+        **kwargs
+    )
 
 def tf_ts_config(**kwargs):
     """TensorBoard wrapper for the rule for a TypeScript configuration."""

tensorboard/defs/rollup_config.js

@@ -0,0 +1,26 @@
+/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+const node = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+
+module.exports = {
+  plugins: [
+    node({
+      mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
+    }),
+    commonjs(),
+  ],
+};

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code/load_monaco_shim.ts

@@ -24,7 +24,14 @@ export interface WindowWithRequireAndMonaco extends Window {
   require?: Require;
   monaco?: any;
 }
-export const windowWithRequireAndMonaco: WindowWithRequireAndMonaco = window;
+
+function getWindow(): WindowWithRequireAndMonaco {
+  return window;
+}
+
+const utils = {
+  getWindow,
+};
 
 const MONACO_PATH_PREFIX = 'vs';
 const MONACO_IMPORT_PATH = '/tf-imports/vs';
@@ -37,7 +44,7 @@ const MONACO_IMPORT_PATH = '/tf-imports/vs';
  * @param paths
  */
 function requireAsPromise(paths: string[]): Promise<void> {
-  const require = windowWithRequireAndMonaco.require!;
+  const require = utils.getWindow().require!;
   return new Promise((resolve) => {
     require(paths, resolve);
   });
@@ -49,12 +56,13 @@ function requireAsPromise(paths: string[]): Promise<void> {
  * defined, this function is a no-op.
  */
 export async function loadMonaco(): Promise<void> {
-  if (windowWithRequireAndMonaco.monaco !== undefined) {
+  const window = utils.getWindow();
+  if (window.monaco !== undefined) {
     return;
   }
 
-  if (windowWithRequireAndMonaco.require) {
-    const require = windowWithRequireAndMonaco.require;
+  if (window.require) {
+    const require = window.require;
     require.config({
       paths: {
         [MONACO_PATH_PREFIX]: MONACO_IMPORT_PATH,
@@ -70,3 +78,7 @@ export async function loadMonaco(): Promise<void> {
     );
   }
 }
+
+export const TEST_ONLY = {
+  utils,
+};

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code/load_monaco_shim_test.ts

@@ -13,7 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {loadMonaco, windowWithRequireAndMonaco} from './load_monaco_shim';
+import {
+  loadMonaco,
+  TEST_ONLY,
+  WindowWithRequireAndMonaco,
+} from './load_monaco_shim';
 
 describe('loadMonaco shim', () => {
   function createFakeRequire(): Require {
@@ -36,14 +40,23 @@ describe('loadMonaco shim', () => {
     return {};
   }
 
+  function createFakeWindow(): WindowWithRequireAndMonaco {
+    return ({
+      require: createFakeRequire(),
+    } as unknown) as WindowWithRequireAndMonaco;
+  }
+
+  let windowWithRequireAndMonaco: WindowWithRequireAndMonaco;
   let requireSpy: jasmine.Spy;
   beforeEach(() => {
-    windowWithRequireAndMonaco.require = createFakeRequire();
+    windowWithRequireAndMonaco = createFakeWindow();
+    spyOn(TEST_ONLY.utils, 'getWindow').and.returnValue(
+      windowWithRequireAndMonaco
+    );
     requireSpy = spyOn(windowWithRequireAndMonaco, 'require').and.callThrough();
   });
 
   afterEach(() => {
-    delete windowWithRequireAndMonaco.require;
     delete windowWithRequireAndMonaco.monaco;
   });