Bind tramples prototype's definition on Polymer

[nevercast]

Hello, Firstly versions:

Polymer/polymer@1.2.3
PolymerElements/iron-elements@1.0.7
PolymerElements/paper-elements@1.0.7
(Also tested with 1.2.1, 1.0.4, 1.0.6 respectively)

"aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.0.2",

"github:roguePanda/aurelia-polymer@1.0.0-beta.1.0.1": {
      "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.8",
      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
      "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.0.2"
    }

"npm:aurelia-binding@1.0.0-beta.1.0.5": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.0.1",
      "core-js": "npm:core-js@1.2.6"
    }

The issue I'm observing is with an iron-icon that is in my paper-icon-item element. I have this code for my navigation:

<template>
  <paper-menu if.bind="menuIsReady" class="list">
    <paper-icon-item tap.trigger="navMenu(nav.config.name)" repeat.for="nav of router.navigation">
      <iron-icon icon.bind="nav.settings.icon" item-icon></iron-icon>
      ${nav.title}
    </paper-icon-item>
  </paper-menu>
</template>

The icon.bind worked before a JSPM update, pre-update the versions were as follows:

    "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1",
    "npm:aurelia-binding@1.0.0-beta.1.0.1": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
      "core-js": "npm:core-js@1.2.6"
    },

What I've observed is this, by using the chrome inspector I can observe the properties. Assuming the iron-icon element is selected in the element inspector I used $0 to reference the element.

# $0.icon
"home"
# Object.getOwnPropertyDescriptor($0, 'icon')
Object {value: "home", writable: true, enumerable: true, configurable: true}
# Object.getOwnPropertyDescription($0.__proto__, 'icon')
Object {enumerable: false, configurable: false, get: function(), set: function()}

From this I can see a property has been defined directly on the element, hiding the property definition of the prototype from Polymer.

Running the same on an icon without the icon.bind attribute and setting icon="home" directly returns the following:

# $0.icon
"home"
# Object.getOwnPropertyDescriptor($0, 'icon')
undefined
# Object.getOwnPropertyDescription($0.__proto__, 'icon')
Object {enumerable: false, configurable: false, get: function(), set: function()}

If on the broken element I invoke delete $0.icon deleting the property definition, it begins to work as expected.

Post delete $0.icon

# $0.icon
"home"
# Object.getOwnPropertyDescriptor($0, 'icon')
undefined
# Object.getOwnPropertyDescription($0.__proto__, 'icon')
Object {enumerable: false, configurable: false, get: function(), set: function()}

My speculation is that Aurelia is defining a property on the Polymer element that tramples the prototype property and breaks the element.

Cheers, Josh.

[EisenbergEffect]

@jdanyow Can you look into this? Should be be generating getter/setters on actual HTML elements? My thought is that that shouldn't be needed for one-way or one-time binding and that two-way binding should be handled by events. Could there be something going wrong with the detection here?

[jdanyow]

@nevercast can you download an old version of the aurelia skeleton, add the paper stuff you were doing and push this to a github repo somewhere? This will allow me to compare the before updating and after updating behavior. Right now I can't think of what this could be, initially when you described this on the gitter channel I was thinking it was the removal of O.o, but that happened long before aurelia-binding@1.0.0-beta.1.0.1

[nevercast]

