Error compiling Dart Debug Extension with DDC

[elliette]

Encountered an error compiling the Dart Debug Extension with DDC (dart2js succeeds).

• Here are the changes that have caused it to fail (works on master branch): dart-lang/webdev@master...elliette:dde-mv3
• Instructions on how to compile: https://github.com/dart-lang/webdev/blob/master/dwds/debug_extension/CONTRIBUTING.md#building

 $ dart run build_runner build web -o build
[INFO] Generating build script completed, took 456ms
[INFO] Reading cached asset graph completed, took 224ms
[INFO] Checking for updates since last build completed, took 750ms
[WARNING] extension|tool/copy_builder.dart was not found in the asset graph, incremental builds will not work.
 This probably means you don't have your dependencies specified fully in your pubspec.yaml.
[WARNING] Invalidating asset graph due to build script update!
[INFO] Cleaning up outputs from previous builds. completed, took 209ms
[INFO] Generating build script completed, took 89ms
[WARNING] Invalidated precompiled build script due to missing asset graph.
[INFO] Precompiling build script... completed, took 826ms
[WARNING] extension|tool/copy_builder.dart was not found in the asset graph, incremental builds will not work.
 This probably means you don't have your dependencies specified fully in your pubspec.yaml.
[INFO] Building new asset graph completed, took 1.3s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[SEVERE] build_web_compilers:ddc on web/background.ddc.module:
Error compiling dartdevc module:extension|web/background.sound.ddc.js

We're sorry, you've found a bug in our compiler.
You can report this bug at:
    https://github.com/dart-lang/sdk/issues/labels/web-dev-compiler
