Dynamically add a WebComponent in Dart?

2
votes

I was attempting to follow the code found here:

component_created_in_code_test.html

component_created_in_code.dart

However, when I get the dependencies and run the code in dartium, I get the following error. This error occurs when calling the create() method of ComponentItem (in the .dart code):

Breaking on exception: Class 'SayHello' has no instance method 'created_autogenerated'.

I rewrote them ever so slightly below (code is identical except main has been moved to be dart code rather than inlined):

<!-- component_created_in_code_test.html -->
<!doctype html>
<!--
Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="packages/web_ui/testing/testing.js"></script>
</head>
<body>
  <element name="say-hello">
    <template>Hello {{name}}!</template>
    <script type='application/dart' src="component_created_in_code.dart">
    </script>
  </element>
  <say-hello name="component create in html"></say-hello>
</body>
</html>

and the following dart code,

//component_created_in_code.dart

library component_created_in_code;

import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';

class SayHello extends WebComponent {
  String name;
}

void main() {
  Timer.run(() {
    var hello = new SayHello()
    ..host = new DivElement()
    ..name = 'component created in code';

    // "hello" is the DOM node.
    // "hello.xtag" is your SayHello object.
    // We are working on making these be the same object.

    // If the component uses data-binding, we need to make sure the
    // "lifecycle" methods get called. We are working to make this be
    // automatic too.
    var lifecycleCaller = new ComponentItem(hello)..create();
    document.body.nodes.add(hello.host);
    lifecycleCaller.insert();
    window.postMessage('done', '*');
  });
}

It would appear that this dart-lang example has a problem. Am I missing something or is the code just borked?

After getting this question answered, I packaged up the working solution to the problem.

component_created_in_code

Simply pull from git, and then import into dartEditor. Then 'pub install' and 'reanalyze source' (never hurts) from the editor, then right click "Run in Dartium" on "web/component_created_in_code.html".

2
dartdart-webui
Stephen, I got the errors below when running your sample. Do you see them too? "//@ sourceMapURL=" source mapping URL declaration is deprecated, "//# sourceMapURL=" declaration should be used instead. "//@ sourceMapURL=" source mapping URL declaration is deprecated, "//# sourceMapURL=" declaration should be used instead. FAIL Internal error: 'package:web_ui/web_ui.dart': Error: line 137 pos 34: class 'WebComponent' overrides function 'createInstance' of super class 'Element' with incompatible parameters DocumentFragment createInstance() => host.createInstance(); – Y2i
For some reason I had old libraries in the packages folder even after doing pub install. Doing it couple more times solved the problem, thank you! – Y2i

2 Answers

1
votes

I tested the same with build 0.5.13_r23552 editor & SDK and run into the same problem when running in Dartium. If I do the dart2js (Run as Javascript/Generate javascript) however, it works.

However, be aware of the following (based on my experience):

  • Try to change to the SDK version that it has been tested and verified with.
  • It seems the tests are updated to run with 0.5.15; while the SDK delivered with the editor on the dartlang site is only 0.5.13. Maybe clone the bleeding edge version to make it work?
  • Dart is constantly evolved. Always do pub update on your project after updating to the newest editor, if you are using dependencies and not a specific library version.
  • Add the build.dart to your project to make sure that code is generated on changes (See bottom of this page: Build.dart setup)
1
votes

It sounds like you need to run the Web UI compiler first. Either run packages/web_ui/dwc.dart on your HTML file, or write a build.dart along these lines:

import 'dart:io';
import 'package:web_ui/component_build.dart';

void main() {
  build(new Options().arguments, ['web/component_created_in_code_test.html']);
}