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

This CL is bringing in a lot of new changes that I want to avoid, but I don't think I can avoid it without using the source files from when this library was last generated. Therefore, I don't want it to be landed.

@jodinathan can I have you cherry-pick the changes to move these classes to factory and regenerate with your existing MDN files instead?

Great library! Thank you for your work!

Today I tried with booth latest flutter stable and latest beta channel but I got same result with a single line of code in a flutter project (latest android studio, win10): await window.navigator.mediaDevices.getUserMedia().future;

/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:201:7: Error: The superclass, 'Element', has no unnamed constructor that takes no arguments.
class HTMLElement // Node -> {web_animations_1: {Animatable, ARIAMixin, GeometryUtils, Region, ParentNode, NonDocumentTypeChildNode, ChildNode, Slottable, InnerHTML}, wai_aria_1_2: {ARIAMixin}, cssom_view_1: {GeometryUtils}, css_regions_1: {Region}, dom: {ParentNode, NonDocumentTypeChildNode, ChildNode, Slottable}, d_o_m_parsing: {InnerHTML}} -> Element
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:412:7: Error: The superclass, 'HTMLElement', has no unnamed constructor that takes no arguments.
class HTMLLinkElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, HTMLOrSVGElement, ElementCSSInlineStyle}, cssom_1: {ElementCSSInlineStyle}} -> HTMLElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:518:7: Error: The superclass, 'HTMLElement', has no unnamed constructor that takes no arguments.
class HTMLStyleElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, HTMLOrSVGElement, ElementCSSInlineStyle}, cssom_1: {ElementCSSInlineStyle}} -> HTMLElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:538:7: Error: The superclass, 'HTMLElement', has no unnamed constructor that takes no arguments.
class HTMLBodyElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, HTMLOrSVGElement, ElementCSSInlineStyle}, cssom_1: {ElementCSSInlineStyle}} -> HTMLElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:780:7: Error: The superclass, 'HTMLElement', has no unnamed constructor that takes no arguments.
class HTMLAnchorElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, HTMLOrSVGElement, ElementCSSInlineStyle}, cssom_1: {ElementCSSInlineStyle}} -> HTMLElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:2430:7: Error: The superclass, 'HTMLElement', has no unnamed constructor that takes no arguments.
class HTMLAreaElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, HTMLOrSVGElement, ElementCSSInlineStyle}, cssom_1: {ElementCSSInlineStyle}} -> HTMLElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:7805:7: Error: The superclass, 'WorkerGlobalScope', has no unnamed constructor that takes no arguments.
class DedicatedWorkerGlobalScope // EventTarget -> {css_font_loading_3: {FontFaceSource, WindowOrWorkerGlobalScope}, html: {WindowOrWorkerGlobalScope}} -> WorkerGlobalScope
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/html.dart:8386:7: Error: The superclass, 'HTMLElement', has no unnamed constructor that takes no arguments.
class HTMLFrameSetElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, HTMLOrSVGElement, ElementCSSInlineStyle}, cssom_1: {ElementCSSInlineStyle}} -> HTMLElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:1233:7: Error: The superclass, 'Node', has no unnamed constructor that takes no arguments.
class Document // EventTarget -> {} -> Node
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:1972:7: Error: The superclass, 'Node', has no unnamed constructor that takes no arguments.
class DocumentType // EventTarget -> {} -> Node
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:2001:7: Error: The superclass, 'Node', has no unnamed constructor that takes no arguments.
class DocumentFragment // EventTarget -> {} -> Node
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:2016:7: Error: The superclass, 'DocumentFragment', has no unnamed constructor that takes no arguments.
class ShadowRoot // Node -> {dom: {NonElementParentNode, ParentNode}} -> DocumentFragment
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:2060:7: Error: The superclass, 'Node', has no unnamed constructor that takes no arguments.
class Element // EventTarget -> {} -> Node
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:2719:7: Error: The superclass, 'Node', has no unnamed constructor that takes no arguments.
class CharacterData // EventTarget -> {} -> Node
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:2785:7: Error: The superclass, 'CharacterData', has no unnamed constructor that takes no arguments.
class Text // Node -> {dom: {NonDocumentTypeChildNode, ChildNode}} -> CharacterData
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/dom.dart:2848:7: Error: The superclass, 'CharacterData', has no unnamed constructor that takes no arguments.
class ProcessingInstruction // Node -> {dom: {NonDocumentTypeChildNode, ChildNode}} -> CharacterData
      ^

...

