Update web implementation to depend on Dart 3.3 JS interop + the recommended web package

wakelock_plus/example/pubspec.yaml

@@ -5,8 +5,8 @@ description: Demonstrates how to use the wakelock_plus plugin.
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 
 environment:
-  sdk: '>=2.17.0 <4.0.0'
-  flutter: ">=2.11.0"
+  sdk: '>=3.3.0 <4.0.0'
+  flutter: ">=3.19.0"
 
 # Dependencies specify other packages that your package needs in order to work.
 # To automatically upgrade your package dependencies to the latest versions

wakelock_plus/lib/src/wakelock_plus_web_plugin.dart

@@ -1,7 +1,7 @@
 import 'dart:async';
+import 'dart:js_interop';
 
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
-import 'package:js/js.dart';
 import 'package:wakelock_plus_platform_interface/wakelock_plus_platform_interface.dart';
 import 'package:wakelock_plus/src/web_impl/import_js_library.dart';
 import 'package:wakelock_plus/src/web_impl/js_wakelock.dart'
@@ -16,32 +16,39 @@ class WakelockPlusWebPlugin extends WakelockPlusPlatformInterface {
   static void registerWith(Registrar registrar) {
     // Import a version of `NoSleep.js` that was adjusted for the wakelock
     // plugin.
-    importJsLibrary(
+    _jsLoaded = importJsLibrary(
         url: 'assets/no_sleep.js', flutterPluginName: 'wakelock_plus');
 
     WakelockPlusPlatformInterface.instance = WakelockPlusWebPlugin();
   }
 
+  // The future that resolves when the JS library is loaded.
+  static late Future<void> _jsLoaded;
+
   @override
   Future<void> toggle({required bool enable}) async {
+    // Make sure the JS library is loaded before calling it.
+    await _jsLoaded;
+
     wakelock_plus_web.toggle(enable);
   }
 
   @override
   Future<bool> get enabled async {
+    // Make sure the JS library is loaded before calling it.
+    await _jsLoaded;
+
     final completer = Completer<bool>();
 
-    wakelock_plus_web.enabled().then(
+    wakelock_plus_web.enabled().toDart.then(
       // onResolve
-      allowInterop((value) {
-        assert(value is bool);
-
-        completer.complete(value);
-      }),
+      (value) {
+        completer.complete(value.toDart);
+      },
       // onReject
-      allowInterop((error) {
+      onError: (error) {
         completer.completeError(error);
-      }),
+      },
     );
 
     return completer.future;

wakelock_plus/lib/src/web_impl/import_js_library.dart

@@ -1,16 +1,19 @@
-import 'dart:html' as html;
+import 'dart:js_interop';
+
+import 'package:web/web.dart';
 
 /// This is an implementation of the `import_js_library` plugin that is used
 /// until that plugin is migrated to null safety.
 /// See https://github.com/florent37/flutter_web_import_js_library/pull/6#issuecomment-735349208.
 
 /// Imports a JS script file from the given [url] given the relative
 /// [flutterPluginName].
-void importJsLibrary({required String url, String? flutterPluginName}) {
+Future<void> importJsLibrary(
+    {required String url, String? flutterPluginName}) async {
   if (flutterPluginName == null) {
-    _importJSLibraries([url]);
+    return _importJSLibraries([url]);
   } else {
-    _importJSLibraries([_libraryUrl(url, flutterPluginName)]);
+    return _importJSLibraries([_libraryUrl(url, flutterPluginName)]);
   }
 }
 
@@ -26,8 +29,8 @@ String _libraryUrl(String url, String pluginName) {
   }
 }
 
-html.ScriptElement _createScriptTag(String library) {
-  final script = html.ScriptElement()
+HTMLScriptElement _createScriptTag(String library) {
+  final script = document.createElement('script') as HTMLScriptElement
     ..type = 'text/javascript'
     ..charset = 'utf-8'
     ..async = true
@@ -39,12 +42,12 @@ html.ScriptElement _createScriptTag(String library) {
 /// Future that resolves when all load.
 Future<void> _importJSLibraries(List<String> libraries) {
   final loading = <Future<void>>[];
-  final head = html.querySelector('head');
+  final head = document.head;
 
   for (final library in libraries) {
     if (!_isImported(library)) {
       final scriptTag = _createScriptTag(library);
-      head!.children.add(scriptTag);
+      head!.appendChild(scriptTag);
       loading.add(scriptTag.onLoad.first);
     }
   }
@@ -53,17 +56,18 @@ Future<void> _importJSLibraries(List<String> libraries) {
 }
 
 bool _isImported(String url) {
-  final head = html.querySelector('head')!;
+  final head = document.head!;
   return _isLoaded(head, url);
 }
 
-bool _isLoaded(html.Element head, String url) {
+bool _isLoaded(HTMLHeadElement head, String url) {
   if (url.startsWith('./')) {
     url = url.replaceFirst('./', '');
   }
-  for (var element in head.children) {
-    if (element is html.ScriptElement) {
-      if (element.src.endsWith(url)) {
+  for (int i = 0; i < head.children.length; i++) {
+    final element = head.children.item(i)!;
+    if (element.instanceOfString('HTMLScriptElement')) {
+      if ((element as HTMLScriptElement).src.endsWith(url)) {
         return true;
       }
     }

wakelock_plus/lib/src/web_impl/js_wakelock.dart

@@ -1,11 +1,12 @@
 @JS('Wakelock')
 library wakelock.js;
 
-import 'package:js/js.dart';
-import 'package:wakelock_plus/src/web_impl/promise.dart';
+import 'dart:js_interop';
 
 /// Toggles the JS wakelock.
+@JS()
 external void toggle(bool enable);
 
 /// Returns a JS promise of whether the wakelock is enabled or not.
-external PromiseJsImpl<bool> enabled();
+@JS()
+external JSPromise<JSBoolean> enabled();

wakelock_plus/pubspec.yaml

@@ -6,8 +6,8 @@ version: 1.1.6
 repository: https://github.com/fluttercommunity/wakelock_plus/tree/main/wakelock_plus
 
 environment:
-  sdk: '>=2.18.0 <4.0.0'
-  flutter: ">=3.3.0"
+  sdk: '>=3.3.0 <4.0.0'
+  flutter: ">=3.19.0"
 
 dependencies:
   flutter:
@@ -26,7 +26,7 @@ dependencies:
   package_info_plus: ">=4.0.2 <7.0.0"
 
   # Web dependencies
-  js: ^0.7.0
+  web: ^0.5.0
 
 dev_dependencies:
   flutter_test: