Add Angular support

advanced.yml

@@ -95,3 +95,12 @@ services:
     image: grpcweb/binary-client
     ports:
       - "8081:8081"
+  angular-client:
+    build:
+      context: ./
+      dockerfile: ./net/grpc/gateway/docker/angular_client/Dockerfile
+    depends_on:
+      - prereqs
+    image: grpcweb/angular-client
+    ports:
+      - "8081:8081"

javascript/net/grpc/web/grpc_generator.cc

@@ -245,6 +245,26 @@ void ReplaceCharacters(string *s, const char *remove, char replacewith) {
   }
 }
 
+// Returns name in PascalCase to SCREAMING_SNAKE_CASE.
+// e.g 'EchoServiceConfig' -> 'ECHO_SERVICE_CONFIG'
+string PascalToConstCase(const string& s) {
+  if (s.empty()) {
+    return s;
+  }
+  // Ignore the first character. It's already uppercase and doesn't need an
+  // underscore.
+  string result;
+  result.push_back(s[0]);
+  for (int i = 1; i < s.size(); ++i) {
+    if (s[i] >= 'A' && s[i] <= 'Z') {
+      result.push_back('_');
+      result.push_back(s[i]);
+    } else {
+      result.push_back(s[i] - 'a' + 'A');
+    }
+  }
+  return result;
+}
 
 // The following function was copied from
 // google/protobuf/src/google/protobuf/compiler/cpp/cpp_helpers.cc
@@ -661,6 +681,149 @@ void PrintES6Imports(Printer* printer, const FileDescriptor* file) {
   printer->Print(vars, "} from './$base_name$_pb';\n\n");
 }
 