/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/deprecation_reporting.dart:27:7: Error: JS interop class 'DeprecationReportBody' cannot extend Dart class 'Object with ReportBody'.
Try removing the JS interop annotation or adding it to the parent class.
class DeprecationReportBody // null -> {} -> ReportBody
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/element_timing.dart:23:7: Error: JS interop class 'PerformanceElementTiming' cannot extend Dart class 'Object with PerformanceEntry'.
Try removing the JS interop annotation or adding it to the parent class.
class PerformanceElementTiming // null -> {} -> PerformanceEntry
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/web_nfc.dart:110:7: Error: JS interop class 'NDEFReader' cannot extend Dart class 'Object with EventTarget'.
Try removing the JS interop annotation or adding it to the parent class.
class NDEFReader // null -> {} -> EventTarget
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/web_nfc.dart:156:7: Error: JS interop class 'NDEFReadingEvent' cannot extend Dart class 'Object with Event'.
Try removing the JS interop annotation or adding it to the parent class.
class NDEFReadingEvent // null -> {} -> Event
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/web_nfc.dart:173:7: Error: JS interop class 'NDEFReadingEventInit' cannot extend Dart class 'Object with EventInit'.
Try removing the JS interop annotation or adding it to the parent class.
class NDEFReadingEventInit // null -> {} -> EventInit
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/webrtc_stats.dart:15:6: Error: JS interop classes do not support non-external constructors.
Try annotating with `external`.
enum RTCStatsType {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/webrtc_stats.dart:15:6: Error: This JS interop member must be annotated with `external`. Only factories and static methods can be non-external.
Try annotating the member with `external`.
enum RTCStatsType {
     ^

...

/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/svg11.dart:1317:7: Error: Dart class 'SVGElement with SVGFitToViewBox' cannot extend JS interop class 'SVGElement'.
Try adding the JS interop annotation or removing it from the parent class.
class SVGMarkerElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, HTMLOrSVGElement, SVGElementInstance}, svg11: {SVGElementInstance}} -> SVGElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/svg11.dart:1317:7: Error: JS interop class 'SVGMarkerElement' cannot extend Dart class 'SVGElement with SVGFitToViewBox'.
Try removing the JS interop annotation or adding it to the parent class.
class SVGMarkerElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, HTMLOrSVGElement, SVGElementInstance}, svg11: {SVGElementInstance}} -> SVGElement
      ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/svg11.dart:1400:7: Error: Dart class 'SVGElement with SVGURIReference' cannot extend JS interop class 'SVGElement'.
Try adding the JS interop annotation or removing it from the parent class.
class SVGGradientElement // Element -> {html: {GlobalEventHandlers, DocumentAndElementEventHandlers, HTMLOrSVGElement, SVGElementInstance}, svg11: {SVGElementInstance}} -> SVGElement
      ^

...

