[ddc] extension type method calls for static interop in expression evaluation fail at runtime

[annagrin]

Example

// @dart=3.2

@JS()
library debug_static_interop;

import 'dart:async';
import 'dart:js_util';
import 'dart:js_interop';

import 'package:js/js.dart' hide JS;

// The Dart class must have `@JSExport` on it or one of its instance members.
@JSExport()
class Counter {
  int value = 0;
  @JSExport('increment')
  void renamedIncrement() {
    value++;
  }
}

extension type JSCounter(JSObject _) {
  external int get value;
  external void increment();
}

void main() {
  Timer.periodic(const Duration(seconds: 1), (Timer t) {
    var dartCounter = Counter();
    var jsCounter = createDartExport<Counter>(dartCounter) as JSCounter;

    jsCounter.increment();
    dartCounter.renamedIncrement();
   
    print('Dart: ${dartCounter.value}'); // Breakpoint
    print('JS: ${jsCounter.value}');
  });
}

Repro:

• add a breakpoint on the line commented with // breakpoint
• try evaluating jsCounter.value

Expected: 1
Actual: TypeError: dart.global.JSCounterView|get#value is not a function

Details:

• Dart expression jsCounter.value is compiled to

(function(t, dartCounter, jsCounter) {
    const dart_sdk = require('dart_sdk');
const dart = dart_sdk.dart;
    const web__main = require('web/main');
    const main = web__main.web__main;
    return dart.global['JSCounterView|get#value'](jsCounter);
  }(
    t,
    dartCounter,
    jsCounter
  ))

I suspect that

  return dart.global['JSCounterView|get#value'](jsCounter);

should be

  return main['JSCounterView|'](jsCounter).value;

[srujzs]

The likely culprit here is that js_util_optimizer.dart didn't run on the new expression. DDC sees that it's an external method that hasn't been resolved, and therefore tries to resolve it using package:js-style logic, but it doesn't work.

[annagrin]

Thanks @srujzs , I think I know what needs to be done now. Will send a PR soon.