JS interop pain

[travishaagen]

Hey. I have a build of Chromium with a custom Sensor object, and I'm trying to bind to it. The Sensor is similar to this one found in html_dart2js.dart:

@Native("Accelerometer")
class Accelerometer extends Sensor {
  // To suppress missing implicit constructor warnings.
  factory Accelerometer._() {
    throw new UnsupportedError("Not supported");
  }

  factory Accelerometer([Map? sensorOptions]) {
    if (sensorOptions != null) {
      var sensorOptions_1 = convertDartToNative_Dictionary(sensorOptions);
      return Accelerometer._create_1(sensorOptions_1);
    }
    return Accelerometer._create_2();
  }
  static Accelerometer _create_1(sensorOptions) =>
      JS('Accelerometer', 'new Accelerometer(#)', sensorOptions);
  static Accelerometer _create_2() =>
      JS('Accelerometer', 'new Accelerometer()');

  num? get x native;

  num? get y native;

  num? get z native;
}

However, the above is using some internal APIs, and I can't seem to get past setting sensorOptions on my version.

@JS()
extension type CustomSensor._(JSObject _) implements JSObject {
  external CustomSensor(SensorOptions sensorOptions);

  external void start();

  external void stop();

  external num get myValue;

  external void addEventListener(String type, JSFunction? callback, [JSAny options]);
}

@JS()
@anonymous
extension type SensorOptions._(JSObject _) implements JSObject {
  external factory SensorOptions({num frequency});

  external num get frequency;
}

The errors complain about the constructor. SensorOptions is supposed to be like a JS dictionary object, so that's why I was trying @anonymous. Any ideas?

[navaronbracke]

This works fine on my end:

import 'dart:js_interop';

/// The JS `Accelerometer` as an extension typed JS binding.
///
/// The extension type defines the primary constructor as private.
@JS()
@staticInterop
extension type Accelerometer._(JSObject _) implements JSObject {
  external factory Accelerometer([SensorOptions? options]);

  external num? get x;

  external num? get y;

  external num? get z;

  external bool? get hasReading;

  external bool? get activated;
}

@JS()
@staticInterop
@anonymous
extension type SensorOptions._(JSObject _) implements JSObject {
  external factory SensorOptions({double frequency});
}

[srujzs]

FYI - You don't need the @staticInterop or @anonymous annotations anymore, they don't do anything for extension types and might just get in the way. Extension types are static by definition, so @staticInterop isn't necessary. Simply having a constructor with named arguments will make it an object literal constructor, so @anonymous isn't needed anymore either. I should add an error to make that obvious.

I assume you're coming across the bug mentioned in the above link where you need to have an @JS annotated library until 3.4 for object literal constructors, so this should work:

@JS()
library;

import 'dart:js_interop';

extension type CustomSensor._(JSObject _) implements JSObject {
  external CustomSensor(SensorOptions sensorOptions);

  external void start();
  external void stop();
  external num get myValue;
  external void addEventListener(String type, JSFunction? callback, [JSAny options]);
}

extension type SensorOptions._(JSObject _) implements JSObject {
  external factory SensorOptions({num frequency});

  external num get frequency;
}

Let me know if you're hitting some other bug instead.

[travishaagen]

Thank you for the replies! Turns out it wasn't the Sensor constructor throwing an error, but my attempts to pass a Dart function to this callback argument:

external void addEventListener(String type, JSFunction? callback, [JSAny options]);

[srujzs]

Ah yeah, you'll need a .toJS call so that it can be converted to a JS function: https://dart.dev/interop/js-interop/js-types#conversions.

[travishaagen]

Compiler appeared happier with,

var readingInterop = js_util.allowInterop(readingCallback) as JSExportedDartFunction;
mySensor.addEventListener("reading", readingInterop);

What are my options for handling the Event that gets passed to the callback? The event I'm receiving has custom properties.

[srujzs]

var readingInterop = js_util.allowInterop(readingCallback) as JSExportedDartFunction;

I'd avoid using allowInterop (or js_util in general) for this purpose since it won't be Wasm-compatible. Can you share what compilation issues you came across with using Function.toJS? I'm guessing the compiler gave you an error on one or more of the types of the Dart callback you tried to convert? If so, this might be relevant and all you may need to do is provide the right types.

What are my options for handling the Event that gets passed to the callback? The event I'm receiving has custom properties.

If it's a custom Event, you can declare your own interop type like how we do in package:web e.g.

extension type CustomEvent(JSObject o) implements Event {
  // declare whatever custom properties here
}

implements Event allows you to reuse the Event members from package:web which I presume you'd want. If not, you can omit that clause, or just have it implement JSObject. Then, use CustomEvent as the type of the Event in the callback:

void readingInterop(CustomEvent event) {
  // do something with `event`
}
mySensor.addEventListener("reading", readingInterop.toJS);

[travishaagen]

Thanks both of you for the help!

I was passing in a Function callback, but by using a local, typed callback function it started working.

I used a StreamController to broadcast the events to subscribers.