CODEWITHSUNDEEP
dartdart-polymerpolymer
Gregor
Gregor

Reputation: 3037

Polymer Elements in Dart Packages

I have a dart package that contains three extensions of polymer element: tp-element-a, tp-element-b and tp-element-c. For each of these elements there is a html-file containing the markup of the element and a dart file for the code. The tp-element-c contains references to the tp-element-a and tp-element-b. The package structure looks like this:

testpolymer
pubspec.yaml
- packages
- asset
    tp-element-a.html
    tp-element-b.html
    tp-element-c.html
- lib
    testpolymer.dart
    tp-element-a.dart
    tp-element-b.dart
    tp-element-c.dart
- web
    index.html

The definitiopn of the polymer elements are very simple:

tp-element-a.html

<polymer-element name="tp-element-a">
<template>
<h1>Hello Element A</h1>
</template>
<script type="application/dart" src="../lib/tp-element-a.dart"></script>
</polymer-element>

tp-element-a.dart

part of testpolymer;

@CustomTag("tp-element-a")
class TpElementA extends PolymerElement {
  TpElementA.created() : super.created() {}
}

I skip the definitions of tp-element-b and tp-element-c. They are similar. With the only difference that tp-element-c uses the tp-element-a and tp-element-b within its template markup.

The file testpolymer.dart contains the definition of the library testpolymer:

library testpolymer;

import "package:polymer/polymer.dart";

part "tp-element-a.dart";
part "tp-element-b.dart";
part "tp-element-c.dart";

In the yaml file I decalre the dependency to the polymer package and add the polymer transformer:

name: testpolymer
description: A pub package
dependencies:
  polymer: any
transformers:
- polymer:
    entry_points: web/index.html

Last not least the index.html just contains the link to the tp-element-c.html and uses this element:

<html>
  <head>
    <link rel="import" href="../asset/tp-element-c.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <div id="sample_container_id">
      <tp-element-c></tp-element-c>
    </div>
  </body>
</html>

So far so good. But when I run a pub build I get errors, that are probably all caused by organizing the dart files in a library:

packages/testpolymer/tp-element-a.dart:1:1:
Directive not allowed here.
part of testpolymer;

packages/testpolymer/tp-element-a.dart:4:26:
A class can't extend a malformed type.
Try correcting the malformed type annotation or removing the 'extends' clause.
class TpElementA extends PolymerElement {

packages/testpolymer/tp-element-a.dart:3:2:
Cannot resolve 'CustomTag'.
@CustomTag("tp-element-a")

So how is it possible to include the code for polymer elements in libraries?

If I don't organize the polymer code as a library, I get another error in tp-element-c.dart, which imports (if no library is used) the tp-element-a.dart and the tp-element-b.dart directly:

The imported libraries 'tp-element-a.dart' and 'tp-element-b.dart' should not have the same name ''

How can I resolve this puzzle?

Upvotes: 2

Views: 397

Answers (1)

grohjy
grohjy

Reputation: 2149

You get the last error message, if you don't have in each dart file unique library uniquename; definitions. In your case names could be: tp-element-a, tp-element-b etc.

Upvotes: 2

Related Questions