googlewebcomponents/firebase-element

Web components for the Firebase Web API

firebase-element's Issues

Doubling data in separate elements

Hi,

This may be a newbie error, and if so I appologize in advance, but we have been ha in some odd "onscreen" data duplication

In using a firebase element on two different pages in two different custom elements, we are pulling on query value a set of test scores from firebase documents that we are dynMically creating on the instance.

The firebase location is keyed to an ID. If the test scores are there we grab them in a vad from the snapshot set them as an object with the ID as the top level key and then ONLY re save the data in this.scores a local array of objects.

The set up was working fine when we used it only in one grid element.

We then, during a redesign, we're moving aspects of the iterative pulls to a a separate "card" to use in the grid.

The grid continued to run on one page. The card was being tested on a second page.

Both card and grid are registered correctly and separately. However, when we go to dump this.scores in the inner HTML of either page we get a double dose of data.

If we remove one element, problem gone.

No idea how this this.score gets crossed with that this.scores, when both are on different pages, in vastly different scopes, but share "this.scores" name space in different nodes.

We haven't played with any globals. And will change names etc., but any idea why this is happening?

property `newPassword` and `params` not declared

at https://github.com/GoogleWebComponents/firebase-element/blob/master/demo/x-login.html#L68

• params is used at
  https://github.com/GoogleWebComponents/firebase-element/blob/master/demo/x-login.html#L113
• newPassword is used at
  https://github.com/GoogleWebComponents/firebase-element/blob/master/demo/x-login.html#L43

[0.9 branch] ref.off() takes too many parameters

_stopListening is failing because apparently ref.off() expects 3 parameters and not for. Removing the last parameter (i.e. this) seems to fix this.

[0.9 branch] `_stopListeningTo` does not exists

There a references to both _stopListening as well as _stopListeningTo, but only the former exists.

Setting limit-to-last causes uncaught error: Query.limitToFirst: Limit was already set

When setting limit-to-last on firebase-collection, you'll get the following error on the console:

Uncaught Error: Query.limitToFirst: Limit was already set (by another call to limit, limitToFirst, or limitToLast).

This is because limitToFirst has a default value of 100 in firebase-collection.html#L133 and will attempt to be set after limitToLast in _computeQuery firebase-collection.html#L304

I can appreciate the want to create a sane default, but Firebase doesn't have such a default for on('value') in their documentation (unless defined by the user in the query).

firebase-document documentation wrong

From @salah-saleh on August 12, 2015 17:31

https://elements.polymer-project.org/elements/firebase-element?active=firebase-document
missing the close markup /firebase-document

Copied from original issue: Polymer/polymer#2259

How to observe changes

Please explain how to observe changes on data ?
There is a property named observers how can I use it?

When I try to use native polymer observers, I do not get indexSplices object cause as I understand data is not loaded yet..

Documentation needs update to 0.8/0.9/1.0: repeat -> dom-repeat="{{key in keys}}"

Using collection inside custom element

When I use firebase-collection on index.html and iterate with iron-list it works.

But when I encapsulate this in my custom element it loads only first item from firebase collection. And I need to refresh dom to make it load all items and display them

I am having issues with it when i open a page with firebase-collection the second time.

It is a very peculiar error, the page does not render the data if you visit it next time, however console.log shows that data is being retrieved.

See SO for detailed explanation:

http://stackoverflow.com/questions/31173432/issue-with-showing-content-from-firebase-using-google-polymer-firebase-element

Uncaught TypeError: Cannot read property '__firebaseKey__' of undefined

I have a collection of objects in a firebase db

<template>
    <firebase-collection
      location="https://incandescent-inferno-8405.firebaseio.com/objects/-JubQT-WrBaVlSeuKJhO"
      data="{{object}}"
    </firebase-collection>

    <paper-input value="{{object.attribute::input}}"></paper-input>
</template>

When I start typing in the input field I get

Uncaught TypeError: Cannot read property '__firebaseKey__' of undefined

Is this a bug or am I doing something wrong?

firebase-collection: Modifying new locally-pushed items throws

Repro: http://jsbin.com/yuzixa/edit?html,console,output

• Click 'Add'
• Type in input
• Note error

Uncaught Error: Firebase.child failed: First argument was an invalid path: "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

This is due to the previous #60 fix which avoided the round-trip modification from the server, which is where the local __firebaseKey__ property is set. Simple fix is to set the new key in add after push, as its synchronously available there.

Problem with hosting

Hi there

