fix: Use web package to access web APIs

Author: dshukertjr

packages/gotrue/lib/src/broadcast_web.dart

@@ -1,28 +1,37 @@
+import 'dart:async';
 import 'dart:convert';
-import 'dart:html' as html;
-import 'dart:js_util' as js_util;
+import 'dart:js_interop';
 
 import 'package:gotrue/src/types/types.dart';
 import 'package:logging/logging.dart';
+import 'package:web/web.dart' as web;
 
 final _log = Logger('supabase.auth');
 
 BroadcastChannel getBroadcastChannel(String broadcastKey) {
-  final broadcast = html.BroadcastChannel(broadcastKey);
-  return (
-    onMessage: broadcast.onMessage.map((event) {
-      final dataMap = js_util.dartify(event.data);
+  final broadcast = web.BroadcastChannel(broadcastKey);
+  final controller = StreamController<Map<String, dynamic>>();
+
+  broadcast.addEventListener(
+    'message',
+    (web.Event event) {
+      if (event is web.MessageEvent) {
+        final dataMap = event.data.dartify();
+        controller.add(json.decode(json.encode(dataMap)));
+      }
+    } as web.EventListener,
+  );
 
-      // some parts have the wrong map type. This is an easy workaround and
-      // should be efficient enough for the small session and user data
-      return json.decode(json.encode(dataMap));
-    }),
+  return (
+    onMessage: controller.stream,
     postMessage: (message) {
       _log.finest('Broadcasting message: $message');
       _log.fine('Broadcasting event: ${message['event']}');
-      final jsMessage = js_util.jsify(message);
-      broadcast.postMessage(jsMessage);
+      broadcast.postMessage(message.jsify() as JSAny);
+    },
+    close: () {
+      broadcast.close();
+      controller.close();
     },
-    close: broadcast.close,
   );
 }

packages/gotrue/pubspec.yaml

@@ -17,6 +17,7 @@ dependencies:
   rxdart: '>=0.27.7 <0.29.0'
   meta: ^1.7.0
   logging: ^1.2.0
+  web: ^1.0.0
 
 dev_dependencies:
   dart_jsonwebtoken: ^2.4.1

packages/gotrue/test/src/broadcast_web_test.dart

@@ -0,0 +1,57 @@
+@TestOn('browser')
+import 'dart:async';
+
+import 'package:gotrue/src/broadcast_web.dart';
+import 'package:gotrue/src/types/types.dart';
+import 'package:test/test.dart';
+
+void main() {
+  group('getBroadcastChannel', () {
+    late BroadcastChannel channel1;
+    late BroadcastChannel channel2;
+
+    setUp(() {
+      channel1 = getBroadcastChannel('test-channel');
+      channel2 = getBroadcastChannel('test-channel');
+    });
+
+    tearDown(() {
+      channel1.close();
+      channel2.close();
+    });
+
+    test('can send and receive messages between channels', () async {
+      final completer = Completer<Map<String, dynamic>>();
+
+      // Listen for messages on channel2
+      final subscription = channel2.onMessage.listen((message) {
+        completer.complete(message);
+      });
+
+      // Send message from channel1
+      final testMessage = {
+        'event': 'test-event',
+        'data': {'foo': 'bar'}
+      };
+      channel1.postMessage(testMessage);
+
+      // Wait for the message to be received
+      final receivedMessage = await completer.future;
+
+      expect(receivedMessage['event'], equals('test-event'));
+      expect(receivedMessage['data']['foo'], equals('bar'));
+
+      await subscription.cancel();
+    });
+
+    test('can close channels', () async {
+      channel1.close();
+
+      // Verify that sending messages after closing throws
+      expect(
+        () => channel1.postMessage({'event': 'test'}),
+        throwsA(anything),
+      );
+    });
+  });
+}