Is Databinding with Custom Elements Broken in 0.1.2

[Rob Eisenberg]

I had a pretty nice custom element system build on the pollyfills from Stable release 2013-11-07  When I updated to 0.1.2, everything broke. I've been going throughout, fixing things bit by bit, but now I'm to a point where I'm wondering if there's something wrong with Polymer. It seems as if custom element binding are being evaluated before the element is upgraded. I'm not sure about that, but I can't explain the behavior I'm seeing any other way. Here's my custom element test code:

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function () {

    this.customAttributes = {};

    console.log('created');

};

proto.attachedCallback = function() {

    console.log('attached');

};

proto.bind = function(name, value, oneTime) {

    console.log('bind', name, value, oneTime);

};

proto.setAttribute = function(name, value) {

    console.log('setAttribute', name, value);

};

proto.attributeChangedCallback = function(attrName, oldVal, newVal) {

    console.log('attribute changed', attrName, oldVal, newVal);

};

Object.defineProperty(proto, 'something', {

    get: function () {

        return this.customAttributes['something'];

    },

    set: function (val) {

        this.customAttributes['something'] = value;

        console.log('something change', value);

    }

});

document.registerElement('dx-test', { prototype: proto });

Then I use it inside of one of my templates like this:

<dx-test something="{{someProperty}}"></dx-test>

When I do this, the only callback that is fired is createdCallback  and by then it seems to have already parsed the bindings out. This prevents me from having any custom bind logic and even from reliably getting the value of my own property. If something is not a primitive value, then attribute's value is the result of toString().

Am I doing something wrong here? Is this a bug?

[Eric Bidelman]

There's a bug: https://groups.google.com/forum/?fromgroups=#!topic/polymer-dev/SPbOamjlbhc

Should be fixed in the next push (likely today).

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Rob Eisenberg]

Can you explain the actual issue? When it's fixed, will I get control over the bind function again? or will it just fix the toString issue?

A related question....since I'm using individual pollyfills, what's the best way to keep up with changes and keep my dependencies up to date? I'm guessing I should just track each individual repo...

--

Rob Eisenberg,

President - Blue Spire
www.durandaljs.com

[Rafael Weinstein]

The bug has to do with unreachable paths, e.g.

var foo = {};

foo.bar.baz; // throws in JS. In TemplateBinding/polymer-expressions, this path should evaluate to undefined (not throw). This was broken, but the referenced bug fixes it.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMsr9Pnam_Wz%2BgZ69PdN4WhxKFVG8pJFX7YWkEgNFs5YydJyZQ%40mail.gmail.com.

[Rob Eisenberg]

I'm still not clear how this relates to what I'm reporting here...

[Eric Bidelman]

Ignore my reply. This isn't related to the polymer-expressions issue I linked to.

Raf, here's a JS to help: http://jsbin.com/UGEHuxO/4/edit

[Rafael Weinstein]

looking closer...

[Daniel Freedman]

Eric, I modified your JS bin to not include polymer: http://jsbin.com/UGEHuxO/6/watch?html,console,output

Rob, I see "bind" being called when the 'dx-test' element is instantiated from the template. Was there a different situation where you weren't seeing that?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CABMdHiTn3E3rFieatn%3DCRGXKwSBiCH27uz7_J9YNcG6GHMWt2A%40mail.gmail.com.

[Rob Eisenberg]

There was...but perhaps I'm missing something from my pollyfills. I've basically put together my own custom build. Here's what I've got and the order I've included them in:

                    'lib/polymer/weakmap.js',

                    'lib/polymer/MutationObserver.js',

                    'lib/polymer/CustomElements.js',

                    'lib/polymer/Observer.js',

                    'lib/polymer/Parser.js',

                    'lib/polymer/boot.js',

                    'lib/polymer/observe.js',

                    'lib/polymer/NodeBind.js',

                    'lib/polymer/TemplateBinding.js',

                    'lib/polymer/esprima.js',

                    'lib/polymer/polymer-expressions.js',

I was trying to pick only the pieces from the platform that I needed...but perhaps I missed something critical? Any idea?

[Daniel Freedman]

All the files look there, and the only difference I can see from how they're loaded under polymer is that Observer.js is supposed to come before CustomElements.js

When I set up my various script src's to match yours, I still see "bind" being called when the element is stamped by a template.

[Rob Eisenberg]

There's definitely a difference between my custom build of the pollyfills and platform.js. When I replace my build with platform.js, I see the correct behavior. I would just use platform.js, but there's some stuff in there I don't think I need..and I'm trying to get things down as small as possible. Can someone point me to the build file for platform.js? I'd like to see if I can figure out what the real difference is.

[Scott Miles]

The build is sadly non-trivial, but you can start with the manifest here: 

https://github.com/Polymer/platform-dev/blob/master/build.json

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/70e68a23-a5aa-4b1a-8b7e-48de9604325a%40googlegroups.com.

[Rob Eisenberg]

Ok. I found that just a few minutes ago. It looks like there are lots of little pieces that may be missing from what I've got. I've got a few questions:

1. I purposefully excluded the shadow dom pieces from my build. Do you see any problems with that? Should custom elements still work, assuming I'm not using shadow dom at all?

2. Where can I find the latest build of platform.js? Let's say I just want to make my life easy for now...and not do my own build. Where do I get latest? None of the github releases seem to have any actual built libraries in them.

3. Any advice on building this thing? There are tons of repositories. It seems like a major effort to track them all and keep an updated build happening...thoughts?

[Rob Eisenberg]

I think I can answer my own #3 question. Looks like the easiest way to do this is to use pull-all.sh

