How can I link to an external Dart library containing the constructor for my web component?

Issue

I’ve been following the Dart web-ui codelab. When I embed dart source code inside a web component .html file, I’m not getting any static analysis or autocomplete support in the Dart Editor (there’s an open bug for this http://code.google.com/p/dart/issues/detail?id=7449 ). Hence, I’m looking for a temporary workaround by using the src attribute.

According to the spec, the src attribute is supported for web components in Dart:
https://www.dartlang.org/articles/dart-web-components/spec.html#behavior. I tried linking to an external Dart library: given a foo.html web component for

<element name="x-foo-component" constructor="FooComponent" extends="div">

I’d like to link to a separate foo_embed.dart file in the same directory as my web component, which defines FooComponent, by adding:

<script type="application/dart" src="foo_embed.dart"></script>

within foo.html. Following the spec’s suggestions, foo_embed.dart needs to be a Dart library, and would contain:

library foo_embed;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
    ...
}

When I try this, running build.dart (from these instructions http://www.dartlang.org/articles/dart-web-components/tools.html) ends up only putting foo_embed.dart in out/ and there’s no out/foo.html.dart generated for importing in application.dart.

As expected, pasting the contents of foo_embed.dart as an inline script inside foo.html directly (as done in the codelab) works with build.dart, and I can launch my webapp in Dartium, so I don’t seem to have any other syntax problems in my project.

Do I probably have a simple syntax mistake somewhere? Or is this a temporary limitation of the Dart web components compiler? Thanks.

Solution

I can’t reproduce your problem.

This works for me:

lib/foo.dart

library foo;

import 'package:web_ui/web_ui.dart';

class FooComponent extends WebComponent {
  var foo = 'asddfg';
}

lib/foo.html

<element name="x-foo" constructor="FooComponent" extends="div">
  <template>
    <input value="{{ foo }}" />
  </template>
  <script type="application/dart" src="foo.dart"></script>
</element>

example/test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="components" href="packages/foo/foo.html" />
  </head>
  <body>
    <x-foo></x-foo>

    <script type="application/dart">main() {}</script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

Then I open up Dartium and go to .../example/out/test.html and I see an input with the data bound to it properly.

Answered By – Kai Sellgren

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Issue

Solution

Leave a Reply Cancel reply