upcoming polymer 0.11.0

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.

Siggi Cherem

unread,

Jun 26, 2014, 9:15:21 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.

Siggi Cherem

unread,

Jul 14, 2014, 1:26:58 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:

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

Reply all

Reply to author

Forward