I've build a sample polymer application with the starter kit (V 1.1.0) and pushed it to firebase (https://blazing-heat-376.firebaseapp.com/). Now I wanted to use the firebase element and copied a simple example. Here's my code:
`

<template is="dom-bind">
  <firebase-collection location="https://blazing-heat-376.firebaseio.com/"
                       data="{{dinosaurs}}"></firebase-collection>

  <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
    <h4>[[dinosaur.__firebaseKey__]]</h4>
    <span>Height: </span><span>[[dinosaur.name]]</span><span>m</span>
  </template>
</template>

`

Here's my import in the element.html:
<link rel="import" href="../bower_components/firebase-element/firebase-collection.html">

When I serve the project with 'gulp serve' everything works fine. But when I try to host the app I get the following error: Uncaught SyntaxError: Unexpected token ILLEGAL

When I remove the import, the site is being displayed fine, but I can't make the backend call. I think there is a problem vulcanizing the element...

Cannot set property '_parent_dinosaurs' of undefined

I'm trying to get the firebase-element sample working, but I'm consistently getting the following error:

Cannot set property '_parent_dinosaurs' of undefined

If I remove the data property, the error goes away, but I'm obviously unable to bind to anything. I do see data logged in the console. Not sure what I'm doing wrong.

element should be renamed google-firebase to align with rest of set

Demo Error: Uncaught TypeError: this.$.firebaseLogin.login is not a function

When implementing the demo, as written, when using the anonymous login option, I get the following errors:

Uncaught TypeError: Cannot read property 'login' of undefined
Uncaught TypeError: this.$.firebaseLogin.login is not a function

Similar errors occur for password option.

`closeObserver` exceptions using firebase-element

When using the firebase-element, I'm currently getting closeObserver exceptions. Verified by another user. Commenting out https://github.com/PolymerElements/firebase-element/blob/master/firebase-element.html#L329 allows the element to be used.

This is probably left over from 876121a#diff-5191c63b6d1dae1e7108cdb4d32a52e2L419

cc @cdata

firebas-element accessibility issues

Audit results here:
[Severe] Controls and media elements should have labels (2)[Warning] Text elements should have a reasonable contrast ratio (4)Not applicable tests (9)Passing tests (4)

One thing I'll mention is that the focus state is really difficult to see on the buttons. The blue focus state on the link and text field is fine, but I'm not able to see it at all on the buttons -- is it actually even going there?

Cannot read property 'slice' of undefined on firebase update

Hey! :)

I link my polymer to firebase with this :

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/firebase-element/firebase-collection.html"> 

<dom-module id="list-activity">
  <template>
    <firebase-collection
      location="https://glaring-inferno-8584.firebaseio.com/activity"
      data="{{activity}}"></firebase-collection>
    <template is="dom-repeat" items="[[activity]]" as="a">
      <h4>[[a.id]]</h4>
      <span>Title: </span><span>[[a.title]]</span>
    </template>
  </template>
</dom-module>

<script>
  Polymer({
    is: "list-activity"    
  });
</script>

Everything works fine at first display. But when I update a entry of firebase it return in Console :

Uncaught TypeError: Cannot read property 'slice' of undefined     ____    polymer.html:1727

And nothing is update in my html template. However, when I add an entry in firebase, it add to my template without any errors.

firebase-collection: Uncaught TypeError: Cannot read property 'slice' of undefined

Using firebase-collection this way:

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Polymer Starter Kit</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="bower_components/firebase-element/firebase-collection.html">
  </head>
  <body>
    <template is="dom-bind">
      <firebase-collection
        location="https://example.firebaseio.com/entries"
            data="{{entries}}"></firebase-collection>
          <template is="dom-repeat" items="[[entries]]" as="entry">
            <span>[[entry.name]]</span>
          </template>
    </template>
  </body>
</html>

Works fine on first run, but when updating it shows following error in the console:

firebase-collection: Uncaught TypeError: Cannot read property 'slice' of undefined

Polymer 1.0 :Nested dom-repeat templates cannot show the content of a child object

From @HamzaouiMounir on June 22, 2015 13:36

I want to display an object content(comments) in a post data (using firebase-collection) : Here is the structure of a post in firebase :

"Publication" : {
"date":"22-06-2015",
"content" : "post example",
"comments": {
//a post has too many comments on it
}
}
My goal is to add another dom-repeat to show comments but i cannot see anything. Here is the code example(the first template work correctly as i mentioned)

{{commentaire.date}} I followed the Polymer Migration documentation but no results , i would be thankful if there is any solution .

Copied from original issue: Polymer/polymer#1937

