No Web Components in Latest Dart

‹prev | My Chain | next›

I am somewhat stumped in my inability to get web components started last night. Digging through the backtrace that I received left me over my head. Since I am just getting started, I do not know this stuff well enough to understand how the deep stacktrace relates to web components or my inexperience with them. In such situations, it is always best to simplify the problem.

Instead of trying to debug a web component that I am writing from scratch, I clone Seth Ladd's dart-web-components-tests and try again. These do not include my silly mistakes, so if the problem still exists, then it is likely something to do with incompatibility between the web_ui library and recent Dart—I currently have 0.1.2.0_r16666 (Fri Jan 4 17:08:38 2013) installed.

But even when I run the compiler command, I still get that crazy stacktrace:

➜  dart-web-components-tests git:(master) ✗ dart --package-root=packages/ packages/web_ui/dwc.dart --out out/ web/App.html
Unhandled exception:
FutureUnhandledException: exception while executing Future
  NoSuchMethodError : method not found: 'add'
  Receiver: null
  Arguments: [" '"]
original stack trace:
  #0      Object._noSuchMethod (dart:core-patch:1360:3)
  #1      Object.noSuchMethod (dart:core-patch:1361:25)
  #2      directiveText (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/codegen.dart:146:11)
  #3      WebComponentEmitter.run (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/emitters.dart:805:42)
  #4      Compiler._emitComponents (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/compiler.dart:268:55)
  #5      Compiler._emit.<anonymous closure> (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/compiler.dart:205:24)
  #6      time (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/utils.dart:37:24)
  #7      Compiler._time (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/compiler.dart:280:16)
  #8      Compiler._emit (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/compiler.dart:202:12)
  #9      Compiler.run.<anonymous closure> (file:///home/chris/repos/dart-web-components-tests/packages/web_ui/src/compiler.dart:92:12)
  #10     _FutureImpl.transform.<anonymous closure> (bootstrap:881:37)

#0      _FutureImpl._complete (bootstrap:844:11)
#1      _FutureImpl._complete (bootstrap:848:5)
#2      _FutureImpl._setException (bootstrap:873:14)
#3      _CompleterImpl.completeException (bootstrap:952:30)
#4      _FutureImpl._forwardException.<anonymous closure> (bootstrap:936:34)
#5      _FutureImpl._complete (bootstrap:832:22)
#6      _FutureImpl._complete (bootstrap:848:5)
#7      _FutureImpl._setException (bootstrap:873:14)
#8      _CompleterImpl.completeException (bootstrap:952:30)
...

The stacktrace actually goes until #71, but it seems repetitive past this point.

The dart-web-components-tests repository also includes a build.dart script. When I run that with just dart build.dart, I get the same stacktrace. So this begins to look very much like an incompatibility between package and newer Dart. The last thing that I can think to try is to open the project in the DartEditor, and here I get the same error:

Bummer.

I do not want to switch back to an older version of Dart to see if that resolves it. I am very much focused on finishing the updated version of Dart for Hipsters with the latest and greatest Dart. Switching back and forth between Dart's seems like too much of a distraction at this point.

OK. Let's take another crack at that stacktrace. Last night, I updated codegen.dart in web_ui so that that following code:

String directiveText(
    DartDirectiveInfo directive, LibraryInfo src, PathInfo pathInfo) {
  var buff = new StringBuffer();
  var uri = pathInfo.transformUrl(src.inputPath, directive.uri);
  buff.add(directive.label)
      .add(" '")
      .add(uri.replaceAll("'", "\\'"))
      .add("'");
  // ...
  buff.add(';');
  return buff.toString();
}

Would use method cascades instead:

String directiveText(
    DartDirectiveInfo directive, LibraryInfo src, PathInfo pathInfo) {
  var buff = new StringBuffer();
  var uri = pathInfo.transformUrl(src.inputPath, directive.uri);
  buff
    ..add(directive.label)
    ..add(" '")
    ..add(uri.replaceAll("'", "\\'"))
    ..add("'");
  // ...
  buff.add(';');
  return buff.toString();
}

That only sprung a leak elsewhere in the proverbial dike, but tonight I plug that one as well by adding a method cascade in utils.dart as well:

void _printMessage(String logMessage, int duration, bool useColors) {
  var buf = new StringBuffer();
  // ...
  buf
    ..add(duration)
    ..add(' ms');
  // ...
  print(buf.toString());
}

I am making these changed directly in my $HOME/.pub-cache, which seems bad, but it's not like I have much to lose as this point. Anyhow, with both of those changes, I actually get the code to compile:

➜  dart-web-components-tests git:(master) ✗ dart --package-root=packages/ packages/web_ui/dwc.dart --out out/ web/HelloWorld.html
Total time spent on web/HelloWorld.html                      -- 147 ms

Yay!

Well, yay, except that the compiled code does not actually run. It contains a naked null which generates a semi-colon warning:

// Initialize fields.
  null

Even after editing the compiled code to include a semi-colon, I still get an error in Dartium when I try to view my web component:

Exception: NoSuchMethodError : method not found: 'replaceWith'
Receiver: null
Arguments: [Instance of 'Text']
Stack Trace: #0      Object._noSuchMethod (dart:core-patch:1360:3)
#1      Object.noSuchMethod (dart:core-patch:1361:25)
#2      updateBinding (file:///home/chris/repos/dart-web-components-tests/out/packages/web_ui/templating.dart:56:20)
#3      init_autogenerated.<anonymous closure> (file:///home/chris/repos/dart-web-components-tests/out/HelloWorld.dart:47:45)
#4      watchAndInvoke (file:///home/chris/repos/dart-web-components-tests/out/packages/web_ui/watcher.dart:114:13)
#5      init_autogenerated (file:///home/chris/repos/dart-web-components-tests/out/HelloWorld.dart:46:47)
#6      main (file:///home/chris/repos/dart-web-components-tests/out/HelloWorld.html_bootstrap.dart:7:30)

I think it best to call it a day at this point. I might be able to get the generated code if I keep digging, but this will only force me to dig back through the code generator in an effort to understand why the generated code is bad. It seems best to acknowledge that web_ui does not work with the latest Dart and move on to more fertile territory.


Day #622