Upgrade Firechat to the Firebase 3.x.x SDK

Gruntfile.js

@@ -63,10 +63,7 @@ module.exports = function(grunt) {
 
     // Minify concatenated files.
     uglify: {
-      dist: {
-        src: ['<%= concat.js.dest %>'],
-        dest: 'dist/firechat.min.js'
-      }
+      'dist/firechat.min.js': ['dist/firechat.js'],
     },
 
     // Clean up temporary files.

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Firebase
+Copyright (c) 2016 Firebase
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,10 +1,9 @@
-# Firechat
+# Firechat [![Version](https://badge.fury.io/gh/firebase%2Ffirechat.svg)](http://badge.fury.io/gh/firebase%2Ffirechat)
 
-[![Version](https://badge.fury.io/gh/firebase%2Ffirechat.svg)](http://badge.fury.io/gh/firebase%2Ffirechat)
-
-Firechat is a simple, extensible chat widget powered by [Firebase](https://www.firebase.com/?utm_source=firechat).
-It is intended to serve as a concise, documented foundation for chat products built on Firebase.
-It works out of the box, and is easily extended.
+Firechat is a simple, extensible chat widget powered by
+[Firebase](https://firebase.google.com/?utm_source=firechat). It is intended to serve as a concise,
+documented foundation for chat products built on Firebase. It works out of the box, and is easily
+extended.
 
 ## Live Demo
 
@@ -14,71 +13,72 @@ Visit [firechat.firebaseapp.com](https://firechat.firebaseapp.com/) to see a liv
 
 ## Setup
 
-Firechat uses [Firebase](https://www.firebase.com/?utm_source=firechat) as a backend, so it requires no server-side
-code. It can be added to any web app by including a few JavaScript files
+Firechat uses the [Firebase Realtime Database](https://firebase.google.com/docs/database/?utm_source=firechat)
+as a backend, so it requires no server-side code. It can be added to any web app by including a few
+JavaScript files:
 
 ```HTML
 <!-- jQuery -->
-<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
 <!-- Firebase -->
-<script src='https://cdn.firebase.com/js/client/2.1.0/firebase.js'></script>
+<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
 
 <!-- Firechat -->
-<link rel='stylesheet' href='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css' />
-<script src='https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js'></script>
+<link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/3.0.0/firechat.min.css" />
+<script src="https://cdn.firebase.com/libs/firechat/3.0.0/firechat.min.js"></script>
 ```
 
-giving your users a way to authenticate
+giving your users a way to authenticate:
 
 ```HTML
 <script>
-// Create a new Firebase reference, and a new instance of the Login client
-var chatRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/chat');
+  function login() {
+    // Log the user in via Twitter
+    var provider = new firebase.auth.TwitterAuthProvider();
+    firebase.auth().signInWithPopup(provider).catch(function(error) {
+      console.log("Error authenticating user:", error);
+    });
+  }
 
-function login() {
-  chatRef.authWithOAuthPopup("twitter", function(error, authData) {
-    if (error) {
-      console.log(error);
+  firebase.auth().onAuthStateChanged(function(user) {
+    // Once authenticated, instantiate Firechat with the logged in user
+    if (user) {
+      initChat(user);
     }
   });
-}
-
-chatRef.onAuth(function(authData) {
-  // Once authenticated, instantiate Firechat with our user id and user name
-  if (authData) {
-    initChat(authData);
-  }
-});
 </script>
 
-<a href='#' onclick='login();'>Login with Twitter</a>
+<button onclick="login()">Login with Twitter</button>
 ```
-    
-and initializing the chat.
+
+and initializing the chat:
 
 ```HTML
 <script>
-function initChat(authData) {
-  var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
-  chat.setUser(authData.uid, authData[authData.provider].displayName);
-}
+  function initChat(user) {
+    // Get a Firebase Database ref
+    var chatRef = firebase.database().ref("chat");
+
+    // Create a Firechat instance
+    var chat = new FirechatUI(chatRef, document.getElementById("firechat-wrapper"));
+
+    // Set the Firechat user
+    chat.setUser(user.uid, user.displayName);
+  }
 </script>
 
-<div id='firechat-wrapper'></div>
+<div id="firechat-wrapper"></div>
 ```
 
 For detailed integration instructions, see the [Firechat documentation](https://firechat.firebaseapp.com/docs/).
 
 ## Getting Started with Firebase
 
-Firechat requires Firebase in order to store data. You can
-[sign up here](https://www.firebase.com/signup/?utm_source=firechat) for a free account.
+Firechat requires Firebase in order to authenticate users and store data. You can
+[sign up here](https://console.firebase.google.com/?utm_source=firechat) for a free account.
 
 ## Getting Help
 
-If you have a question about Firechat, search the 
-[Firebase tag on Stack Overflow](http://stackoverflow.com/questions/tagged/firebase) to see if it has already been 
-answered. If it hasn't been asked, post a [new question](http://stackoverflow.com/questions/ask?tags=firebase+firechat). 
-We keep a close eye on those tags, and will answer your question soon.
-
+If you have a question about Firechat, feel free to reach out through one of our
+[official support channels](https://firebase.google.com/support/?utm_source=firechat).

bower.json

@@ -3,7 +3,7 @@
   "description": "Realtime open source chat client powered by Firebase",
   "version": "0.0.0",
   "authors": [
-    "Firebase <support@firebase.com> (https://www.firebase.com/)"
+    "Firebase (https://firebase.google.com/)"
   ],
   "homepage": "https://firechat.firebaseapp.com/",
   "repository": {
@@ -31,6 +31,6 @@
     "changelog.txt"
   ],
   "dependencies": {
-    "firebase": "2.0.x"
+    "firebase": "3.x.x"
   }
 }

changelog.txt

@@ -0,0 +1,2 @@
+feature - Upgraded the `firebase` dependency to `3.x.x` (thanks to @cmosguy). No Firechat APIs have changed, but Firechat will no longer work with the Firebase `2.x.x` SDK. See the [web migration guide](https://firebase.google.com/support/guides/firebase-web) for detailed instructions on how to upgrade to the Firebase `3.x.x` SDK.
+fixed - Fixed an issue where `onDisconnect()` operations were not properly restored upon regaining a connection to the Firebase Database (thanks to @oddui).

examples/anonymous/index.html

@@ -4,14 +4,14 @@
     <meta charset="utf-8" />
 
     <!-- jQuery -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
     <!-- Firebase -->
-    <script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
 
     <!-- Firechat -->
-    <link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css" />
-    <script src="https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/3.0.0/firechat.min.css" />
+    <script src="https://cdn.firebase.com/libs/firechat/3.0.0/firechat.min.js"></script>
 
     <!-- Custom CSS -->
     <style>
@@ -49,16 +49,29 @@
   <body>
     <div id="firechat-wrapper"></div>
     <script type="text/javascript">
-      var chatRef = new Firebase("https://firechat-demo.firebaseio.com");
+      // Initialize Firebase SDK
+      var config = {
+        apiKey: "AIzaSyDFlsisAa2yeDhRjSPdoC6Ez0UjOrSf9sc",
+        authDomain: "firechat-demo-app.firebaseapp.com",
+        databaseURL: "https://firechat-demo-app.firebaseio.com"
+      };
+      firebase.initializeApp(config);
+
+      // Get a reference to the Firebase Realtime Database
+      var chatRef = firebase.database().ref("firechat-demo");
+
+      // Create an instance of Firechat
       var chat = new FirechatUI(chatRef, document.getElementById("firechat-wrapper"));
-      chatRef.onAuth(function(authData) {
-        if (authData) {
-          chat.setUser(authData.uid, "Anonymous" + authData.uid.substr(10, 8));
+
+      // Listen for authentication state changes
+      firebase.auth().onAuthStateChanged(function(user) {
+        if (user) {
+          // If the user is logged in, set them as the Firechat user
+          chat.setUser(user.uid, "Anonymous" + user.uid.substr(10, 8));
         } else {
-          chatRef.authAnonymously(function(error, authData) {
-            if (error) {
-              console.log(error);
-            }
+          // If the user is not logged in, sign them in anonymously
+          firebase.auth().signInAnonymously().catch(function(error) {
+            console.log("Error signing user in anonymously:", error);
           });
         }
       });

package.json

@@ -2,7 +2,7 @@
   "name": "firechat",
   "description": "Realtime open source chat client powered by Firebase",
   "version": "0.0.0",
-  "author": "Firebase <support@firebase.com> (https://www.firebase.com/)",
+  "author": "Firebase (https://firebase.google.com/)",
   "homepage": "https://firechat.firebaseapp.com/",
   "repository": {
     "type": "git",
@@ -11,12 +11,7 @@
   "bugs": {
     "url": "https://github.com/firebase/firechat/issues"
   },
-  "licenses": [
-    {
-      "type": "MIT",
-      "url": "http://firebase.mit-license.org/"
-    }
-  ],
+  "license": "MIT",
   "keywords": [
     "chat",
     "talk",
@@ -33,21 +28,17 @@
     "package.json"
   ],
   "dependencies": {
-    "firebase": "2.0.x"
+    "firebase": "3.x.x"
   },
   "devDependencies": {
     "grunt": "~0.4.0",
     "grunt-cli": "^0.1.13",
-    "grunt-contrib-clean": "~0.4.1",
-    "grunt-contrib-concat": "~0.1.1",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-jshint": "~0.1.0",
     "grunt-contrib-jst": "~0.5.0",
     "grunt-contrib-less": "~0.5.0",
-    "grunt-contrib-uglify": "~0.1.0",
-    "grunt-contrib-watch": "~0.1.4"
-  },
-  "scripts": {
-    "test": "gulp test",
-    "travis": "gulp travis"
+    "grunt-contrib-uglify": "^2.0.0",
+    "grunt-contrib-watch": "^1.0.0"
   }
 }

src/js/firechat-ui.js

@@ -799,7 +799,7 @@
             selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '');
           }
 
-          $parent = selector && $(selector);
+          $parent = selector && (selector !== '#') && $(selector);
 
           if (!$parent || !$parent.length) $parent = $this.parent();