Difference in side effects between dart2js and dart2wasm

[koji-1009]

When the following tests are run on dart2js and dart2wasm, the results are different.
It passes in dart2js, but does not pass in dart2wasm.

import 'dart:js_interop';
import 'dart:typed_data';

import 'package:web/web.dart' as web;
import 'package:test/test.dart';

void main() {
  test('calculate', () {
    final array = Uint8List(16);
    expect(
      array.any((e) => e == 0),
      isTrue,
    );

    web.window.crypto.getRandomValues(array.toJS);

    expect(
      array.any((e) => e != 0),
      isTrue,
    );
  });
}

Result

# koji @ MacBookPro in ~/workspace/wasm_array on git:main x [23:57:55] C:1
$ dart test -p chrome -c dart2js
Building package executable...
Built test:test.
00:04 +0: [Chrome, Dart2Js] loading test/wasm_array_test.dart
Compiled 14,098,335 input bytes (9,096,737 characters source) to 1,128,319 characters JavaScript in 4.18 seconds using 0.000 MB of memory

00:05 +1: All tests passed!

# koji @ MacBookPro in ~/workspace/wasm_array on git:main x [23:58:20]
$ dart test -p chrome -c dart2wasm
Building package executable...
Built test:test.
00:02 +0: [Chrome, Dart2Wasm] loading test/wasm_array_test.dart
Generated wasm module '/private/var/folders/hr/y37hfwp553b_1bc41k7s8nqm0000gn/T/dart_test_8t0zPW/test_PD9QTD/wasm_array_test.dart.browser_test.dart.wasm', and JS init file '/private/var/folders/hr/y37hfwp553b_1bc41k7s8nqm0000gn/T/dart_test_8t0zPW/test_PD9QTD/wasm_array_test.dart.browser_test.dart.mjs'.

00:02 +0 -1: [Chrome, Dart2Wasm] test/wasm_array_test.dart: calculate [E]
  Expected: true
    Actual: <false>

  wasm_array_test.dart.browser_test.dart.wasm 1:273327  fail
  wasm_array_test.dart.browser_test.dart.wasm 1:272587  _expect
  wasm_array_test.dart.browser_test.dart.wasm 1:272122  expect
  wasm_array_test.dart.browser_test.dart.wasm 1:271795  main closure at file:///Users/koji/workspace/wasm_array/test/wasm_array_test.dart:8:21
  wasm_array_test.dart.browser_test.dart.wasm 1:271842  closure wrapper at file:///Users/koji/workspace/wasm_array/test/wasm_array_test.dart:8:21 trampoline
  wasm_array_test.dart.browser_test.dart.wasm 1:342564  Declarer.test closure at file:///Users/koji/.pub-cache/hosted/pub.dev/test_api-0.7.4/lib/src/backend/declarer.dart:227:22 inner
  wasm_array_test.dart.browser_test.dart.wasm 1:346584  _awaitHelper closure at org-dartlang-sdk:///lib/_internal/wasm/lib/async_patch.dart:83:16


To run this test again: /Users/koji/flutter/bin/cache/dart-sdk/bin/dart test test/wasm_array_test.dart -p chrome --plain-name 'calculate'
00:02 +0 -1: Some tests failed.

Consider enabling the flag chain-stack-traces to receive more detailed exceptions.
For example, 'dart test --chain-stack-traces'.

https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues

Return value

The same array passed as typedArray but with its contents replaced with the newly generated random numbers. Note that typedArray is modified in-place, and no copy is made.

---

If Uint8List and JSUint8List are processed separately, the behavior is consistent between dart2js and dart2wasm.

import 'dart:js_interop';
import 'dart:typed_data';

import 'package:web/web.dart' as web;
import 'package:test/test.dart';

void main() {
  test('calculate', () {
    final array = Uint8List(16);
    expect(
      array.any((e) => e == 0),
      isTrue,
    );

    final values = array.toJS;
    web.window.crypto.getRandomValues(values);
    final result = values.toDart;

    expect(
      result.any((e) => e != 0),
      isTrue,
    );
  });
}

Version

$ dart --version
Dart SDK version: 3.5.4 (stable) (Wed Oct 16 16:18:51 2024 +0000) on "macos_arm64"

[sigmundch]

Thanks for reaching out and great repro!

Indeed, you are completely correct about the inconsistent behavior here. It may sounds surprising, but it is actually by design. You can find more details in the "Note" on the .toJS extension method dart doc. This is also related to the first warning in this article.

Another alternative than doing .toJS and .toDart like you did in your workaround, could be to use a proxy. You can achieve that replacing .toJS with .toJSProxyOrRef (see doc).

To share some context/background. When designing this we faced a difficult tradeoff when it comes to list conversions. We had the option to: always pass references or proxy, always copy, or always do what's most efficient in the underlying implementation. We also had to consider how to keep behavior as consistent as possible for code that was being migrated from dart:html to package:web.

In the end, we decided to do the latter: do what's most efficient. In dart2js, arrays and lists are implemented by the same underlying value, so passing a reference is the cheapest thing we could do. Coping would be an unnecessary cost, and a regression from how it used to work in dart:html. In contrast, in dart2wasm, arrays and lists are represented differently and you either need to copy or create a JS Array proxy to access the Dart list. Many accesses on a proxy are overall more expensive and in many contexts data is passed to JS and not expected to be passed back. That led us to put more weight towards defaulting to the copying behavior here.

[srujzs]

Just one more suggestion on top of what Siggi shared: you can start with a JSUint8Array (or any typed array in dart:js_interop) and then convert it via toDart, and that resulting Uint8List should always respect modifications in either runtime: https://api.dart.dev/dart-js_interop/JSUint8ArrayToUint8List/toDart.html. This is faster than dealing with proxies, and .toJSProxyOrRef only exists for List<JSAny?>s.

import 'dart:js_interop';

import 'package:test/test.dart';

void main() {
  test('modify', () {
    final array = JSUint8Array.withLength(16);
    final result = array.toDart;
    result[0] = 1;

    expect(
      array[0],
      1,
    );
  });
}

extension on JSUint8Array {
  external int operator [](int value);
}

[koji-1009]

Thanks for the response!

[jonasfj]

This was a surprise to me, I should probably have read the documentation :D

Thanks for the explanation!