<firebase-auth params="{...}"> is not properly used in login()

The <firebase-auth> params (and options) attributes are defined as type: Object, meaning that they're automatically deserialized into Objects when referenced from JavaScript. The current login() code attempts to do a JSON.parse(this.params), but that shouldn't be done.

Also, there appears to be a timing issue that prevents this.params from being properly set in the login() method when auto-login is used. One workaround is, as with most Polymer timing issues, wrapping the call to this.login() in a this.async().

Component Page 404

There is no documentation for firebase-auth for example, only for firebase-collection:

https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection

firebase-element has issues with routing libraries

Hi,

I tried using firebase-element with app-router, more- routing and router.js. I get the same error for all of them. If you execute or dispatch the route the 2nd time in the same session the data in HTML does not get rendered.

I tried using iron-list, iron-ajax with template repeat and it works great.

However with firebase-element it does not.

missing button action in the demo for onRemoveRemote

just noticed the function for the last button action is missing on the object prototype, nothing important...

user-created event does not include uid of newly registered user

The firebase API returns the UID of the newly generated user, but the firebase-auth element does not include the information in the event details. This makes it quite cumbersome to implement a custom registration process.

Extra comma

Would it be an issue with an extra comma being found at line 211 of firebase-collection.html?

firebase-collection: issue with computed property

Hi.

If i'm using variable binded to firebase-collection in my element in computed property as argument parameter, my computed property not updating, when changes occur.

Example:

(function () {
    'use strict';
    Polymer({
      is: 'my-element',
      properties: {
        list: { // binded to firebase-collection
          type: Array,
          notify: true
        },
        filteredList: {
          type: Array,
          computed: 'computedFilteredList(list, some)'
        }
      },
      computedFilteredList: function (list) {
        return list.filter(...);
      }
    });
})();

Sample project: https://github.com/lapteuh/firebase-element-bug-with-computed-property.

Thanks for your response.

having trouble saving to firebase

do I just update the {{data}} ? If so it's not working.

https://www.youtube.com/watch?v=k-S_K80ItNs

what am i missing?

No way to update items

If I'm not mistaken there is no way to update item. Just to add or remove.

firebase-document only works with static locations

For example something like:

<firebase-document
      location="{{getLocation()}}"
      data="{{dinosaurs}}">

with getLocation defined as:

getLocation: function() {
  return "https://dinosaur-facts.firebaseio.com/dinosaurs";
}

gives the following:

Looks like an issue in _applyLocalDataChanges since it tries to update the remote doc here even when there is no data or query but not certain how to best address.

Unable to get values to update

I'm unable to get the below to work and update a firebase value. It does update locally, but it is not making it to the server. The code is able to pull firebase data in..

<dom-module id="rem-login-profile">
  <template>
    <firebase-document id="firebase" location="{{path}}" data="{{userProfile}}"></firebase-document>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'rem-login-profile',
    properties: {
      rootPath: {
        type: String,
        value: 'https://------ky.firebaseio.com/users/'
      },
      uid: {
        type: String
      },
      firebaseKey: {
        type: String
      },
      userProfile: {
        type: Object,
        observer: '_userProfile'
      },
      path: {
        type: String,
        computed: 'firebaseRef(firebaseKey)'
      }
    },
    firebaseRef: function(record) {
          var path = this.rootPath + this.uid + '/' + this.firebaseKey;
          return path;
    },
    _userProfile: function() {
      if (!this.userProfile) {
        console.log('No Document');
        return;
      }
      console.log(this.userProfile);
      this.set('userProfile.loginTime', 1);
      console.log(this.userProfile);
    },
  });
</script>

When do you think you should be ready for production?

I've been struggling to get the firebase element working for about 6 months now and I'm still struggling sometimes just writing data to new location or knowing whether to use collection or document it's still confusing. I got Scott miles to help me out at the polymer conference and it seem to be working then and now I'm back home and I still have the same problem. I'm thinking at the moment I should write my JavaScriptAPI from firebase directly and not try to use this element is that right?

Automatic persisting of top-level properties in the x-firebase demo not working

Entering new input values does not persist new values in the firebase. No error is fired in the console. Should the observer be changed to dataNameChanged?

Dynamically change location attribute

Is it possible to change the location attribute of firebase-collection dynamically like this:

<firebase-collection
      order-by-child="height"
      limit-to-first="3"
      location="{{myDynamicLocation}}"
      data="{{dinosaurs}}"></firebase-collection>

[1.0.0] Computed value method not called correctly on firebase-collection data changes

