dart-sdk/pkg/js
2015-11-04 14:39:24 -08:00
..
example Update chart.js with @anonymous 2015-11-02 22:44:14 +01:00
lib Add @anonymous annotation and restrict object literal constructors to only anonymous classes. This frees up defining factory constructors that do not correspond to object literals on JS interop classes. 2015-10-29 19:18:19 -07:00
AUTHORS Support user generated custom native JS classes. 2015-10-13 13:15:28 -07:00
CHANGELOG.md update pkg/js for changes is 1.13-dev.7.7 2015-11-04 14:39:24 -08:00
LICENSE Support user generated custom native JS classes. 2015-10-13 13:15:28 -07:00
PATENTS Support user generated custom native JS classes. 2015-10-13 13:15:28 -07:00
pubspec.yaml update pkg/js for changes is 1.13-dev.7.7 2015-11-04 14:39:24 -08:00
README.md pkg/js: add link to example 2015-10-15 16:33:05 -07:00

Methods and annotations to specify interoperability with JavaScript APIs.

Note: This package is beta software.

Note: This packages requires Dart SDK >=1.13.0-dev.7.

Adding the dependency

Add the following to your pubspec.yaml:

dependencies:
  js: ^0.6.0-beta

Passing functions to JavaScript.

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

Examples

There is a full example hosted with the package:js source code.

Calling methods

// Calls invoke JavaScript `JSON.stringify(obj)`.
@Js("JSON.stringify")
external String stringify(obj);

Classes and Namespaces

@Js('google.maps')
library maps;

// Invokes the JavaScript getter `google.maps.map`.
external Map get map;

// `new Map` invokes JavaScript `new google.maps.Map(location)`
@Js()
class Map {
  external Map(Location location);
  external Location getLocation();
}

// `new Location(...)` invokes JavaScript `new google.maps.LatLng(...)`
//
// We recommend against using custom JavaScript names whenever
// possible. It is easier for users if the JavaScript names and Dart names
// are consistent.
@Js("LatLng")
class Location {
  external Location(num lat, num lng);
}

Maps

Dart Map objects, including literals, are "opaque" in JavaScript. You must create Dart classes for each of these.

// JavaScript
printOptions({responsive: true});
// Dart
void main() {
  printOptions(new Options(responsive: true));
}

@Js()
external printOptions(Options options);

@Js()
class Options {
  external bool get responsive;

  external factory Options({bool responsive});
}

Contributing and Filing Bugs

Please file bugs and features requests on the Github issue tracker.

We also love and accept community contributions, from API suggestions to pull requests. Please file an issue before beginning work so we can discuss the design and implementation. We are trying to create issues for all current and future work, so if something there intrigues you (or you need it!) join in on the discussion.

Code contributors must sign the Google Individual Contributor License Agreement.