From 6dfb4b43f39649cb324d9f132fff9e65bc48ed2b Mon Sep 17 00:00:00 2001
From: Aran Donohue <aran@arandonohue.com>
Date: Fri, 21 Feb 2025 05:11:03 -0800
Subject: [PATCH] fix: Updates the grpc-web example to avoid dart:html (#748)

* update: Migrate off legacy JS/HTML apis

* update: use dart.library.js_interop in place of dart.library.html

* update: dart format xhr_transport.dart and update dart sdk to v3.4.0 in workflows

* update: use if instead of switch case in xhr_transport.dart

* update: upgrade web package to v1.1.0

* refactor: use Uint8List for sending data over XHR rather than Int8List

* refactor: eta-reduction of call to request.setRequestHeader

* Convert grpc-web example to package:web

---------

Co-authored-by: minoic <minoic2020@gmail.com>
Co-authored-by: Moritz <mosum@google.com>
---
 example/grpc-web/lib/app.dart  | 28 ++++++++++++++++++----------
 example/grpc-web/pubspec.yaml  |  1 +
 example/grpc-web/web/main.dart | 11 ++++-------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/example/grpc-web/lib/app.dart b/example/grpc-web/lib/app.dart
index c28c60e..8c0d982 100644
--- a/example/grpc-web/lib/app.dart
+++ b/example/grpc-web/lib/app.dart
@@ -14,9 +14,7 @@
 // limitations under the License.
 
 import 'dart:async';
-// ignore: deprecated_member_use (#756)
-import 'dart:html';
-
+import 'package:web/web.dart';
 import 'src/generated/echo.pbgrpc.dart';
 
 class EchoApp {
@@ -57,13 +55,23 @@ class EchoApp {
   }
 
   void _addMessage(String message, String cssClass) {
-    final classes = cssClass.split(' ');
-    querySelector('#first')!.after(DivElement()
-      ..classes.add('row')
-      ..append(Element.tag('h2')
-        ..append(SpanElement()
-          ..classes.add('label')
-          ..classes.addAll(classes)
+    document.querySelector('#first')!.after(HTMLDivElement()
+      ..classList.add('row')
+      ..append(HTMLHeadingElement.h2()
+        ..append(HTMLSpanElement()
+          ..classList.add('label')
+          ..classList.addAll(cssClass)
           ..text = message)));
   }
 }
+
+// The documentation of DOMTokenList.add implies it can handle multiple classes,
+// but in Chrome at least it does not.
+extension AddAll on DOMTokenList {
+  void addAll(String cssClass) {
+    final classes = cssClass.split(' ');
+    for (final c in classes) {
+      add(c);
+    }
+  }
+}
diff --git a/example/grpc-web/pubspec.yaml b/example/grpc-web/pubspec.yaml
index 10f80ce..4719ec1 100644
--- a/example/grpc-web/pubspec.yaml
+++ b/example/grpc-web/pubspec.yaml
@@ -9,6 +9,7 @@ dependencies:
   grpc:
     path: ../../
   protobuf: ^3.0.0
+  web: ^1.1.0
 
 dev_dependencies:
   build_runner: ^2.4.13
diff --git a/example/grpc-web/web/main.dart b/example/grpc-web/web/main.dart
index bd740ff..997a4bd 100644
--- a/example/grpc-web/web/main.dart
+++ b/example/grpc-web/web/main.dart
@@ -12,23 +12,20 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
-// ignore: deprecated_member_use (#756)
-import 'dart:html';
-
 import 'package:grpc/grpc_web.dart';
 import 'package:grpc_web/app.dart';
 import 'package:grpc_web/src/generated/echo.pbgrpc.dart';
+import 'package:web/web.dart';
 
 void main() {
   final channel = GrpcWebClientChannel.xhr(Uri.parse('http://localhost:8080'));
   final service = EchoServiceClient(channel);
   final app = EchoApp(service);
 
-  final button = querySelector('#send') as ButtonElement;
+  final button = document.querySelector('#send') as HTMLButtonElement;
   button.onClick.listen((e) async {
-    final msg = querySelector('#msg') as TextInputElement;
-    final value = msg.value!.trim();
+    final msg = document.querySelector('#msg') as HTMLInputElement;
+    final value = msg.value.trim();
     msg.value = '';
 
     if (value.isEmpty) return;