/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/webxr_ar_module_1.dart:23:6: Error: JS interop classes do not support non-external constructors.
Try annotating with `external`.
enum XREnvironmentBlendMode {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/webxr_ar_module_1.dart:23:6: Error: This JS interop member must be annotated with `external`. Only factories and static methods can be non-external.
Try annotating the member with `external`.
enum XREnvironmentBlendMode {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/webxr_ar_module_1.dart:31:6: Error: JS interop classes do not support non-external constructors.
Try annotating with `external`.
enum XRInteractionMode {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/webxr_ar_module_1.dart:31:6: Error: This JS interop member must be annotated with `external`. Only factories and static methods can be non-external.
Try annotating the member with `external`.
enum XRInteractionMode {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/content_index.dart:16:6: Error: JS interop classes do not support non-external constructors.
Try annotating with `external`.
enum ContentCategory {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/content_index.dart:16:6: Error: This JS interop member must be annotated with `external`. Only factories and static methods can be non-external.
Try annotating the member with `external`.
enum ContentCategory {
     ^
/D:/.../pub_cache/hosted/pub.dartlang.org/js_bindings-0.0.3/lib/bindings/resource_timing_2.dart:36:7: Error: JS interop class 'PerformanceResourceTiming' cannot extend Dart class 'Object with PerformanceEntry'.
Try removing the JS interop annotation or adding it to the parent class.
class PerformanceResourceTiming // null -> {} -> PerformanceEntry
      ^
Failed to compile application.

I'm trying to use window.fetch but I continue to get a return of _Response instead of window.Response. Am I missing something simple?

Future<Response> fetchTest() async { return window.fetch('https://api.github.com/users/gawmanarnar'); }

Error: Expected a value of type 'window.Response', but got one of type '_Response'

import 'package:js_bindings/js_bindings.dart';

Future<void> getPorts() async {
  final ports = await window.navigator.serial.getPorts();
  print('${ports.length}');
}

results in the following error message:

Error: Expected a value of type 'FutureOr<List<JavaScriptObject>>?', but got one of type 'List<dynamic>'
    at Object.throw_ [as throw] (http://localhost:54159/dart_sdk.js:5067:11)
    at Object.castError (http://localhost:54159/dart_sdk.js:5026:15)
    at Object.cast [as as] (http://localhost:54159/dart_sdk.js:5351:17)
    at dart.NullableType.new.as (http://localhost:54159/dart_sdk.js:6911:60)
    at http://localhost:54159/dart_sdk.js:62554:139

Flutter 2.10.5 and 3.0.2 both give the same result (pubspec.yaml "sdk" field updated accordingly to 2.16.2 or 2.17.3)

Per @jodinathan request in this comment, I will test and confirm that .keys and .values also work for WebMidi API "maps alikes' input and output properties of MIDIAccess

Hi thank you for making this fantastic package!

Using the latest 0.0.4+4 and master channel on Flutter seems to work fine. But I'm trying to use this with Chrome for WebMidi and I'm stuck in trying to figure out how to iterate over the MIDIInputMap map. eg I'd would like to do something like:

Future<void> _initMidi() async {
    final a = await html.window.navigator.requestMIDIAccess();
    print('got MIdiAccess: ${a.inputs}');
    for (var i in a.inputs) {
      print('midi input:$i');
    }
  }

but the MIDIInputMap is not a iterable and I can't see any extensions on it to allow iterating over the underlying JS object?

Affects "clean" environments.

https://github.com/jodinathan/js_bindings/blob/f73540b4b245402e063d50c6bc851344576ec32f/tool/crawler/build.dart#L120

Wonder if I could get any help/example regarding ShareData call

So I have an image that I want to share using it. I have it both as an ByteData and Uint8List:

ui.Image image = await boundary.toImage();
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();

Now when it comes to creating the Iterable<File> to pass into the ShareData is where I get confused.

import 'package:js_bindings/js_bindings.dart' as js;

js.JsIterable<js.File> jsObject = js.JsIterable(   ..something in here I guess?   );

I think the part that's throwing me off if I create an Iterable from flutter core that's not the one this is looking for. But it's not exacly clear how to initialize a JsIterable to be used by this function. Sorry if a bit of a noob question the interop is making my head spin.

I was just trying some variants discussed in:

https://github.com/dart-lang/sdk/issues/33248

The best I could achieve was:

StdOut: Warning: The 'dart2js' entrypoint script is deprecated, please use 'dart compile js' instead. org-dartlang-app:///web/main.dart@346+17: Error: The method 'requestMidiAccess' isn't defined for the class 'Navigator'.

• 'Navigator' is from 'package:js_bindings/bindings/html.dart' ('org-dartlang-app:///packages/js_bindings/bindings/html.dart'). Error: Compilation failed.

my code is:

import 'package:js_bindings/js_bindings.dart';
import 'package:js/js.dart';
import 'package:js/js_util.dart' as jsutil;
...
  final opts = MIDIOptions(sysex: true, software: false);
  final a = await window.navigator.requestMidiAccess(opts);
...

Not sure if it is my problem or the library's.

An example that is known to work would help.

import 'package:js_bindings/js_bindings.dart';

void main() {
  var init = RequestInit(
      method: 'GET',
      referrer: '',
      referrerPolicy: ReferrerPolicy.origin,
      mode: RequestMode.cors,
      credentials: RequestCredentials.omit,
      cache: RequestCache.noCache,
      redirect: RequestRedirect.follow,
      integrity: '',
      keepalive: true);
}

This results in: JSNoSuchMethodError (TypeError: Cannot read properties of undefined (reading '|staticInteropFactoryStub'))

I'm using the latest package version 0.0.6.

Today the builders use too much maps and dynamic calls because of how we handle the spec json files.
A better way would be turn the spec into classes in Dart so the builders are better organized.

I couldn't find an official IDL-like file for the builtin JS (ecmascript) stuff like we use here in this package for the W3C bindings.

So today we have a few ecmascript stuff like Reflect that are manually added to the manual.dart file.

Even so, we need to find a way to automate it through a builder.

There are few options right now:

• Use MDN website as source do automation: not reliable. It is good for documentation but not for spec because it is hand made
• Read the AST of TypeScript: Very good for spec, too much work to start and we would still use MDN for documentation. However, this could also open a door to translating TS spec files (.d.ts) to Dart