fix(labs): make grpc service files tree shakable

Author: Dan Muller

examples/protocol_buffers/app.e2e-spec.ts

@@ -20,4 +20,10 @@ describe('protocol_buffers', () => {
     div.getText().then(t => expect(t).toEqual(`Car from server: Porsche`));
     done();
   });
+
+  it('should have a grpc service client', (done) => {
+    const div = element(by.css('div.ts2'));
+    div.getText().then(t => expect(t).toEqual(`CarServiceClient is defined: yes!`));
+    done();
+  });
 });

examples/protocol_buffers/app.ts

@@ -1,3 +1,4 @@
+import {CarServiceClient} from 'examples_protocol_buffers/car_grpc_web_pb';
 import {Car} from 'examples_protocol_buffers/car_pb';
 
 const car = new Car();
@@ -7,3 +8,8 @@ const el: HTMLDivElement = document.createElement('div');
 el.innerText = `Car from server: ${car.getMake()}`;
 el.className = 'ts1';
 document.body.appendChild(el);
+
+const el2: HTMLDivElement = document.createElement('div');
+el2.innerText = `CarServiceClient is defined: ${CarServiceClient ? 'yes!' : 'no :('}`;
+el2.className = 'ts2';
+document.body.appendChild(el2);

examples/protocol_buffers/car.proto

@@ -12,3 +12,13 @@ message Car {
   Tire rear_tires = 5;
   int64 mileage = 6;
 }
+
+message GetCarRequest {
+}
+message GetCarResponse {
+}
+
+service CarService {
+  rpc GetCar(GetCarRequest) returns (GetCarResponse) {
+  }
+}

examples/protocol_buffers/package.json

@@ -10,7 +10,7 @@
     "@types/long": "^4.0.0",
     "@types/node": "11.11.1",
     "google-protobuf": "3.11.4",
-    "grpc-web": "1.0.7",
+    "grpc-web": "1.1.0",
     "http-server": "^0.11.1",
     "karma": "~4.1.0",
     "karma-chrome-launcher": "2.2.0",

package.json

@@ -41,7 +41,7 @@
         "core-util-is": "^1.0.2",
         "date-fns": "1.30.1",
         "google-protobuf": "^3.6.1",
-        "grpc-web": "^1.0.7",
+        "grpc-web": "1.1.0",
         "hello": "file:./tools/npm_packages/hello",
         "history-server": "^1.3.1",
         "http-server": "^0.11.1",

packages/labs/grpc_web/change_import_style.js

@@ -81,9 +81,15 @@ function convertToUmd(args, initialContents) {
 // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
 function convertToESM(args, initialContents) {
   const replaceGoogExtendWithExports = (contents) => {
-    return contents.replace(/goog\.object\.extend\(exports, ([\w\.]+)\);/g, (_, packageName) => {
+    const symbols = [];
+    let exportVariable;
+    let packageName;
+
+    contents = contents.replace(/goog\.object\.extend\(exports, ([\w\.]+)\);/g, (_, p) => {
+      packageName = p;
+      exportVariable = contents.includes('const grpc = {}') ? 'exportVariable' : packageName;
+
       const exportSymbols = /goog\.exportSymbol\('([\w\.]+)',.*\);/g;
-      const symbols = [];
 
       let match;
       while ((match = exportSymbols.exec(initialContents))) {
@@ -95,15 +101,25 @@ function convertToESM(args, initialContents) {
         }
       }
 
-      return `export const { ${symbols.join(', ')} } = ${packageName}`;
+      return `export const { ${symbols.join(', ')} } = ${exportVariable}`;
     });
+
+    return symbols.reduce(
+        (contents, symbol) => {return contents.replace(
+            new RegExp(`${packageName}\\.${symbol}`, 'g'), `${exportVariable}.${symbol}`)},
+        contents)
   };
 
   const replaceCMDefaultExportWithExports = (contents) => {
-    return contents.replace(/module.exports = ([\w\.]+)\;/g, (_, packageName) => {
-      const exportSymbols = new RegExp(`${packageName.replace('.', '\\.')}\.([\\w\\.]+) =`, 'g');
+    const symbols = [];
+    let exportVariable;
+    let packageName;
 
-      const symbols = [];
+    contents = contents.replace(/module.exports = ([\w\.]+)\;/g, (_, p) => {
+      packageName = p;
+      exportVariable = contents.includes('const grpc = {}') ? 'exportVariable' : packageName;
+
+      const exportSymbols = new RegExp(`${packageName.replace('.', '\\.')}\.([\\w\\.]+) =`, 'g');
 
       let match;
       while ((match = exportSymbols.exec(initialContents))) {
@@ -115,8 +131,13 @@ function convertToESM(args, initialContents) {
         }
       }
 
-      return `export const { ${symbols.join(', ')} } = ${packageName};`;
+      return `export const { ${symbols.join(', ')} } = ${exportVariable};`;
     });
+
+    return symbols.reduce(
+        (contents, symbol) => {return contents.replace(
+            new RegExp(`${packageName}\\.${symbol}`, 'g'), `${exportVariable}.${symbol}`)},
+        contents)
   };
 
   const replaceRequiresWithImports = (contents) => {
@@ -151,7 +172,8 @@ function convertToESM(args, initialContents) {
     replaceCMDefaultExportWithExports,
     replaceCJSExportsWithECMAExports,
   ];
-  return transformations.reduce((currentContents, transform) => {
+
+  return `const exportVariable = {}\n` + transformations.reduce((currentContents, transform) => {
     return transform(currentContents);
   }, initialContents);
 }

yarn.lock

@@ -4557,10 +4557,10 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-grpc-web@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/grpc-web/-/grpc-web-1.0.7.tgz#9e4fbcf63d3734515332ab59e42baa7d0d290015"
-  integrity sha512-Fkbz1nyvvt6GC6ODcxh9Fen6LLB3OTCgGHzHwM2Eni44SUhzqPz1UQgFp9sfBEfInOhx3yBdwo9ZLjZAmJ+TtA==
+grpc-web@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/grpc-web/-/grpc-web-1.1.0.tgz#18f73583a0a8c0b6c44a5cba62e66376d0ad019e"
+  integrity sha512-oPoS4/E/EO0TA2ZOSf3AxV2AbWDeabwfbAo+8oXNenOw87RmKz4hME8Sy4KDu2dUnqK8cuGfzdQlJPAEQEygNQ==
 
 handlebars@^4.1.2:
   version "4.5.3"