How can i realize a Circuit Sandbox Client in a GWT app with IsInterop or Babel?

Question

I have to develop a Circuit Sandbox client in GWT. The https://unpkg.com/circuit-sdk uses ES6 so i cannot use GWT JSNI. I am trying coding 'Teaser example to logon and fetch conversations' on https://circuit.github.io/jssdk.html. I have to say, that my JavaScript knowledge is beginner like.

I think, i have two options: My first option is to use GWT's JsInterop. (I used this already, to realize the Websocket for this GWT app. Therefore i used the example 'http://www.g-widgets.com/2017/03/16/example-of-using-websockets-in-gwt-with-a-spring-boot-server/' and this works fine.)

For the Circuit Client i started to write the following Java class:

@JsType( isNative = true, namespace = JsPackage.GLOBAL )
public class Client {
    @JsConstructor
    public Client( final String token, final String readings, final String uri ) {
    }

    @JsMethod
    public native void logon();

//  The old JSNI code (not usable here):
//  public static native void logon() /*-{
//      client.logon()
//      .then(user => console.log('Successfully authenticated as ' + user.displayName))
//      .then(client.getConversations)
//      .then(conversations => conversations.forEach(c => console.log(c.convId)))
//      .catch(console.error);
//  }-*/;
}

This code cannot work cause i have no javascript module defined and the logon method is not implemented.

How can i get access to the javascript module "Circuit" an how do i have to implement the logon() method? And what else do i have to to to get this JsInterop class to work?

The second option: I have converted https://circuitsandbox.net/sdk to ES5 with Babel. I included the built script in my GWT app and tried to realize the logon method in the following manner:

client();

public static native void client() /*-{
    var client = new $wnd.Circuit.Client({
        client_id: '78cafde2f6854ad5ad80a67c532687bc',
        scope: 'READ_USER_PROFILE,READ_CONVERSATIONS',
        domain: 'circuitsandbox.net'
});

    client.logon().then(function (user) {
        return console.log('Logged on user:', user);
    }).catch(console.error);
}-*/;

When i call the method, i get several errors:

[ERROR] Line xx: missing name after . operator

This error occurs cause JSNI cannot compile ES6.

If i comment out the client.logon javascript methode, i get onother error:

"TypeError: Cannot read property 'Client' of undefined"

var client = new $wnd.Circuit.$wnd.Client(...

also won't work.

Can anybody tell me what i have to do get this to work, and what is the better solution?

Many thanks in advance and i would really be very pleased if anybody can help me here.

Answer 1

It's not because Circuit uses ES6 that your code (in JSNI) has to use ES6. You can replace lambdas with anonymous functions; and because catch is a keyword, you have to pass your catch method as second argument to then methods:

public static native void logon() /*-{
  client.logon()
  .then(function(user) { console.log('Successfully authenticated as ' + user.displayName); })
  .then(client.getConversations)
  .then(function(conversations) { conversations.forEach(function(c) { console.log(c.convId)); } }, console.error);
}-*/;

And similarly with your second snippet.