WIP: Polymer 3

.gitignore

@@ -1,2 +1,21 @@
-bower_components*
-bower-*.json
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity

demo/firebase-auth.html

@@ -12,9 +12,9 @@
     <meta charset="utf-8">
     <title>firebase-auth demo</title>
     <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="../../polymer/polymer.html">
-    <link rel="import" href="../firebase-app.html">
-    <link rel="import" href="../firebase-auth.html">
+    <script type="module" src="../../../@polymer/polymer/polymer.js"></script>
+    <script type="module" src="../firebase-app.js"></script>
+    <script type="module" src="../firebase-auth.js"></script>
     <style media="screen">
       body {
         font-family: Roboto, sans-serif;
@@ -96,44 +96,45 @@ <h3>Anonymous/OAuth</h3>
         <button on-tap="signOut">Sign Out</button>
       </div>
     </template>
-    <script type="text/javascript">
-      document.addEventListener('WebComponentsReady', function() {
-        var app = document.getElementById('app');
-        app.error = null;
-        app.showError = function(e) {
-          this.error = e.detail;
-        };
+    <script type="module">
+import '../../../@polymer/polymer/polymer.js';
+import '../firebase-app.js';
+import '../firebase-auth.js';
+var app = document.getElementById('app');
+app.error = null;
+app.showError = function(e) {
+  this.error = e.detail;
+};
 
-        app.signInAnonymously = function() {
-          this.error = null;
-          this.$.auth.signInAnonymously();
-        };
+app.signInAnonymously = function() {
+  this.error = null;
+  this.$.auth.signInAnonymously();
+};
 
-        app.signInWithGoogle = function() {
-          this.error = null;
-          this.$.auth.signInWithPopup();
-        };
+app.signInWithGoogle = function() {
+  this.error = null;
+  this.$.auth.signInWithPopup();
+};
 
-        app.signInWithEmailAndPassword = function(e) {
-          if (e) { e.preventDefault(); }
-          this.error = null;
-          this.$.auth.signInWithEmailAndPassword(this.email, this.password);
-          this.email = null;
-          this.password = null;
-        };
+app.signInWithEmailAndPassword = function(e) {
+  if (e) { e.preventDefault(); }
+  this.error = null;
+  this.$.auth.signInWithEmailAndPassword(this.email, this.password);
+  this.email = null;
+  this.password = null;
+};
 
-        app.createUserWithEmailAndPassword = function() {
-          this.error = null;
-          this.$.auth.createUserWithEmailAndPassword(this.email, this.password);
-          this.email = null;
-          this.password = null;
-        };
+app.createUserWithEmailAndPassword = function() {
+  this.error = null;
+  this.$.auth.createUserWithEmailAndPassword(this.email, this.password);
+  this.email = null;
+  this.password = null;
+};
 
-        app.signOut = function() {
-          this.error = null;
-          this.$.auth.signOut();
-        };
-      });
-    </script>
+app.signOut = function() {
+  this.error = null;
+  this.$.auth.signOut();
+};
+</script>
   </body>
 </html>

demo/firebase-firestore-mixin-collection-demo.js

@@ -0,0 +1,25 @@
+import '../firebase-firestore-mixin.js';
+import { Element } from '../../../@polymer/polymer/polymer-element.js';
+class FirebaseFirestoreMixinCollectionDemo extends Polymer.FirestoreMixin(Element) {
+  static get template() {
+    return `
+    <ul>
+    <dom-repeat items="[[users]]"><template>
+      <li>[[item.name]]</li>
+    </template></dom-repeat>
+    </ul>
+`;
+  }
+
+  static get is() { return 'firebase-firestore-mixin-collection-demo'; }
+  static get properties() {
+    return {
+      users: {
+        type: Array,
+        collection: 'users',
+        query: q => q.orderBy('name')
+      }
+    }
+  }
+}
+customElements.define(FirebaseFirestoreMixinCollectionDemo.is, FirebaseFirestoreMixinCollectionDemo);

demo/firebase-firestore-mixin-document-demo.js

@@ -0,0 +1,24 @@
+import '../firebase-firestore-mixin.js';
+import { Element } from '../../../@polymer/polymer/polymer-element.js';
+class FirebaseFirestoreMixinDocumentDemo extends Polymer.FirestoreMixin(Element) {
+  static get template() {
+    return `
+    <div>[[user.name]]</div>
+`;
+  }
+
+  static get is() { return 'firebase-firestore-mixin-document-demo'; }
+  static get properties() {
+    return {
+      uid: {
+        type: String,
+        value: 'mBylIa6HUTUU5e4npnoE',
+      },
+      user: {
+        type: Object,
+        doc: 'users/{uid}',
+      }
+    }
+  }
+}
+customElements.define(FirebaseFirestoreMixinDocumentDemo.is, FirebaseFirestoreMixinDocumentDemo);

demo/firebase-firestore.html

@@ -11,11 +11,11 @@
   <head>
     <meta charset="utf-8">
     <title>PolymerFire Firestore Demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../../polymer/polymer.html">
-    <link rel="import" href="../firebase-app.html">
-    <link rel="import" href="firebase-firestore-mixin-collection-demo.html">
-    <link rel="import" href="firebase-firestore-mixin-document-demo.html">
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
+    <script type="module" src="../../../@polymer/polymer/polymer.js"></script>
+    <script type="module" src="../firebase-app.js"></script>
+    <script type="module" src="./firebase-firestore-mixin-collection-demo.js"></script>
+    <script type="module" src="./firebase-firestore-mixin-document-demo.js"></script>
     <firebase-app auth-domain="polymerfire-test.firebaseapp.com"
       database-url="https://polymerfire-test.firebaseio.com/"
       api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"

demo/firebase-messaging.html

@@ -11,8 +11,8 @@
   <head>
     <title>firebase-messaging demo</title>
     <link rel="manifest" href="manifest.json">
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../firebase-messaging.html">
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
+    <script type="module" src="../firebase-messaging.js"></script>
     <style>
       body { font-family: Roboto, sans-serif; padding: 0; margin: 0 }
 
@@ -52,26 +52,26 @@
     </style>
   </head>
   <body>
-    <script>
-      firebase.initializeApp({
-        messagingSenderId: '153517668099'
-      });
+    <script type="module">
+import '../firebase-messaging.js';
+import { Element } from '../../../@polymer/polymer/polymer-element.js';
+firebase.initializeApp({
+  messagingSenderId: '153517668099'
+});
 
-      window.addEventListener('WebComponentsReady', function() {
-        if (navigator.serviceWorker) {
-          navigator.serviceWorker.register('firebase-messaging-sw.js').then(function(sw) {
-            var app = document.getElementById('app');
+if (navigator.serviceWorker) {
+  navigator.serviceWorker.register('firebase-messaging-sw.js').then(function(sw) {
+    var app = document.getElementById('app');
 
-            // Polymer 2.0 compat
-            if (Polymer.Element) {
-              app = app.parentNode;
-            }
+    // Polymer 2.0 compat
+    if (Element) {
+      app = app.parentNode;
+    }
 
-            app.$.messaging.activate(sw);
-          });
-        }
-      });
-    </script>
+    app.$.messaging.activate(sw);
+  });
+}
+</script>
     <h1>firebase-messaging demo</h1>
     <p>This demo will allow you to request notification permissions and obtain an instance token.
     To actually test receipt of push messages, you will need to clone the demo and modify the
@@ -101,25 +101,27 @@ <h3>Message Log</h3>
         </main>
       </template>
     </dom-bind>
-    <script>
-      var app = document.getElementById('app');
+    <script type="module">
+import '../firebase-messaging.js';
+import { Element } from '../../../@polymer/polymer/polymer-element.js';
+var app = document.getElementById('app');
 
-      // Polymer 2.0 compat
-      if (Polymer.Element) {
-        app = app.parentNode;
-      }
+// Polymer 2.0 compat
+if (Element) {
+  app = app.parentNode;
+}
 
-      app.requestMessaging = function() {
-        return this.$.messaging.requestPermission();
-      }
+app.requestMessaging = function() {
+  return this.$.messaging.requestPermission();
+}
 
-      app.json = function(val) {
-        return JSON.stringify(val || null, null, 2);
-      }
+app.json = function(val) {
+  return JSON.stringify(val || null, null, 2);
+}
 
-      app.logit = function(e) {
-        this.$.log.innerHTML = JSON.stringify(e.detail.message) + "\n" + app.$.log.innerHTML;
-      }
-    </script>
+app.logit = function(e) {
+  this.$.log.innerHTML = JSON.stringify(e.detail.message) + "\n" + app.$.log.innerHTML;
+}
+</script>
   </body>
 </html>

demo/firebase-storage-auto.html

@@ -11,9 +11,9 @@
   <head>
     <meta charset="utf-8">
     <title>firebase-storage-multiupload demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../../polymer/polymer.html">
-    <link rel="import" href="./firebase-storage-multiupload-auto.html">
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
+    <script type="module" src="../../../@polymer/polymer/polymer.js"></script>
+    <script type="module" src="./firebase-storage-multiupload-auto.js"></script>
 
   </head>
   <body>