[google_maps_flutter] Refactor the JavaScript interaction and verify integration tests

packages/google_maps_flutter/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.1.15
+
+* Refactor the JavaScript interaction layer by introducing `GoogleMapsJsBridge`,
+  replacing direct `WebViewController` calls.
+* Update `webview_flutter_lwe` to ^0.5.3.
+* Raise the SDK constraint to match `webview_flutter_lwe` 0.5.3
+  (Dart ^3.8.0, Flutter >=3.32.0).
+* Fix info window content being rendered with stray quote characters.
+* Cancel the bridge event subscription on dispose to avoid a late event
+  throwing a `StateError` on an already-closed stream.
+* Verify integration tests pass against upstream google_maps_flutter v2.17.0.
+
 ## 0.1.14
 
 * Update google_maps_flutter to 2.16.0.

packages/google_maps_flutter/README.md

@@ -21,7 +21,7 @@ This package is not an _endorsed_ implementation of `google_maps_flutter`. There
 ```yaml
 dependencies:
   google_maps_flutter: ^2.16.0
-  google_maps_flutter_tizen: ^0.1.14
+  google_maps_flutter_tizen: ^0.1.15
 ```
 
 For detailed usage, see https://pub.dev/packages/google_maps_flutter#sample-usage.

packages/google_maps_flutter/lib/google_maps_flutter_tizen.dart

@@ -7,7 +7,6 @@ library google_maps_flutter_tizen;
 
 import 'dart:async';
 import 'dart:convert';
-import 'dart:io';
 import 'dart:ui' as ui;
 
 import 'package:flutter/foundation.dart';
@@ -19,6 +18,7 @@ import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platf
 import 'package:stream_transform/stream_transform.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
+import 'src/google_maps_js_bridge.dart';
 import 'src/util.dart' as util;
 
 part 'src/circle.dart';

packages/google_maps_flutter/lib/src/circle.dart

@@ -12,11 +12,11 @@ class CircleController {
     required util.GCircle circle,
     bool consumeTapEvents = false,
     ui.VoidCallback? onTap,
-    WebViewController? controller,
-  })  : _circle = circle,
-        _consumeTapEvents = consumeTapEvents,
-        tapEvent = onTap {
-    _addCircleEvent(controller);
+    required GoogleMapsJsBridge bridge,
+  }) : _circle = circle,
+       _consumeTapEvents = consumeTapEvents,
+       tapEvent = onTap {
+    _addCircleEvent(bridge);
   }
 
   util.GCircle? _circle;