Please include the information below in your report, along with
any other information that may help us track it down. Thanks!
-------------------- %< --------------------
    dartdevc -k arguments: --dart-sdk-summary=/Users/elliottbrooks/.dart-sdks/2.17.3/lib/_internal/ddc_outline_sound.dill --modules=amd --no-summarize -o web/background.sound.ddc.js --source-map --summary=packages/js/js.sound.ddc.dill=packages/js/js --summary=packages/js/js_util.sound.ddc.dill=packages/js/js_util --summary=packages/meta/meta_meta.sound.ddc.dill=packages/meta/meta_meta --summary=packages/meta/meta.sound.ddc.dill=packages/meta/meta --summary=packages/collection/src/utils.sound.ddc.dill=packages/collection/src/utils --summary=packages/collection/src/algorithms.sound.ddc.dill=packages/collection/src/algorithms --summary=packages/collection/src/iterable_zip.sound.ddc.dill=packages/collection/src/iterable_zip --summary=packages/collection/src/comparators.sound.ddc.dill=packages/collection/src/comparators --summary=packages/collection/src/priority_queue.sound.ddc.dill=packages/collection/src/priority_queue --summary=packages/collection/src/canonicalized_map.sound.ddc.dill=packages/collection/src/canonicalized_map --summary=packages/collection/collection.sound.ddc.dill=packages/collection/collection --summary=packages/pub_semver/pub_semver.sound.ddc.dill=packages/pub_semver/pub_semver --summary=packages/path/path.sound.ddc.dill=packages/path/path --summary=packages/stack_trace/src/chain.sound.ddc.dill=packages/stack_trace/src/chain --summary=packages/async/async.sound.ddc.dill=packages/async/async --summary=packages/pool/pool.sound.ddc.dill=packages/pool/pool --summary=packages/logging/logging.sound.ddc.dill=packages/logging/logging --summary=packages/stream_channel/stream_channel.sound.ddc.dill=packages/stream_channel/stream_channel --summary=packages/sse/client/sse_client.sound.ddc.dill=packages/sse/client/sse_client --summary=packages/typed_data/src/typed_buffer.sound.ddc.dill=packages/typed_data/src/typed_buffer --summary=packages/typed_data/typed_buffers.sound.ddc.dill=packages/typed_data/typed_buffers --summary=packages/typed_data/src/typed_queue.sound.ddc.dill=packages/typed_data/src/typed_queue --summary=packages/crypto/crypto.sound.ddc.dill=packages/crypto/crypto --summary=packages/web_socket_channel/src/copy/io_sink.sound.ddc.dill=packages/web_socket_channel/src/copy/io_sink --summary=packages/web_socket_channel/html.sound.ddc.dill=packages/web_socket_channel/html --summary=packages/built_value/json_object.sound.ddc.dill=packages/built_value/json_object --summary=packages/built_collection/built_collection.sound.ddc.dill=packages/built_collection/built_collection --summary=packages/fixnum/fixnum.sound.ddc.dill=packages/fixnum/fixnum --summary=packages/built_value/serializer.sound.ddc.dill=packages/built_value/serializer --summary=packages/built_value/built_value.sound.ddc.dill=packages/built_value/built_value --summary=packages/dwds/data/devtools_request.sound.ddc.dill=packages/dwds/data/devtools_request --summary=packages/dwds/data/isolate_events.sound.ddc.dill=packages/dwds/data/isolate_events --summary=packages/dwds/data/build_result.sound.ddc.dill=packages/dwds/data/build_result --summary=packages/dwds/data/extension_request.sound.ddc.dill=packages/dwds/data/extension_request --summary=packages/dwds/data/connect_request.sound.ddc.dill=packages/dwds/data/connect_request --summary=packages/dwds/data/run_request.sound.ddc.dill=packages/dwds/data/run_request --summary=packages/dwds/data/debug_event.sound.ddc.dill=packages/dwds/data/debug_event --summary=packages/dwds/data/register_event.sound.ddc.dill=packages/dwds/data/register_event --summary=packages/dwds/data/error_response.sound.ddc.dill=packages/dwds/data/error_response --summary=packages/dwds/data/serializers.sound.ddc.dill=packages/dwds/data/serializers --summary=packages/dwds/src/utilities/batched_stream.sound.ddc.dill=packages/dwds/src/utilities/batched_stream --summary=web_api/chrome_browser_action.sound.ddc.dill=web_api/chrome_browser_action --summary=web_api/chrome_debugger.sound.ddc.dill=web_api/chrome_debugger --summary=web_api/api.sound.ddc.dill=web_api/api --summary=packages/dwds/src/sockets.sound.ddc.dill=packages/dwds/src/sockets --packages=.dart_tool/package_config.json --module-name=web/background --multi-root-scheme=org-dartlang-app --multi-root=. --track-widget-creation --inline-source-map --libraries-file=file:///Users/elliottbrooks/.dart-sdks/2.17.3/lib/libraries.json --experimental-emit-debug-metadata --used-inputs-file=/var/folders/wy/0pdp3vd16xv2q3d5dfqb1x7400lsm6/T/ddk_builder_h96W9N/used_inputs.txt web/background.dart --sound-null-safety
    dart --version: 2.17.3 (stable) (Wed Jun 1 11:06:41 2022 +0200) on "macos_x64"

