Migrate from deprecated dart:js, dart:js_util, package:js_util to dart:js_interop

[osa1]

Closes #2447.

[github-actions]

PR Health

[osa1]

@natebosch This is an internal change, does it need a changelog entry?

[kevmoo]

@osa1 – for internal changes, generally no. Should only document things that will affect how a user may use the package

[osa1]

Thanks -- in that case this should be ready for reviewing and merging.

[srujzs]

Can we not use package:web here?

[osa1]

I think that would make sense, but let's do it separately. I mainly wanted to learn more about js_interop with this PR while also doing something useful.

[natebosch]

@osa1 - it looks like the current stable SDK has broken our JS compile. Do you have a link showing the current pattern for exposing a Dart interface to JS?

test/pkgs/test/tool/host.dart

Lines 20 to 26 in 8643fbf

	@JS()
	@anonymous
	@staticInterop
	class _JSApi {
	external factory _JSApi(
	{void Function() resume, void Function() restartCurrent});
	}

[srujzs]

Ah, yeah this would only give you errors if you tried to compile it due to the void Function(). The call to the constructor used to have allowInterop, so it's just a matter of updating them to use toJS and using JSFunction.

I expect the correct changes to look like this, but I'm not sure if I need to rebuild anything before I can send it out as a PR:

diff --git a/pkgs/test/tool/host.dart b/pkgs/test/tool/host.dart
index fe8c6144..bdae52e7 100644
--- a/pkgs/test/tool/host.dart
+++ b/pkgs/test/tool/host.dart
@@ -17,24 +17,23 @@ import 'package:test/src/runner/browser/dom.dart' as dom;
 ///
 /// These are exposed so that tools like IDEs can interact with them via remote
 /// debugging.
-@JS()
-@anonymous
-@staticInterop
-class _JSApi {
-  external factory _JSApi(
-      {void Function() resume, void Function() restartCurrent});
+extension type _JSApi._(JSObject _) implements JSObject {
+  external factory _JSApi({
+    JSFunction resume,
+    JSFunction restartCurrent,
+  });
 }

 extension _JSApiExtension on _JSApi {
   /// Causes the test runner to resume running, as though the user had clicked
   /// the "play" button.
   // ignore: unused_element
-  external Function get resume;
+  external JSFunction get resume;

   /// Causes the test runner to restart the current test once it finishes
   /// running.
   // ignore: unused_element
-  external Function get restartCurrent;
+  external JSFunction get restartCurrent;
 }

 /// Sets the top-level `dartTest` object so that it's visible to JS.
@@ -151,9 +150,9 @@ void main() {
       if (!dom.document.body!.classList.contains('paused')) return;
       dom.document.body!.classList.remove('paused');
       serverChannel.sink.add({'command': 'resume'});
-    }, restartCurrent: () {
+    }.toJS, restartCurrent: () {
       serverChannel.sink.add({'command': 'restart'});
-    });
+    }.toJS);
   }, (error, stackTrace) {
     dom.window.console.warn('$error\n${Trace.from(stackTrace).terse}'.toJS);
   });

[osa1]

@natebosch how do I reproduce the issue?

I'm not aware of a documentation that shows a full example with Dart functions exposed to JS and the other way around. I mainly followed the links from https://dart.dev/interop/js-interop, and looked at SDK tests that use dart:js_interop, like the ones here. I'm also familiar with how dart:js_interop is implemented in dart2wasm, so that also helped.

[natebosch]

how do I reproduce the issue?

By recompiling host.dart.

test/pkgs/test/tool/README.md

Line 6 in 0f1e379

dart compile js tool/host.dart -o lib/src/runner/browser/static/host.dart.js

Thanks both for the pointers.

We have some CI issues with updating the compiled version at the moment but I'll work on getting this unblocked and landed in #2448