@@ -25,10 +25,13 @@ class CircleController {
   /// Circle component's tap event.
   ui.VoidCallback? tapEvent;
 
-  Future<void> _addCircleEvent(WebViewController? controller) async {
-    final String command =
-        "$_circle.addListener('click', (event) => CircleClick.postMessage(JSON.stringify(${_circle?.id})));";
-    await controller!.runJavaScript(command);
+  Future<void> _addCircleEvent(GoogleMapsJsBridge bridge) async {
+    await bridge.addListener(
+      JsRef(_circle.toString()),
+      'click',
+      'CircleClick',
+      'JSON.stringify(${_circle?.id})',
+    );
   }
 
   /// Returns `true` if this Controller will use its own `onTap` handler to consume events.

packages/google_maps_flutter/lib/src/circles.dart

@@ -8,10 +8,13 @@ part of '../google_maps_flutter_tizen.dart';
 /// This class manages all the [CircleController]s associated to a [GoogleMapController].
 class CirclesController extends GeometryController {
   /// Initialize the cache. The [StreamController] comes from the [GoogleMapController], and is shared with other controllers.
-  CirclesController({required StreamController<MapEvent<Object?>> stream})
-      : _streamController = stream,
-        _circleIdToController = <CircleId, CircleController>{},
-        _idToCircleId = <int, CircleId>{};
+  CirclesController({
+    required StreamController<MapEvent<Object?>> stream,
+    required GoogleMapsJsBridge bridge,
+  }) : _streamController = stream,
+       _bridge = bridge,
+       _circleIdToController = <CircleId, CircleController>{},
+       _idToCircleId = <int, CircleId>{};
 
   // A cache of [CircleController]s indexed by their [CircleId].
   final Map<CircleId, CircleController> _circleIdToController;
@@ -20,6 +23,8 @@ class CirclesController extends GeometryController {
   // The stream over which circles broadcast their events
   final StreamController<MapEvent<Object?>> _streamController;
 
+  final GoogleMapsJsBridge _bridge;
+
   /// Adds a set of [Circle] objects to the cache.
   ///
   /// Wraps each [Circle] into its corresponding [CircleController].
@@ -35,14 +40,14 @@ class CirclesController extends GeometryController {
     final util.GCircleOptions populationOptions = _circleOptionsFromCircle(
       circle,
     );
-    final util.GCircle gCircle = util.GCircle(populationOptions);
+    final util.GCircle gCircle = util.GCircle(_bridge, populationOptions);
     final CircleController controller = CircleController(
       circle: gCircle,
       consumeTapEvents: circle.consumeTapEvents,
       onTap: () {
         _onCircleTap(circle.circleId);
       },
-      controller: util.webController,
+      bridge: _bridge,
     );
     _idToCircleId[gCircle.id] = circle.circleId;
     _circleIdToController[circle.circleId] = controller;

packages/google_maps_flutter/lib/src/convert.dart

@@ -216,23 +216,24 @@ String _mapStyles(String? mapStyleJson) {
   if (mapStyleJson != null) {
     try {
       json
-          .decode(
-            mapStyleJson,
-            reviver: (Object? key, Object? value) {
-              if (value is Map &&
-                  _isJsonMapStyle(value as Map<String, Object?>)) {
-                return MapTypeStyle()
-                  ..elementType = value['elementType'] as String?
-                  ..featureType = value['featureType'] as String?
-                  ..stylers = (value['stylers']! as List<dynamic>)
-                      .map<dynamic>((dynamic e) => e)
-                      .toList();
-              }
-              return value;
-            },
-          )
-          .cast<MapTypeStyle>()
-          .toList() as List<MapTypeStyle>;
+              .decode(
+                mapStyleJson,
+                reviver: (Object? key, Object? value) {
+                  if (value is Map &&
+                      _isJsonMapStyle(value as Map<String, Object?>)) {
+                    return MapTypeStyle()
+                      ..elementType = value['elementType'] as String?
+                      ..featureType = value['featureType'] as String?
+                      ..stylers = (value['stylers']! as List<dynamic>)
+                          .map<dynamic>((dynamic e) => e)
+                          .toList();
+                  }
+                  return value;
+                },
+              )
+              .cast<MapTypeStyle>()
+              .toList()
+          as List<MapTypeStyle>;
     } catch (e) {
       throw MapStyleException('Invalid Map Style JSON: $e');
     }
@@ -306,9 +307,11 @@ util.GInfoWindowOptions? _infoWindowOptionsFromMarker(Marker marker) {
     return null;
   }
 
-  // Add an outer wrapper to the contents of the infowindow
+  // Add an outer wrapper to the contents of the infowindow. The content is
+  // JSON-encoded by its consumers (GInfoWindowOptions.toString and
+  // GInfoWindow._setContent), so it must be raw, unquoted HTML here.
   final StringBuffer buffer = StringBuffer();
-  buffer.write('\'<div id="marker-${marker.markerId.value}-infowindow">');
+  buffer.write('<div id="marker-${marker.markerId.value}-infowindow">');
   if (markerTitle.isNotEmpty) {
     buffer.write('<h3 class="infowindow-title">');
     buffer.write(markerTitle);
@@ -319,7 +322,7 @@ util.GInfoWindowOptions? _infoWindowOptionsFromMarker(Marker marker) {
     buffer.write(markerSnippet);
     buffer.write('</div>');
   }
-  buffer.write("</div>'");
+  buffer.write('</div>');
 
   // Need to add Click Event to infoWindow's content
   return util.GInfoWindowOptions()
@@ -461,7 +464,8 @@ util.GPolygonOptions _polygonOptionsFromPolygon(Polygon polygon) {
 bool _isPolygonClockwise(List<LatLng> path) {
   double direction = 0.0;
   for (int i = 0; i < path.length; i++) {
-    direction = direction +
+    direction =
+        direction +
         ((path[(i + 1) % path.length].latitude - path[i].latitude) *
             (path[(i + 1) % path.length].longitude + path[i].longitude));
   }
@@ -506,7 +510,8 @@ util.GGroundOverlayOptions? _groundOverlayOptionsFromGroundOverlay(
   }
   return util.GGroundOverlayOptions()
     ..url = "'$imageUrl'"
-    ..bounds = '{south:${bounds.southwest.latitude},'
+    ..bounds =
+        '{south:${bounds.southwest.latitude},'
         ' west:${bounds.southwest.longitude},'
         ' north:${bounds.northeast.latitude},'
         ' east:${bounds.northeast.longitude}}'