Unsupported operation: static members do not support "." in their names. See https://github.com/dart-lang/sdk/issues/27926
#0      ProgramCompiler._emitJSInteropStaticMemberName (package:dev_compiler/src/kernel/compiler.dart:2599:9)
#1      ProgramCompiler._emitStaticMemberName (package:dev_compiler/src/kernel/compiler.dart:2542:20)
#2      ProgramCompiler._emitStaticTarget (package:dev_compiler/src/kernel/compiler.dart:5598:11)
#3      ProgramCompiler.visitStaticInvocation (package:dev_compiler/src/kernel/compiler.dart:5532:14)
#4      StaticInvocation.accept (package:kernel/ast.dart:6289:44)
#5      ProgramCompiler._visitExpression (package:dev_compiler/src/kernel/compiler.dart:3858:20)
#6      ProgramCompiler.visitExpressionStatement (package:dev_compiler/src/kernel/compiler.dart:3939:12)
#7      ExpressionStatement.accept (package:kernel/ast.dart:8829:43)
#8      ProgramCompiler._visitStatement (package:dev_compiler/src/kernel/compiler.dart:3764:20)
#9      MappedListIterable.elementAt (dart:_internal/iterable.dart:413:31)
#10     ListIterator.moveNext (dart:_internal/iterable.dart:342:26)
#11     new _GrowableList._ofEfficientLengthIterable (dart:core-patch/growable_array.dart:189:27)
#12     new _GrowableList.of (dart:core-patch/growable_array.dart:150:28)
#13     new List.of (dart:core-patch/array_patch.dart:51:28)
#14     ListIterable.toList (dart:_internal/iterable.dart:213:44)
#15     ProgramCompiler.visitBlock (package:dev_compiler/src/kernel/compiler.dart:3952:62)
#16     Block.accept (package:kernel/ast.dart:8885:43)
#17     ProgramCompiler._visitStatement (package:dev_compiler/src/kernel/compiler.dart:3764:20)
#18     ProgramCompiler._emitFunctionScopedBody (package:dev_compiler/src/kernel/compiler.dart:3797:18)
#19     ProgramCompiler._emitSyncFunctionBody.<anonymous closure> (package:dev_compiler/src/kernel/compiler.dart:3566:17)
#20     ProgramCompiler._withLetScope (package:dev_compiler/src/kernel/compiler.dart:2366:25)
#21     ProgramCompiler._withCurrentFunction (package:dev_compiler/src/kernel/compiler.dart:3600:18)
#22     ProgramCompiler._emitSyncFunctionBody (package:dev_compiler/src/kernel/compiler.dart:3562:17)
#23     ProgramCompiler._emitFunction (package:dev_compiler/src/kernel/compiler.dart:3379:11)
#24     ProgramCompiler._emitLibraryFunction (package:dev_compiler/src/kernel/compiler.dart:2748:14)
#25     MappedIterator.moveNext (dart:_internal/iterable.dart:391:20)
#26     new _GrowableList._ofOther (dart:core-patch/growable_array.dart:202:26)
#27     new _GrowableList.of (dart:core-patch/growable_array.dart:152:26)
#28     new List.of (dart:core-patch/array_patch.dart:51:28)
#29     Iterable.toList (dart:core/iterable.dart:470:12)
#30     ProgramCompiler._emitLibraryProcedures (package:dev_compiler/src/kernel/compiler.dart:2713:10)
#31     ProgramCompiler._emitLibrary (package:dev_compiler/src/kernel/compiler.dart:578:7)
#32     List.forEach (dart:core-patch/growable_array.dart:416:8)
#33     ProgramCompiler.emitModule (package:dev_compiler/src/kernel/compiler.dart:431:15)
#34     _compile (package:dev_compiler/src/kernel/command.dart:441:27)
<asynchronous suspension>
#35     compile (package:dev_compiler/src/kernel/command.dart:50:12)
<asynchronous suspension>
#36     _CompilerWorker.performRequest (package:dev_compiler/ddc.dart:68:18)
<asynchronous suspension>
#37     AsyncWorkerLoop.run (package:bazel_worker/src/worker/async_worker_loop.dart:35:20)
<asynchronous suspension>
#38     internalMain (package:dev_compiler/ddc.dart:31:5)
<asynchronous suspension>



[WARNING] build_web_compilers:entrypoint on web/background.dart:
Unable to read extension|web/background.sound.ddc.js, check your console or the `.dart_tool/build/generated/extension/web/background.sound.ddc.js.errors` log file.
[SEVERE] build_web_compilers:entrypoint on web/background.dart:

AssetNotFoundException: extension|web/background.sound.ddc.js.metadata
[INFO] Running build completed, took 8.2s
[INFO] Caching finalized dependency graph completed, took 180ms
[SEVERE] Failed after 8.4s

[Markzipan]

It seems like that PR introduces some non-top-level @JS members with .. Is it possible to make the edits suggested in #27926 for those classes?

[srujzs]

That is strange that this isn't caught before the backend by _js_interop_checks (see https://dart-review.googlesource.com/c/sdk/+/247180 for the CL that added this change). I believe methods like:

@JS()
class ChromeBrowserAction {
  @JS('chrome.browserAction.onClicked.addListener')
  external static void onClickedAddListener(Function callback);
}

are intended to be kept as a top-level instead (or a class member through nested interfaces to avoid the '.'). cc @sigmundch for more details.

