Support for Browser Runtime

[sckimynwa]

Summary

Is there any considerations of Supporting Browser Runtime?
It will be really useful for Front-end Developers Using this library in Browser Runtime (like Chrome)

Details

Recently, I generated typescript API from my protobuf(.proto) file using this library.
I tried to use this API in my Nextjs Project.

it works on Server Side Request(Node.js runtime) as expected,
but When requesting in the browser, it didn't work
because it depends on nodejs runtime dependencies (like fs, utils, promisify ...etc)

It would be really helpful for Frontend Developers if this generator supports browser runtime.
Thank you.

[alexander-fenster]

Our libraries actually do work in browser with webpack 4 (not 5) in a so called "fallback mode" (no gRPC) and a little bit different authentication flow (OAuth2 workflow via google-auth-library, and then pass authenticated auth client to the client constructor as auth). I wrote some example in this comment.

Important disclaimer: while I believe it should work, it's not an officially supported feature yet.

[sckimynwa]

@alexander-fenster Thanks you for answering.
Actually, I already tested in create-react-app generated projects and next-project. and it works.
what i mean "browser support" is little bit different than "working" in browser.

after i dived into the codebase, actually, gapic-generator-typescript works as some kind of "template generator" and, all of the features implemented is through the 'google-gax' library.
https://github.com/googleapis/gax-nodejs

so when i checked this library(google-gax), it generates stub & fallback http logic through "node-specific" apis (like setImmediate, fs or something.)

for example, google-gax resolves call using "setImmediate" which browser doesn't support (at least i know) https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate#browser_compatibility

below is apicall method implemented in gax-nodejs (src/call.ts)

  /**
   * Call calls the specified function. Result will be used to fulfill
   * the promise.
   *
   * @param {SimpleCallbackFunction} func
   *   A function for an API call.
   * @param {Object} argument
   *   A request object.
   */
  call(func: SimpleCallbackFunction, argument: RequestType): void {
    if (this.completed) {
      return;
    }
    const canceller = func(
      argument,
      (
        err: GoogleError | null,
        response?: ResponseType,
        next?: NextPageRequestType,
        rawResponse?: RawResponseType
      ) => {
        this.completed = true;
        setImmediate(this.callback!, err, response, next, rawResponse);
      }
    );
    if (canceller instanceof Promise) {
      canceller.catch(err => {
        setImmediate(this.callback!, new GoogleError(err), null, null, null);
      });
    }
    this.cancelFunc = () => canceller.cancel();
  }
}

so every time i use this library in browser runtime, i have to resolve all the polyfills and dependencies which browser api doesn't provide.

[alexander-fenster]

Yes, unfortunately, you would need some polyfills (webpack 4 will provide them for you). Here is my recent successful attempt to make the GAPIC library work in browser: https://github.com/googleapis/gax-nodejs/blob/main/test/browser-test/test/test.endtoend.ts (in google-gax, run npm run browser-test). Unfortunately, at this point, we won't be able to implement native browser support without polyfills.