From a3bd81b8ed5289330bb8d4bf15ded5e3702c8d82 Mon Sep 17 00:00:00 2001 From: Dan Muller Date: Sat, 6 Jun 2020 02:47:28 +0000 Subject: [PATCH] fix(labs): make grpc service files tree shakable --- examples/protocol_buffers/app.e2e-spec.ts | 6 +++ examples/protocol_buffers/app.ts | 6 +++ examples/protocol_buffers/car.proto | 10 +++++ examples/protocol_buffers/package.json | 2 +- package.json | 2 +- packages/labs/grpc_web/change_import_style.js | 38 +++++++++++++++---- yarn.lock | 8 ++-- 7 files changed, 58 insertions(+), 14 deletions(-) diff --git a/examples/protocol_buffers/app.e2e-spec.ts b/examples/protocol_buffers/app.e2e-spec.ts index c53341066e..89fa1da089 100644 --- a/examples/protocol_buffers/app.e2e-spec.ts +++ b/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(); + }); }); diff --git a/examples/protocol_buffers/app.ts b/examples/protocol_buffers/app.ts index 044b20261a..c6d3d171a9 100644 --- a/examples/protocol_buffers/app.ts +++ b/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); diff --git a/examples/protocol_buffers/car.proto b/examples/protocol_buffers/car.proto index 0e8b69513a..ab1c418d5f 100644 --- a/examples/protocol_buffers/car.proto +++ b/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) { + } +} diff --git a/examples/protocol_buffers/package.json b/examples/protocol_buffers/package.json index bb42ffe142..bb9cd40574 100644 --- a/examples/protocol_buffers/package.json +++ b/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", diff --git a/package.json b/package.json index 95fc55975a..38bc303116 100644 --- a/package.json +++ b/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", diff --git a/packages/labs/grpc_web/change_import_style.js b/packages/labs/grpc_web/change_import_style.js index d91ee9cf3c..45ecefae13 100644 --- a/packages/labs/grpc_web/change_import_style.js +++ b/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); } diff --git a/yarn.lock b/yarn.lock index 1f36eeaa61..61fd40fd64 100644 --- a/yarn.lock +++ b/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"