Dart JavaScript Interop

The js.dart library allows Dart code running in the browser to
manipulate JavaScript running in the same page. It is intended to
allow Dart code to easily interact with third-party JavaScript libraries.

Warning

The use of this library may result in a sizable increase in code size
when compiled to JavaScript, because names cannot be minified. If the
size of the generated JavaScript is a concern, use the dart:js
library.

Documentation

See API documentation. You should also watch this video tutorial.

Samples

See samples that demonstrate interaction with JavaScript
code. These include interoperation with the Google Maps JavaScript
library, the Google Visualization JavaScript library, and Twitter’s
query API via JSONP.

Usage

The Dart Editor now includes pub support. To try out this
library in the editor:

1. Update to the latest editor.

2. From the “File” menu, open a “New Application” (and make sure “Add
   Pub support” is checked).

3. Add the following to your pubspec.yaml:

   dependencies:
     js: any
   

4. Under the “Tools” menu, run “Pub Install”.

5. Try the following test Dart file:

   import 'package:js/js.dart' as js;
   
   void main() {
     js.context.alert('Hello from Dart via JS');
   }
   

6. Add the script to your HTML page:

   <script src="packages/browser/dart.js"></script>
   <script src="packages/browser/interop.js"></script> 
   

Running Tests

First, use the Pub Package Manager to install dependencies:

pub install

To run browser tests on Dartium, simply open test/browser_tests.htmlundefined
in Dartium.

To run browser tests using JavaScript in any modern browser, first use the
following command to compile to JavaScript:

dart2js -otest/browser_tests.dart.js test/browser_tests.dart

and then open test/browser_tests.html in any browser.