feat(labs): introduce a new ts_proto_library with grpc support

This version of ts_proto_library is generated using the more standard grpc/grpc-web package.
bazel-contrib · Mar 22, 2020 · 8b43896 · 8b43896
1 parent 81a5624
commit 8b43896
Show file tree

Hide file tree

Showing 37 changed files with 1,258 additions and 73 deletions.
diff --git a/WORKSPACE b/WORKSPACE
@@ -297,3 +297,9 @@ bazel_binaries(versions = SUPPORTED_BAZEL_VERSIONS)
 load("@npm_bazel_labs//:package.bzl", "npm_bazel_labs_dependencies")
 
 npm_bazel_labs_dependencies()
+
+load("@rules_proto//proto:repositories.bzl", "rules_proto_dependencies", "rules_proto_toolchains")
+
+rules_proto_dependencies()
+
+rules_proto_toolchains()
diff --git a/examples/protocol_buffers/BUILD.bazel b/examples/protocol_buffers/BUILD.bazel
@@ -11,6 +11,14 @@ proto_library(
     srcs = ["tire.proto"],
 )
 
+ts_proto_library(
+    # The result will be "tire.d.ts" named after this target.
+    # We could use the output_name attribute if we want the output named
+    # differently than the target.
+    name = "tire",
+    proto = ":tire_proto",
+)
+
 proto_library(
     name = "car_proto",
     srcs = ["car.proto"],
@@ -22,7 +30,7 @@ ts_proto_library(
     # We could use the output_name attribute if we want the output named
     # differently than the target.
     name = "car",
-    deps = [":car_proto"],
+    proto = ":car_proto",
 )
 
 ts_config(
@@ -38,16 +46,17 @@ ts_library(
     tsconfig = "//:tsconfig-test",
     deps = [
         ":car",
+        ":tire",
         "@npm//@types/jasmine",
-        "@npm//@types/long",
         "@npm//@types/node",
-        "@npm//long",
     ],
 )
 
 karma_web_test_suite(
     name = "test",
-    bootstrap = ["@npm_bazel_labs//protobufjs:bootstrap_scripts"],
+    srcs = [
+        "@npm_bazel_labs//grpc_web:bootstrap_scripts",
+    ],
     browsers = [
         "@io_bazel_rules_webtesting//browsers:chromium-local",
         "@io_bazel_rules_webtesting//browsers:firefox-local",
@@ -64,8 +73,8 @@ ts_library(
 
 ts_devserver(
     name = "devserver",
-    bootstrap = ["@npm_bazel_labs//protobufjs:bootstrap_scripts"],
     entry_module = "examples_protocol_buffers/app",
+    scripts = ["@npm_bazel_labs//grpc_web:bootstrap_scripts"],
     deps = [":app"],
 )
 
@@ -75,35 +84,24 @@ rollup_bundle(
     config_file = "rollup.config.js",
     entry_point = ":app.ts",
     format = "iife",
-    deps = [":app"],
+    deps = [
+        ":app",
+        "@npm//:node_modules",
+        "@npm//rollup-plugin-commonjs",
+        "@npm//rollup-plugin-node-resolve",
+    ],
 )
 
 terser_minified(
     name = "bundle.min",
     src = ":bundle",
 )
 
-# Needed because the prodserver only loads static files that appear under this
-# package.
-genrule(
-    name = "protobufjs",
-    srcs = [
-        "@build_bazel_rules_typescript_protobufs_compiletime_deps//:node_modules/protobufjs/dist/minimal/protobuf.min.js",
-        "@build_bazel_rules_typescript_protobufs_compiletime_deps//:node_modules/long/dist/long.js",
-    ],
-    outs = [
-        "protobuf.min.js",
-        "long.js",
-    ],
-    cmd = "outs=($(OUTS)); d=$$(dirname $${outs[0]}); for s in $(SRCS); do cp $$s $$d; done",
-)
-
 http_server(
     name = "prodserver",
     data = [
         "index.html",
         ":bundle.min",
-        ":protobufjs",
     ],
 )
 

diff --git a/examples/protocol_buffers/WORKSPACE b/examples/protocol_buffers/WORKSPACE
@@ -32,6 +32,15 @@ http_archive(
     urls = ["https://github.com/protocolbuffers/protobuf/archive/v3.11.4.tar.gz"],
 )
 
+http_archive(
+    name = "rules_proto",
+    sha256 = "4d421d51f9ecfe9bf96ab23b55c6f2b809cbaf0eea24952683e397decfbd0dd0",
+    strip_prefix = "rules_proto-f6b8d89b90a7956f6782a4a3609b2f0eee3ce965",
+    urls = [
+        "https://github.com/bazelbuild/rules_proto/archive/f6b8d89b90a7956f6782a4a3609b2f0eee3ce965.tar.gz",
+    ],
+)
+
 load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
 
 yarn_install(
@@ -56,6 +65,12 @@ load("@npm_bazel_labs//:package.bzl", "npm_bazel_labs_dependencies")
 
 npm_bazel_labs_dependencies()
 
+load("@rules_proto//proto:repositories.bzl", "rules_proto_dependencies", "rules_proto_toolchains")
+
+rules_proto_dependencies()
+
+rules_proto_toolchains()
+
 load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
 
 web_test_repositories()

diff --git a/examples/protocol_buffers/app.ts b/examples/protocol_buffers/app.ts
@@ -1,8 +1,9 @@
-import {Proto} from './car';
+import {Car} from 'examples_protocol_buffers/car_pb';
+
+const car = new Car();
+car.setMake('Porsche');
 
-const serverResponse = `{"make": "Porsche"}`;
-const car = Proto.Car.create(JSON.parse(serverResponse));
 const el: HTMLDivElement = document.createElement('div');
-el.innerText = `Car from server: ${car.make}`;
+el.innerText = `Car from server: ${car.getMake()}`;
 el.className = 'ts1';
 document.body.appendChild(el);
diff --git a/examples/protocol_buffers/car.spec.ts b/examples/protocol_buffers/car.spec.ts
@@ -1,34 +1,18 @@
-import {Proto} from './car';
-import Long = require('long');
+import {Car} from 'examples_protocol_buffers/car_pb';
+import {Tire} from 'examples_protocol_buffers/tire_pb';
 
 describe('protocol buffers', () => {
   it('allows creation of an object described by proto', () => {
-    const pontiac = Proto.Car.create({
-      make: 'pontiac',
-      frontTires: {
-        width: 225,
-        aspectRatio: 65,
-        construction: 'R',
-        diameter: 17,
-      },
-    });
-    expect(pontiac.make).toEqual('pontiac');
-    if (!pontiac.frontTires) {
-      fail('Should have frontTires set');
-    } else {
-      expect(pontiac.frontTires.width).toEqual(225);
-    }
-  });
+    const tires = new Tire();
+    tires.setAspectRatio(65);
+    tires.setWidth(225);
+    tires.setConstruction('R');
+    tires.setDiameter(17);
+
+    const pontiac = new Car();
+    pontiac.setMake('pontiac');
+    pontiac.setFrontTires(tires)
 
-  // Asserts that longs are handled correctly.
-  // This value comes from https://github.com/dcodeIO/long.js#background
-  it('handles long values correctly', () => {
-    const pontiac = Proto.Car.create({
-      make: 'pontiac',
-      // Long.MAX_VALUE
-      mileage: new Long(0xFFFFFFFF, 0x7FFFFFFF),
-    });
-    const object = Proto.Car.toObject(pontiac, {longs: String});
-    expect(object['mileage']).toEqual('9223372036854775807');
+    expect(pontiac.getMake()).toEqual('pontiac');
   });
 });
diff --git a/examples/protocol_buffers/index.html b/examples/protocol_buffers/index.html
@@ -3,8 +3,6 @@
     <title>protocol_buffers example</title>
 </head>
 <body>
-<script src="/protobuf.min.js"></script>
-<script src="/long.js"></script>
 <script src="/bundle.min.js"></script>
 </body>
 </html>
diff --git a/examples/protocol_buffers/package.json b/examples/protocol_buffers/package.json
@@ -9,6 +9,8 @@
     "@types/jasmine": "2.8.2",
     "@types/long": "^4.0.0",
     "@types/node": "11.11.1",
+    "google-protobuf": "3.11.4",
+    "grpc-web": "1.0.7",
     "http-server": "^0.11.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "2.2.0",
@@ -21,6 +23,8 @@
     "protractor": "^5.4.2",
     "requirejs": "2.3.6",
     "rollup": "1.20.3",
+    "rollup-plugin-commonjs": "10.1.0",
+    "rollup-plugin-node-resolve": "5.2.0",
     "terser": "4.3.1",
     "typescript": "^3.3.1"
   },

diff --git a/examples/protocol_buffers/rollup.config.js b/examples/protocol_buffers/rollup.config.js
@@ -1,8 +1,9 @@
+const commonjs = require('rollup-plugin-commonjs');
+const nodeRequire = require('rollup-plugin-node-resolve');
+
 module.exports = {
-  // indicate which modules should be treated as external
-  external: [
-    'long',
-    'protobufjs/minimal',
+  plugins: [
+    nodeRequire(),
+    commonjs(),
   ],
-  output: {globals: {long: 'Long', 'protobufjs/minimal': 'protobuf'}}
-};
+};