Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Firestore: add document demo, fix property bindings #293

Merged
tjmonsi merged 6 commits into from
Oct 24, 2017
Merged

Firestore: add document demo, fix property bindings #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f458cdd
Add FirestoreElement document demo.
merlinnot Oct 20, 2017
2fd8797
Use a new scope instead of a new context created by an IIFE in Firest…
merlinnot Oct 20, 2017
0b6cc21
Use binding to element's properties in firestore demo.
merlinnot Oct 23, 2017
349dc04
Merge branch 'firestore' into fix-issue-289
merlinnot Oct 23, 2017
e3afb7a
Change filenames of firestore demos to match those of other elements.
merlinnot Oct 23, 2017
97a771b
Fix FirestoreMixin's issue with binding to element's properties with …
merlinnot Oct 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions demo/firestore-mixin-demo.html → ...base-firestore-mixin-collection-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<link rel="import" href="../firebase-firestore-mixin.html">

<dom-module id="user-list">
<dom-module id="firebase-firestore-mixin-collection-demo">
<template>
<ul>
<dom-repeat items="[[users]]"><template>
Expand All @@ -11,8 +11,8 @@
</dom-module>

<script>
class UserList extends Polymer.FirestoreMixin(Polymer.Element) {
static get is() { return 'user-list'; }
class FirebaseFirestoreMixinCollectionDemo extends Polymer.FirestoreMixin(Polymer.Element) {
static get is() { return 'firebase-firestore-mixin-collection-demo'; }
static get properties() {
return {
users: {
Expand All @@ -23,5 +23,5 @@
}
}
}
customElements.define(UserList.is, UserList);
</script>
customElements.define(FirebaseFirestoreMixinCollectionDemo.is, FirebaseFirestoreMixinCollectionDemo);
</script>
26 changes: 26 additions & 0 deletions demo/firebase-firestore-mixin-document-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<link rel="import" href="../firebase-firestore-mixin.html">

<dom-module id="firebase-firestore-mixin-document-demo">
<template>
<div>[[user.name]]</div>
</template>
</dom-module>

<script>
class FirebaseFirestoreMixinDocumentDemo extends Polymer.FirestoreMixin(Polymer.Element) {
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);
</script>
8 changes: 6 additions & 2 deletions demo/firestore.html → demo/firebase-firestore.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,17 @@
<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="firestore-mixin-demo.html">
<link rel="import" href="firebase-firestore-mixin-collection-demo.html">
<link rel="import" href="firebase-firestore-mixin-document-demo.html">
<firebase-app auth-domain="polymerfire-test.firebaseapp.com"
database-url="https://polymerfire-test.firebaseio.com/"
api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"
project-id="polymerfire-test"></firebase-app>
</head>
<body>
<user-list></user-list>
Collection:
<firebase-firestore-mixin-collection-demo></firebase-firestore-mixin-collection-demo>
Document:
<firebase-firestore-mixin-document-demo></firebase-firestore-mixin-document-demo>
</body>
</html>
34 changes: 19 additions & 15 deletions firebase-firestore-mixin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,34 @@
throw new Error('Polymer.FirestoreMixin must be imported after Polymer itself.');
}

(context => {
const MATCH_RE = /\{[a-z0-9_]+\}/gi;
{
const PROPERTY_BINDING_REGEXP = /{([^{]+)}/g;
const TRANSFORMS = {
doc: function(snap) { return iDoc(snap); },
collection: function(snap) { return snap.empty ? [] : snap.docs.map(doc => iDoc(doc)) }
}

function parsePath(path) {
let result;
let parts = path.split(MATCH_RE);
let props = (path.match(MATCH_RE) || []).map(m => m.substr(1, m.length - 2));
return {parts, props};
const isOdd = (x) => x & 1 === 1;

const parsePath = (path) => {
const parts = path.split(PROPERTY_BINDING_REGEXP);
let literals = [], props = [];
parts.forEach((part, index) => {
(isOdd(index) ? props : literals).push(part);
})
return {literals, props};
}

function stitch(parts, values) {
const stitch = (literals, values) => {
let whole = '';
for (var i = 0; i < parts.length; i++) {
whole += parts[i];
for (var i = 0; i < literals.length; i++) {
whole += literals[i];
whole += values[i] || '';
}
return whole;
}

function collect(what, which) {
const collect = (what, which) => {
let res = {};
while (what) {
res = Object.assign({}, what[which], res); // Respect prototype priority
Expand All @@ -36,7 +40,7 @@
return res;
};

function iDoc(snap) {
const iDoc = (snap) => {
if (snap.exists) {
return Object.assign({__id__: snap.id}, snap.data());
} else {
Expand Down Expand Up @@ -177,7 +181,7 @@
return;
}

const collPath = stitch(config.parts, propArgs);
const collPath = stitch(config.literals, propArgs);
const assigner = snap => {
this[name] = TRANSFORMS[type](snap);
this[name + 'Ready'] = true;
Expand Down Expand Up @@ -207,5 +211,5 @@
}
}
}
})(window);
</script>
}
</script>