feat(sensors_plus)!: Migrate to dart:js_interop

[koji-1009]

Description

APIs such as Accelerometer are defined independently using dart:js_interop.

---

Do you know how to see the sensor change in the browser, I tried emulation with chrome dev tools but could not see the value change.

https://developer.chrome.com/docs/devtools/sensors

Related Issues

• Resolve [Request]: (sensors_plus) Migrate to package:web to support WASM #2602

Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I titled the PR using Conventional Commits.
• I did not modify the CHANGELOG.md nor the plugin version in pubspec.yaml files.
• All existing and new tests are passing.
• The analyzer (flutter analyze) does not report any problems on my PR.

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

• Yes, this is a breaking change (please indicate that with a ! in the title as explained in Conventional Commits).
• No, this is not a breaking change.

[miquelbeltran]

Oh, this looks nice! Thanks!

I'll have a look regarding the sensors if there is a way to test this.

Also, this doesn't depend on web at all?

[koji-1009]

Thanks for the quick response!
I checked web and the Sensor API type does not exist. For this reason, I am not using web 👍

[miquelbeltran]

I did a quick run on my Linux machine + chrome both main and your PR, and in both cases I cannot make it work.

On main I see the following error:

[log] Magnetometer() is not supported by the User Agent.
[log] The accelerometer API is supported but something is wrong!
[log] The linear acceleration API is supported but something is wrong!
[log] The gyroscope API is supported but something is wrong!

on your PR I get the following:

[log] Magnetometer() is not supported by the User Agent.
[log] TypeError: constr is not a constructor
[log] The accelerometer API is supported but something is wrong!
[log] Could not connect to a sensor
[log] The linear acceleration API is supported but something is wrong!
[log] Could not connect to a sensor
[log] The gyroscope API is supported but something is wrong!
[log] Could not connect to a sensor

I will check on MacOS + Chrome

[miquelbeltran]

Similar errors, slightly different, on macOS + Chrome:

main

[log] Magnetometer() is not supported by the User Agent.
[log] The linear acceleration API is supported but something is wrong!
[log] The gyroscope API is supported but something is wrong!

The PR code:

[log] Magnetometer() is not supported by the User Agent.
[log] TypeError: constr is not a constructor
[log] The linear acceleration API is supported but something is wrong!
[log] Could not connect to a sensor
[log] The gyroscope API is supported but something is wrong!
[log] Could not connect to a sensor

In theory, it is all well-supported in chrome, but I have the sensation it never worked before.

Looking at the documentation https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs we are supposed to query for permissions, but that doesn't seem to happen here at all.

"could not connect to a sensor" is the only error visible.

[koji-1009]

Thank you!
I will try to get the permissions. If it works, I'll add a new commit.

[koji-1009]

hmm, I tested following codes. The permissions are already granted.

import 'package:web/web.dart';

~~~

@override
Stream<AccelerometerEvent> accelerometerEventStream({
  Duration samplingPeriod = SensorInterval.normalInterval,
}) {
  if (_accelerometerStreamController == null) {
    _accelerometerStreamController = StreamController<AccelerometerEvent>();
    _featureDetected(
      () async {
        final status = await window.navigator.permissions
            .query(
              PermissionDescriptor(
                name: 'accelerometer',
              ),
            )
            .toDart;
        print('accelerometer: name: ${status.name}, state: ${status.state}');

result.

accelerometer: name: sensors, state: granted

I will continue to investigate.
The js_interop is interesting.

[koji-1009]

https://koji-1009.github.io/plus_plugins/
koji-1009#1

I uploaded example app. When I open it in chrome on my Android phone, it seems to be working as expected.

[miquelbeltran]

Great job! Checked on my phone and it works as well. Is the code in the PR up-to-date?

[koji-1009]

Yes, this PR code is up to date.
When deploying the demo, /sensors_plus/example/web/index.html needs to be newer, so it is updated. However, there are no additional changes in /sensors/lib.

https://github.com/koji-1009/plus_plugins/pull/1/files#diff-c8f651872a9b98a8388ebdbbe12c950e1ae16e5d62c746cbd71192524b9b058a

[koji-1009]

Thanks!

[miquelbeltran]

Thanks to you!

[guibertjulien]

Hello, I have this log with sensors_plus 6.0.0 with Chrome, is it normal ? I try to test sensor with a PWA application.