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>
This commit is contained in:
Aran Donohue 2025-02-21 05:11:03 -08:00 committed by GitHub
parent 5ba28e3a1c
commit 6dfb4b43f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 17 deletions

View File

@ -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);
}
}
}

View File

@ -9,6 +9,7 @@ dependencies:
grpc:
path: ../../
protobuf: ^3.0.0
web: ^1.1.0
dev_dependencies:
build_runner: ^2.4.13

View File

@ -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;