In the example below, computeVal(peeps) is called before the firebase event is logged (as part of element initialisation), and not after - so the only computed value is against the empty list, despite there being a result. Repeated execution reliably gives the same results.

The dom-repeat works as expected, the dom-if doesn't.

JSBin demonstrating the problem

Strong suspicion I'm doing something wrong here, but not sure what - I'm not seeing this problem with firebase-document (or with any other computed values I've been using).

I'm not sure how long the example firebase DB will stick around - it was created as part of the firebase tutorial. Here's the console output:

"Adding Firebase event handlers."
"checking..."
[]
"fbase-test Ready"
"Firebase Event: \"child_added\""
[object Object] {
  name: "Rick Astley",
  text: "It's never going to let me down."
}
null
"Firebase Event: \"value\""
[object Object] {
  -ImBnI0WLch7L7ndl6Qd: [object Object] {
    name: "Rick Astley",
    text: "It's never going to let me down."
  }
}
"FIREBASE WARNING: Using an unspecified index. Consider adding \".indexOn\": \"name\" at / to your security rules for better performance "

Get a "Uncaught TypeError: Cannot read property 'forEach' of null" after moving to V1.0.3

Hi,

I moved to V.1.0.3, it fixed an issue that i was facing: 'Addresses a bug in collection that causes data to be re-initialized after it has already been received from Firebase.' However now see an exception in the log, functionality works good. But the error comes up the 2nd time a user views the page. To recreate the bug do the following:

1. Keeping console open and Go to www.polydeals.com/#/faq. You will not see any errors.
2. Go back to the Main page by clicking the left arrow on top left
3. Now, go back to FAQ page by using the FAQ link at the bottom of the page
4. You will now see the below exception in the log.
   

What is the best-practice to use the query object we get from collections.add ?

I have a collection component that i use to list my products. When i add a new product to the collection i want to notify the user that the product has been added.

In order to do this i was thinking to use the component document and collection together binding on the query object.

For instance when i add the product i get a query object as a result that contains the path of the product just added. I was thinking to set this in the document component in order to retrieve the product just added but it is not working. The query property in the document component is readonly so is not possible to populate it from the outside.

In order to overcome this issue i am getting the path array from the query object and i am populating the location in the document component with it. I am not sure if this is the right way to proceed and i would like to have your opinion.

Polymer 1.0 compatibility

When installing with

bower install --save polymer/firebase-element

For polymer 1.0 I get dependency conflicts for webcomponentsjs en polymer

Unable to find a suitable version for webcomponentsjs, please choose one:
    1) webcomponentsjs#^0.6.0 which resolved to 0.6.3 and is required by polymer#0.5.6
    2) webcomponentsjs#^0.7.2 which resolved to 0.7.6 and is required by polymer#1.0.6, polymer#1.0.6
    3) webcomponentsjs#* which resolved to 0.7.6 and is required by core-component-page#0.5.6


Unable to find a suitable version for polymer, please choose one:
    1) polymer#^0.5 which resolved to 0.5.6 and is required by firebase-element#0.5.6
    2) polymer#~1.0.0 which resolved to 1.0.6 and is required by platinum-push-messaging#1.0.0
    3) polymer#^1.0.0 which resolved to 1.0.6 and is required by iron-a11y-keys-behavior#1.0.5

Element catalog has no link to the demo

https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection

firebase-auth element fires 'login' event twice on successful login

Using provider: google with default popup auth and listening for login event:
The handleLogin function gets called twice. Using DevTools to step through code after calling the login method on the firebase-auth method reveals that in firebase-auth.html _authHandler is called "directly" after completing auth in the popup window, then _loginHandler is fired from somewhere else and _loginHandler calls _authHandler again, thereby resulting in the 'login' event being fired twice.

Am I doing something wrong? Is this intended behaviour?

Thanks,
Joe.

firebase-collection does not work within restamped conditional template

Since maybe here are more people who could tell me if my problem is related to something firebase specific I will repost my stackoverflow question

I'm having a problem with using a firebase-collection element within a restamped conditional template.

When the page is loaded initially and I set the dom-if condition to true everything works fine (see example below). But when I falsify the condition, set it to true again and the elements get restamped I get the following error:

_Uncaught TypeError: Cannot read property 'forEach' of null Polymer.applySplicesToRemoteData @ firebase-collection.html:322

(Using firebase-document works, but this is no option for me since I have to modify the collection)

<!doctype html>

