Bazel build rules moving into Angular repo

.circleci/config.yml

@@ -41,7 +41,7 @@ jobs:
       - restore_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
-      - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
+      - run: bazel run @nodejs//:npm install
       - run: bazel build packages/...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}

.pullapprove.yml

@@ -70,7 +70,6 @@ groups:
           - "tools/*"
         exclude:
           - "tools/public_api_guard/*"
-          - "tools/ngc-wrapped/*"
           - "aio/*"
     users:
       - IgorMinar #primary
@@ -138,7 +137,7 @@ groups:
       files:
         - "packages/tsc-wrapped/*"
         - "packages/compiler-cli/*"
-        - "tools/ngc-wrapped/*"
+        - "packages/bazel/*"
     users:
       - alexeagle
       - chuckjaz

WORKSPACE

@@ -1,17 +1,21 @@
 load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
-   name = "build_bazel_rules_typescript",
-   remote = "https://github.com/bazelbuild/rules_typescript.git",
-   tag = "0.0.5",
+    name = "build_bazel_rules_nodejs",
+    remote = "https://github.com/bazelbuild/rules_nodejs.git",
+    tag = "0.0.2",
 )
 
-load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
 
-node_repositories(package_json = "//:package.json")
+node_repositories(package_json = ["//:package.json"])
 
-git_repository(
-    name = "build_bazel_rules_angular",
-    remote = "https://github.com/bazelbuild/rules_angular.git",
-    tag = "0.0.1",
+local_repository(
+    name = "build_bazel_rules_typescript",
+    path = "node_modules/@bazel/typescript",
+)
+
+local_repository(
+    name = "angular",
+    path = "packages/bazel",
 )

build.sh

@@ -327,6 +327,16 @@ mapSources() {
   fi
 }
 
+updateVersionReferences() {
+  NPM_DIR="$1"
+  (
+    echo "======      VERSION: Updating version references in ${NPM_DIR}"
+    cd ${NPM_DIR}
+    echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
+    perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
+  )
+}
+
 VERSION="${VERSION_PREFIX}${VERSION_SUFFIX}"
 echo "====== BUILDING: Version ${VERSION}"
 
@@ -419,11 +429,13 @@ if [[ ${BUILD_TOOLS} == true || ${BUILD_ALL} == true ]]; then
   $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json
   cp ./packages/tsc-wrapped/package.json ./dist/packages-dist/tsc-wrapped
   cp ./packages/tsc-wrapped/README.md ./dist/packages-dist/tsc-wrapped
-  (
-    cd dist/packages-dist/tsc-wrapped
-    echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
-    perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
-  )
+  updateVersionReferences dist/packages-dist/tsc-wrapped
+
+  rsync -a packages/bazel/ ./dist/packages-dist/bazel
+  # Remove BEGIN-INTERNAL...END-INTERAL blocks
+  # https://stackoverflow.com/questions/24175271/how-can-i-match-multi-line-patterns-in-the-command-line-with-perl-style-regex
+  perl -0777 -n -i -e "s/(?m)^.*BEGIN-INTERNAL[\w\W]*END-INTERNAL.*\n//g; print" $(grep -ril BEGIN-INTERNAL dist/packages-dist/bazel) < /dev/null 2> /dev/null
+  updateVersionReferences dist/packages-dist/bazel
 fi
 
 for PACKAGE in ${PACKAGES[@]}
@@ -489,12 +501,7 @@ do
 
 
   if [[ -d ${NPM_DIR} ]]; then
-    (
-      echo "======      VERSION: Updating version references"
-      cd ${NPM_DIR}
-      echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
-      perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
-    )
+    updateVersionReferences ${NPM_DIR}
   fi
 
   travisFoldEnd "build package: ${PACKAGE}"

integration/bazel/BUILD.bazel

@@ -0,0 +1,10 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "node_modules",
+    srcs = glob([
+        "node_modules/**/*.js",
+        "node_modules/**/*.d.ts",
+        "node_modules/**/*.json",
+    ])
+)

integration/bazel/WORKSPACE

@@ -0,0 +1,30 @@
+load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
+
+git_repository(
+    name = "build_bazel_rules_nodejs",
+    remote = "https://github.com/bazelbuild/rules_nodejs.git",
+    tag = "0.0.2",
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
+node_repositories(package_json = ["//:package.json"])
+
+local_repository(
+    name = "build_bazel_rules_typescript",
+    path = "node_modules/@bazel/typescript",
+)
+
+local_repository(
+    name = "angular",
+    path = "node_modules/@angular/bazel",
+)
+
+git_repository(
+    name = "io_bazel_rules_sass",
+    remote = "https://github.com/bazelbuild/rules_sass.git",
+    tag = "0.0.2",
+)
+
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_repositories")
+
+sass_repositories()

integration/bazel/angular.tsconfig.json

@@ -0,0 +1,23 @@
+// WORKAROUND https://github.com/angular/angular/issues/18810
+// This file is required to run ngc on angular libraries, to write files like
+// node_modules/@angular/core/core.ngsummary.json
+{
+  "compilerOptions": {
+      "lib": [
+          "dom",
+          "es2015"
+      ],
+      "experimentalDecorators": true,
+      "types": []
+  },
+   "include": [
+      "node_modules/@angular/**/*"
+  ],
+  "exclude": [
+      "node_modules/@angular/bazel/**",
+      "node_modules/@angular/compiler-cli/**",
+      // Workaround bug introduced by 079d884
+      "node_modules/@angular/common/i18n_data*",
+      "node_modules/@angular/tsc-wrapped/**"
+  ]
+}

integration/bazel/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "angular-bazel",
+  "description": "example and integration test for building Angular apps with Bazel",
+  "version": "0.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
+    "@angular/common": "file:../../dist/packages-dist/common",
+    "@angular/compiler": "file:../../dist/packages-dist/compiler",
+    "@angular/core": "file:../../dist/packages-dist/core",
+    "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+    "rxjs": "5.3.1",
+    "zone.js": "0.8.6"
+  },
+  "devDependencies": {
+    "@angular/bazel": "file:../../dist/packages-dist/bazel",
+    "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+    "@bazel/typescript": "0.0.7",
+    "typescript": "~2.3.1"
+  },
+  "scripts": {
+    "postinstall": "ngc -p angular.tsconfig.json",
+    "test": "bazel build ..."
+  }
+}

