upcoming polymer 0.11.0

279 views
Skip to first unread message

Siggi Cherem

unread,
Jun 24, 2014, 4:03:49 PM6/24/14
to w...@dartlang.org, anno...@dartlang.org
Hi everyone,

Very soon we'll be publishing polymer 0.11.0. We wanted to let you know about a few important changes that will likely affect you when you upgrade your project.

1. Include platform.js at the top of your application.

platform.js used to be included in polymer.html, but now you need to include it yourself. This split helps have a clear separation between polymer and the polyfills. platform.js has polyfills for many features that are not available yet natively in browsers (like html imports, and template binding). One day, when browsers implement all these new standards, platform.js will not be necessary, but everything loaded by polymer.html will continue to be useful.

2. Include dart_support.js immediately after platform.js

dart_support.js also used to be included as part of polymer.html. It's main purpose is to complement what we have in platform.js to make it work well with Dart. It contains hooks to make dart2js understand how platform.js patches the DOM, and it contains extra logic to provide a Dart API for custom elements written in Javascript (see web_components/interop.dart for details).

By having dart_support.js separate from platform.js we were able to keep platform.js identical to the one used in polymer.js projects. So you can easily swap out one version of platform.js for another if you want.

3. Move polymer.html above polymer-element declarations

polymer.html defines the <polymer-element> element, so you should import it before defining polymer elements. Unless you define a polymer-element in the entry point of your app, you no longer need to include polymer.html there (platform.js and dart_support.js is all you need). 

4. enteredView and leftView got replaced by attached and detached, respectively

this follows a change in dart:html that affect all custom elements. Unfortunately, you wont see a deprecation message. @deprecated is great to announce that you should call a different method, but it can't indicate that you need to change a declaration.

Here is an example that summarizes the changes 1, 2 & 3. Instead of writing an app like this:


web/index.html:

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="x_tag.html">
<body>
<x-tag></x-tag>
<script type="application/dart">export "package:polymer/init.dart";</script>
web/x_tag.html:

<polymer-element name="x-tag">...</polymer-element>
<script type="application/dart" src="x_tag.dart"></script>
You should should write it like this:

web/index.html:

<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="x_tag.html">
<body>
<x-tag></x-tag>
<script type="application/dart">export "package:polymer/init.dart";</script>
web/x_tag.html:

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="x-tag">...</polymer-element> 
<script type="application/dart" src="x_tag.dart"></script>   

These changes are already in our latest pre-release (0.11.0-dev.8), so you can already start playing with the changes if you like. Later this week we'll send out some examples of how all these pieces work and how they help make polymer.dart and polymer.js interoperate more easily.

Cheers,
- The polymer.dart team

Siggi Cherem

unread,
Jun 24, 2014, 11:19:13 PM6/24/14
to w...@dartlang.org, anno...@dartlang.org
A quick follow up, 0.11.0 is now available.

Please note that, while the previous email might seem like there are a lot of changes, the changes are pretty small and easy to make, we just wanted to give you more details so you know why these changes are happening.

The summary version is:
  • add platform.js and dart_support.js before any HTML imports in your app
  • import polymer.html before using polymer-element
  • make sure you are no longer using enteredView/leftView.
Cheers!

Siggi Cherem

unread,
Jun 24, 2014, 11:26:19 PM6/24/14
to w...@dartlang.org, anno...@dartlang.org
On Tue, Jun 24, 2014 at 8:18 PM, Siggi Cherem <sig...@google.com> wrote:
A quick follow up, 0.11.0 is now available.

Please note that, while the previous email might seem like there are a lot of changes, the changes are pretty small and easy to make, we just wanted to give you more details so you know why these changes are happening.

The summary version is:
  • add platform.js and dart_support.js before any HTML imports in your app
Just to be clear: this is only needed before HTML imports in your entrypoint, you don't need to include these scripts in other HTML files where you define elements that are imported from your entrypoint.

johan.henselmans

unread,
Jun 25, 2014, 2:53:24 AM6/25/14
to w...@dartlang.org, anno...@dartlang.org
I just downloaded the latest dev version of Dart Editor (version 1.5.0.dev_04_23 (DEV)) and created a polymer project. 

In there the lines 
    <script type="application/dart">export 'package:polymer/init.dart';</script
    <script src="packages/browser/dart.js"></script>


Are in the <head> section, above  the css inclusion. 

Should both be moved to the bottom of the body section?

Is 
    <script src="packages/browser/dart.js"></script>

Still necessary?

mark.hatsell

unread,
Jun 25, 2014, 12:42:55 PM6/25/14
to w...@dartlang.org, anno...@dartlang.org
Hi

Since upgrading, clicking any li element in my UI seems to cause the whole page to reload. 

Any ideas?

Thanks
Mark

mark.hatsell

