Unable to use JS interop on CustomEvent in dart2js

[donny-dont]

Currently its not possible to use package:js to wrap JavaScript CustomEvents when the code is compiled with dart2js. The following code works with DDC but will fail on dart2js.

// main.dart
@JS()
library reproduction;

import 'package:js/js.dart';

@JS()
@anonymous
abstract class DartWrapper {
  external Object get dartObject;
  external set dartObject(Object value);
}

@JS('Event')
abstract class Event extends DartWrapper {
  external String get type;
}

@JS('CustomEvent')
abstract class CustomEvent extends Event {
  external factory CustomEvent(String type);
}

class CustomEventWrapper {
  CustomEventWrapper.fromJsObject(this.jsObject) {
    jsObject.dartObject = this;
  }
  final CustomEvent jsObject;

  String get type => jsObject.type;
}

void main() {
  final jsObject = CustomEvent('interceptor');
  print(jsObject);
  final dartObject = CustomEventWrapper.fromJsObject(jsObject);
  print(dartObject);
}

Console using DDC

[object CustomEvent]
dart_sdk.js:22309 Instance of 'CustomEventWrapper'

Console using dart2js

Instance of 'Interceptor'
main.dart.js:1255 Uncaught TypeError: J.getInterceptor$x(...).set$dartObject is not a function
    at Object.set$dartObject$x (main.dart.js:1255)
    at Object.main (main.dart:25)
    at js_helper.dart:3222
    at js_helper.dart:3222
    at dartProgram (js_helper.dart:3222)
    at js_helper.dart:3222

It appears that internally dart2js is not using the js-interop definition of CustomEvent but instead is using an internal type Interceptor. This prevents a Dart developer from rolling their own package:html since events are not using the defined types.

Environment

> dart --version
Dart VM version: 2.7.0-dev.1.0 (Wed Nov 20 12:57:54 2019 +0100) on "windows_x64"

> webdev --version
2.5.4

# build.yaml (just used to prevent minification)
targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        # These are globs for the entrypoints you want to compile.
        generate_for:
        - test/**.browser_test.dart
        - web/**.dart
        options:
          compiler: dart2js
          # List any dart2js specific args here, or omit it.
          dart2js_args:
          - ''

> pub upgrade
Resolving dependencies...
  _fe_analyzer_shared 1.0.0
  analyzer 0.39.1
  archive 2.0.11
  args 1.5.2
  async 2.4.0
  bazel_worker 0.1.23
  build 1.2.2
  build_config 0.4.1+1
  build_daemon 2.1.2
  build_modules 2.7.0
  build_resolvers 1.3.0
  build_runner 1.7.2
  build_runner_core 4.2.0
  build_web_compilers 2.7.1
  built_collection 4.3.0
  built_value 7.0.0
  charcode 1.1.2
  checked_yaml 1.0.2
  code_builder 3.2.1
  collection 1.14.12
  convert 2.1.1
  crypto 2.1.3
  csslib 0.16.1
  dart_style 1.3.3
  fixnum 0.10.11
  front_end 0.1.29
  glob 1.2.0
  graphs 0.2.0
  html 0.14.0+3
  http 0.12.0+2
  http_multi_server 2.1.0
  http_parser 3.1.3
  io 0.3.3
  js 0.6.1+1
  json_annotation 3.0.0
  kernel 0.3.29
  logging 0.11.3+2
  matcher 0.12.6
  meta 1.1.8
  mime 0.9.6+3
  node_interop 1.0.3
  node_io 1.0.1+2
  package_config 1.1.0
  package_resolver 1.0.10
  path 1.6.4
  pedantic 1.8.0+1
  pool 1.4.0
  protobuf 1.0.1
  pub_semver 1.4.2
  pubspec_parse 0.1.5
  quiver 2.1.2+1
  scratch_space 0.0.4+1
  shelf 0.7.5
  shelf_web_socket 0.2.3
  source_maps 0.10.8
  source_span 1.5.5
  stack_trace 1.9.3
  stream_channel 2.0.0
  stream_transform 0.0.20 (1.0.0 available)
  string_scanner 1.0.5
  term_glyph 1.1.0
  timing 0.1.1+2
  typed_data 1.1.6
  watcher 0.9.7+13
  web_socket_channel 1.1.0
  yaml 2.2.0

[donny-dont]

@natebosch here's a simple reproduction of the issue we discussed on gitter.

🙇