integration/bazel/src/BUILD.bazel

@@ -0,0 +1,11 @@
+load("@angular//:index.bzl", "ng_module")
+
+# Allow targets under sub-packages to reference the tsconfig.json file
+exports_files(["tsconfig.json"])
+
+ng_module(
+    name = "app",
+    srcs = ["app.module.ts"],
+    deps = ["//src/hello-world"],
+    tsconfig = ":tsconfig.json",
+)

integration/bazel/src/app.module.ts

@@ -0,0 +1,9 @@
+import {HelloWorldModule} from './hello-world/hello-world.module';
+
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+@NgModule({
+  imports: [BrowserModule, HelloWorldModule]
+})
+export class AppModule {}

integration/bazel/src/hello-world/BUILD.bazel

@@ -0,0 +1,19 @@
+package(default_visibility = ["//visibility:public"])
+load("@angular//:index.bzl", "ng_module")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+
+sass_binary(
+    name = "styles",
+    src = "hello-world.component.scss",
+    deps = [
+         "//src/shared:colors",
+         "//src/shared:fonts",
+    ],
+)
+
+ng_module(
+    name = "hello-world",
+    srcs = glob(["*.ts"]),
+    tsconfig = "//src:tsconfig.json",
+    assets = [":styles"],
+)

integration/bazel/src/hello-world/hello-world.component.scss

@@ -0,0 +1,12 @@
+@import "src/shared/fonts";
+@import "src/shared/colors";
+
+html {
+  body {
+    font-family: $default-font-stack;
+    h1 {
+      font-family: $modern-font-stack;
+      color: $example-red;
+    }
+  }
+}

integration/bazel/src/hello-world/hello-world.component.ts

@@ -0,0 +1,15 @@
+
+import {Component, NgModule} from '@angular/core';
+
+@Component({
+  selector: 'hello-world-app',
+  template: `
+    <div>Hello {{ name }}!</div>
+    <input type="text" [value]="name" (input)="name = $event.target.value"/>
+  `,
+  // TODO: might be better to point to .scss so this looks valid at design-time
+  styleUrls: ['./styles.css']
+})
+export class HelloWorldComponent {
+  name: string = 'world';
+}

integration/bazel/src/hello-world/hello-world.module.ts

@@ -0,0 +1,8 @@
+import {HelloWorldComponent} from './hello-world.component';
+import {NgModule} from '@angular/core';
+
+@NgModule({
+  declarations: [HelloWorldComponent],
+  bootstrap: [HelloWorldComponent],
+})
+export class HelloWorldModule {}

integration/bazel/src/shared/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library")
+
+sass_library(
+    name = "colors",
+    srcs = ["_colors.scss"],
+)
+
+sass_library(
+    name = "fonts",
+    srcs = ["_fonts.scss"],
+)

integration/bazel/src/shared/_colors.scss

@@ -0,0 +1,2 @@
+$example-blue: #0000ff;
+$example-red: #ff0000;

integration/bazel/src/shared/_fonts.scss

@@ -0,0 +1,2 @@
+$default-font-stack: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+$modern-font-stack: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

integration/bazel/src/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es5",
+      "es2015.collection",
+      "es2015.iterable",
+      "es2015.promise"
+    ]
+  }
+}

npm-shrinkwrap.clean.json

@@ -1,7 +1,18 @@
 {
   "name": "angular-srcs",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.4",
   "dependencies": {
+    "@bazel/typescript": {
+      "version": "0.0.7",
+      "dependencies": {
+        "@types/node": {
+          "version": "7.0.18"
+        },
+        "tsickle": {
+          "version": "0.23.6"
+        }
+      }
+    },
     "@types/angularjs": {
       "version": "1.5.13-alpha"
     },

package.json

@@ -31,6 +31,7 @@
     "fsevents": "^1.0.14"
   },
   "devDependencies": {
+    "@bazel/typescript": "0.0.7",
     "@types/angularjs": "^1.5.13-alpha",
     "@types/base64-js": "^1.2.5",
     "@types/fs-extra": "0.0.22-alpha",
@@ -80,7 +81,6 @@
     "nan": "^2.4.0",
     "node-uuid": "1.4.x",
     "parse5": "^3.0.1",
-    "protobufjs": "^5.0.0",
     "protractor": "^4.0.14",
     "react": "^0.14.0",
     "rewire": "^2.3.3",

packages/bazel/BUILD.bazel

@@ -0,0 +1 @@
+# Empty marker file, indicating this directory is a Bazel package.

packages/bazel/WORKSPACE

@@ -0,0 +1,9 @@
+# By convention, the name should "describe the project in reverse-DNS form"
+# https://docs.bazel.build/versions/master/be/functions.html#workspace
+# But if we use "io_angular" then the loads used in BUILD files will
+# be unfamiliar to Angular users who import from '@angular/pkg' in
+# TypeScript files. We want to reduce the impedance between the Bazel
+# and node naming schemes.
+# We take the name "angular" so that users can write
+# load("@angular//:index.bzl", "ng_module")
+workspace(name = "angular")