Firebase-js-sdk v9 modular support

[FabianSellmann]

Is there any plan to support firebase-js-sdk v9's modular system?

The current service approach used in the flamelink sdk wouldn't be working with the new modular approach.

Would be great if flamelink could be used on top of the modular firebase sdk instance, as it helps immensely to prevent unused code being bundled.

[gitdubz]

Hi @FabianSellmann

We will need to dig into this a little and see if we can support it, it might hover not be possible, since the imports will be dependent in the users queries (example, if a user uses a filter (where query) we would need to dynamically import that, which might be tricky and possibly slow down initial queries - have not investigated this yet) alternatively it would be up to the user to include all the functions they would be using during initialization.

I do not see us supporting this in the very short term but will we will definitely have a look at how we could potentially do this.

[FabianSellmann]

Yeah I guess the api would be needed to change radically to support this. Users would need to import any part of the query operation they want to have executed, to allow bundlers to only include the necessary dependencies at build time.

[stepanic]

@gitdubz do you have any updates (six months later) related to supporting Firebase v9, our Angular application is now frozen to the Angular 12.x, Firebase 8.x and @angular/fire 6.x

We want to upgrade Angular to v13, Firebase to v9 and @angular/fire to v7.2, but because we depend on flamelink and ng-flamelink this is not possible right now?

In how many months flamelink will depend on Firebase v9?

[gitdubz]

Hi @stepani,

The Flamelink SDK should work when using compat mode for v9
https://firebase.google.com/docs/web/modular-upgrade#update_imports_to_v9_compat

If any changes would be required on ng-flamelink, you can perhaps request it on the repo (this is a community managed package)

As for modular support, like I mentioned above this would probably require a v2 of the SDK since the logic to handle the different versions would not really make sense

as an example

a simple query

firebaseApp.firestore().collection('fl_content').where(....).get()

for v9 support we would need to allow users to initialize the flamelink sdk in the following manner
(this would require the user to import and pass in each modular package the SDK uses internally)

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

const app = flamelink({
  fbModules: { 
    firebaseApp,
    getFirestore, 
    collection, 
    query, 
    where, 
    getDocs
  },
  env: 'production',
  locale: 'en-US',
  dbType: 'cf'
})

in order to do the same query which would then look like this

// firebaseApp.firestore().collection('fl_content').where(....).get() would look like this

const db = getFirestore(firebaseApp);
const  q = query(collection(db, "fl_content"), where(...);
const querySnapshot = await getDocs(q);

Internally we would need to have logic to determine which format to use

I hope this makes sense?

[gitdubz]

In order to use v9 you can import the packages as follow with "compat" mode

// Firebase app is always required and must be first
import firebase from 'firebase/compat/app'
// Add additional services that you want to use
import 'firebase/compat/auth'
import 'firebase/compat/database'
import 'firebase/compat/storage'
// import 'firebase/compat/firestore'
// import 'firebase/compat/messaging'
// import 'firebase/compat/functions'

// Flamelink app is always required
import flamelink from 'flamelink/app'
// Add additional modules that you want to use
import 'flamelink/content'
import 'flamelink/storage'
// import 'flamelink/settings'
// import 'flamelink/navigation'
// import 'flamelink/users'

const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: ''
}

const firebaseApp = firebase.initializeApp(firebaseConfig)

const app = flamelink({
firebaseApp,
env: 'production', // optional, defaults to production
locale: 'en-US', // optional, defaults to en-US
dbType: 'rtdb' // optional, defaults to rtdb - can be 'rtdb' or 'cf' (Realtime DB vs Cloud Firestore)
})