js interop

[John Talley]

Hello,

 

We are using js interop with the Facebook Instant Games API, but we are not clear on how to properly interop with a js Object type.

 

For instance, In the class definition below, we need to pass a js Object into updateAsync(Object payload);

The payload parameter is simply being treated as a map and will be turned into json to store state. So far, we have been unable to determine how to create a js Object and that is successfully stored by the Facebook API. We tried using JsObject, but that also failed.

 

So, how does one define the API to take a js Object function parameter, and how should a js Object be created in Dart that will be used as a map (no pre-defined API) to be passed in for that parameter?

 

FWIW, the other js API’s defined below (methods that use String, num, etc) seem to be working correctly.

 

Also, I would suggest that better & more tutorials are created for js interop.  It is all but required for Dart-web development, yet it is one of the least well documented systems.

 

Thanks,

John Talley

 

@JS()

class FBInstant

{

  external static Context get context;

  external static Player get player;

  external static String getLocale();

  external static String getPlatform();

  external static String getSDKVersion();

  external static Promise initializeAsync();

  external static void setLoadingProgress(num percentage);

  external static List<String> getSupportedAPIs();

  external static Object getEntryPointData();

  external static String getEntryPointAsync();

  external static void setSessionData(Object sessionData);

  external static Promise startGameAsync();

  external static Promise shareAsync(SharePayload payload);

  external static Promise updateAsync(Object payload);

  external static Promise switchGameAsync(String appID, String data);

  external static void quit();

  external static APIError logEvent(String eventName, num valueToSum, Object parameters);

  external static void onPause(Function func);

  external static Promise getInterstitialAdAsync(String placementID);

  external static Promise getRewardedVideoAsync(String placementID);

  external static Promise<Leaderboard> getLeaderboardAsync(String name);

}

 

 

[Alexandre Ardhuin]

Hi,

You can use the "js_util" library (https://pub.dartlang.org/documentation/js/latest/js_util/js_util-library.html) to make what you want:

```dart

import 'package:js/js_util.dart' as js_util;

main() {

  var o = js_util.newObject();

  js_util.setProperty(o, 'name', 'value');

  //...

  fbInstant.updateAsync(o);

}

```

Cheers,

Alexandre

--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at https://groups.google.com/a/dartlang.org/group/web/.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAM2K2e_iRr46dWOxTeH58ymssSQyC7BY6cN6HQYyAPXfehDSiA%40mail.gmail.com.

[John Talley]

Thanks for the pointer.  A couple more questions if you don't mind...

Should the js-Object parameter in the js interface function below be declared as dynamic, or Object, or ???   

external static Promise updateAsync(Object payload);

I'm assuming the old JsObject & JsArray do not play well with JS() interops. So how do we create a js list to use as a property value?  Is the following correct?  I'm assuming so, but it's not pretty.

main() {

  var o = js_util.newObject();

  js_util.setProperty(o, 'name', 'value');

 var jslist = js_util.newObject();

 js_util.setProperty(jslist, 0, 'value0');
 js_util.setProperty(jslist, 1, 'value1');
 js_util.setProperty(jslist, 2, 'value1');

  js_util.setProperty(o, 'listName', jslist);

  //...

  fbInstant.updateAsync(o);

}

And lastly, I prefer to understand what's going on under the covers, so where do I find the implementation of JS()?  I would assume a transformer is used, but we don't specify a transformer as far as I recall.

Thanks,

John

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAPiP%2Bgt1nSQ9Dux2Eh%3Dx31z%2B%3Dt-d-MqN_zYL2ycBB2-%2BvZaPCA%40mail.gmail.com.

[Alexandre Ardhuin]

2018-05-30 17:52 GMT+02:00 John Talley <john....@gmail.com>:

Thanks for the pointer.  A couple more questions if you don't mind...

Should the js-Object parameter in the js interface function below be declared as dynamic, or Object, or ???   

external static Promise updateAsync(Object payload);

Not completely sure but here Object or dynamic should be the same.

 

I'm assuming the old JsObject & JsArray do not play well with JS() interops. So how do we create a js list to use as a property value?  Is the following correct?  I'm assuming so, but it's not pretty.

main() {

  var o = js_util.newObject();

  js_util.setProperty(o, 'name', 'value');

 var jslist = js_util.newObject();

 js_util.setProperty(jslist, 0, 'value0');
 js_util.setProperty(jslist, 1, 'value1');
 js_util.setProperty(jslist, 2, 'value1');

  js_util.setProperty(o, 'listName', jslist);

  //...

  fbInstant.updateAsync(o);

}

The List class is natively supported by js-interop. You can do:

var jsList = ['value0', 'value1', 'value2'];

js_util.setProperty(o, 'listName', jslist);

And lastly, I prefer to understand what's going on under the covers, so where do I find the implementation of JS()?  I would assume a transformer is used, but we don't specify a transformer as far as I recall.

@JS has a special handling in compilers (dart2js, ddc). That's why you don't specify a transformer.

 

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAM2K2e940o9GOjfim2a4vzJRDtNGtsr2hpWpMXxVGBF4Zq6hVQ%40mail.gmail.com.

[John Talley]

Looking at js_util a little closer, I see that jsify actually creates a JsObject.  Does js_util.newObject() also create a JsObject?  If so, why not just call 'new JsObject();' instead of 'js_util.newObject();'?  And why use the getProperty() and setProperty() methods instead of the property accessor opertators, [] and []=, on JsObject?  What is the difference?

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAPiP%2BgseWpyKtDovJKEddNDBUQczaToArfgOzhUb3t5mGDBByQ%40mail.gmail.com.