unread,
Jun 25, 2014, 12:53:01 PM6/25/14
to w...@dartlang.org, anno...@dartlang.org
Actually it's anything with a href="#".

On Tuesday, June 24, 2014 9:03:49 PM UTC+1, sigmund wrote:

Siggi Cherem

unread,
Jun 26, 2014, 9:15:20 PM6/26/14
to w...@dartlang.org, anno...@dartlang.org
On Tue, Jun 24, 2014 at 11:53 PM, johan.henselmans <johan.he...@gmail.com> wrote:
I just downloaded the latest dev version of Dart Editor (version 1.5.0.dev_04_23 (DEV)) and created a polymer project. 

In there the lines 
    <script type="application/dart">export 'package:polymer/init.dart';</script
    <script src="packages/browser/dart.js"></script>


Are in the <head> section, above  the css inclusion. 

Should both be moved to the bottom of the body section?

It's not necessary but we commonly do so.  Today Dartium doesn't run your code until DOMContentLoaded, but that might change in the future. Putting it at the bottom of the page helps makes it more intuitive to people reading your code that you don't expect the code to run until later.


Is 
    <script src="packages/browser/dart.js"></script>

Still necessary?

We inject it in the polymer transformers ran by pub-build, so it is not necessary. If you write a non-polymer app, you might still want to use it there.

--
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/.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/2a6cd011-8b3b-422f-b550-be405af7d38c%40dartlang.org.

davenotik

unread,
Jul 13, 2014, 4:47:27 AM7/13/14
to w...@dartlang.org, anno...@dartlang.org
At one point, I had everything working, and *not* as described here, namely:
  • I did not include the export init.dart, as I would get "Only one Dart script tag allowed per document" as I also have an index.dart.
  • I did not include <link rel="import" href="packages/polymer/polymer.html"> at the top of each element.
