js-interop: Need to expose a Dart function as a JS function, but can't see how...

[domesticmouse]

Describe the issue you're seeing

Attempting to get up a simple Google Maps sample using package/js

Does it happen in Dartium or when compiled to JavaScript?

I'm running with pub serve to Chrome 49.0.2623.63, so Dart2JS

• Dart SDK version: use dart --version

$ dart --version
Dart VM version: 1.14.2 (Tue Feb  9 23:13:17 2016) on "linux_x64"

• pkg/js version: look at pubspec.lock

  js:
    description: js
    source: hosted
    version: "0.6.0"

Failing code: https://gist.github.com/domesticmouse/91681c0d684407fc67e1

[a14n]

Several points:

• Use @JS() external set initMap(Function f); to allow to set an initMap function

• Use allowInterop when you are passing function to javascript:

  If you are passing a Dart function to a JavaScript API, you must wrap it using allowInterop or allowInteropCaptureThis.

• re https://gist.github.com/domesticmouse/91681c0d684407fc67e1#file-maps-dart-L28-L30 : it looks like you can not have several constructors on the same class. I can't see an obvious reason for this limitation. File a new issue ? Perhaps @jacob314 has an explanation.

• You have to use factory constructor for @anonymous classes. I faced the same issue earlier and I thought it was fixed. File a new issue ? Without the factory keyword Dartium throws:

  No constructor 'MapOptions' with matching arguments declared in class 'MapOptions'.
  NoSuchMethodError: incorrect number of arguments passed to method named 'MapOptions'
  Receiver: Type: class 'MapOptions'
  Tried calling: MapOptions(center: Instance of 'JsObjectImpl', zoom: 8)
  Found: MapOptions([dynamic, dynamic, dynamic])

• re https://gist.github.com/domesticmouse/91681c0d684407fc67e1#file-maps-dart-L22-L23 : you cannot use field in a @JS annotated class. You have to define getters and setters for every fields. On @anonymous class you can alternatively define then as optional named parameters. See the code below.

• re https://gist.github.com/domesticmouse/91681c0d684407fc67e1#file-maps-dart-L15-L16 (aka. my biggest concern about new js-interop) You cannot use @JS('jsName') on class members (See Allow @JS on class method #24779)

I think the list is over :)

Finally here's a working example:

• map.dart

  import 'dart:html';
  import 'maps_lib.dart' as maps;
  import 'package:js/js.dart';
  
  var map;
  
  void main() {
  initMap = allowInterop(() {
    map = new maps.Map(
        querySelector('#map'),
        new maps.MapOptions(
            center: new maps.LatLng(-34.397, 150.644), zoom: 8));
  });
  }
  
  @JS()
  external set initMap(Function f);

• maps_lib.dart

  @JS('google.maps')
  library maps;
  
  import "package:js/js.dart";
  import "dart:html";
  
  @JS()
  class LatLng {
  external LatLng(num lat, num lng);
  external equals(LatLng other);
  external num lat();
  external num lng();
  external String toJSON();
  external toUrlValue();
  }
  
  @JS()
  @anonymous
  class MapOptions {
  external factory MapOptions({String backgroundColor, LatLng center, int zoom});
  }
  
  @JS()
  class Map {
  external factory Map(HtmlElement element, MapOptions options);
  }

[domesticmouse]

Thanks Alexandre!