Git Product home page Git Product logo

polymerfire's Introduction

Build status

Status

Status: Archived

This library is no longer actively maintained. We do not recommend using this library in production.

If you maintain a fork of this library that you believe is healthier than the official version, we may consider recommending your fork. Please open a Pull Request if you believe that is the case.

<firebase-app>

The firebase-app element is used for initializing and configuring your connection to firebase.

<firebase-auth>

firebase-auth is a wrapper around the Firebase authentication API. It notifies successful authentication, provides user information, and handles different types of authentication including anonymous, email / password, and several OAuth workflows.

Example Usage:

<firebase-app
  auth-domain="polymerfire-test.firebaseapp.com"
  database-url="https://polymerfire-test.firebaseio.com/"
  api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"
  storage-bucket="polymerfire-test.appspot.com"
  messaging-sender-id="544817973908"
  project-id="polymerfire-test">
</firebase-app>
<firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError">
</firebase-auth>

The firebase-app element initializes app in firebase-auth (see firebase-app documentation for more information), but an app name can simply be specified at firebase-auth's app-name property instead.

JavaScript sign-in calls can then be made to the firebase-auth object to attempt authentication, e.g.:

this.$.auth.signInWithPopup()
    .then(function(response) {// successful authentication response here})
    .catch(function(error) {// unsuccessful authentication response here});

This popup sign-in will then attempt to sign in using Google as an OAuth provider since there was no provider argument specified and since "google" was defined as the default provider.

<firebase-document>

The firebase-document element is an easy way to interact with a firebase location as an object and expose it to the Polymer databinding system.

For example:

<firebase-document
  path="/users/{{userId}}/notes/{{noteId}}"
  data="{{noteData}}">
</firebase-document>

This fetches the noteData object from the firebase location at /users/${userId}/notes/${noteId} and exposes it to the Polymer databinding system. Changes to noteData will likewise be, sent back up and stored.

<firebase-document> needs some information about how to talk to Firebase. Set this configuration by adding a <firebase-app> element anywhere in your app.

<firebase-query>

firebase-query combines the given properties into query options that generate a query, a request for a filtered, ordered, immutable set of Firebase data. The results of this Firebase query are then synchronized into the data parameter.

Example usage:

<firebase-query
    id="query"
    app-name="notes"
    path="/notes/[[uid]]"
    data="{{data}}">
</firebase-query>

<template is="dom-repeat" items="{{data}}" as="note">
  <sticky-note note-data="{{note}}"></sticky-note>
</template>

<script>
Polymer({
  properties: {
    uid: String,
    data: {
      type: Object,
      observer: 'dataChanged'
    }
  },

  dataChanged: function (newData, oldData) {
    // do something when the query returns values
  }
});
</script>

polymerfire's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

polymerfire's Issues

Firebase-query data binding

Description

Data binding not working in firebase-query when implementing as component. I need to use firebase-query in different components and using polymer-cli to lazyload the components. If I use firebase-document I will get data.

Expected outcome

An array of the data set from the data attribute.

Actual outcome

No results and empty array.
console

Live Demo

http://jsbin.com/xixirarile/edit?html,output

Steps to reproduce

Took a screenshot of my console log.

Browsers Affected

Any browser.

polymer-cli build fails

I'm not sure if this is an issue with polymerfire or with the polymer-cli build tool.

Description

error:   Promise rejection: Error: no resolver found for ../../../../bower_components/firebase/firebase.js
error:   Error: no resolver found for ../../../../bower_components/firebase/firebase.js
    at FileLoader.request (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/loader/file-loader.js:70:37)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:318:26)
    at Array.map (native)
    at Object.inlineScripts (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:311:34)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:458:21)
    at run (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:89:22)
    at /usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:102:28
    at flush (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/_microtask.js:18:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)
error:   Promise rejection: Error: no resolver found for ../../../../bower_components/firebase/firebase.js
error:   Error: no resolver found for ../../../../bower_components/firebase/firebase.js
    at FileLoader.request (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/lib/loader/file-loader.js:70:37)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:318:26)
    at Array.map (native)
    at Object.inlineScripts (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:311:34)
    at Object.<anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/vulcanize/lib/vulcan.js:458:21)
    at run (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:89:22)
    at /usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:102:28
    at flush (/usr/local/lib/node_modules/polymer-cli/node_modules/hydrolysis/node_modules/babel-polyfill/node_modules/core-js/modules/_microtask.js:18:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

Expected outcome

Project is build for both bundled and unbundled version.

Actual outcome

Above error occurs during build.

Firebase-document throws warning after succesful signin with redirect

Description

I get a warning in my console regarding synchronous XMLHttpRequest when using <firebase-document>. I sign in with redirect and after I get returned back to my website, the warning is thrown. <firebase-document> remains functional and retrieves/saves data as usual, but when the user is redirected back to the website this warning is thrown.

Expected outcome

No warning displayed

Actual outcome

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Live Demo

I am not sure how to create a demo for this, it is happening in our full-blown application.

Steps to reproduce

  1. Use Sign in with Redirect on firebase-auth
  2. Open the page in a web browser.
  3. Wait for the redirect
  4. Accept the provider
  5. Get redirected back to the website
  6. Let <firebase-document> trigger and receive data
  7. Observe the warning is thrown in the console

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

README do not mention the requirement to set app-name on firebase elements

Description

All Firebase elements (apart from firebase-app) require the app-name property set to the corresponding name value of firebase-app. This is mentioned in the code-lab and you can find it in the demo note-app, but it is not clear from the documentation of the elements/README. This would clear up some initial confusion for new developers who are trying out the Firebase elements.

<firebase-app> not working with bound attributes

Description

When the firebase-app element attributes are bound to some variable, other elements can't get the firebase.App

Expected outcome

An initialized firebase.App is distributed to all firebase-* elements

Actual outcome

There is no app in the firebase-* elements if the attributes are bound.

Live Demo

http://jsbin.com/layihiyogi/2/edit?html,output

Steps to reproduce

  1. Put a firebase-app element without attributes into your document
  2. Set element attributes in attached()
  3. Try getting data out of firebase with a firebase-document element

Add support for primitive elements in firebase-query

Description

When iterating over primitive key/value pairs, firebase-query throws the following error:

FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot create property '$key' on string 'own'
    at firebase-query.Polymer.__onFirebaseChildAdded

The "old" firebase-collection handled this by wrapping primitive values in an object like this:

{
  value: /* original primitive value */
  __firebaseKey__: /* key of primitive value in parent document */
}

Please make the same functionality available in firebase-query.

Steps to reproduce

Create a firebase-query element in a page and set path the "users" element, something like this:

users: {
  1: true,
  2: true,
  3: false
}

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

Value reading issue of firebase-document wrapped in dom-if in non-Chrome browsers

Description

One of the common scenarios is that I need to read an user specific value with database layout:

/users/$user_id/foo

But since user id is required, we need to wait until firebase User object(fbUser in short) is available. So I would wrapped firebase-document in a dom-if:

<template is="dom-if" if="[[fbUser]]" restamp="true">
  <firebase-document
    path="/users/[[fbUser.uid]]/foo"
    data="{{fooData}}"></firebase-document>
</template>

If I didn't wrap it in dom-if(with restamp be true), firebase-document seem to be unable to detect the change of path and failed to load value(even in Chrome).

Nevertheless, in non-Chrome browsers, although dom-if worked as expected and firebase-document is loaded after fbUser is available, I can't get any value from fooData not until I changed value of /users/$user_id/foo from the Firebase web console.

At first, I thought firebase-document have problem updating value at the first time with dom-if. But after I attached an observer on fooData to print its value, I got strange output below:(Value of /users/$user_id/foo is string "bar")

fooData: {}
fooData: "bar"
fooData: "bar"
fooData: {}

The only solution I came out is using dynamic evaluated path property of firebase-document:

<firebase-document
  id="fbFoo"
  data="{{fooData}}"></firebase-document>
...

observers:[
  '__onFbUserChanged(fbUser)'
],

__onFbUserChanged: function(fbUser){
  if(fbUser){
    this.$.fbFoo.path = '/users/' + fbUser.uid + '/foo';
  }
}

Expected outcome

firebase-document in dom-if behave the same in all browsers

Actual outcome

Data won't get any value when firebase-document in dom-if got attached

Steps to reproduce

(Described above)

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • [NOT TESTED] Edge
  • [NOT TESTED] IE 11
  • [NOT TESTED] IE 10

Build a GeoFire Element

It would be nice to have a GeoFire Element for declarative realtime location queries with Firebase.
Currently it is unnecessarily complicated to combine the imperative GeoFire API with the declarative element APIs.

Warning: unreachable code after return statement (Line 460:bower_components\app-storage\app-storage-behavior.html)

OS: Windows 10 Pro
Browser: Firefox 48.0b1
My app Url: https://note-app-e3dfc.firebaseapp.com/

So, I'm going through the following demo, which coincidentally happens to be the same as the Demo in polymerfire:

Build a Progressive Web App with Firebase, Polymerfire and Polymer Components

The first issue I'm having, which does not happen on my android device, is how slow the initial load is. Initial load can take up to 14 seconds, when viewed on chrome, Firefox, and edge on Windows Pro 10. Looking at console readout of Firefox reveals the above titled warning message, which appears first in the actual readout. So I'm presuming that this may have something to do with the slow load time

The second issue I'm having, which does not happen on my android device, is that upon typing a note, the text is being written backwards, as in the cursor is on the leftmost of the entry box, but typing a word like 'testing', appears as 'gnitset'. Words are being written right to left!

Running my demo app on windows, as specified above, will reveal all that I mention.

What is the issue here?

Possible ordering dependency with `firebase-query` attached handler

For example:

<firebase-query path="/test" data="{{test}}"></firebase-query>

Steps to reproduce

  • Load a page with a firebase-query in a background tab
  • Switch to the tab
  • Notice the query's data is empty

Why?

If you load this in an unfocused (background) tab in your browser, the query will be setup correctly and the data will be populated as expected (child_added events are fired).

If you then focus the tab in your browser, the first requested animation frame is processed, so Polymer calls any attached handlers. This triggers __queryChanged which will set the data to [].

The problem here seems to be that, because we already got the initial child_added events, they will not fire again and we will keep our empty array.

Not sure how we should deal with this, being more careful around the attached event somehow.

Expected behaviour

  • child_added events fire
  • data is populated
  • tab is focused
  • data remains populated

Actual behaviour

  • child_added events fire
  • data is populated
  • tab is focused
  • data is set to []
  • child_added events don't fire again, data remains []

Add 'statusKnown' to firebase-auth

Description

We need a way to know if authentication is still in progress. For example, if we are using carbon-routing, we want to defer any routing events until we determine whether or not the user is authenticated (so we know to redirect them to login on the actual destination page). If the user has previously been logged in, and returns to the page (page refresh), there is a delay before the persisted user object is loaded and set. We'd like to check this state before performing any routing.

Expected Behavior

When true, login status can be determined by checking user property.

Cannot create property '$key' on boolean 'true'

Description

When using <firebase-query> with data structure like

{
$id: true
}

it throws an error
Cannot create property '$key' on boolean 'true'

Steps to reproduce

Create data like

{
    "notes-by-user": {
        "userId1": {
            "noteId1": true,
            "noteId2": true,
        }
    }
}

and <firebase-query> element like

<firebase-query
   path="/notes-by-user/userId1"
   data="{{notes}}">
</firebase-query>

signInWithPopup/signInWithRedirect methods never complete in IE

Attempts to authenticate via Google or Github using IE always hang and never complete.

Expected outcome

The popup dialog closes and the userproperty bound to firebase-auth gets populated.

Actual outcome

firebase-auth fires the following error message every time: "Error: The popup has been closed by the user before finalizing the operation."

Steps to reproduce

  • Trigger signInWithPopup('google')
  • A popup with Google credentials shows
  • Enter credentials
  • It begins to authenticate

Outcome:

  • The following close dialog appears:

- Shortly after, `firebase-auth` fires the following error message: "Error: The popup has been closed by the user before finalizing the operation." (Note: leaving the close dialog open results in the same response)

The problem occurs in both IE11 and IE10.

I've also tried updating the firebase-sdk with the latest version to no avail.

I'm not sure where the issue lies with this one...

`firebase-query` doesn't listen on the `value` event for initialisation

If you have a firebase-query pointed at a path which doesn't yet exist, it won't update when the first child is added.

This seems to be because the initial push to the collection will fire a value event, not a child_added event.

We should probably be listening on the value event when our initial value is null, to set the data correctly.

Example

<firebase-query path="/foo" data="{{data}}"></firebase-query>
  • /foo does not exist in the database
  • push to /foo (so the first child is created)
  • data remains empty

Expected

  • The data property is updated

Actual

  • The data property remains unchanged

Can write but not read data with firebase-document

Description

When using a computed binding for the path property in firebase-document, such as path="{{createPath(user)}}", the data is empty, although I can write to it and it's updating in the firebase database.

Expected outcome

firebase-document fill the data property with the content of the database.

Actual outcome

data is empty.

Live Demo

N.A.

Steps to reproduce

  1. Declare a firebase-document with path equal to a computed binding, such as {{createPath(user)}}
  2. Declare the computed binding, such as createPath: function(user) {return "/users/" + user.uid;}
  3. Observe that you can't read from data but you can write to it

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

Documentation: explain why <firebase-query> does not support primitives as values

Not quite sure the firebase-query.html is ready for production. Because I've played it around but I found the error when I tried to query a simple structure. Note, it works great in firebase CLI and angularjs but not polymerfire.

Error:
index.js:362 Uncaught TypeError: Cannot create property '$key' on string '2016'
index.js:362 Uncaught TypeError: Cannot create property '$key' on string 'Eng'
index.js:362 Uncaught TypeError: Cannot create property '$key' on string 'EMPLOYEE'

Here is my markup for very simple fetch:

<firebase-query
    app-name="teams-prod"
    path="/team/members"
    data="{{data}}">
</firebase-query>
<p>{{ data }} </p>
shell> firebase database:get --project project-133684xxxx /team/members
{"axa":{"checkin":"2016", "type":"EMPLOYEE", "team":"Eng"}}

Behavior similar to 'firebase-collection'

The old firebase-collection was mutable via data-binding which allowed the user to add, remove, or edit elements of the query pretty easily, however, firebase-query is now immutable.

I want to know if you're considering adding those behaviors to firebase-query and if you aren't then how would you recommend us to cope with the lack of them? (Would it be possible using firebase-document somehow or would we need to interact with the javascript API directly?)

firebase-app : Return error if mandatory attributes not set

The firebase-app does not return any error

Expected outcome

Firebase app element should return error with warning that required attribute is not set (or is mistyped).

Actual outcome

Element will return friendly warning, like "required parameter api-key is not set"

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

Missing app-name attribute in firebase-document's docs

Description

The docs is not indicating that app-name is necessary for firebase-document. I tried this code:

<firebase-app id="app" name="enginevents" auth-domain="mydomain" database-url="myurl" api-key="mykey"></firebase-app>
<firebase-auth id="auth" app-name="enginevents" provider="google"></firebase-auth>
<firebase-document  id="doc" path="/eventlist" data="{{noteData}}"></firebase-document>

And the firebase-document was firing an exception because this.db was not initialized

So i changed the firebase-document line for this:

<firebase-document  app-name="enginevents" id="doc" path="/eventlist" data="{{noteData}}"></firebase-document>

And now it works.

Expected outcome

Docs should be accurate

Actual outcome

Docs is missing that app-name is necessary

Live Demo

Steps to reproduce

Try the code above

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

Add a 'bower install' line.

It'd be really helpful to get this element registered on Bower - the 'bower install' command listed during Michael Bleigh's Google IO talked errored for me.

Multiple firebase-query share same data array

Description

Somehow when using more than one firebase-query elements the data array is the same for both of them, with what should be the first array and the second concatenated one after the other.

Expected outcome

Using two firebase-query elements with different paths bound to separate arrays, results in two different and independent data sets.

Actual outcome

Using two firebase-query elements with different paths bound to separate arrays a1 and a2, results in a1 being equal to a2 where their value is the concatenation of both expected data sets.

Steps to reproduce

  1. Put a firebase-appand a firebase-auth element in the page.
  2. Put two firebase-query elements on the page, with different paths and bound to different arrays.
  3. Check both values

detaching a `firebase-document` breaks all others with same ref

Description

Because of this, we actually lose all event listeners when detach occurs.

This because of the following:

firebase.database().ref('/test').on('value', handler1);
firebase.database().ref('/test').on('value', handler2);
// handler1 is called
// handler2 is called

firebase.database().ref('/test').off();
// BOTH event listeners are now removed

firebase.database().ref('/test').set(true);
// neither handler1 or handler2 are called

Essentially, calling off() without arguments will remove every event listener related to the specified ref, rather than for this single instance.

This means if you have two firebase-document elements with the same path, then detach one of them, the other will stop functioning correctly (databinding is lost).

You should most likely be removing specific handlers (passing this like you do everywhere else in the code, so you only remove this instance's handler).

Feature R: Fire "snapshot"-event with response from firebase-document

If I want to initiate values on a document when it's accessed the first time all I can do is listen for changes to the data handle. But when you have set the path it'll trigger an empty obj which you don't really know if it's an empty document or just initiated zeroValue data. Right?

To solve this all I've done is add a line this.fire("snapshot", value); in firebase-document.html:194 and now I know for sure when first response occurs. edit: i've removed this event and instead made a separate getStoredValue request to see if the data exists, but my example below still stands I think.

Alternatively maybe set a 'status' variable so you are aware if it's in the pending state in between request and first response. Helps if you want to for example disable input fields while waiting for response, or fade in when response comes.

Also maybe I'm going about this all wrong :p

Change this.$.signInWithPopup() in readme to this.$.auth.signInWithPopup()

Change:

JavaScript sign-in calls can then be made to the firebase-auth object to attempt authentication, e.g.:

this.$.signInWithPopup() .then(function(response) {// successful authentication response here}) .catch(function(error) {// unsuccessful authentication response here});

To:
JavaScript sign-in calls can then be made to the firebase-auth object to attempt authentication, e.g.:

this.$.auth.signInWithPopup() .then(function(response) {// successful authentication response here}) .catch(function(error) {// unsuccessful authentication response here});

<firebase-auth> Allowing provider name as input argument for signInWithPopup & signInWithRedirect

Description

_attemptProviderSignIn(provider, method) provider argument has to be a new firebase.auth.providerNameAuthProvider() provider instead of the name of the provider.

Expected outcome

signInWithPopup(providerName) would automatically create a new firebase.auth.providerNameAuthProvider() using _providerFromName method.

Actual outcome

Error: First argument "authProvider" must be a valid Auth provider. (listening to error of firebase-auth)

Steps to reproduce

this.$.auth.signInWithPopup("google")

polymer-cli will not build with polymerfire included in project

This error prevents the building of an bundled package.
Reproduce by adding polymerfire to bower.json
"polymerfire": "firebase/polymerfire#^0.9.2",
Error:

debug:   no file for ../bower_components/firebase-sdk/index.js :(
debug:   No file found for ../bower_components/firebase-sdk/index.js
debug:   no file for ../bower_components/promise-polyfill/Promise.js :(
debug:   No file found for ../bower_components/promise-polyfill/Promise.js
debug:   no file for ../bower_components/promise-polyfill/Promise-Statics.js :(
debug:   No file found for ../bower_components/promise-polyfill/Promise-Statics.js
error:   Promise rejection: Error: no resolver found for ../bower_components/firebase-sdk/index.js
error:   Error: no resolver found for ../bower_components/firebase-sdk/index.js

signInWithEmailAndPassword throws error

Description

Attempting to use signInWithEmailAndPassword throws and exception

Expected outcome

method should be found and executed.

Actual outcome

market-edge-app.html:51 Uncaught TypeError: this.$.auth.signInWithEmailAndPassword is not a function
signIn @ market-edge-app.html:51
handler @ polymer.html:518
fire @ polymer.html:1277
signIn @ me-login.html:70
handler @ polymer.html:518
fire @ polymer.html:1277
fire @ polymer.html:854
forward @ polymer.html:1149
click @ polymer.html:1134
handleNative @ polymer.html:744

Not sure if I have something configured wrong or what but I started with a basic polymer app built using the polymer-cli, I then added polymerfire using bower I have setup the firebase-app with the correct setting from my firebase-console.
Below is a snippet of the code.

  <firebase-auth
        id="auth"
        app-name="market-edge"
        signed-in="{{signedIn}}"
        user="{{user}}">
    </firebase-auth>

  </template>

  <script>
    Polymer({

      is: 'market-edge-app',

      properties: {
      },
      signIn: function() {
        console.log(this.$.auth.user);
        this.$.auth.signInWithEmailAndPassword(this.user, this.password)
          .then(function(response) {
            console.log(response);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    });
  </script> 

Add firebase-storage

Description

Please add a new element to wrap around the Firebase storage API. Would be really useful to dinamically attach new images without need to deploy again

Document that path on firebase-document is case-sensitive

Description

This took me quite a while to figure out why my firebase-document was not working properly. It turned out that the path of the element contained capital characters. E.g. /path/Polymer instead of /path/polymer.

Expected outcome

When the path of a firebase-document contains uppercase characters, requests to Firebase will be successful.

Actual outcome

As a result of the path containing uppercase-characters, the request of firebase-document is unsuccessful. After that, most of the properties on firebase-document would reset. It did sometimes throw Errors, other times it just removed references to the app and ref. data was set to {}.

Sample code

<firebase-app
        name="test">
</firebase-app>
<firebase-document
        app-name="test"
        path="/users/TimvdLippe"
        data="{{user}}"
></firebase-document>

Steps to reproduce

  1. Use the above firebase-app and firebase-document
  2. In Firebase on the end-point /users/TimvdLippe store "User retrieved!"
  3. Open the above example in the browser
  4. Output the content of data of the firebase-document. This should be {}.
  5. Modify the above example by setting path="/users/timvdlippe"
  6. Refresh the browser
  7. Output the content of data of the firebase-document. This should be "User retrieved!"

Browsers Affected

  • Chrome
  • Firefox
  • Safari 9
  • Safari 8
  • Safari 7
  • Edge
  • IE 11
  • IE 10

Get twitter @username with firebase.UserInfo

Logging in with Twitter does not expose the twitter handle / username in firebase.UserInfo

Expected outcome

@bkawk

Actual outcome

No data

Steps to reproduce

  1. Login with twitter
  2. Try to access the twitter @username / handle with firebase.UserInfo

Deployed app not working

I have migrated my application from firebase-element to polymerfire. Everything works fine until I deploy the app.
After, on local or on web many errors appear.
On web, errors are : Uncaught NotSupportedError, Uncaught TypeError: Polymer.Base._getExtendedPrototype is not a function, etc
After deploying, on local, it seams that it's an iframe that points to mywebsite.firebaseapp.com/__/auth is corrupted. Errors are same.
The workarround I find is to have a project for auth and database and deploy on other project. It resolves only auth corruption.

After long search I thinl the problem comes from polymer build process

GetStoredValue in firebase-document not needed.

The getStoredValue method can be changed to:

getStoredValue: function() { return Promise.resolve() },

The db.ref(path).once('value', ....) call is not needed as long as there is an on('value') listener on the same path.

I have tested multiple times and it always returns null, but the on('value') listener gets everything and then stays in sync.

It's make sense that firebase made it like that because else you could lost changes made to the path after the once call and before the db get synced.

If I'm correct you also need to override the _initializeStoredValue method so users of the element can be sure that the db is in sync when the property __initialized === true.

It's important for me to know when the db is initialized because of caching and syncing of data to build the view and user state.

bower ECONFLICT Unable to find suitable version for firebase

This is for anyone struggling with the same issue:

Description

There is a bower dependency error when I include this in the project version 0.9.3

Expected outcome

Bower would just import the dependency

Actual outcome

bower ECONFLICT     Unable to find suitable version for firebase

and fails

Workaround

Add firebase to your resolutions of your bower.json making sure it will always import the right version.

"resolutions": {
    "firebase": "^3.0.0"
},

Possible typo in firebase-document in the method __onFirebaseValue.

I just can't understand these lines of code, and the this.new is always undefined:

if (!this.new) { this.async(function() { this.syncToMemory(function() { this._log('Updating data from Firebase value:', value); this.set('data', value); }); }); }

Should it may be:

if (!this.isNew) { this.async(function() { this.syncToMemory(function() { this._log('Updating data from Firebase value:', value); this.set('data', value); }); }); }

`getStoredValue` attempts to resolve a duplicated/incorrect path

I'm not sure if this is a bug or expected behaviour, but say I have the following:

<firebase-document path="/foo" data="{{foo}}"></firebase-document>

This works fine, as expected. However, I noticed that getStoredValue is hit in a strange way.

You can see it calls this.ref.child(path). In my case, path is /foo but this.ref is already xyz.firebaseio.com/foo so it tries to resolve /foo/foo. Surprisingly, this doesn't seem to affect anything, foo is still set correctly, but it definitely looks wrong still.

`firebase-document` defaults to `{}` before resolving

Description

When using firebase-document, somewhere it defaults to the empty object (this).

This means in the common use case we observe the following values (in order):

  • undefined
  • {}
  • { "foo": "bar" }

Where the last object is the actual document from Firebase.

In the old firebase elements, we would observe:

  • undefined
  • { "foo": "bar" }

This is a problem because we can no longer expect a well structured (essentially "typed") object.

If we write a component for fetching and displaying posts, for example, we are forced to add a condition to ensure the document is the right "shape". We cannot safely assume that any object we get in our property is the correct structure/shape.

Additionally, this means if for some reason you try to fetch an array, you observe the following:

  • undefined
  • {}
  • []

Which of course is crazy. The only values we should see are the resolved ones from the database and undefined (or maybe null for when it doesn't exist).

Display a demo

The demo isn't displayed anywhere. The demo should be visible online.

Until someone develops a more convenient way, if you want to view the demo, you have to clone this repo locally and bower install to view it. Use the following procedure.

git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
open http://localhost:8080/components/polymerfire/demo/

See this SO question and answer for more details.

Firebase-query Equal To Issue

Description

Setting the equal-to attribute to a boolean type does not work as expected when its value is false. The attribute works as expected when boolean and true, or other types.

Expected outcome

When a document in the Firebase database has a child in it set to true, and the firebase-query attribute equal-to is set to false, the query should not return that document.

Actual outcome

It returns all documents, ignoring the equalTo. If the values were instead Strings or equal-to is set to true, it works as expected.

Live Demo

Link to demo

Steps to reproduce

  1. The demo starts with equal-to being boolean false. The expected false results should be a single line of "Boolean value of false", instead all documents are listed.
  2. After clicking test true, equal-to is set to boolean true, a single line of "Boolean value of true" is shown as expected.

Link to database

Polylint warnings on behaviours

Currently, these elements produce warnings when passed through Polylint.

This seems to be because the behaviours are missing the @polymerBehavior decorator.

Presumably the errors found during linting (such as not found properties) are also due to this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.