A full, sound, modern and documented JS interop for 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}');
}
For a better JS interop
If you wish for a better JS interop in Dart, please, thumbs up the following issues:
Better JS interop in general
Make awaiting a Promise as easy as a Future
Be able to use rename instance members