How to move WebComponent to folder and use it then?

Question

I am trying to make pretty simple things work for me in Dart. I created web-ui application from template and want to move xclick-counter web component out from root folder. Here how my project looks like in the Dart Editor:

NewComposite (folder)
   pubspec.lock (file)
   pubspec.yaml (file)
   web (folder)
      lib(folder)
         comp1.dart (file)
         Comp1.html (file)
         mylib.dart (file)
      newcomposite.css (file)
      newcomposite.dart (file)
      newcomposite.html (file)
      xclickcounter.dart (file)
      xclickcounter.html (file)

Lib folder contains library which is just copy of ClickCounter component renamed to Comp1. The question is how should I reference Comp1 to use it inside the newcomposite.html?. So far I am getting number of error in out folder code which I am not even supposed to change. See exact code below:

Source mylib.dart:

library mylib;

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

part 'comp1.dart';

comp1.dart:

part of mylib;

class Comp1 extends WebComponent {
  @observable
  int count = 0;

  void increment() {
    count++;
  }
}

Comp1.html

<html>
  <body>
    <element name="x-comp1" constructor="Comp1" extends="div">
      <template>
        <div>
          <button on-click="increment()">Click me</button><br />
          <span>(click count: {{count}})</span>
        </div>
      </template>
      <script type="application/dart" src="comp1.dart"></script>
    </element>
  </body>
</html>

newcomposite.html (where reference should be)

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="newcomposite.css">

    <!-- import the comp1-->
    <link rel="import" href="lib/comp1.html">
  </head>
  <body>
    <h1>NewComposite</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div>
    </div>

    <script type="application/dart" src="newcomposite.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Did you try moving your lib referencing your own project as a package as per my answer below? Did it help? — ianmjones, Aug 10 '13 at 15:23

score 0 · Answer 1 · answered Aug 05 '13 at 13:35

It should work better if you move your lib directory up into the root of your project:

NewComposite (folder)
   pubspec.lock (file)
   pubspec.yaml (file)
   lib(folder)
      comp1.dart (file)
      comp1.html (file)
      mylib.dart (file)
   web (folder)
      newcomposite.css (file)
      newcomposite.dart (file)
      newcomposite.html (file)
      xclickcounter.dart (file)
      xclickcounter.html (file)

Assuming you have named your project as "newcomposite" in the pubspec.yaml, you can then import your component into newcomposite.html by referring to your own project library:

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="newcomposite.css">

    <!-- import the comp1-->
    <link rel="import" href="package:newcomposite/comp1.html">
  </head>
  <body>
    <h1>NewComposite</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div>
    </div>

    <script type="application/dart" src="newcomposite.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

How to move WebComponent to folder and use it then?

1 Answers1