[dart2js] Call dynamic function not works after compile js

[jimmyshiau]

• Dart 3.8.1

import 'package:web/web.dart';
import 'dart:js_interop';

void main() {
  setInputValue(document.querySelector('#input')!, 'hello world');
}

void setInputValue(Element input, String value) {
  assert(input.isA<HTMLInputElement>() || input.isA<HTMLTextAreaElement>());
  (input as dynamic).value = value;
}

• It works fine when run with [DDC]
• But not works after compile to js (Uncaught TypeError: a.sU is not a function)
  • any config can keep function name after compile to js
• It works fine with Dart 3.6.2

[jimmyshiau]

Workaround

void setInputValue(Element input, String value) {
  assert(input.isA<HTMLInputElement>() || input.isA<HTMLTextAreaElement>());
  //(input as dynamic).value = value;
  reflectSet(input, 'value'.toJS, value.toJS);
}

@JS('Reflect.get')
external JSAny? reflectGet(JSObject? object, JSString name);

@JS('Reflect.set')
external void reflectSet(JSObject? object, JSString name, JSAny? value);

[ykmnkmi]

New JS interop is completely static - no dynamic, only known types. Use dart:js_interop_unsafe []= operator or setProperty:

void setInputValue(Element input, String value) {
  assert(input.isA<HTMLInputElement>() || input.isA<HTMLTextAreaElement>());
  input['value'] = value.toJS;
  input.setProperty('value'.toJS, value.toJS);
}

Or reuse HTMLInputElement.value, both have same property and accepts same values:

void setInputValue(Element input, String value) {
  assert(input.isA<HTMLInputElement>() || input.isA<HTMLTextAreaElement>());
  // Cast should be omitted by the compiler because both interfaces are `JSObject`.
  (input as HTMLInputElement).value = value;
}

[srujzs]

This is indeed WAI, there is no support for dynamic dispatch with dart:js_interop. It works accidentally with DDC, because in order to support package:js's dynamic dispatch, the calling convention made it so that we call the right name.