How to properly manage imports in Polymer.dart

145 views
Skip to first unread message

marco.jkob

unread,
Dec 30, 2013, 7:57:45 PM12/30/13
to w...@dartlang.org
I've been reading to lots of issues regarding imports of Polymer elements in Dart. Here are some of them:
  1. Two polymer elements x and y in the "lib" folder. x needs to import y in HTML only.
  2. --> This seems to work with 
    <link rel="import" href="y.html">

  3. Two polymer elements x and y in the "lib" folder. x needs to import y in Dart only.
    --> This seems to work with 
    import 'y.dart';

  4. Two polymer elements x and y in the "lib" folder. x needs to import y in both HTML and Dart.
    --> How should this import be done?

  5. A polymer element x in the "lib" folder. A polymer element w in the web folder importing x. Both "lib" and "web" are in the same Dart package. 
    --> How should this import be done?

  6. A polymer element x in the "lib" folder. A polymer element e in the example folder importing x. Both "lib" and "example" are in the same Dart package. 
    --> How should this import be done? (There is another problem with Pub Build not working with polymer elements in the example folder - is there a bug for this?

  7. A polymer element x in the "lib" folder of package xpack. A polymer element z in the "web" folder of another package zpack. z needs to import x in both HTML and Dart.
    --> How should this import be done?

    I hope someone can shed some light on this.

    Nick Floros

    unread,
    Dec 30, 2013, 8:33:38 PM12/30/13
    to w...@dartlang.org
    I am also currently observing some interested phenomena with regards to imports.
    In particular.
    When an elements imports two other elements, created method on the imported elements is invoked twice. The first time it is invoked, shadowRoot is null. This causes me a number of issues as I trying to sort out bindings; problem is solved using an if (shadowRoot!=null)

    <link rel="import" href="packages/pTest10/navtabs.html">
    <link rel="import" href="linechart.html">
    <polymer-element name="weather-app">
      <template>
        <style>
        </style>
        <div>
          <nav-tabs id="navTab"></nav-tabs>
          <line-chart id="speedChart" chartTitle="Wind speed" xaxisTitle="Time" yaxisTitle="Speed (knots)"></line-chart>
          <line-chart id="directionChart" chartTitle="Wind direction" xaxisTitle="Time" yaxisTitle="Direction (degrees)" minValue="0" maxValue="360"></line-chart>
        </div>
      </template>
      <script type="application/dart" src="weatherapp.dart"></script>
    </polymer-element>

    This does not happen if there is only one import?

    Also if you define the imports within the polymer-element definition the same happens?

    I wonder if I am doing something wrong here...

    Nick

    Siggi Cherem

    unread,
    Dec 30, 2013, 9:22:24 PM12/30/13
    to w...@dartlang.org
    On Mon, Dec 30, 2013 at 4:57 PM, marco.jkob <marco...@gmail.com> wrote:
    I've been reading to lots of issues regarding imports of Polymer elements in Dart. Here are some of them:

    There have also been a few threads recently talking about it. For example, this very recent thread might be useful to you: 




    I need to solve the following problems:
    1. Two polymer elements x and y in the "lib" folder. x needs to import y in HTML only.
    2. --> This seems to work with 
      <link rel="import" href="y.html">
    this seems good 
    1. Two polymer elements x and y in the "lib" folder. x needs to import y in Dart only.
      --> This seems to work with 
      import 'y.dart';

    seems good too
    2. Two polymer elements x and y in the "lib" folder. x needs to import y in both HTML and Dart.
      --> How should this import be done?
    combine 1 & 2 (href="y.html" and import "y.dart") 

    2. A polymer element x in the "lib" folder. A polymer element w in the web folder importing x. Both "lib" and "web" are in the same Dart package. 
      --> How should this import be done?
    if w is directly in web/ do:
    href="packages/my_pkg/x.html"  in html
    import "package:my_pkg/x.dart" in dart

    but if you have more folders under 'web/', you might want to be aware of issue 15808. Normally the rule is go up with ../ to the level of the entrypoint file, and enter the packages folder from there.


    2. A polymer element x in the "lib" folder. A polymer element e in the example folder importing x. Both "lib" and "example" are in the same Dart package. 
      --> How should this import be done?
    here it should be the same as if e were in web 
     
    1. (There is another problem with Pub Build not working with polymer elements in the example folder - is there a bug for this?
    Yes, apparently there were 2 :-). I just merged them in issue 14673 

    2. A polymer element x in the "lib" folder of package xpack. A polymer element z in the "web" folder of another package zpack. z needs to import x in both HTML and Dart.
      --> How should this import be done?
    href="packages/xpack/x.html"  in html
    import "package:xpack/x.dart" in dart

    Another two scenarios: 
    • A polymer element x in the "lib" folder of package xpack. A polymer element z in the "lib" folder of another package zpack. z needs to import x in both HTML and Dart.
    href="../../packages/xpack/x.html"  in html
    import "package:xpack/x.dart" in dart

    • A polymer element x in the "lib" folder of package xpack. A polymer element z in "lib/a/b/c" folder of another package zpack. z needs to import x in both HTML and Dart.
    import "package:xpack/x.dart" in dart as before.

    href="../../../../../packages/xpack/x.html"  in html  (imagine you are inside packages/zpack/a/b/c, then you use ../ to reach all the way to the top, and enter packages/xpack/x.html) I agree this is a very ugly import, I hope we can come up with some ideas to make it better.



      I hope someone can shed some light on this.

      Hope the examples above help. We also plan to add some help in the polymer linter in the future.

      Cheers and happy new year!
      Siggi 

      --
      You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
      To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
      Visit this group at http://groups.google.com/a/dartlang.org/group/web/.

      Siggi Cherem

      unread,
      Dec 30, 2013, 9:29:19 PM12/30/13
      to w...@dartlang.org
      Hey Nick,

      This sounds like a bug to me. The 'created' method should be invoked only once. Can you file a bug with more details, maybe a quick example to repro this? There used to be a similar bug in Dartium where this was caused by some garbage collection problem. We were tracking that issue here: https://code.google.com/p/dart/issues/detail?id=14483

      It's possible that it is the same issue and it's not entirely fixed, or that it was recently fixed but the fix hasn't made it out to the build of Dartium that you are using. If you don't mind, please makes sure to include detail version information of dartium/dartvm/polymer, to make it easier to track.

      Thanks!
      Siggi




      marco.jkob

      unread,
      Dec 31, 2013, 5:54:11 AM12/31/13
      to w...@dartlang.org
      Hey Siggi

      Thank you very much. That helps a lot!

      Happy new year to you too!
      Marco
      Reply all
      Reply to author
      Forward
      0 new messages