<html>
<head>

 <title>Firebase Collection vs. dom-if restamp</title>

  <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

  <link rel="import" href="../bower_components/polymer/polymer.html">
  <link rel="import" href="../bower_components/paper-button/paper-button.html">

  <link rel="import" href="../bower_components/firebase-element/firebase.html">
  <link rel="import" href="../bower_components/firebase-element/firebase-collection.html">
  <link rel="import" href="../bower_components/firebase-element/firebase-document.html">

</head>

<body fullbleed unresolved>
<template id="t" is="dom-bind">

  <paper-button on-tap="setCondition">Set condition</paper-button>

  <template is="dom-if" if="{{condition}}" restamp>

    <div><paper-button on-tap="resetCondition">Reset condition</paper-button></div>

    <firebase-collection id="dataConnection" location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{dinosaurs}}"></firebase-collection>

    <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
          <h4>[[dinosaur.__firebaseKey__]]</h4>
          <span>Height: </span><span>[[dinosaur.height]]</span><span>m</span>
    </template>

  </template>
</template>
</body>
<script>

var template = document.querySelector('#t');
 document.addEventListener('WebComponentsReady', function () {
    template.condition = false;
  });

  template.setCondition = function(){
    template.condition = true;
  };

  template.resetCondition = function(){
    template.condition = false;
  };

</script>
</html>

I would have expected the firebase-collection to behave the same on initial creation as on restamping, but it seems that this is not the case...

Items not re-sorted after order values change.

Logging typo for `child-moved` event.

Firebase-element : Vulcanize issue

The build of a project using Firebase-element, index.html displays the javascript code minimized

Upon 'add' i get Uncaught TypeError: Cannot read property 'ref' of undefined

I am able to successfully log in and get the token back but then when i try to add data i get exception, can you guys help? Below is my code:

<firebase-auth id="fbLogin" provider="anonymous" location="https://xxx.firebaseio.com" user="{{fbUser}}" statusKnown="{{statusKnown}}"></firebase-auth>

<firebase-collection id="fbLanding" location="https://xxx.firebaseio.com/" dataReady="{{userReady}}"></firebase-collection>

<div class="form-section">

 <gold-email-input required error-message="Please enter a valid email" label="Email contact" value="{{email}}" name="email" id="email" ></gold-email-input>
  <paper-button  type="submit" name="submit" raised on-click="buttonClick">Notify Me!</paper-button> </div>
<script>
    Polymer({
        is: 'landing-page',
        ready: function() {
            window.addEventListener('offline', function() {
            Firebase.goOffline();
          });
          window.addEventListener('online', function() {
            Firebase.goOnline();
          });
        },
        buttonClick: function() {
            this.$.fbLogin.login();
            this.$.fbLanding.add({
                timeStamp:Firebase.ServerValue.TIMESTAMP,
                email:this.$.email.value
            }); 
        },
        listeners: {
        'firebase-child-added': 'fireBaseResponse' 
        },
         fireBaseResponse: function(event) {
            var sessionId  = event.key();
            if (!sessionId){
                this.$.toast1.text="Ah Oh! something went wrong";
                this.$.toast1.toggleClass('errorClass', true);
            }
            else{
                this.$.toast1.toggleClass('errorClass', false);
                this.$.toast1.text="Thanks!";
            }
            this.$.toast1.show();
        }

    });  
</script>

The exception is at
https://github.com/GoogleWebComponents/firebase-element/blob/master/firebase-collection.html#L227

Conflict with array-selector when updating an item in firebase

When an item in firebase get's updated the components call the following code. The given code will call splices on the array which causes any selected item to be deselected.

_onFirebaseChildChanged: function(event) {
this._applyRemoteDataChange(function() {
var value = this._valueFromSnapshot(event.detail.childSnapshot);
var oldValue = this._valueMap[value.firebaseKey];

      if (!oldValue) {
        this._error('Received firebase-child-changed event for unknown child "' + value.__firebaseKey__ + '"');
        return;
      }

      this._valueMap[oldValue.__firebaseKey__] = null;
      this._valueMap[value.__firebaseKey__] = value;
      this.splice('data', this.data.indexOf(oldValue), 1, value);
    });
  },

_applyLocalDataChanges not being called in firebase-document

Add error event to the firebase-query-behavior

It's a feature request.
It would be grate to have error event when query can't be processed. For example when you try to read data from an URL but you don't have read access to it. The element will only remove an URL value from element's location attribute but will not tell you that it is something wrong. Event handling would be nice to have.

How to apply non-string values to start-at?

start-at="1" sets startAt to "1". What should I do to set it to 1?