[google_maps_flutter_web] Migrate to package:web (#5254)

This PR migrates `google_maps_flutter_web` from `dart:html` to `package:web`.

The `google_maps` package does provide a beta version with support for `package:web`, which is currently what this PR is depending on. Before landing this change, we should change the dependency to the stable release version of that package.

Fixes flutter/flutter#137374

*If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].*
N/A

Author: navaronbracke

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,6 +1,7 @@
-## NEXT
+## 0.5.5
 
-* Updates minimum supported SDK version to Flutter 3.13/Dart 3.1.
+* Migrates to `dart:js_interop` and `package:web` APIs.
+* Updates minimum supported SDK version to Flutter 3.19/Dart 3.3.
 
 ## 0.5.4+3
 

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/google_maps_controller_test.dart

@@ -3,13 +3,14 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' as html;
 
 import 'package:flutter/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
+// ignore: implementation_imports
+import 'package:google_maps_flutter_web/src/utils.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:mockito/annotations.dart';
 import 'package:mockito/mockito.dart';
@@ -230,7 +231,7 @@ void main() {
         polygons = MockPolygonsController();
         polylines = MockPolylinesController();
         tileOverlays = MockTileOverlaysController();
-        map = gmaps.GMap(html.DivElement());
+        map = gmaps.GMap(createDivElement());
       });
 
       testWidgets('listens to map events', (WidgetTester tester) async {
@@ -471,7 +472,7 @@ void main() {
 
       setUp(() {
         map = gmaps.GMap(
-          html.DivElement(),
+          createDivElement(),
           gmaps.MapOptions()
             ..zoom = 10
             ..center = gmaps.LatLng(0, 0),

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/marker_test.dart

@@ -3,11 +3,12 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' as html;
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
+// ignore: implementation_imports
+import 'package:google_maps_flutter_web/src/utils.dart';
 import 'package:integration_test/integration_test.dart';
 
 /// Test Markers
@@ -123,7 +124,7 @@ void main() {
 
     testWidgets('showInfoWindow', (WidgetTester tester) async {
       final gmaps.InfoWindow infoWindow = gmaps.InfoWindow();
-      final gmaps.GMap map = gmaps.GMap(html.DivElement());
+      final gmaps.GMap map = gmaps.GMap(createDivElement());
       marker.set('map', map);
       final MarkerController controller = MarkerController(
         marker: marker,
@@ -138,7 +139,7 @@ void main() {
 
     testWidgets('hideInfoWindow', (WidgetTester tester) async {
       final gmaps.InfoWindow infoWindow = gmaps.InfoWindow();
-      final gmaps.GMap map = gmaps.GMap(html.DivElement());
+      final gmaps.GMap map = gmaps.GMap(createDivElement());
       marker.set('map', map);
       final MarkerController controller = MarkerController(
         marker: marker,
@@ -156,7 +157,7 @@ void main() {
 
       setUp(() {
         final gmaps.InfoWindow infoWindow = gmaps.InfoWindow();
-        final gmaps.GMap map = gmaps.GMap(html.DivElement());
+        final gmaps.GMap map = gmaps.GMap(createDivElement());
         marker.set('map', map);
         controller = MarkerController(marker: marker, infoWindow: infoWindow);
       });

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/markers_test.dart

@@ -4,16 +4,18 @@
 
 import 'dart:async';
 import 'dart:convert';
-import 'dart:html' as html;
 import 'dart:typed_data';
 import 'dart:ui';
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
+// ignore: implementation_imports
+import 'package:google_maps_flutter_web/src/utils.dart';
 import 'package:http/http.dart' as http;
 import 'package:integration_test/integration_test.dart';
+import 'package:web/web.dart';
 
 import 'resources/icon_image_base64.dart';
 
@@ -28,7 +30,7 @@ void main() {
     setUp(() {
       events = StreamController<MapEvent<Object?>>();
       controller = MarkersController(stream: events);
-      map = gmaps.GMap(html.DivElement());
+      map = gmaps.GMap(createDivElement());
       controller.bindToMap(123, map);
     });
 
@@ -274,11 +276,11 @@ void main() {
       controller.addMarkers(markers);
 
       expect(controller.markers.length, 1);
-      final html.HtmlElement? content = controller.markers[const MarkerId('1')]
-          ?.infoWindow?.content as html.HtmlElement?;
-      expect(content?.innerHtml, contains('title for test'));
+      final HTMLElement? content = controller
+          .markers[const MarkerId('1')]?.infoWindow?.content as HTMLElement?;
+      expect(content?.innerHTML, contains('title for test'));
       expect(
-          content?.innerHtml,
+          content?.innerHTML,
           contains(
             '<a href="https://www.google.com">Go to Google &gt;&gt;&gt;</a>',
           ));
@@ -299,8 +301,8 @@ void main() {
       controller.addMarkers(markers);
 
       expect(controller.markers.length, 1);
-      final html.HtmlElement? content = controller.markers[const MarkerId('1')]
-          ?.infoWindow?.content as html.HtmlElement?;
+      final HTMLElement? content = controller
+          .markers[const MarkerId('1')]?.infoWindow?.content as HTMLElement?;
 
       content?.click();
 

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/overlay_test.dart

@@ -3,13 +3,14 @@
 // found in the LICENSE file.
 
 import 'dart:convert';
-import 'dart:html' as html;
+import 'dart:js_interop';
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
 import 'package:integration_test/integration_test.dart';
+import 'package:web/web.dart';
 
 import 'resources/tile16_base64.dart';
 
@@ -43,8 +44,10 @@ void main() {
       final gmaps.Size size = controller.gmMapType.tileSize!;
       expect(size.width, TileOverlayController.logicalTileSize);
       expect(size.height, TileOverlayController.logicalTileSize);
-      expect(controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, html.document),
-          null);
+      expect(
+        controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, document),
+        null,
+      );
     });
 
     testWidgets('produces image tiles', (WidgetTester tester) async {
@@ -55,16 +58,16 @@ void main() {
         ),
       );
 
-      final html.ImageElement img =
-          controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, html.document)!
-              as html.ImageElement;
+      final HTMLImageElement img =
+          controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, document)!
+              as HTMLImageElement;
       expect(img.naturalWidth, 0);
       expect(img.naturalHeight, 0);
       expect(img.hidden, true);
 
-      // Wait until the image is fully loaded and decoded before re-reading its attributes.
       await img.onLoad.first;
-      await img.decode();
+
+      await img.decode().toDart;
 
       expect(img.hidden, false);
       expect(img.naturalWidth, 16);
@@ -79,9 +82,9 @@ void main() {
         ),
       );
       {
-        final html.ImageElement img =
-            controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, html.document)!
-                as html.ImageElement;
+        final HTMLImageElement img =
+            controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, document)!
+                as HTMLImageElement;
         await null; // let `getTile` `then` complete
         expect(
           img.src,
@@ -95,10 +98,12 @@ void main() {
         tileProvider: TestTileProvider(),
       ));
       {
-        final html.ImageElement img =
-            controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, html.document)!
-                as html.ImageElement;
+        final HTMLImageElement img =
+            controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, document)!
+                as HTMLImageElement;
+
         await img.onLoad.first;
+
         expect(
           img.src,
           isNotEmpty,
@@ -109,7 +114,7 @@ void main() {
       controller.update(const TileOverlay(tileOverlayId: id));
       {
         expect(
-          controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, html.document),
+          controller.gmMapType.getTile!(gmaps.Point(0, 0), 0, document),
           null,
           reason: 'Setting a null tileProvider should work.',
         );

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/overlays_test.dart

@@ -3,17 +3,19 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' as html;
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps_flutter/google_maps_flutter.dart';
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart'
     hide GoogleMapController;
+// ignore: implementation_imports
+import 'package:google_maps_flutter_web/src/utils.dart';
 import 'package:integration_test/integration_test.dart';
 import 'package:mockito/annotations.dart';
 import 'package:mockito/mockito.dart';
+import 'package:web/web.dart';
 
 @GenerateNiceMocks(<MockSpec<dynamic>>[MockSpec<TileProvider>()])
 import 'overlays_test.mocks.dart';
@@ -38,13 +40,13 @@ void main() {
     /// 0.
     void probeTiles() {
       for (final gmaps.MapType? mapType in map.overlayMapTypes!.array!) {
-        mapType?.getTile!(gmaps.Point(0, 0), 0, html.document);
+        mapType?.getTile!(gmaps.Point(0, 0), 0, document);
       }
     }
 
     setUp(() {
       controller = TileOverlaysController();
-      map = gmaps.GMap(html.DivElement());
+      map = gmaps.GMap(createDivElement());
       controller.googleMap = map;
 
       tileProviders = <MockTileProvider>[

packages/google_maps_flutter/google_maps_flutter_web/example/integration_test/shapes_test.dart

@@ -3,14 +3,15 @@
 // found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' as html;
 import 'dart:ui';
 
 import 'package:flutter_test/flutter_test.dart';
 import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps/google_maps_geometry.dart' as geometry;
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
+// ignore: implementation_imports
+import 'package:google_maps_flutter_web/src/utils.dart';
 import 'package:integration_test/integration_test.dart';
 
 // This value is used when comparing the results of
@@ -25,7 +26,7 @@ void main() {
   late gmaps.GMap map;
 
   setUp(() {
-    map = gmaps.GMap(html.DivElement());
+    map = gmaps.GMap(createDivElement());
   });
 
   group('CirclesController', () {

packages/google_maps_flutter/google_maps_flutter_web/example/lib/main.dart

@@ -20,6 +20,9 @@ class MyApp extends StatefulWidget {
 class _MyAppState extends State<MyApp> {
   @override
   Widget build(BuildContext context) {
-    return const Text('Testing... Look at the console output for results!');
+    return const Directionality(
+      textDirection: TextDirection.ltr,
+      child: Text('Testing... Look at the console output for results!'),
+    );
   }
 }

packages/google_maps_flutter/google_maps_flutter_web/example/pubspec.yaml

@@ -3,21 +3,22 @@ publish_to: none
 
 # Tests require flutter beta or greater to run.
 environment:
-  sdk: ^3.1.0
-  flutter: ">=3.13.0"
+  sdk: ^3.3.0
+  flutter: ">=3.19.0"
 
 dependencies:
   flutter:
     sdk: flutter
   google_maps_flutter_platform_interface: ^2.4.0
   google_maps_flutter_web:
     path: ../
+  web: ^0.5.0
 
 dev_dependencies:
   build_runner: ^2.1.1
   flutter_test:
     sdk: flutter
-  google_maps: ^6.1.0
+  google_maps: ^7.1.0
   google_maps_flutter: ^2.2.0 # Needed for projection_test.dart
   http: ">=0.13.0 <2.0.0"
   integration_test:

packages/google_maps_flutter/google_maps_flutter_web/lib/google_maps_flutter_web.dart

@@ -6,8 +6,7 @@ library google_maps_flutter_web;
 
 import 'dart:async';
 import 'dart:convert';
-import 'dart:html' hide VoidCallback;
-import 'dart:js_util';
+import 'dart:js_interop';
 import 'dart:ui_web' as ui_web;
 
 import 'package:collection/collection.dart';
@@ -20,10 +19,14 @@ import 'package:google_maps/google_maps.dart' as gmaps;
 import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
 import 'package:sanitize_html/sanitize_html.dart';
 import 'package:stream_transform/stream_transform.dart';
+import 'package:web/web.dart';
 
+import 'src/dom_window_extension.dart';
 import 'src/google_maps_inspector_web.dart';
+import 'src/map_styler.dart';
 import 'src/third_party/to_screen_location/to_screen_location.dart';
 import 'src/types.dart';
+import 'src/utils.dart';
 
 part 'src/circle.dart';
 part 'src/circles.dart';