Migrate from deprecated `dart:js`, `dart:js_util`, `package:js_util` to `dart:js_interop` by osa1 · Pull Request #2478 · dart-lang/test

osa1 · 2025-04-08T10:53:08Z

Closes #2447.

github-actions · 2025-04-08T10:54:45Z

PR Health

osa1 · 2025-04-08T11:26:35Z

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

kevmoo · 2025-04-08T16:23:14Z

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

osa1 · 2025-04-08T16:30:24Z

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

srujzs · 2025-04-08T16:30:33Z

-class Window extends EventTarget {}
-
-extension WindowExtension on Window {
+extension type Window(EventTarget _) implements EventTarget {


Can we not use package:web here?

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.

Revisions updated by `dart tools/rev_sdk_deps.dart`. core (https://github.com/dart-lang/core/compare/7a80178..af37fe5): af37fe54 2025-04-04 Lasse R.H. Nielsen Adds `[Heap]PriorityQueue.of` constructor. (dart-lang/core#734) 635dfa32 2025-04-03 Kevin Moore [collection] explicitly make BoolList abstract interface (dart-lang/core#875) ecosystem (https://github.com/dart-lang/ecosystem/compare/391a80c..7f6f1c1): 7f6f1c1 2025-04-09 Daco Harkes [firehose] Fix dart_apitool invocations with pub workspaces (dart-lang/ecosystem#355) 0eb0349 2025-04-07 Moritz Fix tagging in publishing workflow (again) (dart-lang/ecosystem#353) 1ee8568 2025-04-07 Moritz Update README.md (dart-lang/ecosystem#352) http (https://github.com/dart-lang/http/compare/6fabf06..e4ddd3e): e4ddd3e 2025-04-07 Moritz Merge pull request `#1750` from dart-lang/fixTags 42b42e3 2025-04-07 Moritz Fix tags 54bf0f7 2025-04-07 Moritz Merge pull request `#1748` from dart-lang/fixPublish 84adca0 2025-04-04 Moritz Merge pull request `#1432` from dart-lang/fixHealth 8534a69 2025-04-04 Moritz Remove ignore breaking b80436a 2025-04-04 Moritz allow underscore 949cd87 2025-04-04 Moritz Fix publishing workflow 996c5d1 2024-12-17 Moritz ignore only for breaking changes e5321f7 2024-12-17 Moritz Update .github/workflows/health.yaml f902d8a 2024-12-17 Moritz typo 35f6e9a 2024-12-17 Moritz exclude websocket ca8caee 2024-12-17 Moritz Ignore http 621401e 2024-12-17 Moritz remove ignore license ce20b2a 2024-12-17 Moritz Fix health workflow test (https://github.com/dart-lang/test/compare/c1fa1e6..8643fbf): 8643fbf3 2025-04-09 Ömer Sinan Ağacan Migrate from deprecated `dart:js`, `dart:js_util`, `package:js_util` to `dart:js_interop` (dart-lang/test#2478) tools (https://github.com/dart-lang/tools/compare/b963bbf..d74f9e1): d74f9e13 2025-04-08 Loïc Sharma [UA] Add a Flutter event for plugins injected into an iOS/macOS project. (dart-lang/tools#2062) f34228f8 2025-04-08 Kevin Moore [graphs] fix readme CI badge (dart-lang/tools#2068) 0102cd63 2025-04-08 Kevin Moore [markdown] fix crash test (dart-lang/tools#2067) webdev (https://github.com/dart-lang/webdev/compare/697f2f7..c8b1cfa): c8b1cfa9 2025-04-07 Srujan Gaddam [dwds] Split hot reload callback into 2, disable breakpoints in changed files, and publish 24.3.10 (dart-lang/webdev#2606) 8d8413f5 2025-04-04 Wdestroier Support custom hostname and TLS options (dart-lang/webdev#2588) Change-Id: Idbad02c2087ceb3c7d0f7efcf0721f4806475e8e Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/421542 Reviewed-by: Konstantin Shcheglov <scheglov@google.com> Auto-Submit: Devon Carew <devoncarew@google.com> Commit-Queue: Konstantin Shcheglov <scheglov@google.com>

natebosch · 2025-04-09T22:59:03Z

@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 · 2025-04-09T23:21:06Z

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 · 2025-04-10T09:00:56Z

@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 · 2025-04-10T22:23:51Z

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

Migrate from package:js and js_util to dart:js_interop

a26dec8

github-actions Bot added the package:test label Apr 8, 2025

osa1 added 3 commits April 8, 2025 11:55

Fix error

512d42d

Formatting

f34bfd2

Fixups

0bb75e1

osa1 commented Apr 8, 2025

View reviewed changes

Comment thread pkgs/test/lib/src/runner/browser/dom.dart Outdated

osa1 marked this pull request as ready for review April 8, 2025 11:26

osa1 requested a review from a team as a code owner April 8, 2025 11:26

osa1 added 2 commits April 8, 2025 12:54

Remove last use of js_util

20994dc

Update another import

c05ef34

osa1 requested a review from srujzs April 8, 2025 11:59

osa1 added the skip-changelog-check label Apr 8, 2025

srujzs approved these changes Apr 8, 2025

View reviewed changes

osa1 added 2 commits April 9, 2025 09:35

Use toJS

2b9cb3d

Simplify port getter

9349a3b

osa1 merged commit 8643fbf into dart-lang:master Apr 9, 2025

osa1 deleted the js_interop branch April 9, 2025 08:52

jakemac53 mentioned this pull request Apr 9, 2025

test uses a deprecated package (js) #2480

Closed

Uh oh!

Conversation

osa1 commented Apr 8, 2025

Uh oh!

github-actions Bot commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Health

Uh oh!

Uh oh!

osa1 commented Apr 8, 2025

Uh oh!

kevmoo commented Apr 8, 2025

Uh oh!

osa1 commented Apr 8, 2025

Uh oh!

srujzs Apr 8, 2025

Choose a reason for hiding this comment

Uh oh!

osa1 Apr 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

natebosch commented Apr 9, 2025

Uh oh!

srujzs commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

osa1 commented Apr 10, 2025

Uh oh!

natebosch commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented Apr 8, 2025 •

edited

Loading

srujzs commented Apr 9, 2025 •

edited

Loading

natebosch commented Apr 10, 2025 •

edited

Loading