chore(nice-grpc-client-middleware-devtools): check-in (#442)

README.md

@@ -21,6 +21,10 @@ A gRPC library that is nice to you.
   — client middleware that adds support for setting call deadline.
 - [nice-grpc-client-middleware-retry](/packages/nice-grpc-client-middleware-retry)
   — client middleware that adds automatic retries to unary calls.
+- [nice-grpc-client-middleware-devtools](/packages/nice-grpc-client-middleware-devtools)
+  — client middleware to log calls with
+  [grpc-web-tools](https://github.com/SafetyCulture/grpc-web-devtools) in the
+  browser.
 - [nice-grpc-server-middleware-terminator](/packages/nice-grpc-server-middleware-terminator)
   — server middleware that makes it possible to prevent long-running calls from
   blocking server graceful shutdown.

packages/nice-grpc-client-middleware-devtools/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+lib
+es
+coverage
+.DS_Store

packages/nice-grpc-client-middleware-devtools/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.0 (2023-09-14)

packages/nice-grpc-client-middleware-devtools/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Deeplay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/nice-grpc-client-middleware-devtools/README.md

@@ -0,0 +1,36 @@
+# nice-grpc-client-middleware-devtools [![npm version][npm-image]][npm-url]
+
+Client middleware for [nice-grpc](https://github.com/deeplay-io/nice-grpc) that
+enables seeing grpc-web requests in [grpc-web-tools](https://github.com/SafetyCulture/grpc-web-devtools).
+
+## Installation
+
+```
+npm install nice-grpc-client-middleware-devtools
+```
+
+## Usage
+
+```ts
+import {
+  createClientFactory,
+  createChannel,
+  ClientError,
+  Status,
+} from 'nice-grpc';
+import {devtoolsLoggingMiddleware} from 'nice-grpc-client-middleware-devtools';
+
+const clientFactory = createClientFactory().use(devtoolsLoggingMiddlware);
+
+const channel = createChannel(address);
+const client = clientFactory.create(ExampleService, channel);
+
+const response = await client.exampleMethod(request);
+// The request and response will be visible in the Browser extension
+```
+
+Alternatively, only logging for unary requests can be achieved by using `devtoolsUnaryLoggingMiddleware`
+or logging for streaming requests by using `devtoolsStreamLoggingMiddleware`.
+
+[npm-image]: https://badge.fury.io/js/nice-grpc-client-middleware-devtools.svg
+[npm-url]: https://badge.fury.io/js/nice-grpc-client-middleware-devtools

packages/nice-grpc-client-middleware-devtools/fixtures/.gitignore

@@ -0,0 +1,2 @@
+*.ts
+*.js

packages/nice-grpc-client-middleware-devtools/fixtures/test.proto

@@ -0,0 +1,21 @@
+syntax = "proto3";
+
+package nice_grpc.test;
+
+service Test {
+  rpc TestUnary(TestRequest) returns(TestResponse){};
+  rpc TestServerStream(TestRequest) returns(stream TestResponse){};
+  rpc TestClientStream(stream TestRequest) returns(TestResponse){};
+  rpc TestBidiStream(stream TestRequest) returns(stream TestResponse){};
+}
+
+service Test2 {
+  rpc TestUnary(TestRequest) returns(TestResponse){};
+}
+
+message TestRequest {
+  string id = 1;
+}
+message TestResponse {
+  string id = 1;
+}

packages/nice-grpc-client-middleware-devtools/jest.config.js

@@ -0,0 +1,17 @@
+/** @type {import('@jest/types').Config.GlobalConfig} */
+module.exports = {
+  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/fixtures/'],
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testTimeout: 15000,
+  reporters: ['default', 'github-actions'],
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageReporters: ['lcov', 'text'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/lib/'],
+  globals: {
+    window: {
+      postMessage: () => ({}),
+    },
+  },
+};

packages/nice-grpc-client-middleware-devtools/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "nice-grpc-client-middleware-devtools",
+  "version": "1.0.0",
+  "description": "Client middleware for nice-grpc to work with grpc-web-devtools https://github.com/SafetyCulture/grpc-web-devtools",
+  "repository": "deeplay-io/nice-grpc",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/__tests__"
+  ],
+  "scripts": {
+    "clean": "rimraf lib",
+    "test": "jest",
+    "build": "tsc -P tsconfig.build.json",
+    "prepublishOnly": "npm run clean && npm run build && npm test",
+    "prepare:proto:grpc-js": "mkdirp ./fixtures/grpc-js && grpc_tools_node_protoc --plugin=protoc-gen-grpc=./node_modules/.bin/grpc_tools_node_protoc_plugin --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary:./fixtures/grpc-js --ts_out=grpc_js:./fixtures/grpc-js --grpc_out=grpc_js:./fixtures/grpc-js -I fixtures fixtures/*.proto",
+    "prepare:proto:ts-proto": "mkdirp ./fixtures/ts-proto && grpc_tools_node_protoc --ts_proto_out=./fixtures/ts-proto --ts_proto_opt=outputServices=nice-grpc,outputServices=generic-definitions,useExactTypes=false,esModuleInterop=true -I fixtures fixtures/*.proto",
+    "prepare:proto": "npm run prepare:proto:grpc-js && npm run prepare:proto:ts-proto",
+    "prepare": "npm run prepare:proto"
+  },
+  "author": "Sebastian Halder",
+  "license": "MIT",
+  "devDependencies": {
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/google-protobuf": "^3.7.4",
+    "google-protobuf": "^3.14.0",
+    "grpc-tools": "^1.10.0",
+    "grpc_tools_node_protoc_ts": "^5.0.1",
+    "nice-grpc": "^2.1.5"
+  },
+  "dependencies": {
+    "nice-grpc-common": "^2.0.2",
+    "abort-controller-x": "^0.4.0"
+  }
+}

packages/nice-grpc-client-middleware-devtools/src/index.test.ts

@@ -0,0 +1,127 @@
+import defer = require('defer-promise');
+import {forever} from 'abort-controller-x';
+import {
+  createChannel,
+  createClientFactory,
+  createServer,
+  ServerError,
+  Status,
+} from 'nice-grpc';
+import {devtoolsLoggingMiddleware} from '.';
+import {TestService} from '../fixtures/grpc-js/test_grpc_pb';
+import {
+  TestDefinition,
+  TestRequest as TestRequestTS,
+} from '../fixtures/ts-proto/test';
+import {
+  TestRequest as TestRequestJS,
+  TestResponse as TestResponseJS,
+} from '../fixtures/grpc-js/test_pb';
+
+function throwUnimplemented(): never {
+  throw new ServerError(Status.UNIMPLEMENTED, '');
+}
+
+let windowSpy: jest.SpyInstance;
+let postMessageMock: jest.Mock;
+
+beforeEach(() => {
+  postMessageMock = jest.fn();
+  windowSpy = jest.spyOn(window, 'postMessage');
+  windowSpy.mockImplementation(postMessageMock);
+});
+
+afterEach(() => {
+  windowSpy.mockRestore();
+});
+
+describe('devtools', () => {
+  test('grpc-js logs unary calls', async () => {
+    const server = createServer();
+
+    server.add(TestService, {
+      async testUnary(request: TestRequestJS, {signal}) {
+        return new TestResponseJS();
+      },
+      testServerStream: throwUnimplemented,
+      testClientStream: throwUnimplemented,
+      testBidiStream: throwUnimplemented,
+    });
+
+    const port = await server.listen('localhost:0');
+
+    const channel = createChannel(`localhost:${port}`);
+    const client = createClientFactory()
+      .use(devtoolsLoggingMiddleware)
+      .create(TestService, channel);
+
+    const req = new TestRequestJS();
+    req.setId('test-id');
+
+    const promise = client.testUnary(req);
+
+    await expect(promise).resolves.toEqual(new TestResponseJS());
+    await expect(postMessageMock).toHaveBeenCalledTimes(1);
+    await expect(postMessageMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        request: {
+          id: 'test-id',
+        },
+        response: {
+          id: '',
+        },
+        methodType: 'unary',
+        method: '/nice_grpc.test.Test/TestUnary',
+      }),
+      '*',
+    );
+
+    channel.close();
+
+    await server.shutdown();
+  });
+
+  test('ts-proto logs unary calls', async () => {
+    const server = createServer();
+
+    server.add(TestService, {
+      async testUnary(request: TestRequestJS, {signal}) {
+        return new TestResponseJS();
+      },
+      testServerStream: throwUnimplemented,
+      testClientStream: throwUnimplemented,
+      testBidiStream: throwUnimplemented,
+    });
+
+    const port = await server.listen('localhost:0');
+
+    const channel = createChannel(`localhost:${port}`);
+    const client = createClientFactory()
+      .use(devtoolsLoggingMiddleware)
+      .create(TestDefinition, channel);
+
+    const req: TestRequestTS = {id: 'test-id'};
+
+    const promise = client.testUnary(req);
+
+    await expect(promise).resolves.toEqual({id: ''});
+    await expect(postMessageMock).toHaveBeenCalledTimes(1);
+    await expect(postMessageMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        request: {
+          id: 'test-id',
+        },
+        response: {
+          id: '',
+        },
+        methodType: 'unary',
+        method: '/nice_grpc.test.Test/TestUnary',
+      }),
+      '*',
+    );
+
+    channel.close();
+
+    await server.shutdown();
+  });
+});