I'd still like to know about the necessity of shadow dom and any availability of pre-built platform libraries.

[Daniel Freedman]

Platform builds are available via bower (bower install Polymer/platform), git (git clone git://github.com/Polymer/platform), and cdnjs ( http://cdnjs.com/libraries/polymer/)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMsr9PkDZTJgfL-Yp7HrPNKCOtNQNuY9a22-Z3M53VdVGKmawA%40mail.gmail.com.

[Brian Di Palma]

I'm starting to publish the polyfills that I'm looking at on npm and then I use npm to pull them in.
This requires some small changes to the individual polyfill repos that Polymer have on GitHub.

I've only published custom elements and its dependencies but I'm keeping it up to date with the GitHub repo.

https://npmjs.org/package/customelements

I can publish more if they are of some use to others, I'll also delete them if the Polymer team want to publish them.

I'm planning on removing the hardcoded script tag creation within the Polyfills and replacing them with ES6 module loader usage instead when I have some time.

i.e.

Loader.get("domobserver");

instead of the current <script> tag approach that the Polymer tools loader takes.

This would require the ES6 module polyfill to be loaded in your page though so I don't know if people would want that.

[Rob Eisenberg]

Thanks for the feedback. Part of what I'm creating is similar to x-tags, but with my own spin, based on my own experience building large scale componentized UI. For now, while I'm prototyping, I think I'll just use the platform.js file...but eventually I'm going to have to figure out how to do a custom build without the shadow dom pieces.

On Tue, Jan 21, 2014 at 7:04 PM, <ian.du...@honeywell.com> wrote:

Rob,

 

I asked a similar question about the "necessity" of the Shadow DOM a few months ago - https://groups.google.com/forum/?fromgroups=#!topic/polymer-dev/oVWSsMhFDnc. Basic upshot was although the polyfills themselves don't have a dependency on the Shadow DOM, Polymer depends on it, and it will be used if you use platform.js as well, even if you are only planning on using part of the platform like custom elements.

 

If you are looking for simple, non-shadow DOM pre-built library, x-tags is maybe the way to go (although from my experience, the x-tag community is way less active). It is the biggest issue we have with Polymer - the shadow DOM polyfill is a bit invasive, and degrades performance - in our case, polymer doubles the time to load a page compared to x-tags. We have decided we will need to try "re-package" parts of the Polymer platform in our own library to get the performance characteristics we require, which is a shame, because I really like the library and the layer of sugar it provides.

 

Regards,

Ian

[Scott Miles]

Remixing the polyfills is supposed to be relatively easy.  I assume the devil is in the details, so I made a couple of screen captures of me starting from a blank folder and building up functionality, ultimately constructing a single js file containing the platform remix.

remixing:

http://www.youtube.com/watch?v=MfZxqONVzJA&feature=youtu.be

vulcanizing the js:

http://www.youtube.com/watch?v=MfZxqONVzJA&feature=youtu.be

The resulting files are zipped up here: https://drive.google.com/file/d/0BwsasHLO95kdQXQzLTN2czFjVW8/edit?usp=sharing

Tools used: Node, Bower, Terminal, Notepad, Browser.

IMO, Bower is preferred over Git here, because we are read-only users in this context, and we can take advantage of the dependency fetching.

The videos are kinda blurry (sorry!) and I there is no commentary. I figured we can do progressive refinement on these materials if they are found to be useful.

[Scott Miles]

Erps, actual 'vulcanizing' video link:  

http://www.youtube.com/watch?v=FvFfJ0ODj0Y&feature=youtu.be

[Rob Eisenberg]

Thanks Scott! I'll take a look at this soon.

You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/puRMCV1-8nI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLZxfQq4yDfnPUtuXY%3DvL2h3N3ckKFfuqbw%2BPHkvb7O_5A%40mail.gmail.com.

For more options, visit https://groups.google.com/groups/opt_out.

[Eric Bidelman]

These videos are great Scott. Very helpful. Rob and I talked about shortening them a bit and overlaying some commentary.

If people are interested in building + using a single .min.js file for a polyfill, it's basically the same procedure. Instead of enumerating the sources for the polyfill, install the node modules and build with Grunt. Example building the Custom Elements polyfill:

    bower install Polymer/CustomElements

    cd bower_components/CustomElements

    npm install

    grunt

...gets you custom-elements.min.js

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAMsr9Pm2FAycLjknWzuLLmEkMyveKhrz6YJnws0u-y7AdzH3AA%40mail.gmail.com.

[Rob Eisenberg]

Interestingly...if I drop your vulcanized.js file into my solution, I have the same bug as I've previously reported. If I drop the platform.js in instead, everything works fine. So, there's still something else that's different...and it's a silent fail scenario because I get no errors in the console, but my custom elements don't work correctly. Any ideas on why that might be?

[Scott Miles]

Are you ever calling `Platform.performMicrotaskCheckpoint();`?

In the absence of native `Object.observe` support, it's left to the developer to trigger dirty checking by calling `Platform.performMicrotaskCheckpoint();`.

`platform.js` does this automatically on a cadence. In your custom setup, you have to handle this yourself.

Scott

[Rob Eisenberg]

That may be it. Off hand, do you know where the code that sets that up is? I'm slowly becoming more familiar with the codebase, but hadn't seen that yet, though I knew it was there somewhere...

[Scott Miles]

The polling in platform.js is set up here: https://github.com/Polymer/platform-dev/blob/master/src/patches-mdv.js

[Rob Eisenberg]

I'm a step closer :) That (plus a couple other platform-dev files) got it working in Chrome and FF. It's still not working in IE. I'll poke around some of the other files in that repo to see if adding them makes the difference.

Thanks for all the help!