[connectivity_for_web] Fix JS Interop in release mode. (flutter#2869)

* Switch to dart:html window.navigator.connection instead of package:js JS-interop.
* Overwrite connection.onchange instead of listening to connection.onChange Stream (prevents multiple subscriptions after hot-reload).
* Cleaned up old code related to generating the JS facade.

Author: ditman

packages/connectivity/connectivity_for_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.1
+
+* Use NetworkInformation API from dart:html, instead of the JS-interop version.
+
 ## 0.3.0
 
 * Rename from "experimental_connectivity_web" to "connectivity_for_web", and move to flutter/plugins master.

packages/connectivity/connectivity_for_web/lib/src/generated/network_information_types.dart

@@ -1,28 +1,29 @@
 import 'dart:async';
+import 'dart:html' as html show window, NetworkInformation;
+import 'dart:js';
+import 'dart:js_util';
 
 import 'package:connectivity_platform_interface/connectivity_platform_interface.dart';
 import 'package:connectivity_for_web/connectivity_for_web.dart';
 import 'package:flutter/foundation.dart';
-import 'package:js/js.dart';
 
-import 'generated/network_information_types.dart' as dom;
 import 'utils/connectivity_result.dart';
 
 /// The web implementation of the ConnectivityPlatform of the Connectivity plugin.
 class NetworkInformationApiConnectivityPlugin extends ConnectivityPlugin {
-  final dom.NetworkInformation _networkInformation;
+  final html.NetworkInformation _networkInformation;
 
   /// A check to determine if this version of the plugin can be used.
-  static bool isSupported() => dom.navigator?.connection != null;
+  static bool isSupported() => html.window.navigator.connection != null;
 
   /// The constructor of the plugin.
   NetworkInformationApiConnectivityPlugin()
-      : this.withConnection(dom.navigator?.connection);
+      : this.withConnection(html.window.navigator.connection);
 
   /// Creates the plugin, with an override of the NetworkInformation object.
   @visibleForTesting
   NetworkInformationApiConnectivityPlugin.withConnection(
-      dom.NetworkInformation connection)
+      html.NetworkInformation connection)
       : _networkInformation = connection;
 
   /// Checks the connection status of the device.
@@ -31,18 +32,30 @@ class NetworkInformationApiConnectivityPlugin extends ConnectivityPlugin {
     return networkInformationToConnectivityResult(_networkInformation);
   }
 
-  StreamController<ConnectivityResult> _connectivityResult;
+  StreamController<ConnectivityResult> _connectivityResultStreamController;
+  Stream<ConnectivityResult> _connectivityResultStream;
 
   /// Returns a Stream of ConnectivityResults changes.
   @override
   Stream<ConnectivityResult> get onConnectivityChanged {
-    if (_connectivityResult == null) {
-      _connectivityResult = StreamController<ConnectivityResult>();
-      _networkInformation.onchange = allowInterop((_) {
-        _connectivityResult
+    if (_connectivityResultStreamController == null) {
+      _connectivityResultStreamController =
+          StreamController<ConnectivityResult>();
+      setProperty(_networkInformation, 'onchange', allowInterop((_) {
+        _connectivityResultStreamController
             .add(networkInformationToConnectivityResult(_networkInformation));
-      });
+      }));
+      // TODO: Implement the above with _networkInformation.onChange:
+      // _networkInformation.onChange.listen((_) {
+      //   _connectivityResult
+      //       .add(networkInformationToConnectivityResult(_networkInformation));
+      // });
+      // Once we can detect when to *cancel* a subscription to the _networkInformation
+      // onChange Stream upon hot restart.
+      // https://github.com/dart-lang/sdk/issues/42679
+      _connectivityResultStream =
+          _connectivityResultStreamController.stream.asBroadcastStream();
     }
-    return _connectivityResult.stream;
+    return _connectivityResultStream;
   }
 }

packages/connectivity/connectivity_for_web/lib/src/network_information_api_connectivity_plugin.dart

@@ -1,27 +1,22 @@
+import 'dart:html' as html show NetworkInformation;
 import 'package:connectivity_platform_interface/connectivity_platform_interface.dart';
 
 /// Converts an incoming NetworkInformation object into the correct ConnectivityResult.
-//
-// We can't be more specific on the signature of this method because the API is odd,
-// data can come from a static value in the DOM, or as the 'target' of a DOM Event.
-//
-// If we type info as `NetworkInformation`, Dart will complain with:
-// "Uncaught Error: Expected a value of type 'NetworkInformation',
-// but got one of type 'NetworkInformation'"
 ConnectivityResult networkInformationToConnectivityResult(
-    dynamic /* NetworkInformation */ info) {
+  html.NetworkInformation info,
+) {
   if (info == null) {
     return ConnectivityResult.none;
   }
   if (info.downlink == 0 && info.rtt == 0) {
     return ConnectivityResult.none;
   }
-  if (info.type != null) {
-    return _typeToConnectivityResult(info.type);
-  }
   if (info.effectiveType != null) {
     return _effectiveTypeToConnectivityResult(info.effectiveType);
   }
+  if (info.type != null) {
+    return _typeToConnectivityResult(info.type);
+  }
   return ConnectivityResult.none;
 }
 

packages/connectivity/connectivity_for_web/lib/src/utils/connectivity_result.dart

@@ -1,6 +1,6 @@
 name: connectivity_for_web
 description: An implementation for the web platform of the Flutter `connectivity` plugin. This uses the NetworkInformation Web API, with a fallback to Navigator.onLine.
-version: 0.3.0
+version: 0.3.1
 homepage: https://github.com/ditman/plugins/tree/connectivity-web/packages/connectivity/experimental_connectivity_web
 
 flutter:
@@ -12,7 +12,6 @@ flutter:
 
 dependencies:
   connectivity_platform_interface: ^1.0.3
-  js: ^0.6.1+1
   flutter_web_plugins:
     sdk: flutter
   flutter:
@@ -25,6 +24,7 @@ dev_dependencies:
   flutter_test:
     sdk: flutter
   e2e: ^0.2.4+3
+  mockito: ^4.1.1
 
 environment:
   sdk: ">=2.6.0 <3.0.0"

packages/connectivity/connectivity_for_web/pubspec.yaml

@@ -3,6 +3,8 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:connectivity_platform_interface/connectivity_platform_interface.dart';
 import 'package:connectivity_for_web/src/network_information_api_connectivity_plugin.dart';
 
+import 'package:mockito/mockito.dart';
+
 import 'src/connectivity_mocks.dart';
 
 void main() {
@@ -16,11 +18,12 @@ void main() {
       num rtt = 50,
       ConnectivityResult expected,
     }) {
-      MockNetworkInformation connection = MockNetworkInformation(
-          type: type,
-          effectiveType: effectiveType,
-          downlink: downlink,
-          rtt: rtt);
+      final connection = MockNetworkInformation();
+      when(connection.type).thenReturn(type);
+      when(connection.effectiveType).thenReturn(effectiveType);
+      when(connection.downlink).thenReturn(downlink);
+      when(connection.rtt).thenReturn(downlink);
+
       NetworkInformationApiConnectivityPlugin plugin =
           NetworkInformationApiConnectivityPlugin.withConnection(connection);
       expect(plugin.checkConnectivity(), completion(equals(expected)));
@@ -53,16 +56,16 @@ void main() {
 
   group('get onConnectivityChanged', () {
     test('puts change events in a Stream', () async {
-      MockNetworkInformation connection =
-          MockNetworkInformation(effectiveType: '4g', downlink: 10, rtt: 50);
+      final connection = MockNetworkInformation();
       NetworkInformationApiConnectivityPlugin plugin =
           NetworkInformationApiConnectivityPlugin.withConnection(connection);
 
       Stream<ConnectivityResult> results = plugin.onConnectivityChanged;
 
       // Fake a disconnect-reconnect
-      connection.mockChangeValue(downlink: 0, rtt: 0);
-      connection.mockChangeValue(downlink: 10, rtt: 50);
+      await connection.mockChangeValue(downlink: 0, rtt: 0);
+      await connection.mockChangeValue(
+          downlink: 10, rtt: 50, effectiveType: '4g');
 
       // The stream of results is infinite, so we need to .take(2) for this test to complete.
       expect(

packages/connectivity/connectivity_for_web/test/lib/main.dart

@@ -1,60 +1,25 @@
 import 'dart:html';
 
-import 'package:connectivity_for_web/src/generated/network_information_types.dart'
-    as dom;
+import 'package:mockito/mockito.dart';
 
 /// A Mock implementation of the NetworkInformation API that allows
 /// for external modification of its values.
-class MockNetworkInformation extends dom.NetworkInformation {
-  @override
-  String type;
-
-  @override
-  String effectiveType;
-
-  @override
-  num downlink;
-
-  @override
-  num rtt;
-
-  @override
-  EventListener onchange;
-
-  /// Constructor of mocked instances...
-  MockNetworkInformation({
-    this.type,
-    this.effectiveType,
-    this.downlink,
-    this.rtt,
-  });
+class MockNetworkInformation extends Mock implements NetworkInformation {
+  /// The callback that will fire after the network information values change.
+  Function onchange;
 
   /// Changes the desired values, and triggers the change event listener.
   void mockChangeValue({
     String type,
     String effectiveType,
     num downlink,
     num rtt,
-  }) {
-    this.type = type ?? this.type;
-    this.effectiveType = effectiveType ?? this.effectiveType;
-    this.downlink = downlink ?? this.downlink;
-    this.rtt = rtt ?? this.rtt;
+  }) async {
+    when(this.type).thenAnswer((_) => type);
+    when(this.effectiveType).thenAnswer((_) => effectiveType);
+    when(this.downlink).thenAnswer((_) => downlink);
+    when(this.rtt).thenAnswer((_) => rtt);
 
     onchange(Event('change'));
   }
-
-  @override
-  void addEventListener(String type, listener, [bool useCapture]) {}
-
-  @override
-  bool dispatchEvent(Event event) {
-    return true;
-  }
-
-  @override
-  Events get on => null;
-
-  @override
-  void removeEventListener(String type, listener, [bool useCapture]) {}
 }

packages/connectivity/connectivity_for_web/test/lib/src/connectivity_mocks.dart

@@ -1,6 +1,6 @@
 name: connectivity_web_example
 description: Example web app for the connectivity plugin 
-version: 0.1.0
+version: 0.1.1
 homepage: https://github.com/flutter/plugins/tree/master/packages/connectivity/connectivity_web
 
 dependencies:
@@ -18,6 +18,7 @@ dev_dependencies:
   flutter_driver:
     sdk: flutter
   e2e: ^0.2.4+3
+  mockito: ^4.1.1
 
 environment:
   sdk: ">=2.6.0 <3.0.0"