Dart App Organising Sub-module(s)

Question

This question comes in two parts. The first can be summed up by Public Image Limited, "This is what you want / This is what you get."

I'll keep the question simple by pointing to the tutorial:

• Define a Custom Element Dart tutorial

I 'decided' that I'd like to treat different elements as project assets (so to speak). So I made a sub-folder: named: components, that sits below the $/web/ folder, per:

• enchilada - Pub Package Layout

Something like this:

enchilada/
   :
  web/
    index.html
    main.dart
    style.css
    components/
        tut_stopwatch.html
        tut_stopwatch.dart

When I did this: the Dart Editor becomes very confused. So firstly, I need to specify "what I want" and then describe, "What I get" [got]

I want:

• Dart to let me put sub-modules in subordinate folders.
• In this case custom elements like "tut_stopwatch", with appropriate adjustments for path changes (which I did).
• Ideally, I'd prefer if Dart could integrate subordinate modules at multiple levels.
• You might consider a custom UI element like a 'panel' that is a 'container' for several nested sub-components.

I get:

• A slew of compilation errors. These errors cycle: they "resolve" and later "reappear".
• I closed Dart Editor [1.2.0-release], Dart SDK [1.2.0] and restarted -- The problem persists.
• The 'error' centres on polymer, viz.:

 Target of URI does not exist: 'package:../polymer/polymer.dart'
 Annotation can be only constant variable or constant constructor invocation
 Classes can only extend other classes
 Annotation can be only constant variable or constant constructor invocation

• I think not finding 'polymer' is a symptom. Dart Editor cycles: find <-> not_find

The cause of this behaviour appears to be me having moved the two files:

1. tute_stopwatch.html, and
2. tute_stopwatch.dart ...

Into the [sub-]components/ folder as shown (above). The error stems from the import for polymer in the file:

• components/tute_stopwatch.dart

Code as follows (Dart build errors as comments):

import 'package:polymer/polymer.dart';

@CustomTag('tute-stopwatch')                  // <-- Target of URI does not exist: 'package:polymer/polymer.dart'
class TuteStopwatch extends PolymerElement {  // <-- Annotation can be only constant variable or constant constructor invocation
  @observable String counter='00:00';         // <-- Classes can only extend other classes
                                              //     Undefined class 'PolymerElement'
  TuteStopwatch.created() : super.created();

    :
} // TutStopwatch class

One thing to point-out is that the Dart Editor makes a Windows Junction link to the packages/ folder in every sub-folder. That would be a symlink on Linux or Mac. So the packages file path should function OK.

I'm looking for a strategy to get what I want? To have sub-folders for different modules or 'features' with Dart and Dart Editor in development? Thanks in advance ... /w

---

v02 ... Added code for import polymer error.
v01 ... Original query.

Answer 1

I have resolved the issue I believe. I am hoping that people who find a better way out of this kind of cul de sac will also post better alternatives. This 'solution'(?) is quite indelicate and although the application runs correctly (as written) I still have errors in the Dart Editor Problems tab..

At least I know this produces an app that works according to the code I am reading. I don't think I have a syntax error with the line:

import 'package:polymer/polymer.dart';

The demo code works and Dart Editor reports an error. So yes I agree, the "messages make no sense" and they are wrong; because the code runs just fine with some unique test values (see below). So imho, the Dart Editor has a problem. If anyone can confirm this, we can report a bug.

The way I got-out of this problem was:

1. Close the Dart Editor
2. Remove the build/ directory
3. Restart Dart Editor
4. Run your app.

For testing, I made changes to bot the 'components' files to ensure nothing from an old build was creating side-effects (example: Define a Custom Element).

• tut_stopwatch.html ... Changed the colour.
• tut_stopwatch.dart ... Changed the timer increment.

Volia! The demo stopwatch embedded component works with a 'pink' colour and a '3 second' increment.

I want to cross-link this with this question:

• Dart Editor equivalent of Eclipse command “Project >> Clean…”?

In moderate and larger sized projects, there's more to keeping dependencies and interactions straight than just a clean command. I think some visibility and better control over the build would be an improvement.

I have ZIP-ped the project folder for this exercise. If anyone would like a copy I can email it. Syntax-wise I made NO changes to the demo code except to fix the ":host" bug. I just moved 2 x files to a components/ folder.

~ aloha

Answer 2

Too long for a comment so I post it as answer:

I read your answer but that doesn't make much sense.
I work fulltime with Dart since several months (most of the time with Polymer) and I haven't seen anything similar.

What you can do if DartEditor shows weird error messages is execute 'Reanalyze Sources' in the context menu of your application directory in DartEditor.
If this doesn't change the errors, the errors are in your code.

I have never before seen, that the build directory has influence to errors in your web directory.

Dart is very forgiving so it's no surprise that the app runs when DartEditor shows errors/warnings/hints because the analyzer running in DartEditor is not.