+void PrintAngularServiceImports(Printer* printer, const FileDescriptor* file,
+                                const string base_file_name) {
+  printer->Print(
+      "import {Injectable, InjectionToken, Inject} from '@angular/core';\n");
+  printer->Print("import {Observable} from 'rxjs';\n\n");
+
+  if (!file->service_count()) {
+    return;
+  }
+
+  std::map<string, string> vars;
+  vars["base_file_name"] = base_file_name;
+
+  const ServiceDescriptor* service = file->service(0);
+  vars["service_name"] = service->name();
+
+  if (file->service_count() == 1) {
+    printer->Print(
+        vars, "import {$service_name$Client} from './$base_file_name$';\n\n");
+    return;
+  }
+
+  printer->Print("import {\n");
+  printer->Indent();
+  printer->Print(vars, "$service_name$");
+
+  for (int service_index = 1; service_index < file->service_count();
+       ++service_index) {
+    const ServiceDescriptor* service = file->service(service_index);
+    vars["service_name"] = service->name();
+    printer->Print(vars, ",\n$service_name$Client");
+  }
+
+  printer->Outdent();
+  printer->Print(vars, "} from './$base_file_name$';\n\n");
+}
+
+void PrintAngularServiceMethod(Printer* printer, const MethodDescriptor* method,
+                               std::map<string, string> vars) {
+  if (!method->client_streaming()) {
+    printer->Print(vars,
+                   "$js_method_name$(\n"
+                   "  request: $input_type$,\n"
+                   "  metadata?: grpcWeb.Metadata\n"
+                   "): Observable<$output_type$> {\n");
+    printer->Indent();
+    printer->Print("return new Observable(subscriber => {\n");
+    printer->Indent();
+
+    if (method->server_streaming()) {
+      vars["stream_object"] = "stream";
+      printer->Print(
+          vars,
+          "const $stream_object$ = this.client.$js_method_name$(request, "
+          "metadata);\n"
+          "$stream_object$.on('data', (response) => "
+          "subscriber.next(response));\n"
+          "$stream_object$.on('error', (err) => subscriber.error(err));\n"
+          "$stream_object$.on('status', (status) => {\n"
+          "  if (status.code != grpcWeb.StatusCode.OK) {\n"
+          "    subscriber.error({code: status.code, message: "
+          "status.details});\n"
+          "  }\n"
+          "});\n"
+          "$stream_object$.on('end', () => subscriber.complete());\n");
+    } else {
+      vars["stream_object"] = "call";
+      printer->Print(
+          vars,
+          "const callback = (err, response) => {\n"
+          "  if (err) {\n"
+          "    subscriber.error(err);\n"
+          "  } else {\n"
+          "    subscriber.next(response);\n"
+          "    subscriber.complete();\n"
+          "  }\n"
+          "};\n"
+          "const $stream_object$ = this.client.$js_method_name$(request, "
+          "metadata, callback);\n");
+    }
+    printer->Print(vars,
+                   "return () => { if ($stream_object$) { "
+                   "$stream_object$.cancel(); } }\n");
+    printer->Outdent();
+    printer->Print("});\n");
+    printer->Outdent();
+    printer->Print("}\n\n");
+  }
+}
+
+void PrintAngularServiceClass(Printer* printer, const FileDescriptor* file) {
+  for (int service_index = 0; service_index < file->service_count();
+       ++service_index) {
+    std::map<string, string> vars;
+    const ServiceDescriptor* service = file->service(service_index);
+    vars["service_name"] = service->name();
+    printer->Print(vars, "export interface $service_name$Config {\n");
+    printer->Print(
+        "  hostname: string;\n"
+        "  credentials: null | { [index: string]: string; };\n"
+        "  options: null | { [index: string]: string; };\n");
+    printer->Print("};\n");
+    vars["config_name"] = PascalToConstCase(service->name()) + "_CONFIG";
+    printer->Print(
+        vars,
+        "export const $config_name$ = new "
+        "InjectionToken<$service_name$Config>('$config_name$');\n\n");
+
+    printer->Print(
+        "@Injectable({\n"
+        "  providedIn: 'root',\n"
+        "})\n");
+    printer->Print(vars, "export class $service_name$ {\n");
+    printer->Indent();
+    printer->Print(vars,
+                   "private client: $service_name$Client;\n\n"
+                   "constructor(@Inject($config_name$) private config: "
+                   "$service_name$Config) {\n"
+                   "  this.client = new $service_name$Client(\n"
+                   "    this.config.hostname,\n"
+                   "    this.config.credentials,\n"
+                   "    this.config.options);\n"
+                   "}\n\n");
+    for (int method_index = 0; method_index < service->method_count();
+         ++method_index) {
+      const MethodDescriptor* method = service->method(method_index);
+      vars["js_method_name"] = LowercaseFirstLetter(method->name());
+      vars["input_type"] = JSMessageType(method->input_type(), file);
+      vars["output_type"] = JSMessageType(method->output_type(), file);
+      PrintAngularServiceMethod(printer, method, vars);
+    }
+    printer->Outdent();
+    printer->Print("}\n");
+  }
+}
+
+void PrintAngularServiceFile(Printer* printer, const FileDescriptor* file,
+                             const string base_file_name) {
+  PrintAngularServiceImports(printer, file, base_file_name);
+  PrintES6Imports(printer, file);
+  PrintAngularServiceClass(printer, file);
+}
+
 void PrintTypescriptFile(Printer* printer, const FileDescriptor* file,
                          std::map<string, string> vars) {
   PrintES6Imports(printer, file);
@@ -1334,6 +1497,7 @@ class GrpcCodeGenerator : public CodeGenerator {
     ImportStyle import_style;
     bool generate_dts = false;
     bool gen_multiple_files = false;
+    bool generate_angular = false;
 
     for (size_t i = 0; i < options.size(); ++i) {
       if (options[i].first == "out") {
@@ -1342,6 +1506,8 @@ class GrpcCodeGenerator : public CodeGenerator {
         mode = options[i].second;
       } else if (options[i].first == "import_style") {
         import_style_str = options[i].second;
+      } else if (options[i].first == "framework") {
+        generate_angular = options[i].second == "angular";
       } else if (options[i].first == "multiple_files") {
         gen_multiple_files = options[i].second == "true";
       } else {
@@ -1382,6 +1548,10 @@ class GrpcCodeGenerator : public CodeGenerator {
       import_style = ImportStyle::CLOSURE;
     } else if (import_style_str == "commonjs") {
       import_style = ImportStyle::COMMONJS;
+      // Generate Typescript declarations for Angular.
+      if (generate_angular) {
+        generate_dts = true;
+      }
     } else if (import_style_str == "commonjs+dts") {
       import_style = ImportStyle::COMMONJS;
       generate_dts = true;
@@ -1589,6 +1759,21 @@ class GrpcCodeGenerator : public CodeGenerator {
       PrintGrpcWebDtsFile(&grpcweb_dts_printer, file);
     }
 
+    if (generate_angular && import_style != ImportStyle::CLOSURE) {
+      string angular_service_file_name =
+          StripProto(file->name()) + ".service.pb.ts";
+
+      std::unique_ptr<ZeroCopyOutputStream> angular_service_output(
+          context->Open(angular_service_file_name));
+      Printer angular_service_printer(angular_service_output.get(), '$');
+
+      PrintFileHeader(&angular_service_printer, vars);
+
+      const string base_file_name = StripSuffixString(
+          file_name, import_style == TYPESCRIPT ? ".ts" : ".js");
+      PrintAngularServiceFile(&angular_service_printer, file, base_file_name);
+    }
+
     return true;
   }
 };

net/grpc/gateway/docker/angular_client/Dockerfile

@@ -0,0 +1,36 @@
+# Copyright 2018 Google LLC
+#
+# 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
+#
+#     https://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.
+
+FROM grpcweb/prereqs
+
+ARG EXAMPLE_DIR=/github/grpc-web/net/grpc/gateway/examples/echo
+ARG ANGULAR_SERVICE_DIR=$EXAMPLE_DIR/angular-example/src/app/shared
+
+RUN npm install -g @angular/cli
+
+RUN curl -o chrome.deb -sSL https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+RUN dpkg -i chrome.deb; apt-get -fy install
+
+RUN protoc -I=$EXAMPLE_DIR echo.proto \
+--js_out=import_style=commonjs:$ANGULAR_SERVICE_DIR \
+--grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext,framework=angular:$ANGULAR_SERVICE_DIR
+
+RUN cd $EXAMPLE_DIR/angular-example && \
+  npm install && \
+  ng build --prod && \
+  cp dist/angular-example/* /var/www/html
+
+EXPOSE 8081
+WORKDIR /var/www/html
+CMD ["python", "-m", "SimpleHTTPServer", "8081"]

net/grpc/gateway/examples/echo/angular-example/.gitignore

@@ -0,0 +1,48 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+package-lock.json
+yarn.lock
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

net/grpc/gateway/examples/echo/angular-example/README.md

@@ -0,0 +1,27 @@
+# AngularExample
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).