(Looking at http://github.com/davenotik/dart-stack should show you how the way I had it working.)

It all seemed to work until I had problems including elements within other elements. I'd try to import e.g. core-overlay into my x-dialog element, but I'd get "Uncaught Possible attempt to load Polymer twice ", though putting the core-overlay import into index.dart itself seemed to eliminate that error. However, when I do that it doesn't seem the core-overlay element is instantiated properly as I can't access its properties and it's being seen as an HtmlElement or some odd rather than the Polymer element that it is.

This has been very frustrating. What is the absolute latest correct approach? The version I'm using at the moment is 0.11.1-dev.

Thank you!

Günter Zöchbauer

unread,
Jul 13, 2014, 8:45:25 AM7/13/14
to w...@dartlang.org, anno...@dartlang.org
When you have your own main() you shouldn't add a script tag for `polymer/init.dart`. Either the one or the other but never both.
> <link rel="import" href="packages/polymer/polymer.html">
You have it in your entry page where it isn't necessary. 
Did it cause some problems when you added to at the top of your element html file?

I also added some comments in your code. I suppose you got notifications.

davenotik

unread,
Jul 13, 2014, 6:35:52 PM7/13/14
to w...@dartlang.org, anno...@dartlang.org
Thanks Günter! I made the changes.

Yes, it causes problems:

  1. Uncaught Possible attempt to load Polymer twice HTMLImports.js:46
    1. a.deliverDeclarationsHTMLImports.js:46
    2. (anonymous function)polymer.js:96
    3. (anonymous function)polymer.js:99
  1. Exception: NoSuchMethodError: method not found: 'whenPolymerReady' Receiver: Instance of 'JsFunction' Arguments: [Closure: () => dynamic]

    I was never able to get it to work like this, the documented way.

    Do I also need import 'package:polymer/polymer.dart'; at the top of each element's .dart, as well as my index.dart?

    If it's not there (I tried removing all), the IDE (WebStorm) balks at annotations and references to PolymerElement, as does the console:

    1. Uncaught Possible attempt to load Polymer twice HTMLImports.js:46
    Internal error: 'http://localhost:63342/woven-app/lib/components/inbox_list/inbox_list.dart': malformed type: line 13 pos 25: cannot resolve class 'PolymerElement' from 'InboxList' class InboxList extends PolymerElement with Observable { ^

    And yet still says attempt to load twice! Grr.

    --D

    davenotik

    unread,
    Jul 13, 2014, 7:45:04 PM7/13/14
    to w...@dartlang.org, anno...@dartlang.org
    Ok, progress.

    I commented out all elements being imported into index.html. The moment I re-enabled my-element.html, I got the "Possible attempt to load Polymer twice".

    I comment out the polymer.html so it looks like:

    <!--<link rel="import" href="../../../packages/polymer/polymer.html">-->
    <polymer-element name="my-element">
          <template>
      ...

    And it starts working. This is the same for all elements – it does not like the polymer.html import at the top.

    I recall seeing somewhere that this is implied from the index.html and not needed in the element? @Siggi?

    But it goes further: I can't even implement other elements within elements. For example if my-element.html wanted to import core-overlay.html, I'd get the same "Possible attempt..." error.

    The workaround is to import cover-overlay.html from index.html, not from my-element.html.

    That just seems wrong. Did I come across some kind of bug?

    This isn't an issue all the time – in my add-stuff component I am able to import my x-dialog component at the top.

    I pushed in the state I got it working in: https://github.com/DaveNotik/dart-stack

    Günter Zöchbauer

    unread,
    Jul 14, 2014, 3:16:42 AM7/14/14
    to w...@dartlang.org, anno...@dartlang.org
    I never had similar problems when all done like recommended with or without paper_elements.

    But I wasn't yet able to find a workaround for 

    No getter for '$'.
    when Angular.dart is used with Polymer and paper_elements http://stackoverflow.com/questions/24724848

    Günter Zöchbauer

    unread,
    Jul 14, 2014, 3:46:28 AM7/14/14
    to w...@dartlang.org, anno...@dartlang.org
    I filed https://github.com/angular/angular.dart/issues/1227

    David Notik

    unread,
    Jul 14, 2014, 12:00:15 PM7/14/14
    to w...@dartlang.org
    I'm confused. Was this in answer to my Polymer question?
    --
    You received this message because you are subscribed to a topic in the Google Groups "Dart Web Development" group.
    To unsubscribe from this topic, visit https://groups.google.com/a/dartlang.org/d/topic/web/bFdGbFRVVwA/unsubscribe.
    To unsubscribe from this group and all its topics, send an email to web+uns...@dartlang.org.

    Visit this group at http://groups.google.com/a/dartlang.org/group/web/.
    To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/29e352df-fd25-4988-9a8a-02dd3b051346%40dartlang.org.


    --
    --
    Woven
    http://woven.co
    206-351-3948
    @DaveNotik

    Günter Zöchbauer

    unread,
    Jul 14, 2014, 12:22:25 PM7/14/14
    to w...@dartlang.org, da...@woven.org
    For a StackOverflow question and because I'm curious I tried Poylmer with Angular and I run into this error.
    Thought it might be related.

    Siggi Cherem

    unread,
    Jul 14, 2014, 1:26:57 PM7/14/14
    to w...@dartlang.org, anno...@dartlang.org
    Hey Dave,

    I took a quick peek at your code, and my best guess is that these imports should not use '../lib/components/'. Instead you should use 'packages/wovenapp/components/...' (use 'packages' any time you go into a lib folder, even the one in your own package).

    One of the reasons you may see that warning about Polymer being loaded twice is that you might have 2 paths to load the same file. If you enter the lib folder via '../lib/', you may be loading polymer.html with 2 different paths (possibly 'file://a/b/c/web/packages/polymer/polymer.html' and 'file://a/b/c/packages/polymer/polymer.html'). Using 'packages' to enter the lib folder, and using the '../../packages' from within your lib folder gives us a way to guarantee that you load the polymer.html from the same URL always.


    On Mon, Jul 14, 2014 at 12:46 AM, Günter Zöchbauer <gzo...@gmail.com> wrote:
    I filed https://github.com/angular/angular.dart/issues/1227


    On Monday, July 14, 2014 9:16:42 AM UTC+2, Günter Zöchbauer wrote:
    I never had similar problems when all done like recommended with or without paper_elements.

    But I wasn't yet able to find a workaround for 

    
No getter for '$'.
    when Angular.dart is used with Polymer and paper_elements http://stackoverflow.com/questions/24724848


    On Monday, July 14, 2014 1:45:04 AM UTC+2, davenotik wrote:
    Ok, progress.

    I commented out all elements being imported into index.html. The moment I re-enabled my-element.html, I got the "Possible attempt to load Polymer twice".

    I comment out the polymer.html so it looks like:

    <!--<link rel="import" href="../../../packages/polymer/polymer.html">-->
    <polymer-element name="my-element">
          <template>
      ...

    And it starts working. This is the same for all elements – it does not like the polymer.html import at the top.

    I recall seeing somewhere that this is implied from the index.html and not needed in the element? @Siggi?


    This was before we made the changes in 0.11.*. Technically HTML imports are different than Dart imports in that once you import something (for example in index.html), anything that comes afterwards will see what was imported. However, if we rely on polymer.html being in the index page, we are making it harder to consume custom-elements written with polymer. 

    We would like to get to the point were any user out there can import your element using an HTML import, and use it in a page without any additional set up. Moving the polymer.html import into the element is one step in that direction. And it also makes the code a bit clearer: we are making sure that you import any definition you want to use when defining your element, including the 'polymer-element' element definition from polymer.html. The second step we need to take, is to get rid of the init.dart/initPolymer call in your main. We have a few things to change in terms of script semantics in Dartium before we can get there, so it will be a while until we get to that.

    Hope this clarifies things a bit.

    Cheers!
    Siggi
     
    But it goes further: I can't even implement other elements within elements. For example if my-element.html wanted to import core-overlay.html, I'd get the same "Possible attempt..." error.

    The workaround is to import cover-overlay.html from index.html, not from my-element.html.

    That just seems wrong. Did I come across some kind of bug?

    This isn't an issue all the time – in my add-stuff component I am able to import my x-dialog component at the top.

    I pushed in the state I got it working in: https://github.com/DaveNotik/dart-stack

    --
    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.

    David Notik

    unread,
    Jul 14, 2014, 4:15:03 PM7/14/14
    to w...@dartlang.org
    Thank you Siggi.


    I've pushed the latest.

    --
    Woven
    http://woven.co
    206-351-3948
    @DaveNotik


    --
    You received this message because you are subscribed to a topic in the Google Groups "Dart Web Development" group.
    To unsubscribe from this topic, visit https://groups.google.com/a/dartlang.org/d/topic/web/bFdGbFRVVwA/unsubscribe.
    To unsubscribe from this group and all its topics, send an email to web+uns...@dartlang.org.

    Siggi Cherem

    unread,
    Jul 14, 2014, 4:50:20 PM7/14/14
    to w...@dartlang.org
    On Mon, Jul 14, 2014 at 1:14 PM, David Notik <da...@woven.org> wrote:
    Thank you Siggi.

    I've updated as you suggest. (I didn't know this /packages/myapp/ trick – is that documented somewhere?)

    Not sure if we have this documented explicitly for HTML imports, however we do this for Dart imports too. I personally always try to avoid using '../' in Dart, so I always use 'package:myapp/foo.dart' if I have Dart code under web/.
    Looks like you may be missing a '../' in some of the .html files inside the lib folder. I believe if you try running pub-build it will give you some warnings about it, it might even suggest what import to use.

    It seems non intuitive, but the number of '../' is one extra than the number of folders under lib. This is because we are using a relative path with respect to the URL that Dartium will use to load your code, rather than relative URLs in the file system. For example, if 'web/a.html' imports 'lib/b/c/d.html' it will do so as 'packages/myapp/b/c/d.html', so if dartium hits 'localhost:8000/a.html', it will find d.html under 'localhost:8000/packages/myapp/b/c/d.html'. We use a relative URL in d.html to reach back to the packages/ folder, so we can then import 'polymer.html'. In this example, that would be '../../../../packages/polymer/polymer.html'. Technically  removing "../packages" in the middle would be equivalent, but we don't currently support that in the pub-build compiler, so for now we have to write URLs that go above to the 'packages' folder and enter it again.

    Here is a thread with some additional details and examples if you are curious:


    Cheers,
    Siggi
     

    Kathy Walrath

    unread,
    Jul 14, 2014, 4:58:14 PM7/14/14
    to w...@dartlang.org
    I'll make sure this is covered explicitly in the docs.

    -k-


    To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAJmP2_ojDfM%3DunOB%2Bc2ZbfqxpbTY%2Bw%3DGN9qQ7Q1taMoGvDSMkg%40mail.gmail.com.

    David Notik

    unread,
    Jul 14, 2014, 6:21:39 PM7/14/14
    to w...@dartlang.org
    Ok, I updated and now I can finally include the child elements in the parent elements that depend on them, versus in the index.html.


    Is this correct? Any better ways? Besides this being somewhat cryptic (docs will help), one annoyance is simply that the IDE (WebStorm, in my case) complains (and likely won't properly refactor the paths if I move these elements elsewhere in my file structure), but oh well.

    Thank you!

    --D

    --
    Woven
    http://woven.co
    206-351-3948
    @DaveNotik


    To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAJmP2_ojDfM%3DunOB%2Bc2ZbfqxpbTY%2Bw%3DGN9qQ7Q1taMoGvDSMkg%40mail.gmail.com.

    Siggi Cherem

    unread,
    Jul 16, 2014, 10:55:31 AM7/16/14
    to w...@dartlang.org
    On Mon, Jul 14, 2014 at 3:21 PM, David Notik <da...@woven.org> wrote:
    Ok, I updated and now I can finally include the child elements in the parent elements that depend on them, versus in the index.html.


    Is this correct?

    I think so. It looks correct. I'm not sure about the comment you have about core_overlay and x-dialog though,.
     

    David Notik

    unread,
    Jul 16, 2014, 11:13:34 AM7/16/14
    to w...@dartlang.org
    I killed that comment as it seems to work now. I can call the child elements in their parents now as opposed to the main entrypoint.
    Reply all
    Reply to author
    Forward
    0 new messages