refactor: migrate from 'dart:html' to 'package:web'

fixes: #121

example/browser_example/pubspec.yaml

@@ -11,8 +11,9 @@ dependencies:
   path: ^1.7.0
   openid_client: 
     path: ../..
+  web: ^1.1.0
 
 dev_dependencies:
   build_runner: ^2.1.4
-  build_web_compilers: ^3.2.1
+  build_web_compilers: ^4.0.0
   lints: ^2.0.0

example/browser_example/web/main.dart

@@ -1,4 +1,4 @@
-import 'dart:html';
+import 'package:web/web.dart' hide Client;
 
 import 'package:openid_client/openid_client_browser.dart';
 
@@ -30,7 +30,8 @@ Future<void> main() async {
     }
 
     await refresh();
-    document.querySelector('#when-logged-in')!.style.display = 'block';
+    (document.querySelector('#when-logged-in') as HTMLElement).style.display =
+        'block';
     document.querySelector('#logout')!.onClick.listen((_) async {
       authenticator.logout();
     });
@@ -39,7 +40,8 @@ Future<void> main() async {
       await refresh();
     });
   } else {
-    document.querySelector('#when-logged-out')!.style.display = 'block';
+    (document.querySelector('#when-logged-out') as HTMLElement).style.display =
+        'block';
     document.querySelector('#login')!.onClick.listen((_) async {
       authenticator.authorize();
     });

example/flutter_example/lib/main.dart

@@ -3,7 +3,7 @@ import 'dart:io';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:openid_client/openid_client.dart';
-import 'openid_io.dart' if (dart.library.html) 'openid_browser.dart';
+import 'openid_io.dart' if (dart.library.js_interop) 'openid_browser.dart';
 
 const keycloakUri = 'http://localhost:8080/realms/myrealm';
 const scopes = ['profile'];

lib/openid_client_browser.dart

@@ -1,5 +1,7 @@
+import 'dart:js_interop';
+
 import 'openid_client.dart';
-import 'dart:html' hide Credential, Client;
+import 'package:web/web.dart' hide Credential, Client;
 import 'dart:async';
 export 'openid_client.dart';
 
@@ -68,12 +70,12 @@ class Authenticator {
     if (q.containsKey('access_token') ||
         q.containsKey('code') ||
         q.containsKey('id_token')) {
-      window.history.replaceState(
-          '', '', Uri.parse(window.location.href).removeFragment().toString());
-      window.localStorage.remove('openid_client:state');
+      window.history.replaceState(''.toJS, '',
+          Uri.parse(window.location.href).removeFragment().toString());
+      window.localStorage.removeItem('openid_client:state');
 
       var c = await flow.callback(q.cast());
-      if (iframe) window.parent!.postMessage(c.response, '*');
+      if (iframe) window.parent!.postMessage(c.response?.toJSBox, '*'.toJS);
       return c;
     }
     return null;
@@ -89,7 +91,7 @@ class Authenticator {
   /// response.
   Future<Credential> trySilentRefresh(
       {Duration timeout = const Duration(seconds: 20)}) async {
-    var iframe = IFrameElement();
+    var iframe = HTMLIFrameElement();
     var url = flow.authenticationUri;
     window.localStorage['openid_client:state'] = flow.state;
     iframe.src = url.replace(queryParameters: {
@@ -105,28 +107,29 @@ class Authenticator {
     var event = await window.onMessage.first.timeout(timeout).whenComplete(() {
       iframe.remove();
     });
-    if (event.data is Map) {
+
+    var data = event.data?.dartify();
+    if (data is Map) {
       var current = await credential;
       if (current == null) {
         return flow.client.createCredential(
-          accessToken: event.data['access_token'],
-          expiresAt: event.data['expires_at'] == null
+          accessToken: data['access_token'],
+          expiresAt: data['expires_at'] == null
               ? null
               : DateTime.fromMillisecondsSinceEpoch(
-                  int.parse(event.data['expires_at'].toString()) * 1000),
-          refreshToken: event.data['refresh_token'],
-          expiresIn: event.data['expires_in'] == null
+                  int.parse(data['expires_at'].toString()) * 1000),
+          refreshToken: data['refresh_token'],
+          expiresIn: data['expires_in'] == null
               ? null
-              : Duration(
-                  seconds: int.parse(event.data['expires_in'].toString())),
-          tokenType: event.data['token_type'],
-          idToken: event.data['id_token'],
+              : Duration(seconds: int.parse(data['expires_in'].toString())),
+          tokenType: data['token_type'],
+          idToken: data['id_token'],
         );
       } else {
-        return current..updateToken((event.data as Map).cast());
+        return current..updateToken(data.cast());
       }
     } else {
-      throw Exception('${event.data}');
+      throw Exception('$data');
     }
   }
 }

pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
   args: ^2.0.0
   meta: ^1.0.0
   clock: ^1.1.0
+  web: ^1.1.0
 
 dev_dependencies:
   test: ^1.16.5