Firebase modular bindings

,
1

Hi folks,

I’m new to ReScript and I want to use Firebase with ReScript and I started to learn how to create bindings:

So far I have:

module App = {
  type app

  type appConfig = {
    apiKey: string,
    authDomain: string,
    projectId: string,
    storageBucket: string,
    messagingSenderId: string,
    appId: string,
  }

  @module("firebase/app")
  external initializeApp: appConfig => app = "initializeApp"
}

module Firestore = {
  type firestore

  @module("firebase/firestore")
  external getFirestore: App.app => firestore = "getFirestore"

  type collectionReference<'documentdata, 'metadata>

  @module("firebase/firestore") @variadic
  external collection: (
    firestore,
    string,
    array<string>,
  ) => collectionReference<'documentdata, 'metadata> = "collection"

  type query<'documentdata, 'metadata>

  type querySnapshot<'documentdata, 'metadata>

  @module("firebase/firestore")
  external getDocs: query<'documentdata, 'metadata> => Js.Promise.t<
    querySnapshot<'documentdata, 'metadata>,
  > = "getDocs"

  external collectionReferenceToQuery: collectionReference<'documentdata, 'metadata> => query<
    'documentdata,
    'metadata,
  > = "%identity"

  type queryDocumentSnapshot<'documentdata, 'metadata>

  @get
  external docs: querySnapshot<'documentdata, 'metadata> => array<
    queryDocumentSnapshot<'documentdata, 'metadata>,
  > = "docs"

  @send
  external _data: (queryDocumentSnapshot<'documentdata, 'metadata>, unit) => 'documentdata = "data"

  let data = qds => _data(qds, ()) 
}

Usage:

open Firebase.Firestore

let firebaseConfig: Firebase.App.appConfig = {
  apiKey:....
}

type entry = {content: string}

@react.component
let make = () => {
  React.useEffect0(() => {
    let app = Firebase.App.initializeApp(firebaseConfig)
    let store = getFirestore(app)
    collection(store, "entries", [])
    ->collectionReferenceToQuery
    ->getDocs
    ->Promise.thenResolve(querySnapshot => {
      let snapshots = querySnapshot->docs
      Belt.Array.forEach(
        snapshots,
        snapshot => {
            let data = snapshot->data
          Js.Console.log(data.content)
        },
      )
    })
    ->Promise.done
    None
  })

  <h1> {React.string("Thunder")} </h1>
}

This works, but goodness, writing these bindings is a pain. Are there any existing bindings available? Or perhaps there’s a way to generate them automatically?

Any feedback on my work so far is also appreciated.

Cheers!

1 Like