[web] Migrate the bulk of JS interop to JS types. (#123286)

packages/flutter/lib/src/foundation/_capabilities_web.dart

@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:js_interop';
 import 'package:js/js.dart';
 
 // This value is set by the engine. It is used to determine if the application is
 // using canvaskit.
 @JS('window.flutterCanvasKit')
-external Object? get _windowFlutterCanvasKit;
+external JSAny? get _windowFlutterCanvasKit;
 
 /// The web implementation of [isCanvasKit]
 bool get isCanvasKit => _windowFlutterCanvasKit != null;

packages/flutter/lib/src/painting/_network_image_web.dart

@@ -3,11 +3,10 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:typed_data';
+import 'dart:js_interop';
 import 'dart:ui' as ui;
 
 import 'package:flutter/foundation.dart';
-import 'package:js/js.dart';
 
 import '../services/dom.dart';
 import 'image_provider.dart' as image_provider;
@@ -18,7 +17,7 @@ typedef HttpRequestFactory = DomXMLHttpRequest Function();
 
 /// Default HTTP client.
 DomXMLHttpRequest _httpClient() {
-  return createDomXMLHttpRequest();
+  return DomXMLHttpRequest();
 }
 
 /// Creates an overridable factory function.
@@ -148,7 +147,7 @@ class NetworkImage
         });
       }
 
-      request.addEventListener('load', allowInterop((DomEvent e) {
+      request.addEventListener('load', createDomEventListener((DomEvent e) {
         final int? status = request.status;
         final bool accepted = status! >= 200 && status < 300;
         final bool fileUri = status == 0; // file:// URIs have status of 0.
@@ -166,13 +165,14 @@ class NetworkImage
         }
       }));
 
-      request.addEventListener('error', allowInterop(completer.completeError));
+      request.addEventListener('error',
+          createDomEventListener(completer.completeError));
 
       request.send();
 
       await completer.future;
 
-      final Uint8List bytes = (request.response as ByteBuffer).asUint8List();
+      final Uint8List bytes = (request.response! as JSArrayBuffer).toDart.asUint8List();
 
       if (bytes.lengthInBytes == 0) {
         throw image_provider.NetworkImageLoadException(

packages/flutter/lib/src/widgets/_platform_selectable_region_context_menu_web.dart

@@ -5,7 +5,6 @@
 import 'dart:ui' as ui;
 
 import 'package:flutter/rendering.dart';
-import 'package:js/js.dart';
 
 import '../services/dom.dart';
 import 'basic.dart';
@@ -115,7 +114,7 @@ class PlatformSelectableRegionContextMenu extends StatelessWidget {
       sheet.insertRule(_kClassRule, 0);
       sheet.insertRule(_kClassSelectionRule, 1);
 
-      htmlElement.addEventListener('mousedown', allowInterop((DomEvent event) {
+      htmlElement.addEventListener('mousedown', createDomEventListener((DomEvent event) {
         final DomMouseEvent mouseEvent = event as DomMouseEvent;
         if (mouseEvent.button != _kRightClickButton) {
           return;

packages/flutter/test/painting/_test_http_request.dart

@@ -2,19 +2,25 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:js_interop';
+
 import 'package:flutter/src/services/dom.dart';
 import 'package:js/js.dart';
 import 'package:js/js_util.dart' as js_util;
 
-void createGetter<T>(Object mock, String key, T Function() get) {
+/// Defines a new property on an Object.
+@JS('Object.defineProperty')
+external JSVoid objectDefineProperty(JSAny o, JSString symbol, JSAny desc);
+
+void createGetter(JSAny mock, String key, JSAny? Function() get) {
   objectDefineProperty(
       mock,
-      key,
+      key.toJS,
       js_util.jsify(
-          <dynamic, dynamic>{
-            'get': allowInterop(() => get())
+          <String, Object>{
+            'get': () { return get(); }.toJS
           }
-      ));
+      ) as JSAny);
 }
 
 @JS()
@@ -22,46 +28,47 @@ void createGetter<T>(Object mock, String key, T Function() get) {
 @anonymous
 class DomXMLHttpRequestMock {
   external factory DomXMLHttpRequestMock({
-    void Function(String method, String url, bool async)? open,
-    String responseType = 'invalid',
-    int timeout = 10,
-    bool withCredentials = false,
-    void Function()? send,
-    void Function(String name, String value)? setRequestHeader,
-    void Function(String type, DomEventListener listener) addEventListener,
+    JSFunction? open,
+    JSString responseType,
+    JSNumber timeout,
+    JSBoolean withCredentials,
+    JSFunction? send,
+    JSFunction? setRequestHeader,
+    JSFunction addEventListener,
   });
 }
 
 class TestHttpRequest {
   TestHttpRequest() {
     _mock = DomXMLHttpRequestMock(
-        open: allowInterop(open),
-        send: allowInterop(send),
-        setRequestHeader: allowInterop(setRequestHeader),
-        addEventListener: allowInterop(addEventListener),
+        open: open.toJS,
+        send: send.toJS,
+        setRequestHeader: setRequestHeader.toJS,
+        addEventListener: addEventListener.toJS,
     );
-    createGetter(_mock, 'headers', () => headers);
-    createGetter(_mock, 'responseHeaders', () => responseHeaders);
-    createGetter(_mock, 'status', () => status);
-    createGetter(_mock, 'response', () => response);
+    createGetter(_mock, 'headers', () => js_util.jsify(headers) as JSAny);
+    createGetter(_mock,
+        'responseHeaders', () => js_util.jsify(responseHeaders) as JSAny);
+    createGetter(_mock, 'status', () => status.toJS);
+    createGetter(_mock, 'response', () => js_util.jsify(response) as JSAny);
   }
 
   late DomXMLHttpRequestMock _mock;
   MockEvent? mockEvent;
   Map<String, String> headers = <String, String>{};
   int status = -1;
-  dynamic response;
+  Object? response;
 
   Map<String, String> get responseHeaders => headers;
-  void open(String method, String url, bool async) {}
-  void send() {}
-  void setRequestHeader(String name, String value) {
-    headers[name] = value;
+  JSVoid open(JSString method, JSString url, JSBoolean async) {}
+  JSVoid send() {}
+  JSVoid setRequestHeader(JSString name, JSString value) {
+    headers[name.toDart] = value.toDart;
   }
 
-  void addEventListener(String type, DomEventListener listener) {
-    if (type == mockEvent?.type) {
-      listener(mockEvent!.event);
+  JSVoid addEventListener(JSString type, DomEventListener listener) {
+    if (type.toDart == mockEvent?.type) {
+      (listener.toDart as DartDomEventListener)(mockEvent!.event);
     }
   }