Any idea how I'd find a close commit of the skeleton matching this JSPM mapping?

  map: {
    "aurelia-animator-css": "npm:aurelia-animator-css@1.0.0-beta.1.0.1",
    "aurelia-auth": "github:paulvanbladel/aurelia-auth@0.11.3",
    "aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1",
    "aurelia-fetch-client": "npm:aurelia-fetch-client@1.0.0-beta.1",
    "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.1",
    "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1",
    "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.0.1",
    "aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1",
    "aurelia-router": "npm:aurelia-router@1.0.0-beta.1",
    "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1",
    "aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.0.1",
    "aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.0.1",
    "babel": "npm:babel-core@5.8.34",
    "babel-runtime": "npm:babel-runtime@5.8.34",
    "bootstrap": "github:twbs/bootstrap@3.3.5",
    "core-js": "npm:core-js@1.2.6",
    "fetch": "github:github/fetch@0.10.1",
    "font-awesome": "npm:font-awesome@4.4.0",
    "html": "bower:systemjs-plugin-html/html.js",
    "text": "github:systemjs/plugin-text@0.0.3",
    "webcomponentsjs": "bower:webcomponentsjs/webcomponents",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.3.0"
    },
    "github:jspm/nodelibs-path@0.1.0": {
      "path-browserify": "npm:path-browserify@0.0.0"
    },
    "github:jspm/nodelibs-process@0.1.2": {
      "process": "npm:process@0.11.2"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "github:paulvanbladel/aurelia-auth@0.11.3": {
      "aurelia-fetch-client": "npm:aurelia-fetch-client@1.0.0-beta.1",
      "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.1",
      "aurelia-http-client": "npm:aurelia-http-client@1.0.0-beta.1"
    },
    "github:twbs/bootstrap@3.3.5": {
      "jquery": "github:components/jquery@2.1.4"
    },
    "npm:assert@1.3.0": {
      "util": "npm:util@0.10.3"
    },
    "npm:aurelia-animator-css@1.0.0-beta.1.0.1": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1"
    },
    "npm:aurelia-binding@1.0.0-beta.1.0.1": {
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
      "core-js": "npm:core-js@1.2.6"
    },
    "npm:aurelia-bootstrapper@1.0.0-beta.1": {
      "aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1",
      "aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.1",
      "aurelia-history": "npm:aurelia-history@1.0.0-beta.1",
      "aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1",
      "aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.0.1",
      "aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
      "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1",
      "aurelia-router": "npm:aurelia-router@1.0.0-beta.1",
      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
      "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1",
      "aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.0.1",
      "aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.0.1",
      "core-js": "npm:core-js@1.2.6"
    },
    "npm:aurelia-dependency-injection@1.0.0-beta.1": {
      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
      "core-js": "npm:core-js@1.2.6"
    },
    "npm:aurelia-event-aggregator@1.0.0-beta.1": {
      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1"
    },
    "npm:aurelia-fetch-client@1.0.0-beta.1": {
      "core-js": "npm:core-js@1.2.6"
    },

[nevercast]

Pulling skeleton 1.0.1 and beta.1, will use which one is closest to the original source I had in Git. Will get back to you shortly @jdanyow, thanks.

[nevercast]

My actual project is very similar to this test project: https://github.com/nevercast/skeleton-polymer-bug/tree/component-test

Package.json, bower.json and config.js are all the same for both.

However the Test project doesn't have the issue and my project does. I can't seem to determine the differences between them.

In a disparate need to release this project next week I might have to quickly try rebuild the UI instead of fixing this issue.

[rquast]

I don't know enough about how this works, but I think I'm experiencing the same issue with observejs.

I just finished my upgrade of Aurelia, but have one issue... I use js-data 2.8.2 which uses polymer's observejs. I am guessing (though I am not sure), that aurelia binding is reconfiguring observed objects and consequently, observejs is throwing a number of reconfigure error messages.

https://github.com/Polymer/observe-js/blob/master/src/observe.js#L1232 is where observejs errors the reconfigure messages out (it expects add, update, delete but not reconfigure).

This has only happened since upgrading from Aurelia 0.9.1 to beta 5. The observejs library in js-data hasn't changed.

[EisenbergEffect]

@jdanyow Could we write a plugin to detect observe.js and adapt to it (assuming that is the problem)?

[nevercast]

I've redirected my project and am using Material Design Lite for the UI for the moment. But I'm more than happy to try any fixes you can suggest. I have the broken version checked in to Git at work but unfortunately I cannot push it to Github without removing some of the code for obvious reasons.

[jdanyow]

closing - see either of these for more info: https://github.com/k2s/aurelia-example-jsdata/issues/1 https://github.com/aurelia/binding/issues/322