[elliette]

Oops I completely missed that bug link! Everything is working with refactoring to avoid .s in the method namespaces: dart-lang/webdev@7ffb9fa

Personally I think:

@JS('chrome.browserAction')
class ChromeBrowserAction {
  @JS('setIcon')
  external static void setIcon(IconInfo iconInfo);

  @JS('onClicked.addListener')
  external static void onClickedAddListener(Function callback);
}

is nicer than:

@JS('chrome.browserAction')
class ChromeBrowserAction {
  @JS('setIcon')
  external static void setIcon(IconInfo iconInfo);
}

@JS('chrome.browserAction.onClicked')
class ChromeBrowserActionOnClicked {
  @JS('addListener')
  external static void addListener(Function callback);
}

but it's understandable if it doesn't work that way. This is something static nested classes could help solve as well.

[Markzipan]

I agree. That 2nd snippet feels much more clunky (and difficult to logically associate) than the former (or something with nested classes). Here's hoping the language team chimes in on that thread.

Glad things are working now!

[sigmundch]

Indeed, I expect this will be reported as a static error in the future. It appears the crash above was with the current stable 2.17.3 SDK, which doesn't have this change. It is available in the current 2.18 beta, though.

@elliette - sorry our documentation on JSInterop is really lacking at the moment. Here are a couple suggestions that may help here.

In some cases, it makes sense to expose those static members as top-level methods directly:

@JS('chrome.browserAction.onClicked.addListener')
external addOnClickedListener(Function callback);

You can also avoid multiple static entry classes if you use a static member for each non-dotted name. For instance,

@JS('chrome.browserAction')
class ChromeBrowserAction {
  @JS('setIcon')
  external static void setIcon(IconInfo iconInfo);

  external static ChromeBrowserActionOnClicked get onClicked;
}

@JS()
@anonymous
class ChromeBrowserActionOnClicked {
  @JS('addListener')
  external static void addListener(Function callback);
}

which allows you to write:

ChromeBrowserAction.onClicked.addListener(f);

instead of

  ChromeBrowserActionOnClicked.addListener(f);

More often than not, it's nice to only use a static/top-level for the first entry in the dotted name, and then use regular instance member for each property in the dotted name:

That would look more like this:

@JS()
Chrome get chrome;

@JS()
@anonymous
class Chrome {
   // Note: static is gone, now it is treated as an instance method of
   // the chrome instance returned by the getter above.
  external BrowserAction get browserAction;
}

@JS()
@anonymous
class BrowserAction {
  // Note: @JS not needed here (the js name is inferred from the Dart name)
  external void setIcon(IconInfo iconInfo);
  external OnClickedHandler get onClicked;
}

@JS()
@anonymous
class OnClickedHandler {
  external void addListener(Function callback);
}

Which allows you to write:

chrome.browserAction.onClicked.addListener(f)

Note that this last approach gives you a better IDE experience too (e.g. discoverability, completion).

The quality of the generated interop code is not optimal today with this approach, that will improve with static interop (which we are actively working on at the moment). Unfortunately today static interop is a bit more verbose until we get a new language feature (view classes). Under the current prototype, the example above would need to be tweaked as follows to use static interop:

@JS()
Chrome get chrome;

@JS()
@anonymous
@staticInterop // new!
class Chrome {}

extension ChromeExtension on Chrome { // code split into an extension
  external BrowserAction get browserAction;
}

@JS()
@anonymous
@staticInterop
class BrowserAction {}

extension BrowserActionExtension on BrowserAction {
  external void setIcon(IconInfo iconInfo);
  external OnClickedHandler get onClicked;
}


@JS()
@anonymous
@staticInterop
class OnClickedHandler { }

extension OnClickedHandlerExtension on OnClickedHandler {
  external void addListener(Function callback);
}

With this you can access the API just like in the previous example:

chrome.browserAction.onClicked.addListener(f)

However, the code generated with dart2js will likely match that of the code using the dotted names in the JS annotation.

Hope you find this useful!

[elliette]

Thank you @sigmundch for the detailed examples, that is very helpful!