diff --git a/dist/0.3.1/mavo-firebase-firestore.css b/dist/0.3.1/mavo-firebase-firestore.css new file mode 100644 index 0000000..0014e11 --- /dev/null +++ b/dist/0.3.1/mavo-firebase-firestore.css @@ -0,0 +1,4 @@ +.mv-bar.mv-ui button[class*="mv-firebase-auth"]::before { + content: "🔑 "; + filter: brightness(160%) grayscale(100%); +} diff --git a/dist/0.3.1/mavo-firebase-firestore.es5.js b/dist/0.3.1/mavo-firebase-firestore.es5.js new file mode 100644 index 0000000..6faca95 --- /dev/null +++ b/dist/0.3.1/mavo-firebase-firestore.es5.js @@ -0,0 +1,410 @@ +"use strict"; + +// @ts-check + +/** + * Firebase backend plugin for Mavo + * @author Dmitry Sharabin and contributors + * @version v0.3.1 + */ +(function ($) { + "use strict"; + + const PROVIDERS = { + "google": {}, + "facebook": {}, + "twitter": {}, + "github": {} + }; + Mavo.Plugins.register("firebase-firestore", { + dependencies: ["mavo-firebase-firestore.css"], + hooks: { + "init-start": function initStart(mavo) { + // Add buttons for auth providers to the Mavo bar + // Show them only if the Firebase backend is used and any auth provider is specified + Object.keys(PROVIDERS).forEach(p => { + const id = "firebase-auth-".concat(p); + Mavo.UI.Bar.controls[id] = { + create: function create(custom) { + return custom || $.create("button", { + type: "button", + className: "mv-".concat(id), + textContent: mavo._(id) + }); + }, + action: function action() { + mavo.primaryBackend.provider = p; + mavo.primaryBackend.login(false); + }, + permission: "login", + condition: function condition() { + return !!mavo.primaryBackend.projectId && mavo.primaryBackend.authProviders.includes(p); + } + }; + }); // Hide the Login button if either of auth providers is specified + + $.extend(Mavo.UI.Bar.controls.login, { + condition: function condition() { + return !!mavo.primaryBackend.projectId && !mavo.primaryBackend.authProviders.length; + } + }); + } + } + }); + + const _ = Mavo.Backend.register($.Class({ + extends: Mavo.Backend, + id: "Firebase", + constructor: function constructor(url, { + mavo, + format + }) { + // Initialization code + this.permissions.on("read"); + this.defaults = { + collection: "mavo-apps", + filename: mavo.id, + storageName: mavo.element.getAttribute("mv-firebase-storage") || mavo.id, + features: { + auth: false, + storage: false, + realtime: false + }, + authProviders: _.getAuthProviders(mavo.element.getAttribute("mv-firebase-auth") || "", PROVIDERS), + provider: undefined + }; + $.extend(this, this.defaults); // Which backend features should we support? + + const template = mavo.element.getAttribute("mv-firebase") || ""; + this.features = _.getOptions(template, this.features); // If either of the auth providers is specified, we must enable the auth feature + + if (this.authProviders.length) { + this.features.auth = true; + } + + if (this.features.auth) { + this.permissions.on("login"); // If none of the auth providers is specified, by default Google is used + + if (!this.authProviders.length) { + this.provider = "google"; + } + } else { + this.permissions.on("edit"); + } + + this.ready = // First of all, we need to download the Firebase core file + $.load("https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js").then(async () => { + // Then download the other parts if needed + await Promise.all([// Cloud Firestore + $.load("https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"), // Cloud Storage + $.include(!this.features.storage, "https://www.gstatic.com/firebasejs/7.8.2/firebase-storage.js"), // Authentication + $.include(!this.features.auth, "https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js")]); // Get the config info from the attribute value + + $.extend(this, _.parseSource(this.source, this.defaults)); // The app's Firebase configuration + + const config = { + apiKey: mavo.element.getAttribute("mv-firebase-key"), + databaseURL: "https://".concat(this.projectId, ".firebaseio.com"), + projectId: this.projectId, + authDomain: "".concat(this.projectId, ".firebaseapp.com"), + storageBucket: "".concat(this.projectId, ".appspot.com") + }; // Initialize Cloud Firestore through Firebase + // We want all mavo apps with the same projectId share the same instance of Firebase app + // If there is no previously created Firebase app with the specified projectId, create one + + if (!firebase.apps.length) { + this.app = firebase.initializeApp(config); + } else { + this.app = firebase.apps.find(app => app.options.projectId === this.projectId) || firebase.initializeApp(config, this.projectId); + } // To allow offline persistence, we MUST enable it foremost + // Offline persistence is supported only by Chrome, Safari, and Firefox web browsers + + + if (!this.app.firestore()._persistenceKey) { + // Enable offline persistence only once per Firebase app + this.app.firestore().enablePersistence({ + synchronizeTabs: true + }).catch(error => { + if (error.code === "unimplemented") { + // The current browser does not support all of the + // features required to enable persistence + Mavo.warn(this.mavo._("firebase-offline-unimplemented")); + this.mavo.error("Firebase Offline: ".concat(error.message)); + } + }); + } + + this.db = this.app.firestore().collection(this.collection); + + if (this.features.realtime) { + // Get realtime updates + this.unsubscribe = this.db.doc(this.filename).onSnapshot(doc => _.updatesHandler(doc, mavo), error => mavo.error("Firebase Realtime: ".concat(error.message))); + } else if (this.unsubscribe) { + // Stop listening to changes + this.unsubscribe(); + } + + if (this.features.storage) { + // Get a reference to the storage service, which is used to create references in the storage bucket, + // and create a storage reference from the storage service + this.storageBucketRef = this.app.storage().ref(); + } + + if (this.features.auth) { + // Set an authentication state observer and get user data + this.app.auth().onAuthStateChanged(user => { + if (user) { + // User is signed in + this.user = { + username: user.email, + name: user.displayName, + avatar: user.photoURL, + user // raw user object + + }; + $.fire(mavo.element, "mv-login", { + backend: this + }); + this.permissions.off("login").on(["edit", "save", "logout"]); + } else { + // User is signed out + this.user = null; + $.fire(mavo.element, "mv-logout", { + backend: this + }); + this.permissions.off(["edit", "add", "delete", "save", "logout"]).on("login"); + } + }); + } + + return Promise.resolve(); + }); + }, + update: function update(url, o) { + this.super.update.call(this, url, o); + $.extend(this, _.parseSource(this.source, this.defaults)); + + if (this.app) { + this.db = this.app.firestore().collection(this.collection); + + if (this.unsubscribe) { + // Stop listening to changes + this.unsubscribe(); // Get realtime updates for a new document + + this.unsubscribe = this.db.doc(this.filename).onSnapshot(doc => _.updatesHandler(doc, o.mavo), error => o.mavo.error("Firebase Realtime: ".concat(error.message))); + } + } + }, + get: function get(url) { + return this.db.doc(url).get(); + }, + load: function load() { + // Since we support offline persistence, we don't want end-users to think an app is hung when we are offline. + // So we hide the progress indicator after 300ms, and it seems that loading was performed (and it really was). + // I am not sure whether we would face this issue without making other parts of an app offline-ready, + // but in the sake of consistency and future use I add this code here + if (!navigator.onLine) { + setTimeout(() => this.mavo.inProgress = false, 300); + } + + return this.ready.then(() => this.get(this.filename).then(doc => Promise.resolve(doc.data() || {})).catch(error => { + Mavo.warn(this.mavo._("firebase-check-security-rules")); + this.mavo.error("Firebase Load Data: ".concat(error.message)); + })); + }, + + /** + * Low-level saving code + * @param {*} serialized Data serialized according to this.format + * @param {*} path Path to store data + * @param {*} o Arbitrary options + */ + put: function put(serialized, path = this.path, o = {}) { + if (!this.storageBucketRef) { + Mavo.warn(this.mavo._("firebase-enable-storage")); + return Promise.reject(Error("Firebase Storage: ".concat(this.mavo._("firebase-enable-storage")))); + } + + return this.storageBucketRef.child(path).put(serialized).then(snapshot => snapshot.ref.getDownloadURL()); + }, + + /** + * Upload code + * @param {*} file File object to be uploaded + * @param {*} path Relative path to store uploads (e.g. "images") + */ + upload: function upload(file, path) { + path = "".concat(this.storageName, "/").concat(path); + return this.put(file, path).then(downloadURL => downloadURL).catch(error => { + if (error.code) { + if (this.features.auth) { + Mavo.warn(this.mavo._("firebase-check-security-rules")); + } else { + Mavo.warn(this.mavo._("firebase-enable-auth")); + } + } + + this.mavo.error("".concat(error.message)); + }); + }, + store: function store(data, { + path, + format = this.format + } = {}) { + // Since we support offline persistence, we don't want end-users to think an app is hung when we are offline. + // So we hide the progress indicator after 300ms, and it seems that saving was performed (and it really was) + if (!navigator.onLine) { + setTimeout(() => this.mavo.inProgress = false, 300); + } + + return this.db.doc(this.filename).set(data).then(() => Promise.resolve()).catch(error => { + Mavo.warn(this.mavo._("firebase-enable-auth")); + Mavo.warn(this.mavo._("firebase-check-security-rules")); + this.mavo.error("Firebase Auth: ".concat(error.message)); + }); + }, + // Takes care of authentication. If passive is true, only checks if + // the user is already logged in, but does not present any login UI + login: function login(passive) { + return this.ready.then(() => { + return new Promise((resolve, reject) => { + if (passive) { + resolve(this.user); + } else { + // Apply the default browser preference + firebase.auth().useDeviceLanguage(); + this.app.auth().signInWithPopup(_.buildProvider(this.provider)).catch(error => { + this.mavo.error("Firebase Auth: ".concat(error.message)); + reject(error); + }); + } + }); + }); + }, + // Log current user out + logout: function logout() { + return this.app.auth().signOut().catch(error => { + this.mavo.error("Firebase Auth: ".concat(error.message)); + }); + }, + static: { + // Mandatory and very important! This determines when the backend is used + // value: The mv-storage/mv-source/mv-init value + test: function test(value) { + value = value.trim(); + return /^https:\/\/.*\.firebaseio\.com\/?/.test(value) // Backward compatibility + || /^firebase:\/\/.*/.test(value); + }, + // Parse the mv-storage/mv-source/mv-init value, return project id, collection name, filename + parseSource: function parseSource(source, defaults = {}) { + const ret = {}; + + if (/^https:\/\/.*\.firebaseio\.com\/?/.test(source)) { + const url = new URL(source); + ret.projectId = url.hostname.split(".").shift(); + source = url.pathname.slice(1); + } else { + source = source.replace("firebase://", ""); + } + + if (source.indexOf("/") > -1) { + const parts = source.split("/"); + ret.projectId = ret.projectId || parts.shift(); // If source without projectId has an odd number of parts, + // an app author specified only collection, so we should use the default filename. + // Otherwise, we have both: collection and filename + + ret.filename = parts.length % 2 ? defaults.filename : parts.pop(); + ret.collection = parts.join("/"); + } else { + ret.projectId = ret.projectId || source; + ret.collection = defaults.collection; + ret.filename = defaults.filename; + } + + return ret; + }, + + /** + * Parse the list of options + * @param {String} template The value to parse or an empty string + * @param {Object} defaults Default set of values + */ + getOptions: function getOptions(template, defaults) { + var _template; + + const ret = defaults; + const all = Object.keys(defaults); + + if (template = (_template = template) === null || _template === void 0 ? void 0 : _template.trim()) { + let ids = template.split(/\s+/); // Drop duplicates (last one wins) + + ids = Mavo.Functions.unique(ids.reverse()).reverse(); + all.forEach(id => ids.includes(id) ? ret[id] = true : ret[id] = false); + return ret; + } // No template, return default set + + + return ret; + }, + + /** + * A handler for realtime updates of a document + * @param {Object} snapshot A document snapshot + * @param {Object} mavo Mavo instance + */ + updatesHandler: function updatesHandler(snapshot, mavo) { + const source = snapshot.metadata.hasPendingWrites ? "Local" : "Server"; // TODO: There's the problem of what to do when local edits conflict with pulled data + + if (source === "Server") { + mavo.render(snapshot.data()); // Fix for issue #11 + } + }, + + /** + * Parse the list of auth providers + * @param {String} template The value to parse or an empty string + * @param {Object} defaults Default set of auth providers + */ + getAuthProviders: function getAuthProviders(template, defaults) { + var _template2; + + const all = Object.keys(defaults); + + if (template = (_template2 = template) === null || _template2 === void 0 ? void 0 : _template2.trim()) { + let ids = template.split(/\s+/); // Convert all auth providers names to lowercase and drop duplicates + + ids = Mavo.Functions.unique(ids.map(id => id.toLowerCase())); // Drop not supported auth providers + + ids = ids.filter(id => all.includes(id)); + return ids; + } // No auth providers provided + + + return []; + }, + + /** + * Build an instance of the specified provider object + * @param {String} provider An auth provider name + */ + buildProvider: function buildProvider(provider) { + // Fallback to Google + provider = provider || "google"; // Make provider name title-cased + + provider = provider.charAt(0).toUpperCase() + provider.slice(1); + return eval("new firebase.auth.".concat(provider, "AuthProvider()")); + } + } + })); + + Mavo.Locale.register("en", { + "firebase-enable-auth": "You might need to enable authorization in your app. To do so, add mv-firebase=\"auth\" to the Mavo root.", + "firebase-enable-storage": "It seems your app does not support uploads. To enable uploads, add mv-firebase=\"storage\" to the Mavo root.", + "firebase-check-security-rules": "Please check the security rules for your app. They might be inappropriately set. For details, see https://plugins.mavo.io/plugin/firebase-firestore#security-rules-examples.", + "firebase-offline-unimplemented": "The current browser does not support all of the features required to enable offline persistence. This feature is supported only by Chrome, Safari, and Firefox web browsers.", + "firebase-auth-google": "Google", + "firebase-auth-facebook": "Facebook", + "firebase-auth-twitter": "Twitter", + "firebase-auth-github": "GitHub" + }); +})(Bliss); \ No newline at end of file diff --git a/dist/0.3.1/mavo-firebase-firestore.es5.min.js b/dist/0.3.1/mavo-firebase-firestore.es5.min.js new file mode 100644 index 0000000..772817d --- /dev/null +++ b/dist/0.3.1/mavo-firebase-firestore.es5.min.js @@ -0,0 +1 @@ +"use strict";(function($){"use strict";const PROVIDERS={google:{},facebook:{},twitter:{},github:{}};Mavo.Plugins.register("firebase-firestore",{dependencies:["mavo-firebase-firestore.css"],hooks:{"init-start":function(a){Object.keys(PROVIDERS).forEach(b=>{const c="firebase-auth-".concat(b);Mavo.UI.Bar.controls[c]={create:function(b){return b||$.create("button",{type:"button",className:"mv-".concat(c),textContent:a._(c)})},action:function(){a.primaryBackend.provider=b,a.primaryBackend.login(!1)},permission:"login",condition:function(){return!!a.primaryBackend.projectId&&a.primaryBackend.authProviders.includes(b)}}}),$.extend(Mavo.UI.Bar.controls.login,{condition:function(){return!!a.primaryBackend.projectId&&!a.primaryBackend.authProviders.length}})}}});const _=Mavo.Backend.register($.Class({extends:Mavo.Backend,id:"Firebase",constructor:function(a,{mavo:b,format:c}){this.permissions.on("read"),this.defaults={collection:"mavo-apps",filename:b.id,storageName:b.element.getAttribute("mv-firebase-storage")||b.id,features:{auth:!1,storage:!1,realtime:!1},authProviders:_.getAuthProviders(b.element.getAttribute("mv-firebase-auth")||"",PROVIDERS),provider:void 0},$.extend(this,this.defaults);const d=b.element.getAttribute("mv-firebase")||"";this.features=_.getOptions(d,this.features),this.authProviders.length&&(this.features.auth=!0),this.features.auth?(this.permissions.on("login"),!this.authProviders.length&&(this.provider="google")):this.permissions.on("edit"),this.ready=$.load("https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js").then(async()=>{await Promise.all([$.load("https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"),$.include(!this.features.storage,"https://www.gstatic.com/firebasejs/7.8.2/firebase-storage.js"),$.include(!this.features.auth,"https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js")]),$.extend(this,_.parseSource(this.source,this.defaults));const a={apiKey:b.element.getAttribute("mv-firebase-key"),databaseURL:"https://".concat(this.projectId,".firebaseio.com"),projectId:this.projectId,authDomain:"".concat(this.projectId,".firebaseapp.com"),storageBucket:"".concat(this.projectId,".appspot.com")};return this.app=firebase.apps.length?firebase.apps.find(a=>a.options.projectId===this.projectId)||firebase.initializeApp(a,this.projectId):firebase.initializeApp(a),this.app.firestore()._persistenceKey||this.app.firestore().enablePersistence({synchronizeTabs:!0}).catch(a=>{"unimplemented"===a.code&&(Mavo.warn(this.mavo._("firebase-offline-unimplemented")),this.mavo.error("Firebase Offline: ".concat(a.message)))}),this.db=this.app.firestore().collection(this.collection),this.features.realtime?this.unsubscribe=this.db.doc(this.filename).onSnapshot(a=>_.updatesHandler(a,b),a=>b.error("Firebase Realtime: ".concat(a.message))):this.unsubscribe&&this.unsubscribe(),this.features.storage&&(this.storageBucketRef=this.app.storage().ref()),this.features.auth&&this.app.auth().onAuthStateChanged(a=>{a?(this.user={username:a.email,name:a.displayName,avatar:a.photoURL,user:a},$.fire(b.element,"mv-login",{backend:this}),this.permissions.off("login").on(["edit","save","logout"])):(this.user=null,$.fire(b.element,"mv-logout",{backend:this}),this.permissions.off(["edit","add","delete","save","logout"]).on("login"))}),Promise.resolve()})},update:function(a,b){this.super.update.call(this,a,b),$.extend(this,_.parseSource(this.source,this.defaults)),this.app&&(this.db=this.app.firestore().collection(this.collection),this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=this.db.doc(this.filename).onSnapshot(a=>_.updatesHandler(a,b.mavo),a=>b.mavo.error("Firebase Realtime: ".concat(a.message)))))},get:function(a){return this.db.doc(a).get()},load:function(){return navigator.onLine||setTimeout(()=>this.mavo.inProgress=!1,300),this.ready.then(()=>this.get(this.filename).then(a=>Promise.resolve(a.data()||{})).catch(a=>{Mavo.warn(this.mavo._("firebase-check-security-rules")),this.mavo.error("Firebase Load Data: ".concat(a.message))}))},put:function(a,b=this.path,c={}){return this.storageBucketRef?this.storageBucketRef.child(b).put(a).then(a=>a.ref.getDownloadURL()):(Mavo.warn(this.mavo._("firebase-enable-storage")),Promise.reject(Error("Firebase Storage: ".concat(this.mavo._("firebase-enable-storage")))))},upload:function(a,b){return b="".concat(this.storageName,"/").concat(b),this.put(a,b).then(a=>a).catch(a=>{a.code&&(this.features.auth?Mavo.warn(this.mavo._("firebase-check-security-rules")):Mavo.warn(this.mavo._("firebase-enable-auth"))),this.mavo.error("".concat(a.message))})},store:function(a,{path:b,format:c=this.format}={}){return navigator.onLine||setTimeout(()=>this.mavo.inProgress=!1,300),this.db.doc(this.filename).set(a).then(()=>Promise.resolve()).catch(a=>{Mavo.warn(this.mavo._("firebase-enable-auth")),Mavo.warn(this.mavo._("firebase-check-security-rules")),this.mavo.error("Firebase Auth: ".concat(a.message))})},login:function(a){return this.ready.then(()=>new Promise((b,c)=>{a?b(this.user):(firebase.auth().useDeviceLanguage(),this.app.auth().signInWithPopup(_.buildProvider(this.provider)).catch(a=>{this.mavo.error("Firebase Auth: ".concat(a.message)),c(a)}))}))},logout:function(){return this.app.auth().signOut().catch(a=>{this.mavo.error("Firebase Auth: ".concat(a.message))})},static:{test:function(a){return a=a.trim(),/^https:\/\/.*\.firebaseio\.com\/?/.test(a)||/^firebase:\/\/.*/.test(a)},parseSource:function(a,b={}){const c={};if(/^https:\/\/.*\.firebaseio\.com\/?/.test(a)){const b=new URL(a);c.projectId=b.hostname.split(".").shift(),a=b.pathname.slice(1)}else a=a.replace("firebase://","");if(-1b.includes(a)?d[a]=!0:d[a]=!1),d}return d},updatesHandler:function(a,b){const c=a.metadata.hasPendingWrites?"Local":"Server";"Server"==c&&b.render(a.data())},getAuthProviders:function(a,b){var c;const d=Object.keys(b);if(a=null===(c=a)||void 0===c?void 0:c.trim()){let b=a.split(/\s+/);return b=Mavo.Functions.unique(b.map(a=>a.toLowerCase())),b=b.filter(a=>d.includes(a)),b}return[]},buildProvider:function(provider){return provider=provider||"google",provider=provider.charAt(0).toUpperCase()+provider.slice(1),eval("new firebase.auth.".concat(provider,"AuthProvider()"))}}}));Mavo.Locale.register("en",{"firebase-enable-auth":"You might need to enable authorization in your app. To do so, add mv-firebase=\"auth\" to the Mavo root.","firebase-enable-storage":"It seems your app does not support uploads. To enable uploads, add mv-firebase=\"storage\" to the Mavo root.","firebase-check-security-rules":"Please check the security rules for your app. They might be inappropriately set. For details, see https://plugins.mavo.io/plugin/firebase-firestore#security-rules-examples.","firebase-offline-unimplemented":"The current browser does not support all of the features required to enable offline persistence. This feature is supported only by Chrome, Safari, and Firefox web browsers.","firebase-auth-google":"Google","firebase-auth-facebook":"Facebook","firebase-auth-twitter":"Twitter","firebase-auth-github":"GitHub"})})(Bliss); \ No newline at end of file diff --git a/dist/0.3.1/mavo-firebase-firestore.js b/dist/0.3.1/mavo-firebase-firestore.js new file mode 100644 index 0000000..0c50570 --- /dev/null +++ b/dist/0.3.1/mavo-firebase-firestore.js @@ -0,0 +1,502 @@ +// @ts-check + +/** + * Firebase backend plugin for Mavo + * @author Dmitry Sharabin and contributors + * @version v0.3.1 + */ +(function($) { + "use strict"; + + const PROVIDERS = { + "google": {}, + "facebook": {}, + "twitter": {}, + "github": {} + }; + + Mavo.Plugins.register("firebase-firestore", { + dependencies: [ + "mavo-firebase-firestore.css" + ], + + hooks: { + "init-start": function(mavo) { + // Add buttons for auth providers to the Mavo bar + // Show them only if the Firebase backend is used and any auth provider is specified + Object.keys(PROVIDERS).forEach(p => { + const id = `firebase-auth-${p}`; + + Mavo.UI.Bar.controls[id] = { + create: function(custom) { + return custom || $.create("button", { + type: "button", + className: `mv-${id}`, + textContent: mavo._(id), + }); + }, + action: function() { + mavo.primaryBackend.provider = p; + mavo.primaryBackend.login(false); + }, + permission: "login", + condition: function() { + return !!mavo.primaryBackend.projectId && mavo.primaryBackend.authProviders.includes(p); + } + }; + }); + + // Hide the Login button if either of auth providers is specified + $.extend(Mavo.UI.Bar.controls.login, { + condition: function() { + return !!mavo.primaryBackend.projectId && !mavo.primaryBackend.authProviders.length; + } + }); + } + } + }); + + const _ = Mavo.Backend.register( + $.Class({ + extends: Mavo.Backend, + + id: "Firebase", + + constructor: function(url, { mavo, format }) { + // Initialization code + this.permissions.on("read"); + + this.defaults = { + collection: "mavo-apps", + filename: mavo.id, + storageName: + mavo.element.getAttribute("mv-firebase-storage") || mavo.id, + features: { + auth: false, + storage: false, + realtime: false + }, + authProviders: _.getAuthProviders(mavo.element.getAttribute("mv-firebase-auth") || "", PROVIDERS), + provider: undefined + }; + + $.extend(this, this.defaults); + + // Which backend features should we support? + const template = mavo.element.getAttribute("mv-firebase") || ""; + + this.features = _.getOptions(template, this.features); + + // If either of the auth providers is specified, we must enable the auth feature + if (this.authProviders.length) { + this.features.auth = true; + } + + if (this.features.auth) { + this.permissions.on("login"); + + // If none of the auth providers is specified, by default Google is used + if (!this.authProviders.length) { + this.provider = "google"; + } + } + else { + this.permissions.on("edit"); + } + + this.ready = + // First of all, we need to download the Firebase core file + $.load( + "https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js" + ).then(async () => { + // Then download the other parts if needed + await Promise.all([ + // Cloud Firestore + $.load( + "https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js" + ), + + // Cloud Storage + $.include( + !this.features.storage, + "https://www.gstatic.com/firebasejs/7.8.2/firebase-storage.js" + ), + + // Authentication + $.include( + !this.features.auth, + "https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js" + ) + ]); + + // Get the config info from the attribute value + $.extend(this, _.parseSource(this.source, this.defaults)); + + // The app's Firebase configuration + const config = { + apiKey: mavo.element.getAttribute("mv-firebase-key"), + databaseURL: `https://${this.projectId}.firebaseio.com`, + projectId: this.projectId, + authDomain: `${this.projectId}.firebaseapp.com`, + storageBucket: `${this.projectId}.appspot.com` + }; + + // Initialize Cloud Firestore through Firebase + // We want all mavo apps with the same projectId share the same instance of Firebase app + // If there is no previously created Firebase app with the specified projectId, create one + if (!firebase.apps.length) { + this.app = firebase.initializeApp(config); + } + else { + this.app = firebase.apps.find(app => app.options.projectId === this.projectId) + || firebase.initializeApp(config, this.projectId); + } + + // To allow offline persistence, we MUST enable it foremost + // Offline persistence is supported only by Chrome, Safari, and Firefox web browsers + if (!this.app.firestore()._persistenceKey) { + // Enable offline persistence only once per Firebase app + this.app.firestore().enablePersistence({ synchronizeTabs: true }) + .catch(error => { + if (error.code === "unimplemented") { + // The current browser does not support all of the + // features required to enable persistence + Mavo.warn(this.mavo._("firebase-offline-unimplemented")); + + this.mavo.error(`Firebase Offline: ${error.message}`); + } + }); + } + + this.db = this.app.firestore().collection(this.collection); + + if (this.features.realtime) { + // Get realtime updates + this.unsubscribe = this.db.doc(this.filename).onSnapshot( + doc => _.updatesHandler(doc, mavo), + error => mavo.error(`Firebase Realtime: ${error.message}`) + ); + } + else if (this.unsubscribe) { + // Stop listening to changes + this.unsubscribe(); + } + + if (this.features.storage) { + // Get a reference to the storage service, which is used to create references in the storage bucket, + // and create a storage reference from the storage service + this.storageBucketRef = this.app.storage().ref(); + } + + if (this.features.auth) { + // Set an authentication state observer and get user data + this.app.auth().onAuthStateChanged(user => { + if (user) { + // User is signed in + this.user = { + username: user.email, + name: user.displayName, + avatar: user.photoURL, + user // raw user object + }; + + $.fire(mavo.element, "mv-login", { backend: this }); + + this.permissions.off("login").on(["edit", "save", "logout"]); + } + else { + // User is signed out + this.user = null; + + $.fire(mavo.element, "mv-logout", { backend: this }); + + this.permissions + .off(["edit", "add", "delete", "save", "logout"]) + .on("login"); + } + }); + } + + return Promise.resolve(); + }); + }, + + update: function(url, o) { + this.super.update.call(this, url, o); + + $.extend(this, _.parseSource(this.source, this.defaults)); + + if (this.app) { + this.db = this.app.firestore().collection(this.collection); + + if (this.unsubscribe) { + // Stop listening to changes + this.unsubscribe(); + + // Get realtime updates for a new document + this.unsubscribe = this.db.doc(this.filename).onSnapshot( + doc => _.updatesHandler(doc, o.mavo), + error => o.mavo.error(`Firebase Realtime: ${error.message}`) + ); + } + } + }, + + get: function(url) { + return this.db.doc(url).get(); + }, + + load: function() { + // Since we support offline persistence, we don't want end-users to think an app is hung when we are offline. + // So we hide the progress indicator after 300ms, and it seems that loading was performed (and it really was). + // I am not sure whether we would face this issue without making other parts of an app offline-ready, + // but in the sake of consistency and future use I add this code here + if (!navigator.onLine) { + setTimeout(() => this.mavo.inProgress = false, 300); + } + + return this.ready.then(() => + this.get(this.filename) + .then(doc => Promise.resolve(doc.data() || {})) + .catch(error => { + Mavo.warn(this.mavo._("firebase-check-security-rules")); + + this.mavo.error(`Firebase Load Data: ${error.message}`); + }) + ); + }, + + /** + * Low-level saving code + * @param {*} serialized Data serialized according to this.format + * @param {*} path Path to store data + * @param {*} o Arbitrary options + */ + put: function(serialized, path = this.path, o = {}) { + if (!this.storageBucketRef) { + Mavo.warn(this.mavo._("firebase-enable-storage")); + + return Promise.reject(Error(`Firebase Storage: ${this.mavo._("firebase-enable-storage")}`)); + } + + return this.storageBucketRef + .child(path) + .put(serialized) + .then(snapshot => snapshot.ref.getDownloadURL()); + }, + + /** + * Upload code + * @param {*} file File object to be uploaded + * @param {*} path Relative path to store uploads (e.g. "images") + */ + upload: function(file, path) { + path = `${this.storageName}/${path}`; + + return this.put(file, path) + .then(downloadURL => downloadURL) + .catch(error => { + if (error.code) { + if (this.features.auth) { + Mavo.warn(this.mavo._("firebase-check-security-rules")); + } + else { + Mavo.warn(this.mavo._("firebase-enable-auth")); + } + } + + this.mavo.error(`${error.message}`); + }); + }, + + store: function(data, { path, format = this.format } = {}) { + // Since we support offline persistence, we don't want end-users to think an app is hung when we are offline. + // So we hide the progress indicator after 300ms, and it seems that saving was performed (and it really was) + if (!navigator.onLine) { + setTimeout(() => this.mavo.inProgress = false, 300); + } + + return this.db + .doc(this.filename) + .set(data) + .then(() => Promise.resolve()) + .catch(error => { + Mavo.warn(this.mavo._("firebase-enable-auth")); + Mavo.warn(this.mavo._("firebase-check-security-rules")); + + this.mavo.error(`Firebase Auth: ${error.message}`); + }); + }, + + // Takes care of authentication. If passive is true, only checks if + // the user is already logged in, but does not present any login UI + login: function(passive) { + return this.ready.then(() => { + return new Promise((resolve, reject) => { + if (passive) { + resolve(this.user); + } + else { + // Apply the default browser preference + firebase.auth().useDeviceLanguage(); + + this.app + .auth() + .signInWithPopup(_.buildProvider(this.provider)) + .catch(error => { + this.mavo.error(`Firebase Auth: ${error.message}`); + reject(error); + }); + } + }); + }); + }, + + // Log current user out + logout: function() { + return this.app + .auth() + .signOut() + .catch(error => { + this.mavo.error(`Firebase Auth: ${error.message}`); + }); + }, + + static: { + // Mandatory and very important! This determines when the backend is used + // value: The mv-storage/mv-source/mv-init value + test: function(value) { + value = value.trim(); + + return /^https:\/\/.*\.firebaseio\.com\/?/.test(value) // Backward compatibility + || /^firebase:\/\/.*/.test(value); + }, + + // Parse the mv-storage/mv-source/mv-init value, return project id, collection name, filename + parseSource: function(source, defaults = {}) { + const ret = {}; + + if (/^https:\/\/.*\.firebaseio\.com\/?/.test(source)) { + const url = new URL(source); + + ret.projectId = url.hostname.split(".").shift(); + source = url.pathname.slice(1); + } + else { + source = source.replace("firebase://", ""); + } + + if (source.indexOf("/") > -1) { + const parts = source.split("/"); + + ret.projectId = ret.projectId || parts.shift(); + + // If source without projectId has an odd number of parts, + // an app author specified only collection, so we should use the default filename. + // Otherwise, we have both: collection and filename + ret.filename = parts.length % 2 ? defaults.filename : parts.pop(); + ret.collection = parts.join("/"); + } + else { + ret.projectId = ret.projectId || source; + ret.collection = defaults.collection; + ret.filename = defaults.filename; + } + + return ret; + }, + + /** + * Parse the list of options + * @param {String} template The value to parse or an empty string + * @param {Object} defaults Default set of values + */ + getOptions: function(template, defaults) { + const ret = defaults; + + const all = Object.keys(defaults); + + if (template = template?.trim()) { + let ids = template.split(/\s+/); + + // Drop duplicates (last one wins) + ids = Mavo.Functions.unique(ids.reverse()).reverse(); + + all.forEach(id => + ids.includes(id) ? (ret[id] = true) : (ret[id] = false) + ); + + return ret; + } + + // No template, return default set + return ret; + }, + + /** + * A handler for realtime updates of a document + * @param {Object} snapshot A document snapshot + * @param {Object} mavo Mavo instance + */ + updatesHandler: function(snapshot, mavo) { + const source = snapshot.metadata.hasPendingWrites + ? "Local" + : "Server"; + // TODO: There's the problem of what to do when local edits conflict with pulled data + if (source === "Server") { + mavo.render(snapshot.data()); // Fix for issue #11 + } + }, + + /** + * Parse the list of auth providers + * @param {String} template The value to parse or an empty string + * @param {Object} defaults Default set of auth providers + */ + getAuthProviders: function(template, defaults) { + const all = Object.keys(defaults); + + if (template = template?.trim()) { + let ids = template.split(/\s+/); + + // Convert all auth providers names to lowercase and drop duplicates + ids = Mavo.Functions.unique(ids.map(id => id.toLowerCase())); + + // Drop not supported auth providers + ids = ids.filter(id => all.includes(id)); + + return ids; + } + + // No auth providers provided + return []; + }, + + /** + * Build an instance of the specified provider object + * @param {String} provider An auth provider name + */ + buildProvider: function(provider) { + // Fallback to Google + provider = provider || "google"; + + // Make provider name title-cased + provider = provider.charAt(0).toUpperCase() + provider.slice(1); + + return eval(`new firebase.auth.${provider}AuthProvider()`); + } + } + }) + ); + + Mavo.Locale.register("en", { + "firebase-enable-auth": "You might need to enable authorization in your app. To do so, add mv-firebase=\"auth\" to the Mavo root.", + "firebase-enable-storage": "It seems your app does not support uploads. To enable uploads, add mv-firebase=\"storage\" to the Mavo root.", + "firebase-check-security-rules": "Please check the security rules for your app. They might be inappropriately set. For details, see https://plugins.mavo.io/plugin/firebase-firestore#security-rules-examples.", + "firebase-offline-unimplemented": "The current browser does not support all of the features required to enable offline persistence. This feature is supported only by Chrome, Safari, and Firefox web browsers.", + "firebase-auth-google": "Google", + "firebase-auth-facebook": "Facebook", + "firebase-auth-twitter": "Twitter", + "firebase-auth-github": "GitHub" + }); +})(Bliss); diff --git a/dist/0.3.1/mavo-firebase-firestore.min.js b/dist/0.3.1/mavo-firebase-firestore.min.js new file mode 100644 index 0000000..d5066d6 --- /dev/null +++ b/dist/0.3.1/mavo-firebase-firestore.min.js @@ -0,0 +1 @@ +(function($){"use strict";const PROVIDERS={google:{},facebook:{},twitter:{},github:{}};Mavo.Plugins.register("firebase-firestore",{dependencies:["mavo-firebase-firestore.css"],hooks:{"init-start":function(a){Object.keys(PROVIDERS).forEach(b=>{const c=`firebase-auth-${b}`;Mavo.UI.Bar.controls[c]={create:function(b){return b||$.create("button",{type:"button",className:`mv-${c}`,textContent:a._(c)})},action:function(){a.primaryBackend.provider=b,a.primaryBackend.login(!1)},permission:"login",condition:function(){return!!a.primaryBackend.projectId&&a.primaryBackend.authProviders.includes(b)}}}),$.extend(Mavo.UI.Bar.controls.login,{condition:function(){return!!a.primaryBackend.projectId&&!a.primaryBackend.authProviders.length}})}}});const _=Mavo.Backend.register($.Class({extends:Mavo.Backend,id:"Firebase",constructor:function(a,{mavo:b,format:c}){this.permissions.on("read"),this.defaults={collection:"mavo-apps",filename:b.id,storageName:b.element.getAttribute("mv-firebase-storage")||b.id,features:{auth:!1,storage:!1,realtime:!1},authProviders:_.getAuthProviders(b.element.getAttribute("mv-firebase-auth")||"",PROVIDERS),provider:void 0},$.extend(this,this.defaults);const d=b.element.getAttribute("mv-firebase")||"";this.features=_.getOptions(d,this.features),this.authProviders.length&&(this.features.auth=!0),this.features.auth?(this.permissions.on("login"),!this.authProviders.length&&(this.provider="google")):this.permissions.on("edit"),this.ready=$.load("https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js").then(async()=>{await Promise.all([$.load("https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"),$.include(!this.features.storage,"https://www.gstatic.com/firebasejs/7.8.2/firebase-storage.js"),$.include(!this.features.auth,"https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js")]),$.extend(this,_.parseSource(this.source,this.defaults));const a={apiKey:b.element.getAttribute("mv-firebase-key"),databaseURL:`https://${this.projectId}.firebaseio.com`,projectId:this.projectId,authDomain:`${this.projectId}.firebaseapp.com`,storageBucket:`${this.projectId}.appspot.com`};return this.app=firebase.apps.length?firebase.apps.find(a=>a.options.projectId===this.projectId)||firebase.initializeApp(a,this.projectId):firebase.initializeApp(a),this.app.firestore()._persistenceKey||this.app.firestore().enablePersistence({synchronizeTabs:!0}).catch(a=>{"unimplemented"===a.code&&(Mavo.warn(this.mavo._("firebase-offline-unimplemented")),this.mavo.error(`Firebase Offline: ${a.message}`))}),this.db=this.app.firestore().collection(this.collection),this.features.realtime?this.unsubscribe=this.db.doc(this.filename).onSnapshot(a=>_.updatesHandler(a,b),a=>b.error(`Firebase Realtime: ${a.message}`)):this.unsubscribe&&this.unsubscribe(),this.features.storage&&(this.storageBucketRef=this.app.storage().ref()),this.features.auth&&this.app.auth().onAuthStateChanged(a=>{a?(this.user={username:a.email,name:a.displayName,avatar:a.photoURL,user:a},$.fire(b.element,"mv-login",{backend:this}),this.permissions.off("login").on(["edit","save","logout"])):(this.user=null,$.fire(b.element,"mv-logout",{backend:this}),this.permissions.off(["edit","add","delete","save","logout"]).on("login"))}),Promise.resolve()})},update:function(a,b){this.super.update.call(this,a,b),$.extend(this,_.parseSource(this.source,this.defaults)),this.app&&(this.db=this.app.firestore().collection(this.collection),this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=this.db.doc(this.filename).onSnapshot(a=>_.updatesHandler(a,b.mavo),a=>b.mavo.error(`Firebase Realtime: ${a.message}`))))},get:function(a){return this.db.doc(a).get()},load:function(){return navigator.onLine||setTimeout(()=>this.mavo.inProgress=!1,300),this.ready.then(()=>this.get(this.filename).then(a=>Promise.resolve(a.data()||{})).catch(a=>{Mavo.warn(this.mavo._("firebase-check-security-rules")),this.mavo.error(`Firebase Load Data: ${a.message}`)}))},put:function(a,b=this.path,c={}){return this.storageBucketRef?this.storageBucketRef.child(b).put(a).then(a=>a.ref.getDownloadURL()):(Mavo.warn(this.mavo._("firebase-enable-storage")),Promise.reject(Error(`Firebase Storage: ${this.mavo._("firebase-enable-storage")}`)))},upload:function(a,b){return b=`${this.storageName}/${b}`,this.put(a,b).then(a=>a).catch(a=>{a.code&&(this.features.auth?Mavo.warn(this.mavo._("firebase-check-security-rules")):Mavo.warn(this.mavo._("firebase-enable-auth"))),this.mavo.error(`${a.message}`)})},store:function(a,{path:b,format:c=this.format}={}){return navigator.onLine||setTimeout(()=>this.mavo.inProgress=!1,300),this.db.doc(this.filename).set(a).then(()=>Promise.resolve()).catch(a=>{Mavo.warn(this.mavo._("firebase-enable-auth")),Mavo.warn(this.mavo._("firebase-check-security-rules")),this.mavo.error(`Firebase Auth: ${a.message}`)})},login:function(a){return this.ready.then(()=>new Promise((b,c)=>{a?b(this.user):(firebase.auth().useDeviceLanguage(),this.app.auth().signInWithPopup(_.buildProvider(this.provider)).catch(a=>{this.mavo.error(`Firebase Auth: ${a.message}`),c(a)}))}))},logout:function(){return this.app.auth().signOut().catch(a=>{this.mavo.error(`Firebase Auth: ${a.message}`)})},static:{test:function(a){return a=a.trim(),/^https:\/\/.*\.firebaseio\.com\/?/.test(a)||/^firebase:\/\/.*/.test(a)},parseSource:function(a,b={}){const c={};if(/^https:\/\/.*\.firebaseio\.com\/?/.test(a)){const b=new URL(a);c.projectId=b.hostname.split(".").shift(),a=b.pathname.slice(1)}else a=a.replace("firebase://","");if(-1b.includes(a)?c[a]=!0:c[a]=!1),c}return c},updatesHandler:function(a,b){const c=a.metadata.hasPendingWrites?"Local":"Server";"Server"==c&&b.render(a.data())},getAuthProviders:function(a,b){const c=Object.keys(b);if(a=a?.trim()){let b=a.split(/\s+/);return b=Mavo.Functions.unique(b.map(a=>a.toLowerCase())),b=b.filter(a=>c.includes(a)),b}return[]},buildProvider:function(provider){return provider=provider||"google",provider=provider.charAt(0).toUpperCase()+provider.slice(1),eval(`new firebase.auth.${provider}AuthProvider()`)}}}));Mavo.Locale.register("en",{"firebase-enable-auth":"You might need to enable authorization in your app. To do so, add mv-firebase=\"auth\" to the Mavo root.","firebase-enable-storage":"It seems your app does not support uploads. To enable uploads, add mv-firebase=\"storage\" to the Mavo root.","firebase-check-security-rules":"Please check the security rules for your app. They might be inappropriately set. For details, see https://plugins.mavo.io/plugin/firebase-firestore#security-rules-examples.","firebase-offline-unimplemented":"The current browser does not support all of the features required to enable offline persistence. This feature is supported only by Chrome, Safari, and Firefox web browsers.","firebase-auth-google":"Google","firebase-auth-facebook":"Facebook","firebase-auth-twitter":"Twitter","firebase-auth-github":"GitHub"})})(Bliss); \ No newline at end of file diff --git a/mavo-firebase-firestore.js b/mavo-firebase-firestore.js index 5fc46b7..0c50570 100644 --- a/mavo-firebase-firestore.js +++ b/mavo-firebase-firestore.js @@ -3,7 +3,7 @@ /** * Firebase backend plugin for Mavo * @author Dmitry Sharabin and contributors - * @version v0.3.0 + * @version v0.3.1 */ (function($) { "use strict"; @@ -33,14 +33,12 @@ type: "button", className: `mv-${id}`, textContent: mavo._(id), - events: { - click: () => { - mavo.primaryBackend.provider = p; - mavo.primaryBackend.login(false); - } - } }); }, + action: function() { + mavo.primaryBackend.provider = p; + mavo.primaryBackend.login(false); + }, permission: "login", condition: function() { return !!mavo.primaryBackend.projectId && mavo.primaryBackend.authProviders.includes(p); @@ -103,7 +101,7 @@ } } else { - this.permissions.on(["edit", "save"]); + this.permissions.on("edit"); } this.ready = @@ -221,10 +219,6 @@ return Promise.resolve(); }); - - if (this.features.auth) { - this.login(true); - } }, update: function(url, o) { @@ -483,7 +477,11 @@ * @param {String} provider An auth provider name */ buildProvider: function(provider) { - provider = provider.charAt(0).toUpperCase() + provider.slice(1).toLowerCase(); + // Fallback to Google + provider = provider || "google"; + + // Make provider name title-cased + provider = provider.charAt(0).toUpperCase() + provider.slice(1); return eval(`new firebase.auth.${provider}AuthProvider()`); } diff --git a/package.json b/package.json index c371aa9..e4b3d05 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mavo-firebase-firestore", - "version": "0.3.0", + "version": "0.3.1", "description": "Firebase backend plugin for Mavo. Store and sync app data in milliseconds. Store and serve files at Google scale. Authenticate users simply and securely. All the Google Firebase powers are at your fingertips.", "repository": "https://github.com/DmitrySharabin/mavo-firebase-firestore.git", "bugs": {