A full, sound, modern and documented JS interop for Dart

August 24, 2021 Dart

This is (or should be) a full JavaScript interop package using package:js bindings.
The bindings are generated by machine-reading WebIDL files for types and MDN website for documentation.

Take a look at MediaStream file and check out how nice it is with the awesome MDN documentation.

Usage

import 'package:js_bindings/js_bindings.dart';

void main() {
  var div = document.createElement('div')
    ..innerHTML = 'Hello world =]';
  
  document.body!.appendChild(div);
}

Promise and Future

JS Promises and Dart Futures are not the same thing.
This package addes an easy way to use promises:

import 'package:js_bindings/js_bindings.dart';

Future<void> main() async {
  await window.navigator.mediaDevices.getUserMedia().future;
  // or
  window.navigator.mediaDevices.getUserMedia().then((event) {});
}

What to import

There is a folder called bindings and there is one dart file for each IDL spec.
For example orientation_event:

import 'package:js_bindings/bindings/orientation_event.dart';

Future<void> main() async {
  final permission = await DeviceOrientationEvent.requestPermission().future;

  print('Granted? ${permission == PermissionState.granted}');
}