Dev tools support about protoc-gen-elm HOT 8 CLOSED

Interesting. I'll take a look if I can make it work.

from protoc-gen-elm.

No not yet, sorry.

I don't have that much time right now sadly. If you want to, you can help me figure out how to solve this and find out what the protocol of the grpc-web-devtools extension is (what JS do I need to run such that I see the event in the dev tools tab?).

In general its kind of difficult to support this easily in Elm, since you cannot just perform a side effect.
My main idea to provide support here would be a port that you would have to declare in your application code which is imported by the generated code and which could then do some work on the JS side.
The issue here is that you would have to

1. Configure protoc-gen-elm via a flag to emit these helpers
2. Add some npm lib (or maybe protoc-gen-elm also exposes this) to bind your Elm port to the grpc-web-devtools extension.
3. Disable this in production builds (?). The thing is that protoc-gen-elm just generates Rpc definitions, The functions that actually execute the calls live in elm-grpc, so we would need to add some debugging style functions there as well. If everything goes well this does not impact the bundle size if debugging is disabled (since Elm only includes functions that are actually used).

from protoc-gen-elm.

I stabilized the support in 4.0.0.
Concurrent request should hopefully work (please report any issues).
Http and grpc errors are caught and should produce helpful errors in the grpc-web extension.

from protoc-gen-elm.

@andreasewering sorry to ping, but did you have a chance to check it out?

from protoc-gen-elm.

I actually have a plan how we can support this now:

Below the sketched implementation, the critical parts have already been tested manually:

From the user side of this plugin:

• You will need to use a bundler like webpack or vite
• You will set a flag which will instruct protoc-gen-elm to emit additional debug helpers
• You will import a generated dev-tools.js file into your index.js file or include it in your index.html

The generated dev-tools.js file will do the following:

1. Set up a XMLHttpRequest interceptor by monkeypatching the prototype or the constructor. We can collect url, request body, response headers and response body this way.
2. Convert the request and response bodies into integer arrays from their byte representation to be able to pass them through an Elm port.
3. Send the bodies through an Elm port to a generated Elm worker which is imported in the dev-tools.js file (this is why you will need a bundler).
4. The worker will call the associated decode functions for the called method, which we can determine based on the requested url.
5. The worker encodes the Elm data type into JSON using this canonical mapping https://protobuf.dev/programming-guides/proto3/#json (we need to generate JSON Encoders here, which may be a feature we could also make available under a different flag)
6. The worker sends the JSON via a port back to Javascript (as Json.Encode.Value).
7. The Javascript Handler can now emit this grpc call to the dev tools (we have collected all data about the request, in readable json format).

So how do we communicate this to the grpc-dev-tools extension?

1. We generate a "client" per grpc service:

const client = {
  client_: {
    rpcCall: (method, req, metadata, info, callback) => {
      callback(responseObjectFromElm);
    },
  },
};

This client is then wrapped by the dev tools similar to our XMLHttpRequest monkeypatching.
So when we then call client.client_.rpcCall, the extension picks the data up and then calls our implementation, similar with the callback.
Our XMLHttpRequest interceptor therefore just needs to take the appropriate client based on the url and call rpcCall on it with the intercepted/decoded data.

... this may take a while to implement, but its possible!

from protoc-gen-elm.

Sounds good. I'd love to test this out once this is ready!

from protoc-gen-elm.

This is implemented and available in version 3.4.0.

@k-bx Feel free to try it out. I added dev-tools integration to the vite-js example in this repository and it seems to work fine.
It is probably a little rough around the edges, I haven't looked into how to report errors to the plugin correctly for example, but for most use cases it should already help a lot.

The plugin as a consequence now supports the canonical JSON encoding (for the most part, I think some well-known types are missing, timestamp iso encoding is implemented though ✅ ). Decoding is not added yet, since it isn't necessary for the dev tools.

from protoc-gen-elm.

I'll keep this issue open since the dev tools support is still a bit buggy - when firing multiple requests concurrently, the requests/responses might swap and errors are not handled so far. The ground work is there through, so it should be possible for anyone to contribute :)

from protoc-gen-elm.