dart-lang / dart-lang/sdk

Lack of documentation for migration from js to js_interop

Open
#55,352 34 comments 7 reactions 0 assignees View on GitHub
area-web-js type-documentation web-js-interop
Dominant language
Dart
Stars
11.3k
Forks
1.9k
PR merge metrics
PR metrics pending

Description

With the recent beta release of wasm for flutter i wanted to try compling my application to the new target. As (somewhat) expected i ran into some js interop issues.

I tried to switch to the new package `import 'dart:js_interop';` but struggled to get it working as there seems to be very litte documentation on how to do the migration.

Old code
```dart
@JS('mapboxgl')
library mapboxgl.interop.ui.control.navigation_control;

import 'package:js/js.dart';
import 'package:mapbox_gl_dart/src/interop/interop.dart';

@JS()
@anonymous
class NavigationControlOptionsJsImpl {
external bool get showCompass;
external bool get showZoom;
external bool get visualizePitch;

external factory NavigationControlOptionsJsImpl({
bool? showCompass,
bool? showZoom,
bool? visualizePitch,
});
}

@JS('NavigationControl')
class NavigationControlJsImpl {
external NavigationControlOptionsJsImpl get options;

external factory NavigationControlJsImpl(
NavigationControlOptionsJsImpl options);

external onAdd(MapboxMapJsImpl map);

external onRemove();
}
```

Diff

```diff
diff --git a/lib/src/interop/ui/control/navigation_control_interop.dart b/lib/src/interop/ui/control/navigation_control_interop.dart
index 985a203..0257ce2 100644
--- a/lib/src/interop/ui/control/navigation_control_interop.dart
+++ b/lib/src/interop/ui/control/navigation_control_interop.dart
@@ -1,7 +1,7 @@
@JS('mapboxgl')
library mapboxgl.interop.ui.control.navigation_control;

-import 'package:js/js.dart';
+import 'dart:js_interop';
import 'package:mapbox_gl_dart/src/interop/interop.dart';

@JS()
```

The error i am getting is `Error: The '@JS' annotation from 'dart:js_interop' can only be used for static interop, either through extension types or '@staticInterop' classes.`

I found some documentation in https://dart.dev/interop/js-interop/usage

e.g.
```dart
import 'dart:js_interop';

@JS('Date')
extension type JSDate._(JSObject _) implements JSObject {
external JSDate();

external static int now();
}
```

Before converting all the code in my dart js warper i would like to be sure that this is the correct approach. It would be great if you could also provide some concrete side by side examples of old js vs new js_interop code in the documentation.

Config
```
Flutter 3.21.0-1.0.pre.2 • channel beta • https://github.com/flutter/flutter.git
Framework • revision c398442c35 (3 weeks ago) • 2024-03-12 22:26:24 -0700
Engine • revision 0d4f78c952
Tools • Dart 3.4.0 (build 3.4.0-190.1.beta) • DevTools 2.33.1
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.